{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-01",
  "type": "registry:block",
  "title": "Table with Accordion",
  "description": "A table with accordion block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "collapsible",
    "table"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/tables/table-01.tsx",
      "type": "registry:component",
      "target": "components/table-01.tsx",
      "content": "'use client';\n\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table';\nimport { cn } from '@/lib/utils';\n\ninterface TableRowData {\n  id: string;\n  name: string;\n  category: string;\n  value: number;\n  date: string;\n  children?: TableRowData[];\n}\n\nconst sampleData: TableRowData[] = [\n  {\n    id: '001',\n    name: 'Project Alpha',\n    category: 'Development',\n    value: 45_000,\n    date: '2024-01-15',\n    children: [\n      {\n        id: '001-01',\n        name: 'Frontend Module',\n        category: 'Development',\n        value: 15_000,\n        date: '2024-01-16',\n      },\n      {\n        id: '001-02',\n        name: 'Backend Module',\n        category: 'Development',\n        value: 20_000,\n        date: '2024-01-21',\n      },\n      {\n        id: '001-03',\n        name: 'Testing Suite',\n        category: 'Development',\n        value: 10_000,\n        date: '2024-01-24',\n      },\n    ],\n  },\n  {\n    id: '002',\n    name: 'Marketing Campaign',\n    category: 'Marketing',\n    value: 28_500,\n    date: '2024-01-18',\n    children: [\n      {\n        id: '002-01',\n        name: 'Social Media',\n        category: 'Marketing',\n        value: 12_000,\n        date: '2024-01-19',\n      },\n      {\n        id: '002-02',\n        name: 'Email Marketing',\n        category: 'Marketing',\n        value: 8500,\n        date: '2024-01-22',\n      },\n      {\n        id: '002-03',\n        name: 'SEO Optimization',\n        category: 'Marketing',\n        value: 8000,\n        date: '2024-01-23',\n      },\n    ],\n  },\n  {\n    id: '003',\n    name: 'Infrastructure Upgrade',\n    category: 'Operations',\n    value: 67_200,\n    date: '2024-01-20',\n    children: [\n      {\n        id: '003-01',\n        name: 'Cloud Migration',\n        category: 'Operations',\n        value: 35_000,\n        date: '2024-01-21',\n      },\n      {\n        id: '003-02',\n        name: 'Security Enhancement',\n        category: 'Operations',\n        value: 32_200,\n        date: '2024-01-24',\n      },\n    ],\n  },\n  {\n    id: '004',\n    name: 'Customer Support',\n    category: 'Service',\n    value: 19_800,\n    date: '2024-01-25',\n  },\n];\n\ninterface AccordionRowProps {\n  row: TableRowData;\n  defaultOpen?: boolean;\n}\n\nfunction AccordionRow({ row, defaultOpen = false }: AccordionRowProps) {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n  const hasChildren = row.children && row.children.length > 0;\n\n  return (\n    <Collapsible\n      onOpenChange={setIsOpen}\n      open={isOpen}\n      render={\n        <TableBody className=\"[&_tr:last-child]:border-b last:[&_tr:last-child]:border-0\" />\n      }\n    >\n      <TableRow\n        className={cn(\n          'grid grid-cols-[40px_80px_180px_110px_100px_110px] bg-muted/50 hover:bg-muted/50',\n          isOpen && 'border-b-0'\n        )}\n      >\n        <TableCell className=\"p-0\">\n          <Button\n            aria-label={isOpen ? 'Collapse row' : 'Expand row'}\n            className={cn(\n              'h-full w-full rounded-none p-3 text-muted-foreground transition-colors',\n              hasChildren && 'hover:bg-transparent hover:text-foreground',\n              !hasChildren && 'cursor-default opacity-30'\n            )}\n            disabled={!hasChildren}\n            onClick={() => setIsOpen(!isOpen)}\n            size=\"icon\"\n            variant=\"ghost\"\n          >\n            {hasChildren ? (\n              isOpen ? (\n                <ChevronDown className=\"h-4 w-4 transition-transform duration-200\" />\n              ) : (\n                <ChevronRight className=\"h-4 w-4 transition-transform duration-200\" />\n              )\n            ) : (\n              <div className=\"h-4 w-4\" />\n            )}\n          </Button>\n        </TableCell>\n        <TableCell className=\"p-3 font-medium font-mono text-muted-foreground text-sm\">\n          {row.id}\n        </TableCell>\n        <TableCell className=\"p-3 font-medium text-sm\">{row.name}</TableCell>\n        <TableCell className=\"p-3 text-muted-foreground text-sm\">\n          {row.category}\n        </TableCell>\n        <TableCell className=\"p-3 text-right font-mono font-semibold text-sm tabular-nums\">\n          ${row.value.toLocaleString()}\n        </TableCell>\n        <TableCell className=\"p-3 text-muted-foreground text-sm\">\n          {row.date}\n        </TableCell>\n      </TableRow>\n\n      {hasChildren && (\n        <TableRow className=\"grid grid-cols-[40px_80px_180px_110px_100px_110px] border-b-0 hover:bg-transparent\">\n          <TableCell className=\"col-span-6 p-0\" colSpan={6}>\n            <CollapsibleContent>\n              <div className=\"w-full border-border border-b bg-muted/20\">\n                <Table>\n                  <TableHeader>\n                    <TableRow className=\"grid grid-cols-[40px_80px_180px_110px_100px_110px] border-b-0 bg-muted/30\">\n                      <TableHead className=\"flex h-7 items-center border-border border-y px-3 py-1.5\" />\n                      <TableHead className=\"flex h-7 items-center border-border border-y px-3 py-1.5 text-xs\">\n                        ID\n                      </TableHead>\n                      <TableHead className=\"flex h-7 items-center border-border border-y px-3 py-1.5 text-xs\">\n                        Name\n                      </TableHead>\n                      <TableHead className=\"flex h-7 items-center border-border border-y px-3 py-1.5 text-xs\">\n                        Category\n                      </TableHead>\n                      <TableHead className=\"flex h-7 items-center justify-end border-border border-y px-3 py-1.5 text-right text-xs\">\n                        Value\n                      </TableHead>\n                      <TableHead className=\"flex h-7 items-center border-border border-y px-3 py-1.5 text-xs\">\n                        Date\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    {row.children?.map((childRow) => (\n                      <TableRow\n                        className=\"grid grid-cols-[40px_80px_180px_110px_100px_110px]\"\n                        key={childRow.id}\n                      >\n                        <TableCell className=\"px-3 py-2\" />\n                        <TableCell className=\"px-3 py-2 font-mono text-muted-foreground text-xs tabular-nums\">\n                          {childRow.id}\n                        </TableCell>\n                        <TableCell className=\"px-3 py-2 font-medium text-xs\">\n                          {childRow.name}\n                        </TableCell>\n                        <TableCell className=\"px-3 py-2 text-muted-foreground text-xs\">\n                          {childRow.category}\n                        </TableCell>\n                        <TableCell className=\"px-3 py-2 text-right font-mono font-semibold text-xs tabular-nums\">\n                          ${childRow.value.toLocaleString()}\n                        </TableCell>\n                        <TableCell className=\"px-3 py-2 text-muted-foreground text-xs\">\n                          {childRow.date}\n                        </TableCell>\n                      </TableRow>\n                    ))}\n                  </TableBody>\n                </Table>\n              </div>\n            </CollapsibleContent>\n          </TableCell>\n        </TableRow>\n      )}\n    </Collapsible>\n  );\n}\n\nexport default function Table01() {\n  return (\n    <div className=\"max-w-fit overflow-hidden rounded-lg border border-border bg-card shadow-sm\">\n      <div className=\"overflow-x-auto\">\n        <Table>\n          <TableHeader>\n            <TableRow className=\"grid grid-cols-[40px_80px_180px_110px_100px_110px] bg-muted/50\">\n              <TableHead className=\"p-3\" />\n              <TableHead className=\"p-3 font-semibold text-foreground text-sm\">\n                ID\n              </TableHead>\n              <TableHead className=\"p-3 font-semibold text-foreground text-sm\">\n                Name\n              </TableHead>\n              <TableHead className=\"p-3 font-semibold text-foreground text-sm\">\n                Category\n              </TableHead>\n              <TableHead className=\"p-3 text-right font-semibold text-foreground text-sm\">\n                Value\n              </TableHead>\n              <TableHead className=\"p-3 font-semibold text-foreground text-sm\">\n                Date\n              </TableHead>\n            </TableRow>\n          </TableHeader>\n          {sampleData.map((row, index) => (\n            <AccordionRow defaultOpen={index === 0} key={row.id} row={row} />\n          ))}\n        </Table>\n      </div>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "tables"
  ]
}