Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Table examples · Advanced

Dense Table for React

A compact table of activity logs with short rows and small text.

Framework
UI library

Six log entries in rows of h-8, with py-1 text-sm on the cells and py-2 on the header. More records fit on screen while the dividers and the hover stay. Use it for audit trails, activity logs and admin lists where people scan many rows.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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.

All 8 table examples