{
  "name": "sortable-data-table",
  "type": "registry:component",
  "title": "Sortable Data Table",
  "description": "A sortable project table with full-cell sort targets and an active clickable row.",
  "registryDependencies": [
    "@siteplane/base",
    "@siteplane/data-table"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "src/components/patterns/sortable-data-table.tsx",
      "type": "registry:component",
      "target": "components/patterns/sortable-data-table.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport {\n  DataTable,\n  type DataTableColumn,\n} from \"@/components/ui/data-table\";\n\ntype ProjectRow = {\n  budget: number;\n  id: string;\n  project: string;\n  status: \"Paid\" | \"Unpaid\" | \"Pending\" | \"Failed\";\n  team: string;\n};\n\nconst projectRows: ProjectRow[] = [\n  {\n    budget: 12500,\n    id: \"website-redesign\",\n    project: \"Website Redesign\",\n    status: \"Paid\",\n    team: \"Frontend Team\",\n  },\n  {\n    budget: 8750,\n    id: \"mobile-app\",\n    project: \"Mobile App\",\n    status: \"Unpaid\",\n    team: \"Mobile Team\",\n  },\n  {\n    budget: 5200,\n    id: \"api-integration\",\n    project: \"API Integration\",\n    status: \"Pending\",\n    team: \"Backend Team\",\n  },\n  {\n    budget: 3800,\n    id: \"database-migration\",\n    project: \"Database Migration\",\n    status: \"Paid\",\n    team: \"DevOps Team\",\n  },\n  {\n    budget: 7200,\n    id: \"user-dashboard\",\n    project: \"User Dashboard\",\n    status: \"Paid\",\n    team: \"UX Team\",\n  },\n  {\n    budget: 2100,\n    id: \"security-audit\",\n    project: \"Security Audit\",\n    status: \"Failed\",\n    team: \"Security Team\",\n  },\n];\n\nconst budgetFormatter = new Intl.NumberFormat(\"en-US\", {\n  currency: \"USD\",\n  maximumFractionDigits: 0,\n  minimumFractionDigits: 0,\n  style: \"currency\",\n});\n\nconst projectColumns: DataTableColumn<ProjectRow>[] = [\n  {\n    accessor: (row) => row.project,\n    cell: (row) => <span className=\"font-medium\">{row.project}</span>,\n    header: \"Project\",\n    id: \"project\",\n  },\n  {\n    accessor: (row) => row.status,\n    header: \"Status\",\n    id: \"status\",\n  },\n  {\n    accessor: (row) => row.team,\n    header: \"Team\",\n    id: \"team\",\n  },\n  {\n    accessor: (row) => row.budget,\n    align: \"right\",\n    cell: (row) => budgetFormatter.format(row.budget),\n    header: \"Budget\",\n    id: \"budget\",\n  },\n];\n\nexport function SortableDataTable() {\n  const [activeProjectId, setActiveProjectId] = useState(\"website-redesign\");\n\n  return (\n    <div data-recipe=\"sortable-data-table\">\n      <DataTable\n        activeRowId={activeProjectId}\n        columns={projectColumns}\n        data={projectRows}\n        getRowAriaLabel={(row) => `Open ${row.project}`}\n        getRowId={(row) => row.id}\n        onRowClick={(row) => setActiveProjectId(row.id)}\n        sortClickArea=\"cell\"\n        variant=\"card\"\n      />\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "patterns"
  ],
  "docs": "# Sortable Data Table\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nSortable Data Table is a `registry:component` for sortable project data with full-cell sort targets and a keyboard-selectable active row.\n\n## Import\n\n```tsx\nimport { SortableDataTable } from \"@/components/patterns/sortable-data-table\";\n```\n\n## Public API\n\n- Render `SortableDataTable` for the included project-table example.\n- Adapt the row type, data and typed columns after installation while keeping a stable row id.\n- Sortable columns need an accessor. Row selection is controlled by `activeRowId` and `onRowClick`.\n\n## Public Motion\n\n- The recipe adds no sorting or row-selection motion.\n- The table updates immediately and respects the native focus behavior of DataTable.\n\n## Public Accessibility\n\n- Sort buttons expose `aria-sort` through DataTable.\n- Interactive rows are keyboard reachable and need a row-specific accessible label.\n- Keep the active state textual or semantic; do not rely on background color alone.\n\n## Public Agent Guidance\n\n- Install with `pnpm dlx shadcn@4.16.1 add @siteplane/sortable-data-table`.\n- Prefer DataTable columns and accessors over custom table sorting code.\n- Adapt the installed recipe source for project row types, column labels and a row-selection callback; keep the recipe when a project row opens Detail Drawer.\n- Use the lower-level DataTable for non-project data or materially different table mechanics.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/patterns/sortable-data-table)\n\n- [Registry source](https://ui.siteplane.io/r/sortable-data-table.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/patterns/sortable-data-table",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}