Table
A semantic HTML table component
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 |
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.