Skip to main content
Interactive data table with expandable rows. Perfect for displaying hierarchical data with parent-child relationships.

​
Installation

Install the component from the Blocks registry: 
npx shadcn@latest add @blocks/table-01

​
Dependencies

This component requires the following shadcn/ui components:
  • button
  • collapsible
  • table
And the following npm packages: 
npm install lucide-react

​
Usage

import Table01 from "@/components/table-01";

export default function Page() {
  return <Table01 />;
}

​
Features

  • Expandable rows - Accordion-style row expansion
  • Hierarchical data - Parent-child data relationships
  • Collapsible sections - Toggle row visibility
  • Nested content - Show detailed sub-items
  • Icon indicators - Chevron expand/collapse icons
  • Interactive controls - Click to expand/collapse

​
Use Cases

  • Project breakdowns
  • Invoice line items
  • Organizational hierarchies
  • Budget categories
  • Nested task lists
  • Product catalogs with variants

Build docs developers (and LLMs) love

Get started for freeTalk to us