Outline (Grouping)
3-level row outline (Region → Country → Branch) × 1-level column outline (quarters). All subtotals are live SUM formulas — edit any cell and watch four levels of totals update.
How it works
This demo builds a 3-level row outline (Region → Country → Branch) and a 1-level column outline (quarterly grouping) from scratch. Every subtotal is a real spreadsheet formula — edit any leaf cell and watch the totals cascade upward through all four levels.
- Row grouping: ws.groupRows(start, end) auto-assigns nesting levels by containment — no level number needed
- Column grouping: ws.groupColumns(start, end) groups the three monthly columns under each quarterly total column
- Collapse/expand buttons appear at the left margin (rows) and top margin (columns) — click ▼ to collapse a group
- All subtotal, quarter-total, and grand-total cells are set with = formulas (SUM ranges) — they recalculate automatically when any input cell changes
- Level indicators (1 / 2 / 3) at the top-left let you collapse all groups at a given depth simultaneously
Key APIs used
ws.groupRows(start, end) Group a range of rows under a collapsible outline level — nesting depth is inferred automatically from row ranges
ws.groupColumns(start, end) Group a range of columns under a collapsible outline level
ws.setCellInput(row, col, value) Set a formula (starting with =) or raw value — formulas in subtotal rows create the cascading totals
ws.suspendRender() / ws.resumeRender() Batch all row/column group registrations and data writes into a single render pass
Source Code
Related Documentation
Related Demos
Cell Types Dashboard
Progress bars, star ratings, sparkline charts, checkboxes, and hyperlinks — all rendered inside spreadsheet cells.
Data Filter & Sort
Click column header dropdowns to filter and sort rows. Switch between 300, 1K, and 10K rows to test performance.
Cell Styles
Font styles, colors, backgrounds, text alignment, and border options — a showcase of the Cell Style API.