Table UI patterns for displaying structured data. Sortable headers, status badges, progress bars, pagination, and more — the essential patterns for any data-heavy application.
| Name | Role | Status | Revenue |
|---|---|---|---|
| Alice Chen | Engineering | Active | $12,400 |
| Bob Smith | Design | Active | $9,800 |
| Carol Diaz | Marketing | Pending | $7,200 |
| Dan Lee | Sales | Review | $15,600 |
| Eve Park | Engineering | Active | $11,200 |
A clean data table with a toolbar, column headers, avatar cells, status badges, and pagination. The foundational pattern for any admin panel or dashboard.
| Product ▲ | Category | Price ▼ | Stock |
|---|---|---|---|
| Widget Pro | Hardware | $299 | 142 |
| Cloud Suite | Software | $199 | ∞ |
| Data Cable | Hardware | $29 | 3,841 |
| AI Module | Software | $499 | ∞ |
| Sensor Kit | Hardware | $89 | 567 |
Table headers with sort direction indicators (▲/▼). Clicking a column header toggles ascending/descending sort. Essential for data exploration.
| ID | Endpoint | Method | Latency |
|---|---|---|---|
| #a3f2 | /api/users | GET | 42ms |
| #b7c1 | /api/orders | POST | 128ms |
| #d9e4 | /api/products | GET | 67ms |
| #f1a8 | /api/auth | PUT | 231ms |
| #c4b2 | /api/users/3 | DELETE | 89ms |
Alternating row backgrounds improve readability in dense tables. Combined here with HTTP method badges and latency data — a common pattern in API monitoring dashboards.
| Project | Team | Progress | Deadline |
|---|---|---|---|
| Homepage Redesign | Design | Jan 15 | |
| API v2 Migration | Backend | Feb 3 | |
| Mobile App | Mobile | Mar 20 | |
| Auth Overhaul | Security | Jan 8 | |
| Analytics v3 | Data | Apr 1 |
Inline progress bars within table cells, color-coded by completion level. Green for near-complete, amber for in-progress, red for behind schedule.
| Service | Status | Uptime | Response |
|---|---|---|---|
| API Gateway | ● Operational | 99.98% | 42ms |
| Database | ● Operational | 99.99% | 12ms |
| CDN | ● Degraded | 99.82% | 156ms |
| Auth Service | ● Operational | 99.95% | 38ms |
| Email Service | ● Outage | 98.41% | — |
A system status page table with operational/degraded/outage indicators. Used on status pages (like status.github.com) to show service health at a glance.
| Metric | Current | Prev | Δ | Trend |
|---|---|---|---|---|
| MRR | $48.2k | $44.1k | +9.3% | ↑↑↑ |
| Churn | 2.1% | 2.8% | -0.7% | ↓↓ |
| NPS | 72 | 68 | +4 | ↑ |
| CAC | $142 | $128 | +10.9% | ↑ |
| LTV | $2,840 | $2,650 | +7.2% | ↑↑ |
| DAU | 14.2k | 13.8k | +2.9% | ↑ |
A dense, compact table for KPI comparison — current vs. previous period with delta and trend indicators. Used in executive dashboards and investor reports.
| Order | Customer | Total | Status | |
|---|---|---|---|---|
| ▶ | #ORD-1042 | Alice Chen | $284.00 | Shipped |
| ▼ | #ORD-1041 | Bob Smith | $156.50 | Processing |
| ▶ | #ORD-1040 | Carol Diaz | $432.00 | Pending |
| ▶ | #ORD-1039 | Dan Lee | $67.25 | Shipped |
Table rows that expand to reveal detailed information. The ▶/▼ toggle reveals order details, shipping info, and line items without navigating away from the table.
| File | Size | Modified | |
|---|---|---|---|
✓ | index.html | 24 KB | 2 min ago |
| styles.css | 18 KB | 1 hr ago | |
✓ | app.js | 42 KB | 5 min ago |
| README.md | 3 KB | 3 days ago |
Checkbox-based row selection with a bulk actions toolbar. Selected rows are highlighted and the toolbar shows the count and available actions like delete or export.