Table Basic

Builds a table row by row, for cells that need their own structure.

Order IDPart IDSource locationSource levelTotal volume
AB-00032734X60 BJGJ29839281US, Denver - 2407166%10.9985
AB-00032612X62 BAGJ28599202US, New York - 2501886%7.28699
AB-00032736X61 BHH09027512US, San Francisco - 2738175%8.85221

Configurations

Supported configurations for this component.

DefaultSortable headersNot hoverable

States

Interaction states covered by the API and the style contract.

Row hoverSelected row hover

Configurations

3 examples
Default
Order IDPart IDSource locationSource levelTotal volume
AB-00032734X60 BJGJ29839281US, Denver - 2407166%10.9985
AB-00032612X62 BAGJ28599202US, New York - 2501886%7.28699
AB-00032736X61 BHH09027512US, San Francisco - 2738175%8.85221
Sortable headers
Order IDPart IDSource locationSource levelTotal volume
AB-00032734X60 BJGJ29839281US, Denver - 2407166%10.9985
AB-00032612X62 BAGJ28599202US, New York - 2501886%7.28699
AB-00032736X61 BHH09027512US, San Francisco - 2738175%8.85221
Not hoverable
Order IDPart IDSource locationSource levelTotal volume
AB-00032734X60 BJGJ29839281US, Denver - 2407166%10.9985
AB-00032612X62 BAGJ28599202US, New York - 2501886%7.28699
AB-00032736X61 BHH09027512US, San Francisco - 2738175%8.85221

States

2 examples
Row hover
Order IDPart IDSource locationSource levelTotal volume
AB-00032734X60 BJGJ29839281US, Denver - 2407166%10.9985
AB-00032612X62 BAGJ28599202US, New York - 2501886%7.28699
AB-00032736X61 BHH09027512US, San Francisco - 2738175%8.85221
Rest
Order IDPart IDSource locationSource levelTotal volume
AB-00032734X60 BJGJ29839281US, Denver - 2407166%10.9985
AB-00032612X62 BAGJ28599202US, New York - 2501886%7.28699
AB-00032736X61 BHH09027512US, San Francisco - 2738175%8.85221
Row hover
Selected row hover
Order IDPart IDSource locationSource levelTotal volume
AB-00032734X60 BJGJ29839281US, Denver - 2407166%10.9985
AB-00032612X62 BAGJ28599202US, New York - 2501886%7.28699
AB-00032736X61 BHH09027512US, San Francisco - 2738175%8.85221
Rest
Order IDPart IDSource locationSource levelTotal volume
AB-00032734X60 BJGJ29839281US, Denver - 2407166%10.9985
AB-00032612X62 BAGJ28599202US, New York - 2501886%7.28699
AB-00032736X61 BHH09027512US, San Francisco - 2738175%8.85221
Selected row hover

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/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

TableRow

PropTypeDefaultDescription
selectedbooleanfalseApplies surface.active bg + brand-300 left edge.
hoverablebooleantrueAdds the background-hover class (default true).

TableHeader

PropTypeDefaultDescription
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.
onSort() => void-Called when the header is activated. With `sort` set, the label and caret render inside a real button, so the column can be sorted by keyboard as well as pointer; the table's order stays the caller's to change.

TableCell

PropTypeDefaultDescription
align'left'|'right'|'center''left'Horizontal text alignment of the cell content.
mutedbooleanfalseUses text.secondary instead of text.primary.
nowrapbooleantrueKeeps the cell content on a single line when true.

More Andromeda Pro components

Alert

Displays a status message in the flow of the page, at a severity from note to fault.

4 variants

Avatar

Represents a person as a square image tile that falls back to their initials.

6 variants1 states

Badge

Displays the state a row or cell reports, such as online, queued, or fault.

8 variants