shadcn.io is an independent project built on shadcn/ui
A bordered table lists people. The columns are Name, Email, Location, Status and Balance. John Doe is first, in New York, Active, with a balance.
Use a plain table for a short list of records, such as users. A Data List fits the same pairs if each record is a label and a value. In Solid, Ark UI does not sort the rows.
Installation
Anatomy
Usage
<div class="w-full max-w-4xl rounded-md border bg-background">
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
<TableHead>Location</TableHead>
<TableHead>Status</TableHead>
<TableHead class="text-end">Balance</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{users.map(user => <TableRow>
<TableCell class="font-medium">{user.name}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell>{user.location}</TableCell>
<TableCell>{user.status}</TableCell>
<TableCell class="text-end">{user.balance}</TableCell>
</TableRow>)}
</TableBody>
</Table>
</div>FAQ
Which parts make up this table?
Table renders the <table>. TableHeader holds the label row, TableBody holds the records, and each person is a TableRow of TableCells. The demo maps the users array into four rows.
How is the balance column aligned?
text-end on the Balance TableHead and on each balance TableCell lines the amounts up on the trailing edge. Name, email, location and status stay at the start.
Why is the name medium weight?
font-medium on the name TableCell makes the person the row's label. Every cell inherits the table's text-sm.
What is the row key?
Each TableRow uses user.email as its key. The emails in this array are unique, so a row keeps its identity when the list renders again.
API Reference
Table
No extra props in this demo. The rest is on the Table page.
