{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tables",
  "type": "registry:component",
  "title": "Tables",
  "author": "Toby Belhome",
  "description": "Organize and present data efficiently with Tailwind CSS dashboard tables. These layouts feature sortable columns, clean typography, and responsive design to make complex information easy to understand. Perfect for admin panels, analytics dashboards, and SaaS platforms seeking structured and user-friendly data presentation.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "tooltip"
  ],
  "files": [
    {
      "path": "examples/blocks/dashboard-ui/tables/01/page.tsx",
      "content": "\"use client\";\n\nimport { CheckCircle, FileTextIcon, Loader2, PauseIcon, PlayIcon, Trash2Icon } from \"lucide-react\";\nimport { useState } from \"react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow\n} from \"@/components/ui/table\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\";\n\ninterface Task {\n  id: string;\n  title: string;\n  assignee: string;\n  status: \"pending\" | \"in-progress\" | \"completed\" | \"blocked\";\n  priority: \"low\" | \"medium\" | \"high\" | \"urgent\";\n  dueDate: string;\n  notes: string;\n}\n\ntype TaskActionType = \"start\" | \"pause\" | \"complete\" | \"delete\" | \"view\";\n\nconst tasks: Task[] = [\n  {\n    id: \"TASK-001\",\n    title: \"Implement User Authentication\",\n    assignee: \"Sarah Chen\",\n    status: \"in-progress\",\n    priority: \"high\",\n    dueDate: \"2024-03-25\",\n    notes: \"OAuth 2.0 integration with Google and GitHub providers\"\n  },\n  {\n    id: \"TASK-002\",\n    title: \"Design Dashboard UI\",\n    assignee: \"Michael Torres\",\n    status: \"completed\",\n    priority: \"medium\",\n    dueDate: \"2024-03-20\",\n    notes: \"Finalize dashboard layout with responsive grid system\"\n  },\n  {\n    id: \"TASK-003\",\n    title: \"API Performance Optimization\",\n    assignee: \"Emma Rodriguez\",\n    status: \"pending\",\n    priority: \"urgent\",\n    dueDate: \"2024-03-22\",\n    notes: \"Reduce API response time by implementing caching strategy\"\n  },\n  {\n    id: \"TASK-004\",\n    title: \"Write Unit Tests\",\n    assignee: \"James Wilson\",\n    status: \"in-progress\",\n    priority: \"medium\",\n    dueDate: \"2024-03-28\",\n    notes: \"Achieve 80% code coverage for authentication module\"\n  },\n  {\n    id: \"TASK-005\",\n    title: \"Database Migration\",\n    assignee: \"Olivia Martinez\",\n    status: \"blocked\",\n    priority: \"high\",\n    dueDate: \"2024-03-24\",\n    notes: \"Waiting for infrastructure team approval before proceeding\"\n  },\n  {\n    id: \"TASK-006\",\n    title: \"Update Documentation\",\n    assignee: \"Lucas Anderson\",\n    status: \"pending\",\n    priority: \"low\",\n    dueDate: \"2024-03-30\",\n    notes: \"Document new API endpoints and authentication flow\"\n  },\n  {\n    id: \"TASK-007\",\n    title: \"Security Audit\",\n    assignee: \"Sophia Taylor\",\n    status: \"completed\",\n    priority: \"urgent\",\n    dueDate: \"2024-03-19\",\n    notes: \"Conducted comprehensive security review and vulnerability assessment\"\n  }\n];\n\nfunction getStatusBadge(status: Task[\"status\"]) {\n  switch (status) {\n    case \"pending\":\n      return (\n        <Badge\n          variant=\"outline\"\n          className=\"border-0 bg-amber-500/15 text-amber-700 hover:bg-amber-500/25 dark:bg-amber-500/10 dark:text-amber-300 dark:hover:bg-amber-500/20\">\n          Pending\n        </Badge>\n      );\n    case \"in-progress\":\n      return (\n        <Badge\n          variant=\"outline\"\n          className=\"border-0 bg-blue-500/15 text-blue-700 hover:bg-blue-500/25 dark:bg-blue-500/10 dark:text-blue-400 dark:hover:bg-blue-500/20\">\n          In Progress\n        </Badge>\n      );\n    case \"completed\":\n      return (\n        <Badge\n          variant=\"outline\"\n          className=\"border-0 bg-green-500/15 text-green-700 hover:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:hover:bg-green-500/20\">\n          Completed\n        </Badge>\n      );\n    case \"blocked\":\n      return (\n        <Badge\n          variant=\"outline\"\n          className=\"border-0 bg-rose-500/15 text-rose-700 hover:bg-rose-500/25 dark:bg-rose-500/10 dark:text-rose-400 dark:hover:bg-rose-500/20\">\n          Blocked\n        </Badge>\n      );\n    default:\n      return <Badge variant=\"secondary\">{status}</Badge>;\n  }\n}\n\nexport default function Table02() {\n  const [pendingAction, setPendingAction] = useState<{\n    id: string;\n    type: TaskActionType;\n  } | null>(null);\n\n  const isTaskActionPending = (action: TaskActionType, taskId: string) =>\n    pendingAction?.id === taskId && pendingAction.type === action;\n\n  const isTaskBusy = (taskId: string) => pendingAction?.id === taskId;\n\n  const handleAction = (task: Task, actionType: TaskActionType) => {\n    setPendingAction({ id: task.id, type: actionType });\n    setTimeout(() => {\n      setPendingAction(null);\n      console.log(`Action \"${actionType}\" completed for task:`, task.title);\n    }, 1000);\n  };\n\n  const renderTaskRow = (task: Task) => {\n    const busy = isTaskBusy(task.id);\n    const startPending = isTaskActionPending(\"start\", task.id);\n    const pausePending = isTaskActionPending(\"pause\", task.id);\n    const completePending = isTaskActionPending(\"complete\", task.id);\n    const deletePending = isTaskActionPending(\"delete\", task.id);\n\n    return (\n      <TableRow key={task.id} className=\"hover:bg-muted/50\">\n        <TableCell className=\"h-16 px-4 font-medium\">{task.title}</TableCell>\n        <TableCell className=\"text-muted-foreground h-16 px-4 text-sm\">{task.assignee}</TableCell>\n        <TableCell className=\"h-16 px-4\">{getStatusBadge(task.status)}</TableCell>\n\n        <TableCell className=\"text-muted-foreground h-16 px-4 text-sm\">{task.dueDate}</TableCell>\n        <TableCell className=\"text-muted-foreground h-16 max-w-[300px] px-4 text-sm\">\n          <TooltipProvider>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <span className=\"block cursor-help truncate\">{task.notes}</span>\n              </TooltipTrigger>\n              <TooltipContent className=\"max-w-md\">{task.notes}</TooltipContent>\n            </Tooltip>\n          </TooltipProvider>\n        </TableCell>\n        <TableCell className=\"h-16 px-4\">\n          <TooltipProvider>\n            <div className=\"flex items-center gap-1\">\n              {(task.status === \"pending\" || task.status === \"blocked\") && (\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      className=\"h-8 w-8\"\n                      onClick={() => handleAction(task, \"start\")}\n                      disabled={busy}>\n                      {startPending ? (\n                        <Loader2 className=\"size-4 animate-spin\" />\n                      ) : (\n                        <PlayIcon className=\"size-4\" />\n                      )}\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>Start</TooltipContent>\n                </Tooltip>\n              )}\n              {task.status === \"in-progress\" && (\n                <>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"h-8 w-8\"\n                        onClick={() => handleAction(task, \"pause\")}\n                        disabled={busy}>\n                        {pausePending ? (\n                          <Loader2 className=\"size-4 animate-spin\" />\n                        ) : (\n                          <PauseIcon className=\"size-4\" />\n                        )}\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent>Pause</TooltipContent>\n                  </Tooltip>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button\n                        variant=\"outline\"\n                        size=\"icon\"\n                        className=\"h-8 w-8\"\n                        onClick={() => handleAction(task, \"complete\")}\n                        disabled={busy}>\n                        {completePending ? (\n                          <Loader2 className=\"size-4 animate-spin\" />\n                        ) : (\n                          <CheckCircle className=\"size-4\" />\n                        )}\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent>Complete</TooltipContent>\n                  </Tooltip>\n                </>\n              )}\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    className=\"text-destructive hover:bg-destructive h-8 w-8 hover:text-white\"\n                    onClick={() => handleAction(task, \"delete\")}\n                    disabled={busy}>\n                    {deletePending ? (\n                      <Loader2 className=\"size-4 animate-spin\" />\n                    ) : (\n                      <Trash2Icon className=\"size-4\" />\n                    )}\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent>Delete</TooltipContent>\n              </Tooltip>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    className=\"h-8 w-8\"\n                    onClick={() => handleAction(task, \"view\")}\n                    disabled={busy}>\n                    <FileTextIcon className=\"size-4\" />\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent>View Details</TooltipContent>\n              </Tooltip>\n            </div>\n          </TooltipProvider>\n        </TableCell>\n      </TableRow>\n    );\n  };\n\n  return (\n    <div className=\"container mx-auto px-4 py-6 lg:py-10\">\n      <div className=\"rounded-lg border\">\n        <Table>\n          <TableHeader>\n            <TableRow className=\"border-b hover:bg-transparent\">\n              <TableHead className=\"h-12 px-4 font-medium\">Title</TableHead>\n              <TableHead className=\"h-12 px-4 font-medium\">Assignee</TableHead>\n              <TableHead className=\"h-12 w-[120px] px-4 font-medium\">Status</TableHead>\n\n              <TableHead className=\"h-12 px-4 font-medium\">Due Date</TableHead>\n              <TableHead className=\"h-12 px-4 font-medium\">Notes</TableHead>\n              <TableHead className=\"h-12 w-[180px] px-4 font-medium\">Actions</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>{tasks.map(renderTaskRow)}</TableBody>\n        </Table>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/tables.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}