{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table",
  "title": "Data Table",
  "description": "Sortable, filterable table with pagination on the glass Table.",
  "dependencies": [
    "@phosphor-icons/react",
    "@tanstack/react-table"
  ],
  "registryDependencies": [
    "@sistine/badge",
    "@sistine/button",
    "@sistine/input",
    "@sistine/table"
  ],
  "files": [
    {
      "path": "components/blocks/data-table.tsx",
      "content": "\"use client\";\n\nimport { ArrowsDownUpIcon, CaretDownIcon, CaretUpIcon, MagnifyingGlassIcon } from \"@phosphor-icons/react\";\nimport {\n  type Column,\n  type ColumnDef,\n  type ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport * as React from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"@/components/ui/table\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Member {\n  id: string;\n  name: string;\n  email: string;\n  role: string;\n  status: \"active\" | \"pending\" | \"inactive\";\n  contributions: number;\n}\n\nconst data: Member[] = [\n  {\n    id: \"1\",\n    name: \"Ada Lovelace\",\n    email: \"ada@sistine.dev\",\n    role: \"Owner\",\n    status: \"active\",\n    contributions: 312,\n  },\n  {\n    id: \"2\",\n    name: \"Alan Turing\",\n    email: \"alan@sistine.dev\",\n    role: \"Admin\",\n    status: \"active\",\n    contributions: 287,\n  },\n  {\n    id: \"3\",\n    name: \"Grace Hopper\",\n    email: \"grace@sistine.dev\",\n    role: \"Maintainer\",\n    status: \"active\",\n    contributions: 244,\n  },\n  {\n    id: \"4\",\n    name: \"Katherine Johnson\",\n    email: \"katherine@sistine.dev\",\n    role: \"Contributor\",\n    status: \"pending\",\n    contributions: 98,\n  },\n  {\n    id: \"5\",\n    name: \"Linus Torvalds\",\n    email: \"linus@sistine.dev\",\n    role: \"Maintainer\",\n    status: \"active\",\n    contributions: 401,\n  },\n  {\n    id: \"6\",\n    name: \"Margaret Hamilton\",\n    email: \"margaret@sistine.dev\",\n    role: \"Admin\",\n    status: \"active\",\n    contributions: 356,\n  },\n  {\n    id: \"7\",\n    name: \"Dennis Ritchie\",\n    email: \"dennis@sistine.dev\",\n    role: \"Contributor\",\n    status: \"inactive\",\n    contributions: 41,\n  },\n  {\n    id: \"8\",\n    name: \"Barbara Liskov\",\n    email: \"barbara@sistine.dev\",\n    role: \"Maintainer\",\n    status: \"active\",\n    contributions: 198,\n  },\n  {\n    id: \"9\",\n    name: \"Tim Berners-Lee\",\n    email: \"tim@sistine.dev\",\n    role: \"Contributor\",\n    status: \"pending\",\n    contributions: 73,\n  },\n  {\n    id: \"10\",\n    name: \"Donald Knuth\",\n    email: \"don@sistine.dev\",\n    role: \"Contributor\",\n    status: \"active\",\n    contributions: 165,\n  },\n  {\n    id: \"11\",\n    name: \"Edsger Dijkstra\",\n    email: \"edsger@sistine.dev\",\n    role: \"Contributor\",\n    status: \"inactive\",\n    contributions: 29,\n  },\n  {\n    id: \"12\",\n    name: \"John Carmack\",\n    email: \"john@sistine.dev\",\n    role: \"Admin\",\n    status: \"active\",\n    contributions: 220,\n  },\n];\n\nconst statusStyles: Record<Member[\"status\"], string> = {\n  active: \"border-green-500/40 text-green-600 dark:text-green-400\",\n  pending: \"border-yellow-500/40 text-yellow-600 dark:text-yellow-400\",\n  inactive: \"border-[var(--glass-border)] text-muted-foreground\",\n};\n\nfunction SortHeader({ column, children, className }: { column: Column<Member, unknown>; children: React.ReactNode; className?: string }) {\n  const sorted = column.getIsSorted();\n  return (\n    <button\n      type=\"button\"\n      onClick={() => column.toggleSorting(sorted === \"asc\")}\n      className={cn(\"inline-flex items-center gap-1 transition-colors hover:text-foreground\", className)}\n    >\n      {children}\n      {sorted === \"asc\" ? (\n        <CaretUpIcon className=\"h-3.5 w-3.5\" />\n      ) : sorted === \"desc\" ? (\n        <CaretDownIcon className=\"h-3.5 w-3.5\" />\n      ) : (\n        <ArrowsDownUpIcon className=\"h-3.5 w-3.5 opacity-40\" />\n      )}\n    </button>\n  );\n}\n\nconst columns: ColumnDef<Member>[] = [\n  {\n    accessorKey: \"name\",\n    header: ({ column }) => <SortHeader column={column}>Name</SortHeader>,\n    cell: ({ row }) => <span className=\"font-medium text-foreground\">{row.getValue(\"name\")}</span>,\n  },\n  {\n    accessorKey: \"email\",\n    header: \"Email\",\n    cell: ({ row }) => <span className=\"text-muted-foreground\">{row.getValue(\"email\")}</span>,\n  },\n  {\n    accessorKey: \"role\",\n    header: \"Role\",\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => {\n      const status = row.getValue<Member[\"status\"]>(\"status\");\n      return <Badge className={cn(\"capitalize\", statusStyles[status])}>{status}</Badge>;\n    },\n  },\n  {\n    accessorKey: \"contributions\",\n    header: ({ column }) => (\n      <SortHeader column={column} className=\"ml-auto\">\n        Contributions\n      </SortHeader>\n    ),\n    cell: ({ row }) => <div className=\"text-right font-mono tabular-nums text-foreground\">{row.getValue<number>(\"contributions\")}</div>,\n  },\n];\n\nexport function DataTableBlock() {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnFilters,\n    },\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 6,\n      },\n    },\n  });\n\n  return (\n    <div className=\"space-y-4 p-6\">\n      <div>\n        <h2 className=\"text-3xl font-bold text-foreground\">Members</h2>\n        <p className=\"text-muted-foreground\">A sortable, filterable data table built on the glass Table primitive.</p>\n      </div>\n\n      <div className=\"relative max-w-sm\">\n        <MagnifyingGlassIcon className=\"absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\" />\n        <Input\n          placeholder=\"Filter by name…\"\n          value={(table.getColumn(\"name\")?.getFilterValue() as string) ?? \"\"}\n          onChange={(event) => table.getColumn(\"name\")?.setFilterValue(event.target.value)}\n          className=\"pl-9\"\n        />\n      </div>\n\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => (\n                <TableHead key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</TableHead>\n              ))}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow key={row.id}>\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell colSpan={columns.length} className=\"h-24 text-center text-muted-foreground\">\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n\n      <div className=\"flex items-center justify-between\">\n        <p className=\"text-sm text-muted-foreground\">\n          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()} · {table.getFilteredRowModel().rows.length} members\n        </p>\n        <div className=\"flex gap-2\">\n          <Button size=\"sm\" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>\n            Previous\n          </Button>\n          <Button size=\"sm\" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>\n            Next\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/data-table.tsx"
    }
  ],
  "type": "registry:block"
}