Vercel
Basic table
| Col 1 | Col 2 | Col 3 |
|---|
| Value 1.1 | Value 1.2 | Value 1.3 |
| Value 2.1 | Value 2.2 | Value 2.3 |
| Value 3.1 | Value 3.2 | Value 3.3 |
Striped table
| Col 1 | Col 2 | Col 3 |
|---|
| Value 1.1 | Value 1.2 | Value 1.3 |
| Value 2.1 | Value 2.2 | Value 2.3 |
| Value 3.1 | Value 3.2 | Value 3.3 |
Bordered table
| Col 1 | Col 2 | Col 3 |
|---|
| Value 1.1 | Value 1.2 | Value 1.3 |
| Value 2.1 | Value 2.2 | Value 2.3 |
| Value 3.1 | Value 3.2 | Value 3.3 |
Interactive table
| Col 1 | Col 2 | Col 3 |
|---|
| Value 1.1 | Value 1.2 | Value 1.3 |
| Value 2.1 | Value 2.2 | Value 2.3 |
| Value 3.1 | Value 3.2 | Value 3.3 |
Full featured table
| Product | Usage | Price | Charge |
|---|
| Brake Pads Set | 100 sets | $50 per set | $5,000.00 |
| Oil Filters | 200 filters | $10 per filter | $2,000.00 |
| Car Batteries | 50 batteries | $100 per battery | $5,000.00 |
| Headlight Bulbs | 300 bulbs | $15 per bulb | $4,500.00 |
| Windshield Wipers | 250 pairs | $20 per pair | $5,000.00 |
| Spark Plugs | 500 sets | $5 per set | $2,500.00 |
| Subtotal | $24,000.00 |
Virtualized table
| Product | Usage | Price | Charge |
|---|
| Brake Pads Set | 100 sets | $50 per set | $5,000.00 |
| Oil Filters | 200 filters | $10 per filter | $2,000.00 |
| Car Batteries | 50 batteries | $100 per battery | $5,000.00 |
| Headlight Bulbs | 300 bulbs | $15 per bulb | $4,500.00 |
| Windshield Wipers | 250 pairs | $20 per pair | $5,000.00 |
| Spark Plugs | 500 sets | $5 per set | $2,500.00 |
| Brake Pads Set | 100 sets | $50 per set | $5,000.00 |
| Oil Filters | 200 filters | $10 per filter | $2,000.00 |
| Car Batteries | 50 batteries | $100 per battery | $5,000.00 |
Best Practices
When to use
- Use
<Table> for tabular data where rows share the same shape and at least one column is sortable or comparable across rows.
- For a row of descriptive content paired with a single action (membership row, integration row), use Entity instead.
- For a key/value metadata block on a detail page, use Description, not a two-column table.
Behavior
- When the underlying list is empty (filter cleared, never created), render Empty State outside the table rather than an empty
<Table.Body>.
- Render
— in cells where a value is unknown or not applicable. Don’t substitute N/A, null, or an empty string.
- Sortable column headers are buttons. The visible label stays Title Case; the sort-direction arrow is decorative and the button announces the next sort state to assistive tech.
- Apply
tabular-nums (or Geist Mono) to numeric columns so digits align across rows for comparison.
Content
- Column headers (
<Table.Head>) are Title Case nouns or noun phrases: Last Used, Requests (7d), Created, Status. Never sentences.
- Use the canonical short relative-time form in cells (
2m ago, 5h ago); switch to Mar 14, 2026 past 7 days. See Relative Time Card.
- Pagination labels are
Previous and Next. Page-count copy reads Page 2 of 7 or 21–40 of 142 with an en-dash inside the range.
Read the original on vercel.com ↗