shadcn.io is an independent project built on shadcn/ui
A two-column table headed Field and Value. The rows are Full Name, Email, Phone, Location, Joined and Role. Full Name is John Doe. Role is Administrator.
Use two columns for one record, such as a profile. A Data List is the same idea without a table grid. Ark UI in Solid does not pair the labels with the values.
Installation
Anatomy
Usage
<div class="w-full max-w-md rounded-md border bg-background">
<Table>
<TableHeader>
<TableRow>
<TableHead class="w-1/3">Field</TableHead>
<TableHead>Value</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{userInfo.map(info => <TableRow>
<TableCell class="font-medium">{info.label}</TableCell>
<TableCell>{info.value}</TableCell>
</TableRow>)}
</TableBody>
</Table>
</div>FAQ
How is this table organized?
Two columns, Field and Value. userInfo has six pairs, and each pair is a TableRow keyed by info.label. The label cell is font-medium. The value cell is plain text.
How wide is the field column?
The Field TableHead has w-1/3, so the labels take a third of the table and the values take the rest. The frame is max-w-md.
Which fields are shown?
Full Name, Email, Phone, Location, Joined and Role, in that order, from the userInfo array.
Do the rows still have dividers?
Yes. This file does not set border-b-0. TableRow keeps its bottom border and hover:bg-muted/50, and TableHeader separates the Field and Value labels.
API Reference
Table
No extra props in this demo. The rest is on the Table page.
