Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Table

Simple Table Rows Skeleton for React

A four-column table placeholder with a header and five rows.

Framework
UI library

A loading table: a header row with a border under it and five rows of four cells, laid out with a CSS grid. Every cell is a Skeleton.

Use it in place of a table while its rows load, with as many columns as the real one.

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

Is this the Table component?

These rows are a CSS grid of Skeleton bars. The header and each body row are grid grid-cols-4 gap-4. Match the bars to the cells in your Table.

How is the header separated?

The header adds border-b pb-3. Its four bars are h-4 at w-20, w-24, w-16 and w-20. The block is max-w-2xl with gap-3 between rows.

How many body rows are there?

Five, from ROWS. Each cell is h-4 w-full, so the bar fills its grid column.

Do header and body bars pulse together?

Yes. They are all Skeleton, so they share animate-pulse, bg-muted and the style's radius. data-slot="skeleton" is on each bar.

How do I line the bars up with real cells?

Keep grid-cols-4 and h-4 if the loaded table has four columns of one line. Change a bar's width class when that column's text is shorter than the column.

Should the table bars be hidden?

Set aria-hidden on each Skeleton when nearby text already says the table is loading. The grid is decorative.

All 30 skeleton examples