BLOCKS / CORE
Data Table block
A fully data-driven table with zebra striping, click-to-sort columns, density presets, and per-column alignment.
Zebra-striped rows
Setting zebraEnabled to true alternates the background of every other row, making wide tables easier to scan without adding any extra markup.
| NAME | ROLE | DEPARTMENT | STATUS |
|---|---|---|---|
| Sarah Mitchell | Lead Designer | Design | Active |
| James Cooper | Senior Engineer | Engineering | Active |
| Emily Zhang | Product Manager | Product | On Leave |
| Michael Torres | DevOps Engineer | Engineering | Active |
| Anna Kowalski | Marketing Lead | Marketing | Active |
Sortable columns
With sortableEnabled on, every header becomes clickable and shows a sort indicator. Sorting itself runs entirely client-side, no page reload needed.
| PRODUCT | SKU | PRICE | STOCK |
|---|---|---|---|
| Wireless Keyboard | WK-1042 | $89.00 | 234 |
| USB-C Hub | UC-3387 | $49.00 | 512 |
| Monitor Stand | MS-2201 | $129.00 | 87 |
| Desk Lamp | DL-0556 | $65.00 | 341 |
| Webcam HD | WC-7780 | $159.00 | 156 |
Compact density
The density attribute switches between normal, compact, and clean padding presets — compact tightens both padding and font size, ideal for dense data like logs.
| TIMESTAMP | LEVEL | SERVICE | MESSAGE | DURATION |
|---|---|---|---|---|
| 2026-03-23 09:14:02 | INFO | auth-svc | User login successful | 42ms |
| 2026-03-23 09:14:05 | WARN | api-gateway | Rate limit approaching | 128ms |
| 2026-03-23 09:14:11 | INFO | payment-svc | Transaction processed | 215ms |
| 2026-03-23 09:14:18 | ERROR | email-svc | SMTP connection timeout | 5002ms |
| 2026-03-23 09:14:22 | INFO | cdn-svc | Cache purged successfully | 8ms |
Right-aligned numeric column
Alignment is set per column through tableHeaders[].align — here the Budget column is right-aligned while the rest of the table stays left-aligned by default.
| PROJECT | CLIENT | DEADLINE | BUDGET |
|---|---|---|---|
| Website Redesign | Acme Corp | Apr 15, 2026 | $24,000 |
| Mobile App | TechStart Inc | May 30, 2026 | $68,000 |
| Brand Identity | Greenleaf Co | Jun 10, 2026 | $15,500 |
| E-commerce Platform | ShopWell Ltd | Jul 22, 2026 | $92,000 |
| Dashboard UI | DataViz Inc | Aug 05, 2026 | $41,000 |
Dark background
Every color attribute — wrapper, header, cell text, row borders, first column — is independent, so a full dark theme is just a different set of hex values on the same block.
| QUARTER | REVENUE | EXPENSES | PROFIT | MARGIN |
|---|---|---|---|---|
| Q1 2026 | $1,240,000 | $890,000 | $350,000 | 28.2% |
| Q4 2025 | $1,180,000 | $820,000 | $360,000 | 30.5% |
| Q3 2025 | $1,050,000 | $780,000 | $270,000 | 25.7% |
| Q2 2025 | $980,000 | $740,000 | $240,000 | 24.5% |
| Q1 2025 | $920,000 | $710,000 | $210,000 | 22.8% |