{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table",
  "title": "Data Table",
  "description": "Sortable, filterable data table with row actions, built on TanStack Table.",
  "dependencies": ["lucide-react"],
  "registryDependencies": ["alert-dialog", "button", "dropdown-menu", "table", "tooltip", "utils"],
  "files": [
    {
      "path": "src/patterns/data-table/data-table.tsx",
      "content": "import { useState } from \"react\";\nimport {\n  ArrowDown,\n  ArrowUp,\n  ArrowUpDown,\n  Eye,\n  Inbox,\n  MoreHorizontal,\n  Pencil,\n  Trash2,\n} from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from \"../../primitives/alert-dialog\";\nimport { Button } from \"../../primitives/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../../primitives/dropdown-menu\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"../../primitives/table\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../../primitives/tooltip\";\n\nexport interface DataTableColumn {\n  /** Machine-readable key matching a key in DataTableRow.data */\n  key: string;\n  /** Header label displayed in the column */\n  header: string;\n  /** Whether this column can be sorted. Defaults to false. */\n  sortable?: boolean;\n}\n\nexport interface DataTableRow {\n  /** Unique identifier for this row */\n  id: string;\n  /** Column data keyed by DataTableColumn.key */\n  data: Record<string, unknown>;\n}\n\nexport interface SortOption {\n  value: string;\n  property: string;\n  prompt: string;\n}\n\nexport interface DataTableProps {\n  /** Entity identifier used in empty-state messaging and action callbacks */\n  entityName: string;\n  /** Human-readable entity title used in empty-state messaging */\n  entityTitle?: string;\n  /** Column definitions */\n  columns: DataTableColumn[];\n  /** Rows to display */\n  rows: DataTableRow[];\n  /** Currently active sort string, e.g. \"name,asc\" */\n  currentSort?: string;\n  /** Called when the user clicks a sortable column header */\n  onSort?: (field: string) => void;\n  /** Sort options for tooltip labels */\n  sortOptions?: SortOption[];\n  /** Called when the user clicks the create-new button in the empty state */\n  onCreateClick?: () => void;\n  /** Called when the user clicks \"View details\" from the row action menu */\n  onViewDetails?: (id: string) => void;\n  /** Called when the user clicks \"Edit\" from the row action menu */\n  onEdit?: (id: string) => void;\n  /** Called when the user confirms deletion. If undefined the Delete action is hidden. */\n  onDelete?: (id: string) => void;\n  /** When true, the delete confirmation dialog shows a loading state */\n  isDeleting?: boolean;\n  /** Called when the user clicks the row itself (outside the action menu) */\n  onRowClick?: (id: string) => void;\n}\n\nexport function DataTable({\n  entityName,\n  entityTitle,\n  columns,\n  rows,\n  currentSort,\n  onSort,\n  sortOptions,\n  onCreateClick,\n  onViewDetails,\n  onEdit,\n  onDelete,\n  isDeleting,\n  onRowClick,\n}: Readonly<DataTableProps>) {\n  const [deleteId, setDeleteId] = useState<string | null>(null);\n\n  function getSortIcon(key: string) {\n    const isAsc = currentSort === `${key},asc`;\n    const isDesc = currentSort === `${key},desc`;\n    if (isAsc) return <ArrowUp className=\"ml-1 size-3.5\" />;\n    if (isDesc) return <ArrowDown className=\"ml-1 size-3.5\" />;\n    return <ArrowUpDown className=\"ml-1 size-3.5 text-muted-foreground/50\" />;\n  }\n\n  function getSortTooltip(key: string): string | undefined {\n    if (!sortOptions) return undefined;\n    const isAsc = currentSort === `${key},asc`;\n    const isDesc = currentSort === `${key},desc`;\n    let nextSort: string | undefined;\n    if (isAsc) {\n      nextSort = `${key},desc`;\n    } else if (isDesc) {\n      nextSort = undefined;\n    } else {\n      nextSort = `${key},asc`;\n    }\n    const nextPrompt = nextSort\n      ? sortOptions.find((o) => o.property === key && o.value === nextSort)?.prompt\n      : undefined;\n    const currentPrompt = sortOptions.find(\n      (o) => o.property === key && o.value === currentSort,\n    )?.prompt;\n    return nextPrompt ?? currentPrompt;\n  }\n\n  const hasActions = !!(onViewDetails || onEdit || onDelete);\n\n  return (\n    <>\n      <TooltipProvider>\n        <div className=\"rounded-md border overflow-hidden\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                {columns.map((col, i) => (\n                  <TableHead key={col.key} className={cn(i === 0 && \"pl-4\")}>\n                    {col.sortable && onSort ? (\n                      <Tooltip>\n                        <TooltipTrigger asChild>\n                          <Button\n                            variant=\"ghost\"\n                            size=\"sm\"\n                            className=\"-ml-3 h-8\"\n                            onClick={() => onSort(col.key)}\n                          >\n                            {col.header}\n                            {getSortIcon(col.key)}\n                          </Button>\n                        </TooltipTrigger>\n                        {getSortTooltip(col.key) && (\n                          <TooltipContent side=\"bottom\" className=\"max-w-xs\">\n                            {getSortTooltip(col.key)}\n                          </TooltipContent>\n                        )}\n                      </Tooltip>\n                    ) : (\n                      col.header\n                    )}\n                  </TableHead>\n                ))}\n                {hasActions && <TableHead className=\"w-12\" />}\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {rows.length > 0 ? (\n                rows.map((row) => (\n                  <TableRow\n                    key={row.id}\n                    className={cn(onRowClick && \"cursor-pointer hover:bg-muted/50\")}\n                    onClick={() => onRowClick?.(row.id)}\n                  >\n                    {columns.map((col, i) => (\n                      <TableCell key={col.key} className={cn(i === 0 && \"pl-4\")}>\n                        {row.data[col.key] == null ? \"—\" : String(row.data[col.key])}\n                      </TableCell>\n                    ))}\n                    {hasActions && (\n                      <TableCell className=\"text-right\">\n                        <DropdownMenu>\n                          <DropdownMenuTrigger asChild>\n                            <Button\n                              variant=\"ghost\"\n                              size=\"sm\"\n                              className=\"h-8 w-8 p-0\"\n                              onClick={(e) => e.stopPropagation()}\n                            >\n                              <MoreHorizontal className=\"h-4 w-4\" />\n                              <span className=\"sr-only\">Open menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            {onViewDetails && (\n                              <DropdownMenuItem\n                                onClick={(e) => {\n                                  e.stopPropagation();\n                                  onViewDetails(row.id);\n                                }}\n                              >\n                                <Eye className=\"mr-2 h-4 w-4\" />\n                                View details\n                              </DropdownMenuItem>\n                            )}\n                            {onEdit && (\n                              <DropdownMenuItem\n                                onClick={(e) => {\n                                  e.stopPropagation();\n                                  onEdit(row.id);\n                                }}\n                              >\n                                <Pencil className=\"mr-2 h-4 w-4\" />\n                                Edit\n                              </DropdownMenuItem>\n                            )}\n                            {onDelete && (\n                              <>\n                                <DropdownMenuSeparator />\n                                <DropdownMenuItem\n                                  variant=\"destructive\"\n                                  onClick={(e) => {\n                                    e.stopPropagation();\n                                    setDeleteId(row.id);\n                                  }}\n                                >\n                                  <Trash2 className=\"mr-2 h-4 w-4\" />\n                                  Delete\n                                </DropdownMenuItem>\n                              </>\n                            )}\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    )}\n                  </TableRow>\n                ))\n              ) : (\n                <TableRow>\n                  <TableCell colSpan={columns.length + (hasActions ? 1 : 0)} className=\"h-48\">\n                    <div className=\"flex flex-col items-center justify-center gap-3 text-muted-foreground\">\n                      <Inbox className=\"h-10 w-10\" />\n                      <p className=\"text-lg font-medium\">No items found</p>\n                      <Button variant=\"outline\" size=\"sm\" onClick={onCreateClick}>\n                        Add new item to {entityTitle ?? entityName}\n                      </Button>\n                    </div>\n                  </TableCell>\n                </TableRow>\n              )}\n            </TableBody>\n          </Table>\n        </div>\n      </TooltipProvider>\n\n      {onDelete && deleteId && (\n        <AlertDialog\n          open={!!deleteId}\n          onOpenChange={(open) => {\n            if (!open) setDeleteId(null);\n          }}\n        >\n          <AlertDialogContent size=\"sm\">\n            <AlertDialogHeader>\n              <AlertDialogTitle>Delete item</AlertDialogTitle>\n              <AlertDialogDescription>\n                Are you sure you want to delete this {(entityTitle ?? entityName).toLowerCase()}?\n                This action cannot be undone.\n              </AlertDialogDescription>\n            </AlertDialogHeader>\n            <AlertDialogFooter>\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction\n                variant=\"destructive\"\n                onClick={() => {\n                  onDelete(deleteId);\n                  setDeleteId(null);\n                }}\n                disabled={isDeleting}\n              >\n                {isDeleting ? \"Deleting...\" : \"Delete\"}\n              </AlertDialogAction>\n            </AlertDialogFooter>\n          </AlertDialogContent>\n        </AlertDialog>\n      )}\n    </>\n  );\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "src/patterns/data-table/index.ts",
      "content": "export { DataTable } from \"./data-table\";\nexport type { DataTableProps, DataTableColumn, DataTableRow, SortOption } from \"./data-table\";\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}