Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Table

Expandable Rows Skeleton for React

A table placeholder with a header and two rows, the first expanded to show a detail panel.

Framework
UI library

A loading table with rows that open: a header, two rows with a small square for the expand icon, and a tinted detail panel under the first row. The panel is always in the markup; nothing in the demo toggles it. Every block is a Skeleton.

Use it for orders, transactions or any table whose rows show details.

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

How is the header row built?

grid grid-cols-4 gap-4 border-b pb-3 with four h-4 bars: w-20, w-24, w-16 and w-20. The whole block is max-w-2xl with gap-3.

What is the small square in the first cell?

size-4 rounded-sm, beside an h-4 flex-1 bar, in flex items-center gap-2. It holds the place of the expand icon. The other three cells are h-4 w-full.

Is the detail panel opened by state?

No. The panel is always in the markup, under the first row only. It is rounded-md bg-muted/50 py-2 ps-10 pe-4, with two h-3 lines at w-full and w-5/6.

What does the second row show?

The same grid-cols-4 as the first row, including the size-4 rounded-sm icon, and no panel under it.

Why is the panel padded with ps-10?

ps-10 pe-4 insets the detail past the icon column, using logical padding so the inset follows the writing direction. gap-2 stacks the two h-3 lines.

Should these rows be hidden while loading?

Set aria-hidden on each Skeleton when nearby text already says the table is loading. The rows are a grid of Skeleton bars, and the pulse is decorative.

All 30 skeleton examples