Budget Tracker
Quarterly income and expense tracker with category sections, color-coded totals, and profit summary.
How it works
This demo builds a quarterly income and expense tracker. Income and cost categories are grouped into sections, with color-coded totals and a profit summary row at the bottom.
- Income rows (sales, services, other) and expense rows (payroll, rent, marketing, etc.) are separated by section headers
- Each section has a subtotal row using =SUM formulas over the rows above it
- The profit row is =Income Total − Expense Total, displayed with a green background when positive
- Quarter columns (Q1–Q4) and a yearly total column use the same SUM pattern
- Cell backgrounds use a traffic-light convention: green for profit/positive, red for loss/negative, yellow for zero
Key APIs used
ws.setCellInput(row, col, value) Set SUM formulas in subtotal rows and grand-total cells for automatic recalculation
ws.cell(row, col).setStyle(style) Apply section header styles and color-code profit/loss rows with green/red backgrounds
ws.setCellNumberFormat(row, col, format) Format currency cells with ¥#,##0 or $#,##0 for thousands-separated display
ws.range(ref).merge() Merge section title cells across the quarter columns for a clean grouped layout
Related Documentation
Related Demos
Invoice (Formula)
Invoice with editable quantities and unit prices — totals auto-calculate with formulas. Available on StackBlitz as React, Vue, and Vanilla.
Interactive Quotation
Edit quantities and unit prices — totals auto-calculate with SUM formulas. Real spreadsheet formulas running in the browser.
Attendance Sheet
Monthly attendance tracking with weekend/holiday coloring and summary columns.