Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Skeleton - Table with Actions
A table skeleton with five columns including an actions column with dual icon buttons for edit and delete operations
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Data tables need actions—edit, delete, view. This React table skeleton shows grid-cols-5 with four data columns plus an actions column containing two icon buttons (h-8 w-8 rounded-md). Built with shadcn/ui Skeleton component and items-center alignment, the action buttons maintain vertical alignment—perfect for admin panels, dashboards, user management, content moderation, or any data table where row actions are essential to the interface.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Table Rows
Basic table without action columns
Table with Avatars
Table with avatar in first column
Expandable Rows
Table rows with expandable detail sections
Icon Button
Icon-only button component
Dropdown Menu
Menu for more actions
Table
Standard table component
Questions you might have
React Skeleton - Simple Table Rows
A simple table skeleton with header row and five data rows in a four-column grid layout for basic tabular data loading states
React Skeleton - Table with Avatars
A user list table skeleton with circular avatars and names in the first column for person-centric data displays