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 Vue, Ark UI does not stream the events.
Installation
Anatomy
Usage
<div class="w-full max-w-4xl rounded-md border bg-background">
<Table>
<TableHeader>
<TableRow class="h-8">
<TableHead class="py-2">ID</TableHead>
<TableHead class="py-2">Event</TableHead>
<TableHead class="py-2">User</TableHead>
<TableHead class="py-2">IP Address</TableHead>
<TableHead class="py-2 text-end">Time</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="log in logs" class="h-8" :key="log.id">
<TableCell class="py-1 text-sm">{{ log.id }}</TableCell>
<TableCell class="py-1 text-sm">{{ log.event }}</TableCell>
<TableCell class="py-1 text-sm">{{ log.user }}</TableCell>
<TableCell class="py-1 text-sm">{{ log.ip }}</TableCell>
<TableCell class="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
Sets v-for="log in logs" and key="log.id". The rest is on the Table page.
