Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Dense Table for Solid

A compact activity log with short rows. Columns are ID, Event, User, IP Address and Time, starting with User login at 10:23 AM.

UI library: Ark 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 Solid, Ark UI does not stream the events.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Table anatomy: header, head, row, cell, footer, caption

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>
        {logs.map(log => <TableRow class="h-8">
            <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.

Does the dense table scroll on a narrow screen?

The frame is max-w-4xl rounded-md border bg-background. Table sits in a container with overflow-x-auto, so the five columns scroll sideways when they do not fit.

How do I match this density on a new column?

Give the new TableHead py-2 and the new TableCell py-1 text-sm, and keep h-8 on the TableRow. Copy text-end as well when the column is a number or a time.

API Reference

Table

No extra props in this demo. The rest is on the Table page.

All 8 table examples