{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"table","type":"registry:ui","title":"Table","description":"A responsive table for tabular data.","dependencies":[],"registryDependencies":["https://dashral.com/r/utils.json"],"files":[{"path":"registry/dashral/table.tsx","type":"registry:file","target":"components/dashral/table.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\n/**\n * A table in a container that scrolls sideways when it's wider than its place (on a phone, say). While it does, the\n * container takes keyboard focus, so the arrow keys can scroll it; a table that fits adds no stop to the Tab order.\n */\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const [scrollable, setScrollable] = React.useState(false)\n\n  React.useEffect(() => {\n    const container = ref.current\n    if (!container) return\n    const measure = () => setScrollable(container.scrollWidth > container.clientWidth + 1)\n    measure()\n    const observer = new ResizeObserver(measure)\n    observer.observe(container)\n    if (container.firstElementChild) observer.observe(container.firstElementChild)\n    return () => observer.disconnect()\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"table-container\"\n      tabIndex={scrollable ? 0 : undefined}\n      className=\"relative w-full overflow-x-auto outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-inset\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead data-slot=\"table-header\" className={cn(\"[&_tr]:border-b\", className)} {...props} />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-start align-middle text-xs font-medium whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pe-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({ className, ...props }: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n"}]}