# Table

Themed `<table>` family wrapped in a rounded card surface. Use for tabular data with multiple columns. For settings-style single-column lists, use `List` instead.

[View examples](https://marsam.rahhal.app/components/table) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/table`

**Category:** `surfaces`

## Anatomy

| part | wraps |
| --- | --- |
| Table | rounded card + horizontal scroll |
| TableHeader | thead with muted band |
| TableBody | tbody with hairline row dividers |
| TableFooter | tfoot for totals / summaries |
| TableRow | tr with hover + selected states |
| TableHead | th — uses logical `text-start` |
| TableCell | td — uses logical alignment |
| TableCaption | caption rendered below the table |

## Notes

- Numbers should use `tabular-nums` and align to the end edge: `className="text-end font-mono tabular-nums"`.
- For status pills inside cells, use `<Badge>` from `@rahhal/ui/badge`.
- Logical text alignment (`text-start`/`text-end`) means columns flip correctly under RTL automatically.