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 |
| 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 substituteN/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 toMar 14, 2026past 7 days. See Relative Time Card. - Pagination labels are
PreviousandNext. Page-count copy readsPage 2 of 7or21–40 of 142with an en-dash inside the range.
Was this helpful?