Cell Types Dashboard
Progress bars, star ratings, sparkline charts, checkboxes, and hyperlinks — all rendered inside spreadsheet cells.
How it works
This demo renders a multi-column employee performance dashboard where each column uses a different built-in cell type. All cell types are set via a single API call — the grid handles rendering automatically using a Canvas-based engine.
- Progress bars (achievement % and P&L %) are rendered as inline bar charts — bidirectional bars turn red for negative values
- Star ratings display a 0–5 score as filled/empty stars and are click-interactive
- Sparkline charts (line and area) each hold an array of numbers that render as a mini graph inside the cell
- Checkboxes toggle boolean state; hyperlink cells render as clickable anchors
- Scroll the grid or resize the window — all cell types re-render at 60fps via Canvas
Key APIs used
ws.setCellType(row, col, options) Assign a visual cell type (progress, rating, sparkline-line, sparkline-area, checkbox, hyperlink) with its configuration options
ws.setGridSize(rows, cols) Set the total number of rows and columns in the worksheet
ws.cell(row, col).setValue(value) Set the raw value for a cell; for sparklines this is an array of numbers
ws.cell(row, col).setStyle(style) Apply font, color, background, and alignment styles to a single cell
ws.suspendRender() / ws.resumeRender() Batch multiple updates into a single render pass for better performance
Source Code
Related Documentation
Related Demos
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.
Freeze Panes
Toggle frozen rows and columns interactively. Scroll a 50-row dataset while headers stay fixed.