table cơ bản — header row + data rows, border ngang giữa các row.
data table pattern
data table là pattern phổ biến nhất trong saas dashboards — hiển thị dữ liệu dạng bảng với sort, filter, phân trang, và responsive behavior. dùng token --table-* cho mọi giá trị.
cấu trúc
| phần | token | giá trị |
|---|---|---|
| header background | --table-header-bg | var(--surface-dim) |
| header text | --table-header-text | var(--text-secondary) |
| header font | --table-header-font | 12px/500, uppercase, letter-spacing |
| header height | --table-header-height | 40px |
| row hover | --table-row-hover-bg | neutral-50 |
| row striped | --table-row-striped-bg | neutral-50 (xen kẽ) |
| row selected | --table-row-selected-bg | brand-50 |
| cell padding | --table-cell-px / --table-cell-py | 16px / 8px |
| cell font | --table-cell-font | 16px/400 (Inter) |
| number font | --table-number-font | Space Grotesk |
| border color | --table-border-color | var(--border-color) |
| sort indicator | --table-sort-color | brand-600 |
row density
hai chế độ density qua data-density attribute:
| property | comfortable (default) | compact |
|---|---|---|
| row height | --table-row-height: 48px | --table-row-height-compact: 36px |
| header height | 40px | 32px |
| cell padding x | 16px | 8px |
| cell padding y | 8px | 4px |
| dùng cho | consumer UI, landing, docs | admin panel, data-dense dashboard |
states
hàng xen kẽ màu
--table-row-striped-bg — giúp mắt theo dõi hàng ngang dễ hơn.click header để sort — mũi tên chỉ hướng sort, màu
--table-sort-color.khi data đang load — hiển thị skeleton rows thay vì spinner. pattern match với layout thật.
không có data — hiển thị EmptyState component với icon, message, và action button.
hover row đổi màu nền. cursor pointer. dùng cho table dẫn đến detail page.
responsive
mobile
table giữ nguyên độ rộng cột, bọc trong overflow-x: auto. người dùng scroll ngang để xem toàn bộ cột. cột quan trọng (name, status) ưu tiên hiển thị.
tablet+
full table hiển thị. có thể bật sticky header (position: sticky; top: 0) để header luôn visible khi scroll dọc.
column types
| type | alignment | font | ví dụ |
|---|---|---|---|
| text | left | --table-cell-font (Inter 16px) | tên, email, mô tả |
| number | right | --table-number-font (Space Grotesk) | $84,250 · 2,847 · 3.24% |
| status | center | — | active · inactive |
| date | left | --text-ui-sm | 2026-05-28 · 2 giờ trước |
| actions | right | — | edit · delete · view |