Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"framework":"angular","displayName":"Accessories And Menus ▸ Sheets bar · Use formulas across sheets · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\",\n \"hyperformula\": \"3.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":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>Handsontable Angular Example</title>\n <base href=\"/\">\n <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n <div>\n <app-example2></app-example2>\n </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { HyperFormula } from 'hyperformula';\n\n// One engine, shared by every sheet of the workbook.\nconst engine = HyperFormula.buildEmpty({\n licenseKey: 'internal-use-in-handsontable',\n});\n\nconst ratesData = [\n ['VAT rate', 0.23],\n ['Service fee', 0.05],\n];\n\n@Component({\n selector: 'app-example2',\n standalone: true,\n imports: [HotTableModule],\n template: `\n <hot-table\n [settings]=\"hotSettings\">\n </hot-table>\n `,\n})\nexport class AppComponent {\n\n readonly hotSettings: GridSettings = {\n sheetsBar: {\n sheets: [\n {\n name: 'Budget',\n data: [\n ['Laptops', 4200, '=B1*Rates!B1', '=B1*Rates!B2', '=B1+C1+D1'],\n ['Desks', 1200, '=B2*Rates!B1', '=B2*Rates!B2', '=B2+C2+D2'],\n ['Monitors', 2600, '=B3*Rates!B1', '=B3*Rates!B2', '=B3+C3+D3'],\n ['Chairs', 950, '=B4*Rates!B1', '=B4*Rates!B2', '=B4+C4+D4'],\n ['Docking stations', 780, '=B5*Rates!B1', '=B5*Rates!B2', '=B5+C5+D5'],\n ['Total', '=SUM(B1:B5)', '=SUM(C1:C5)', '=SUM(D1:D5)', '=SUM(E1:E5)'],\n ],\n settings: {\n colHeaders: ['Item • A', 'Net • B', 'VAT • C', 'Fee • D', 'Gross • E'],\n formulas: { engine, sheetName: 'Budget' },\n },\n },\n {\n name: 'Rates',\n data: ratesData,\n settings: {\n colHeaders: ['Rate • A', 'Value • B'],\n formulas: { engine, sheetName: 'Rates' },\n },\n },\n ],\n activeSheet: 0,\n },\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n height: 240,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/sheets-bar/angular/example2.ts","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example2","exampleTitle":"Use formulas across sheets","docPermalink":"/sheets-bar","lang":"Angular"}
{"framework":"angular","displayName":"Accessories And Menus ▸ Sheets bar · Use formulas across sheets · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\",\n \"hyperformula\": \"3.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":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>Handsontable Angular Example</title>\n <base href=\"/\">\n <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n <div>\n <app-example2></app-example2>\n </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\nimport { HyperFormula } from 'hyperformula';\n\n// One engine, shared by every sheet of the workbook.\nconst engine = HyperFormula.buildEmpty({\n // this demo uses the GPLv3 key,\n // use your own HyperFormula license key in your app\n licenseKey: 'gpl-v3',\n});\n\nconst ratesData = [\n ['VAT rate', 0.23],\n ['Service fee', 0.05],\n];\n\n@Component({\n selector: 'app-example2',\n standalone: true,\n imports: [HotTableModule],\n template: `\n <hot-table\n [settings]=\"hotSettings\">\n </hot-table>\n `,\n})\nexport class AppComponent {\n\n readonly hotSettings: GridSettings = {\n sheetsBar: {\n sheets: [\n {\n name: 'Budget',\n data: [\n ['Laptops', 4200, '=B1*Rates!B1', '=B1*Rates!B2', '=B1+C1+D1'],\n ['Desks', 1200, '=B2*Rates!B1', '=B2*Rates!B2', '=B2+C2+D2'],\n ['Monitors', 2600, '=B3*Rates!B1', '=B3*Rates!B2', '=B3+C3+D3'],\n ['Chairs', 950, '=B4*Rates!B1', '=B4*Rates!B2', '=B4+C4+D4'],\n ['Docking stations', 780, '=B5*Rates!B1', '=B5*Rates!B2', '=B5+C5+D5'],\n ['Total', '=SUM(B1:B5)', '=SUM(C1:C5)', '=SUM(D1:D5)', '=SUM(E1:E5)'],\n ],\n settings: {\n colHeaders: ['Item • A', 'Net • B', 'VAT • C', 'Fee • D', 'Gross • E'],\n formulas: { engine, sheetName: 'Budget' },\n },\n },\n {\n name: 'Rates',\n data: ratesData,\n settings: {\n colHeaders: ['Rate • A', 'Value • B'],\n formulas: { engine, sheetName: 'Rates' },\n },\n },\n ],\n activeSheet: 0,\n },\n rowHeaders: true,\n colHeaders: true,\n stretchH: 'all',\n height: 240,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n 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/sheets-bar/angular/example2.ts","breadcrumb":["Accessories And Menus","Sheets bar"],"guide":"guides/accessories-and-menus/sheets-bar/sheets-bar.md","guideTitle":"Sheets bar","exampleId":"example2","exampleTitle":"Use formulas across sheets","docPermalink":"/sheets-bar","lang":"Angular"}
Loading