shadcn.io is an independent project built on shadcn/ui
A bordered table lists transactions under ID, Description, Date and Amount. Every other row is shaded. TXN-001 is Payment received, $500.00, on 2024-01-15.
Shade alternate rows when a wide table is hard to track across. A Data List on a narrow screen keeps each record together. In Solid, Ark UI does not stripe the rows.
Installation
Anatomy
Usage
<div class="w-full max-w-4xl rounded-md border bg-background">
<Table>
<TableHeader>
<TableRow>
<TableHead>ID</TableHead>
<TableHead>Description</TableHead>
<TableHead>Date</TableHead>
<TableHead class="text-end">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{transactions.map((transaction, index) => <TableRow class={index % 2 === 0 ? "bg-muted/50" : ""}>
<TableCell class="font-medium">{transaction.id}</TableCell>
<TableCell>{transaction.description}</TableCell>
<TableCell>{transaction.date}</TableCell>
<TableCell class="text-end">{transaction.amount}</TableCell>
</TableRow>)}
</TableBody>
</Table>
</div>FAQ
How do the stripes get onto the rows?
In the map, index % 2 === 0 adds bg-muted/50 to that TableRow. The other rows pass an empty class. Index 0 is the first data row, so it is shaded.
Can Table stripe the rows for me?
Yes. variant="striped" on Table shades every other row with bg-muted/30. This file paints bg-muted/50 from the row index.
How is the amount aligned?
text-end on the Amount TableHead and on each amount TableCell lines the figures up on the trailing edge. The id cell is font-medium.
What identifies a transaction row?
transaction.id is the key, values such as TXN-001. The stripe uses the map index, so the shading follows the current order of transactions.
API Reference
Table
No extra props in this demo. The rest is on the Table page.
