{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-14",
  "title": "Numeric pagination",
  "description": "TanStack Table, numbered page buttons with prev / next arrows.",
  "dependencies": [
    "@tanstack/react-table"
  ],
  "registryDependencies": [
    "table",
    "button"
  ],
  "files": [
    {
      "path": "registry/patterns/table/table-14.tsx",
      "content": "'use client'\n\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from '@/components/ui/pagination'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table'\nimport { cn } from '@/lib/utils'\nimport {\n  type ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\n\ntype Product = {\n  sku: string\n  name: string\n  stock: number\n  price: string\n}\n\nconst data: Product[] = Array.from({ length: 28 }, (_, index) => ({\n  sku: `SKU-${(index + 1).toString().padStart(4, '0')}`,\n  name: `Product ${index + 1}`,\n  stock: ((index * 37) % 200) + 1,\n  price: `$${(((index * 13) % 90) + 9).toFixed(2)}`,\n}))\n\nconst columns: ColumnDef<Product>[] = [\n  {\n    accessorKey: 'sku',\n    header: 'SKU',\n    cell: ({ row }) => (\n      <span className=\"font-mono text-xs\">{row.getValue('sku')}</span>\n    ),\n  },\n  {\n    accessorKey: 'name',\n    header: 'Name',\n    cell: ({ row }) => (\n      <span className=\"font-medium\">{row.getValue('name')}</span>\n    ),\n  },\n  {\n    accessorKey: 'stock',\n    header: () => <div className=\"text-right\">Stock</div>,\n    cell: ({ row }) => (\n      <div className=\"text-muted-foreground text-right tabular-nums\">\n        {row.getValue('stock')}\n      </div>\n    ),\n  },\n  {\n    accessorKey: 'price',\n    header: () => <div className=\"text-right\">Price</div>,\n    cell: ({ row }) => (\n      <div className=\"text-right tabular-nums\">{row.getValue('price')}</div>\n    ),\n  },\n]\n\nexport function Table14() {\n  const table = useReactTable({\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    initialState: { pagination: { pageSize: 6 } },\n  })\n\n  const pageIndex = table.getState().pagination.pageIndex\n  const pageCount = table.getPageCount()\n\n  return (\n    <div className=\"flex w-full max-w-xl flex-col gap-3\">\n      <div className=\"overflow-hidden rounded-lg border\">\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                    {flexRender(\n                      header.column.columnDef.header,\n                      header.getContext(),\n                    )}\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>\n      <Pagination>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationPrevious\n              href=\"#\"\n              aria-disabled={!table.getCanPreviousPage()}\n              className={cn(\n                !table.getCanPreviousPage() && 'pointer-events-none opacity-50',\n              )}\n              onClick={(event) => {\n                event.preventDefault()\n                table.previousPage()\n              }}\n            />\n          </PaginationItem>\n          {Array.from({ length: pageCount }, (_, index) => (\n            <PaginationItem key={index}>\n              <PaginationLink\n                href=\"#\"\n                isActive={index === pageIndex}\n                className=\"tabular-nums\"\n                onClick={(event) => {\n                  event.preventDefault()\n                  table.setPageIndex(index)\n                }}\n              >\n                {index + 1}\n              </PaginationLink>\n            </PaginationItem>\n          ))}\n          <PaginationItem>\n            <PaginationNext\n              href=\"#\"\n              aria-disabled={!table.getCanNextPage()}\n              className={cn(\n                !table.getCanNextPage() && 'pointer-events-none opacity-50',\n              )}\n              onClick={(event) => {\n                event.preventDefault()\n                table.nextPage()\n              }}\n            />\n          </PaginationItem>\n        </PaginationContent>\n      </Pagination>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/table/table-14.tsx"
    }
  ],
  "type": "registry:block"
}