{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table",
  "title": "Data table",
  "description": "TanStack Table example with filter, sort, and pagination.",
  "dependencies": [
    "@tanstack/react-table@^8.21.3"
  ],
  "registryDependencies": [
    "https://components.exe.xyz/r/button.json",
    "https://components.exe.xyz/r/input.json",
    "https://components.exe.xyz/r/table.json"
  ],
  "files": [
    {
      "path": "src/demos/data-table.tsx",
      "content": "import { useMemo, useState } from \"react\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport type { ColumnDef, SortingState } from \"@tanstack/react-table\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Row = {\n  name: string\n  region: string\n  status: string\n  amount: number\n}\n\nconst data: Row[] = [\n  { name: \"Ada Lovelace\", region: \"EU\", status: \"shipped\", amount: 240 },\n  { name: \"Alan Turing\", region: \"UK\", status: \"queued\", amount: 80 },\n  { name: \"Grace Hopper\", region: \"US\", status: \"failed\", amount: 12 },\n  { name: \"Katherine Johnson\", region: \"US\", status: \"shipped\", amount: 640 },\n  { name: \"Donald Knuth\", region: \"US\", status: \"queued\", amount: 96 },\n]\n\nexport function DataTableDemo() {\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n\n  const columns = useMemo<ColumnDef<Row>[]>(\n    () => [\n      { accessorKey: \"name\", header: \"Customer\" },\n      { accessorKey: \"region\", header: \"Region\" },\n      { accessorKey: \"status\", header: \"Status\" },\n      {\n        accessorKey: \"amount\",\n        header: \"Amount\",\n        cell: ({ getValue }) => (\n          <span className=\"font-mono\">${String(getValue())}</span>\n        ),\n      },\n    ],\n    []\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: { sorting, globalFilter },\n    onSortingChange: setSorting,\n    onGlobalFilterChange: setGlobalFilter,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n  })\n\n  return (\n    <div className=\"flex w-full max-w-2xl flex-col gap-3\">\n      <Input\n        value={globalFilter}\n        onChange={(event) => setGlobalFilter(event.target.value)}\n        placeholder=\"Filter customers\"\n        className=\"max-w-xs\"\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}>\n                  <button\n                    type=\"button\"\n                    className=\"hover:text-foreground\"\n                    onClick={header.column.getToggleSortingHandler()}\n                  >\n                    {flexRender(\n                      header.column.columnDef.header,\n                      header.getContext()\n                    )}\n                  </button>\n                </TableHead>\n              ))}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows.map((row) => (\n            <TableRow key={row.id}>\n              {row.getVisibleCells().map((cell) => (\n                <TableCell key={cell.id}>\n                  {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                </TableCell>\n              ))}\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n      <div className=\"flex gap-2\">\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          onClick={() => table.previousPage()}\n          disabled={!table.getCanPreviousPage()}\n        >\n          Previous\n        </Button>\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          onClick={() => table.nextPage()}\n          disabled={!table.getCanNextPage()}\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}