Conditional Formatting
Value-based cell styling with traffic-light stock levels, expression rules comparing sales vs targets, and text-match status coloring — all updating live as you edit.
How it works
This demo applies multiple conditional format rules to a product inventory table. Rules are evaluated live — edit any cell and all affected cells update their background color in real time.
- Stock levels use a traffic-light rule set: green (≥ 100), yellow (25–99), red (< 25) — three rules on the same range
- Sales vs Target comparison uses an expression rule: cells where Sales > Target turn green; when Sales < Target × 0.8, they turn red
- Revenue uses a gradient scale: higher values appear darker
- Status text matching: 'Delivered' → green background, 'Pending' → yellow, 'Cancelled' → red — matched by exact text
- Rules are evaluated in priority order; the first matching rule wins
Key APIs used
ws.range(ref).addConditionalFormat(rule) Add a conditional format rule to a range — rule specifies condition type, comparison value, and the style to apply when matched
ws.cell(row, col).setValue(value) Update a cell value to trigger real-time rule re-evaluation across all conditional format ranges
ws.setGridSize(rows, cols) Pre-allocate the grid dimensions before writing data rows
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.