HF-122: Replace Employee Table demos with Invoice Calculator#28
Closed
marcin-kordas-hoc wants to merge 3 commits into3.2.xfrom
Closed
HF-122: Replace Employee Table demos with Invoice Calculator#28marcin-kordas-hoc wants to merge 3 commits into3.2.xfrom
marcin-kordas-hoc wants to merge 3 commits into3.2.xfrom
Conversation
The previous demos (Employee Table with named expressions, helper files, and 5 employee rows) were too complex to serve as a learning reference for developers onboarding to HyperFormula in each framework. They mixed substantial business logic and HyperFormula features the reader doesn't yet need, forcing them to sift through unrelated code to find the integration pattern. The new Invoice Calculator demo is a small, self-contained interactive app with three editable items and live subtotal/tax/total calculations. It exercises the full edit → recalculate → display loop while focusing each framework implementation on its idiomatic integration pattern: - React: useRef for the HyperFormula instance, useEffect for lifecycle - Angular: @Injectable service with OnDestroy and ngModel two-way binding - Vue 3: markRaw around HyperFormula, ref for derived data - Svelte: reactive let with direct reassignment on update Replaces the docs' Stackblitz examples referenced from the Integration with React/Angular/Vue/Svelte guides.
- Vue and Svelte demos now guard against NaN values before calling setCellContents, matching the existing behavior in React and Angular. Without this, a partial input like "-" or "." would propagate NaN through the formula results. - Vue uses onUnmounted and Svelte uses onDestroy to call hf.destroy() on component teardown, consistent with React's useEffect cleanup and Angular's OnDestroy. - Angular's ngModelChange handlers now accept number | null (the actual type emitted by ngModel on an input[type=number]) instead of string, so the type signatures match runtime behavior.
- Vue now imports milligram in main.ts so its base table and input styles match the other demos (React imports it in index.tsx, Angular loads it via angular.json, Svelte via app.html). - Trimmed duplicate scoped styles from Vue and Svelte: rules that milligram already provides (border-collapse, th/td padding, th background, input borders) are removed; only the invoice-specific layout and summary row styling remains. - Added a SHEET_ID = 0 constant to React, Vue, and Svelte to match Angular. This makes it explicit which sheet each call operates on.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replace all four framework demos (React, Angular, Vue, Svelte) from Employee Table to Invoice Calculator — a simpler, more focused demo using only buildFromArray, getSheetValues, and setCellContents.
Commits
Related
Test plan