Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Table

Table with Pagination Skeleton for React

A table placeholder with five rows and a footer with a page count and five page buttons.

Framework
UI library

A loading table with its pager: a header, five rows of four cells, and a footer with a bar for the page summary and five squares for the page buttons. Every block is a Skeleton.

Use it for paginated tables, so the footer is in place before the rows arrive.

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 table block built?

A max-w-2xl column with gap-4. Inside, header and rows use gap-3. Header and each row are grid grid-cols-4 gap-4, and the header adds border-b pb-3.

What widths are the header bars?

h-4 at w-20, w-24, w-16 and w-20. Each body cell is h-4 w-full.

How many body rows are there?

Five, from ROWS. They sit above the footer in the same gap-3 stack.

What is in the pagination row?

flex items-center justify-between border-t pt-3. The start bar is h-4 w-32. The end is flex gap-2 of five size-8 rounded-md squares.

How do I match a real pager?

Keep five size-8 squares if you show five page buttons, and h-4 w-32 for the page summary. border-t is what separates the footer from the rows.

Should the pager bars be hidden?

Set aria-hidden on each Skeleton when nearby text already says the table is loading. The squares stand in for the page buttons.

All 30 skeleton examples