{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "table-expandable-example",
  "title": "Table Expandable",
  "description": "table-expandable-example",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/badge",
    "https://intentui.com/r/button",
    "https://intentui.com/r/menu",
    "https://intentui.com/r/table"
  ],
  "files": [
    {
      "path": "src/components/examples/collections/table/table-expandable-example.tsx",
      "content": "'use client'\n\nimport { EllipsisVerticalIcon } from '@heroicons/react/16/solid'\nimport { IdentificationIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline'\nimport { Autocomplete } from 'react-aria-components/Autocomplete'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Menu, MenuContent, MenuItem, MenuSeparator } from '@/components/ui/menu'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table'\n\nconst rows = [\n  {\n    id: 'marketing-site',\n    project: 'Website redesign',\n    owner: 'Emma Taylor',\n    team: 'Brand',\n    status: 'In progress',\n    progress: '72%',\n    updated: 'Apr 10, 2026',\n    children: [\n      {\n        id: 'homepage-refresh',\n        project: 'Homepage refresh',\n        owner: 'Noah Wilson',\n        team: 'Brand',\n        status: 'In review',\n        progress: '91%',\n        updated: 'Apr 12, 2026',\n      },\n      {\n        id: 'pricing-page',\n        project: 'Pricing page update',\n        owner: 'Ava Martinez',\n        team: 'Growth',\n        status: 'In progress',\n        progress: '64%',\n        updated: 'Apr 9, 2026',\n      },\n      {\n        id: 'faq-rewrite',\n        project: 'FAQ rewrite',\n        owner: 'Liam Anderson',\n        team: 'Content',\n        status: 'Planned',\n        progress: '18%',\n        updated: 'Apr 6, 2026',\n      },\n    ],\n  },\n  {\n    id: 'mobile-app',\n    project: 'Mobile app onboarding',\n    owner: 'Sophia Brown',\n    team: 'Product',\n    status: 'In progress',\n    progress: '58%',\n    updated: 'Apr 14, 2026',\n    children: [\n      {\n        id: 'welcome-flow',\n        project: 'Welcome flow',\n        owner: 'Mason Thomas',\n        team: 'Product',\n        status: 'In progress',\n        progress: '67%',\n        updated: 'Apr 13, 2026',\n      },\n      {\n        id: 'permissions-screen',\n        project: 'Permissions screen',\n        owner: 'Olivia Harris',\n        team: 'Mobile',\n        status: 'Blocked',\n        progress: '39%',\n        updated: 'Apr 11, 2026',\n      },\n      {\n        id: 'profile-setup',\n        project: 'Profile setup',\n        owner: 'James Clark',\n        team: 'Mobile',\n        status: 'Done',\n        progress: '100%',\n        updated: 'Apr 8, 2026',\n      },\n    ],\n  },\n  {\n    id: 'analytics-dashboard',\n    project: 'Analytics dashboard',\n    owner: 'Isabella Lewis',\n    team: 'Data',\n    status: 'In review',\n    progress: '84%',\n    updated: 'Apr 15, 2026',\n    children: [\n      {\n        id: 'traffic-widget',\n        project: 'Traffic widget',\n        owner: 'Benjamin Walker',\n        team: 'Data',\n        status: 'Done',\n        progress: '100%',\n        updated: 'Apr 7, 2026',\n      },\n      {\n        id: 'conversion-widget',\n        project: 'Conversion widget',\n        owner: 'Mia Hall',\n        team: 'Growth',\n        status: 'In progress',\n        progress: '76%',\n        updated: 'Apr 15, 2026',\n      },\n    ],\n  },\n  {\n    id: 'security-audit',\n    project: 'Security audit',\n    owner: 'Charlotte Allen',\n    team: 'Platform',\n    status: 'Planned',\n    progress: '12%',\n    updated: 'Apr 5, 2026',\n  },\n  {\n    id: 'billing-system',\n    project: 'Billing system upgrade',\n    owner: 'Elijah Young',\n    team: 'Finance',\n    status: 'Blocked',\n    progress: '43%',\n    updated: 'Apr 3, 2026',\n  },\n]\n\nexport default function TableExpandableDemo() {\n  return (\n    <div className=\"rounded-lg border p-4\">\n      <Autocomplete>\n        <Table aria-label=\"Projects\" treeColumn=\"project\" selectionMode=\"multiple\">\n          <TableHeader>\n            <TableColumn id=\"project\" isRowHeader>\n              Project\n            </TableColumn>\n            <TableColumn id=\"owner\">Owner</TableColumn>\n            <TableColumn id=\"team\">Team</TableColumn>\n            <TableColumn id=\"status\">Status</TableColumn>\n            <TableColumn id=\"progress\">Progress</TableColumn>\n            <TableColumn id=\"updated\">Last updated</TableColumn>\n            <TableColumn />\n          </TableHeader>\n          <TableBody>\n            {rows.map((row) => (\n              <TableRow key={row.id} id={row.id}>\n                <TableCell>{row.project}</TableCell>\n                <TableCell>{row.owner}</TableCell>\n                <TableCell>{row.team}</TableCell>\n                <TableCell>\n                  <Badge intent={getStatusVariant(row.status)}>{row.status}</Badge>\n                </TableCell>\n                <TableCell>{row.progress}</TableCell>\n                <TableCell>{row.updated}</TableCell>\n                <TableCell className=\"flex justify-end\">\n                  <Menu>\n                    <Button intent=\"plain\" size=\"sq-sm\" aria-label=\"Options\">\n                      <EllipsisVerticalIcon />\n                    </Button>\n                    <MenuContent aria-label=\"Actions\" placement=\"left top\">\n                      <MenuItem>\n                        <IdentificationIcon /> View details\n                      </MenuItem>\n                      <MenuItem>\n                        <PencilSquareIcon /> Edit\n                      </MenuItem>\n                      <MenuSeparator />\n                      <MenuItem intent=\"danger\">\n                        <TrashIcon /> Delete\n                      </MenuItem>\n                    </MenuContent>\n                  </Menu>\n                </TableCell>\n                {row.children?.map((child) => (\n                  <TableRow key={child.id} id={child.id}>\n                    <TableCell>{child.project}</TableCell>\n                    <TableCell>{child.owner}</TableCell>\n                    <TableCell>{child.team}</TableCell>\n                    <TableCell>\n                      <Badge intent={getStatusVariant(child.status)}>{child.status}</Badge>\n                    </TableCell>\n                    <TableCell>{child.progress}</TableCell>\n                    <TableCell>{child.updated}</TableCell>\n                    <TableCell className=\"flex justify-end\">\n                      <Menu>\n                        <Button intent=\"plain\" size=\"sq-sm\" aria-label=\"Options\">\n                          <EllipsisVerticalIcon />\n                        </Button>\n                        <MenuContent aria-label=\"Actions\" placement=\"left top\">\n                          <MenuItem>\n                            <IdentificationIcon /> View details\n                          </MenuItem>\n                          <MenuItem>\n                            <PencilSquareIcon /> Edit\n                          </MenuItem>\n                          <MenuSeparator />\n                          <MenuItem intent=\"danger\">\n                            <TrashIcon /> Delete\n                          </MenuItem>\n                        </MenuContent>\n                      </Menu>\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </Autocomplete>\n    </div>\n  )\n}\n\nfunction getStatusVariant(status: string) {\n  if (status === 'Blocked') return 'danger'\n  if (status === 'In progress') return 'secondary'\n  if (status === 'Planned') return 'info'\n  if (status === 'Done') return 'success'\n  return 'primary'\n}\n",
      "type": "registry:page",
      "target": "app/table-expandable-example/page.tsx"
    }
  ],
  "type": "registry:page"
}