shadcn.io is not affiliated with official shadcn/ui
Skeleton examples · Table
Table with Actions Skeleton for React
A five-column table placeholder whose last column holds two icon buttons per row.
A loading table with row actions: four data columns and a last column with two squares for the edit and delete buttons. The rows are a five-column grid, and every block is a Skeleton.
Use it for admin tables where each row has its own actions.
Preview
Installation
FAQ
How many columns does this grid have?
Five. Header and rows use grid grid-cols-5 gap-4 in a max-w-3xl column with gap-3. The header adds border-b pb-3.
What widths are the header bars?
h-4 at w-20, w-24, w-16, w-20 and w-16. Body cells in the first four columns are h-4 w-full.
What is in the last column?
flex gap-2 of two size-8 rounded-md bars. Match size-8 to your icon buttons. The row uses items-center so those squares line up with the h-4 bars.
How many body rows are there?
Four, from ROWS. Every row repeats the same five cells, including the two action squares.
How do I match a real actions column?
Keep two size-8 squares with gap-2 in the last cell, and grid-cols-5 if the table has four data columns plus actions. The cells are Skeleton bars in a div grid, not a Table.
Related
- Simple Table Rows SkeletonA four-column table placeholder with a
- Table with Avatars SkeletonA four-column table placeholder with an
- Expandable Rows SkeletonA table placeholder with a header and two
- Basic TableA bordered table of users with their
- Table with Pagination SkeletonA table placeholder with five rows and a
- Card with Avatar and Content SkeletonA bordered card placeholder with a round