👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Table with Grouped Rows
Grouped table organizing rows into expandable category sections with collapsible headers showing item counts per group
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Need to organize table data by categories? This React grouped table arranges rows into collapsible sections with category headers showing item counts. Built with shadcn/ui Table, Badge, and Collapsible components with Lucide React icons, each group header displays the category name, count badge, and chevron that rotates when expanded. Click headers to show/hide groups while maintaining clean visual hierarchy—perfect for inventory systems, product catalogs, or any dataset where grouping by department, status, or type helps users find related items quickly.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/table-grouped-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/table-grouped-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/table-grouped-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/table-grouped-01.jsonRelated blocks you will also like
Table with Expandable Rows
Row details with slide-down animation
Table with Quick Filters
Filter chips for categories
Searchable Filterable Data Table
Search and filter functionality
Table with Sortable Columns
Column sorting functionality
Table with Summary Footer
Aggregated totals per group
Table with Row Selection
Select rows with checkboxes