Merge & Layout
Cell merging for titles, grouped headers, side labels, and complex multi-level table layouts.
How it works
This demo shows how to compose complex table layouts using cell merging — the same technique used in Excel for invoices, reports, and form designs.
- Title cells span multiple columns using range merges, creating a full-width heading
- Grouped column headers use two-row structures: a merged top label spans sub-columns below it
- Side labels in the leftmost column are merged vertically to label groups of rows
- Corner cells, dividers, and padding rows are created with blank merged ranges
- All merges are specified as A1-style range strings (e.g. 'A1:E1') or row/col indices
Key APIs used
ws.range(ref).merge() Merge all cells within a range (e.g. 'A1:E1') into a single logical cell
ws.cell(row, col).setValue(value) Set the display value of a merged cell (value is anchored to the top-left cell)
ws.row(index).setHeight(px) Set the pixel height of a row for spacing and padding rows
ws.column(index).setWidth(px) Set the pixel width of a column
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.