Cell Styles
Font styles, colors, backgrounds, text alignment, and border options — a showcase of the Cell Style API.
How it works
This demo is a comprehensive reference for ReoGrid's cell styling API. Each row demonstrates a different combination of font, color, background, alignment, and border options.
- Font styles: bold, italic, underline, strikethrough, font family and size
- Colors: text color, background color, both as hex strings or named colors
- Alignment: horizontal (left, center, right) and vertical (top, middle, bottom) independently
- Borders: top, right, bottom, left, all — each with thickness and color options
- Styles can be applied to individual cells, ranges, rows, or columns
Key APIs used
ws.cell(row, col).setStyle(style) Apply a style object with font, color, background, alignment, and border properties to a single cell
ws.range(ref).setStyle(style) Apply a style to all cells in a range (e.g. 'A1:D5')
ws.row(index).setStyle(style) Apply a style to every cell in an entire row
ws.range(ref).border(options) Set border style (pos, width, color) on a cell range
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.
Freeze Panes
Toggle frozen rows and columns interactively. Scroll a 50-row dataset while headers stay fixed.