{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "title": "Table",
  "description": "A composable data table with semantic markup and a per-row hover highlight that dims into the active row.",
  "dependencies": [],
  "files": [
    {
      "path": "components/ui/table.tsx",
      "type": "registry:ui",
      "content": "'use client'\n\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from 'react'\nimport { cn } from '@/lib/utils'\n\nexport type TableProps = HTMLAttributes<HTMLTableElement>\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-x-auto\">\n    <table ref={ref} className={cn('w-full text-[13px] border-collapse', className)} {...props} />\n  </div>\n))\nTable.displayName = 'Table'\n\nexport type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>\n\nexport const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n  ({ className, ...props }, ref) => <thead ref={ref} className={cn(className)} {...props} />,\n)\nTableHeader.displayName = 'TableHeader'\n\nexport type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n  ({ className, ...props }, ref) => <tbody ref={ref} className={cn(className)} {...props} />,\n)\nTableBody.displayName = 'TableBody'\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n  isBodyRow?: boolean\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ isBodyRow, className, ...props }, ref) => (\n    <tr\n      ref={ref}\n      className={cn(\n        'group/row border-b border-border/60 transition-colors duration-(--motion-dur-fast) motion-reduce:transition-none',\n        isBodyRow && 'hover:bg-muted',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nTableRow.displayName = 'TableRow'\n\nexport type TableHeadProps = ThHTMLAttributes<HTMLTableCellElement>\n\nexport const TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(\n  ({ className, ...props }, ref) => (\n    <th\n      ref={ref}\n      scope=\"col\"\n      className={cn('px-3 py-2 text-start font-semibold text-foreground', className)}\n      {...props}\n    />\n  ),\n)\nTableHead.displayName = 'TableHead'\n\nexport type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>\n\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, ...props }, ref) => (\n    <td\n      ref={ref}\n      className={cn(\n        'px-3 py-2 text-start text-muted-foreground transition-colors duration-(--motion-dur-fast) motion-reduce:transition-none group-hover/row:text-foreground',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nTableCell.displayName = 'TableCell'\n\nexport function TablePreview() {\n  return (\n    <div\n      className=\"w-full h-full min-h-50 rounded-lg overflow-hidden flex items-center justify-center p-4\"\n      style={{ backgroundColor: 'var(--color-surface)' }}\n    >\n      <Table className=\"max-w-md\">\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Role</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {[\n            ['Ada Lovelace', 'Engineer', 'Active'],\n            ['Alan Turing', 'Researcher', 'Active'],\n            ['Grace Hopper', 'Admiral', 'Retired'],\n          ].map((row) => (\n            <TableRow key={row[0]} isBodyRow>\n              {row.map((cell) => (\n                <TableCell key={cell}>{cell}</TableCell>\n              ))}\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  )\n}\n"
    }
  ],
  "type": "registry:ui"
}