Table
Compound data-table primitive: Table / TableHead / TableBody / TableRow / TableHeader / TableCell. Sortable column headers, row hover highlight, selected-row accent edge. Render TableStyles once on the page to enable the hover styling.
| Order ID | Part ID | Source Location | Source Level | Total Volume |
|---|---|---|---|---|
| AB-00032734 | X60 BJGJ29839281 | US, Denver - 24071 | 66% | 10.9985 |
| AB-00032612 | X62 BAGJ28599202 | US, New York - 25018 | 86% | 7.28699 |
| AB-00032736 | X61 BHH09027512 | US, San Francisco - 27381 | 75% | 8.85221 |
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/andromeda-tableProps
Every prop this component accepts. Any other prop is forwarded to the underlying element.
TableRow
| Prop | Type | Default | Description |
|---|---|---|---|
| selected | boolean | false | Applies surface.active bg + accent-300 left edge. |
| hoverable | boolean | true | Adds the hover-lift class (default true). |
TableHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| sort | 'asc'|'desc'|'sortable'|undefined | - | Column sort state; picks the matching caret and sets aria-sort. |
| align | 'left'|'right'|'center' | 'left' | Horizontal text alignment of the header cell. |
TableCell
| Prop | Type | Default | Description |
|---|---|---|---|
| align | 'left'|'right'|'center' | 'left' | Horizontal text alignment of the cell content. |
| muted | boolean | false | Uses text.secondary instead of text.primary. |
| nowrap | boolean | true | Keeps the cell content on a single line when true. |
AI Canvas