# Table

A semantic HTML table component

[**Basic table**](/content/geist/table#basic-table/index.html)

| 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**](/content/geist/table#striped-table/index.html)

| 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**](/content/geist/table#bordered-table/index.html)

| 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**](/content/geist/table#interactive-table/index.html)

| 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**](/content/geist/table#full-featured-table/index.html)

| 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**](/content/geist/table#virtualized-table/index.html)

| 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**](/content/geist/table#best-practices/index.html)

[**When to use**](/content/geist/table#when-to-use/index.html)

- 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**](/content/geist/table#behavior/index.html)

- 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**](/content/geist/table#content/index.html)

- 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.