shadcn.io is an independent project built on shadcn/ui
A bordered table with short rows. The columns are ID, Event, User, IP Address and Time. The first event is User login at 10:23 AM.
Tighten the rows for a log where more records should fit. A Scroll Area can cap the height if the log is long. On React, Ark UI does not stream the events.
Installation
Anatomy
Usage
<div className="w-full max-w-4xl rounded-md border bg-background">
<Table>
<TableHeader>
<TableRow className="h-8">
<TableHead className="py-2">ID</TableHead>
<TableHead className="py-2">Event</TableHead>
<TableHead className="py-2">User</TableHead>
<TableHead className="py-2">IP Address</TableHead>
<TableHead className="py-2 text-end">Time</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{logs.map((log) => (
<TableRow className="h-8" key={log.id}>
<TableCell className="py-1 text-sm">{log.id}</TableCell>
<TableCell className="py-1 text-sm">{log.event}</TableCell>
<TableCell className="py-1 text-sm">{log.user}</TableCell>
<TableCell className="py-1 text-sm">{log.ip}</TableCell>
<TableCell className="py-1 text-end text-sm">{log.time}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>FAQ
What makes these rows shorter?
Every body TableRow has h-8, and its cells use py-1 text-sm instead of the default p-2. The header cells keep their h-10 height and use py-2.
How is the time column aligned?
The Time TableHead and each time TableCell use text-end. ID, event, user and IP stay at the start.
What does each row show?
logs has six records. A row shows id, event, user, ip and time, and log.id is the key.
Do the short rows still have a divider and a hover?
Yes. h-8 only sets the height. TableRow still has a bottom border and hover:bg-muted/50.
API Reference
Table
No extra props in this demo. The rest is on the Table page.
