| {{ cell }} | +
| {String(cell ?? '')} | + ))} +
Result: {result}
+{/if} + +| + {#if hf.doesCellHaveFormula({ sheet: sheetId, row: r, col: c })} + {hf.getCellFormula({ sheet: sheetId, row: r, col: c })} + {:else} + {hf.getCellValue({ sheet: sheetId, row: r, col: c })} + {/if} + | + {/each} +
Result: {result}
+{/if} +``` + + +## Next steps + +- [Configuration options](configuration-options.md) — full list of `buildFromArray` / `buildEmpty` options +- [Basic operations](basic-operations.md) — CRUD on cells, rows, columns, sheets +- [Advanced usage](advanced-usage.md) — multi-sheet workbooks, named expressions +- [Custom functions](custom-functions.md) — register your own formulas ## Demo - +For a more advanced example, check out the Svelte demo on Stackblitz. diff --git a/docs/guide/integration-with-vue.md b/docs/guide/integration-with-vue.md index 5307780c6d..087a84f61e 100644 --- a/docs/guide/integration-with-vue.md +++ b/docs/guide/integration-with-vue.md @@ -1,8 +1,83 @@ # Integration with Vue -Installing HyperFormula in a Vue application works the same as with vanilla JavaScript. +The HyperFormula API is identical in a Vue 3 app and in plain JavaScript. This guide demonstrates how HyperFormula integrates with the Vue reactivity system and how to surface its values in the template. -For more details, see the [client-side installation](client-side-installation.md) section. +Install with `npm install hyperformula`. For other options, see the [client-side installation](client-side-installation.md) section. + +## Basic usage + +Wrap the HyperFormula instance inside a plain class so it stays outside Vue's reactivity system (see [Troubleshooting](#vue-reactivity-issues) below for why this matters). Hold derived data in `ref` so the template updates when you reassign the ref's `.value`. + +```typescript +// spreadsheet-provider.ts +import { HyperFormula, type CellValue } from 'hyperformula'; + +export class SpreadsheetProvider { + private hf: HyperFormula; + + constructor(data: (string | number | null)[][]) { + this.hf = HyperFormula.buildFromArray(data, { + licenseKey: 'gpl-v3', + // more configuration options go here + }); + } + + getCalculatedValues(): CellValue[][] { + return this.hf.getSheetValues(0); + } + + getRawFormulas(): (string | number | null)[][] { + return this.hf.getSheetSerialized(0) as (string | number | null)[][]; + } + + destroy() { + this.hf.destroy(); + } +} +``` + +Use the class from a component with ` + + + + +| {{ cell }} | +