{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-13",
  "title": "Pagination",
  "description": "TanStack Table, prev / next controls with a rows-per-page select.",
  "dependencies": [
    "@tanstack/react-table"
  ],
  "registryDependencies": [
    "table",
    "button",
    "select"
  ],
  "files": [
    {
      "path": "registry/patterns/table/table-13.tsx",
      "content": "'use client'\n\nimport { Field, FieldLabel } from '@/components/ui/field'\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationNext,\n  PaginationPrevious,\n} from '@/components/ui/pagination'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select'\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 User = {\n  id: number\n  name: string\n  role: string\n  team: string\n}\n\nconst teams = ['Platform', 'Growth', 'Design', 'Support']\nconst roles = ['Engineer', 'Manager', 'Designer', 'Analyst']\n\nconst data: User[] = Array.from({ length: 23 }, (_, index) => ({\n  id: index + 1,\n  name: `Member ${index + 1}`,\n  role: roles[index % roles.length],\n  team: teams[index % teams.length],\n}))\n\nconst columns: ColumnDef<User>[] = [\n  {\n    accessorKey: 'name',\n    header: 'Name',\n    cell: ({ row }) => (\n      <span className=\"font-medium\">{row.getValue('name')}</span>\n    ),\n  },\n  { accessorKey: 'role', header: 'Role' },\n  {\n    accessorKey: 'team',\n    header: () => <div className=\"text-right\">Team</div>,\n    cell: ({ row }) => (\n      <div className=\"text-muted-foreground text-right\">\n        {row.getValue('team')}\n      </div>\n    ),\n  },\n]\n\nexport function Table13() {\n  const table = useReactTable({\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    initialState: { pagination: { pageSize: 5 } },\n  })\n\n  const { pageIndex, pageSize } = table.getState().pagination\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      <div className=\"flex items-center justify-between gap-4\">\n        <Field orientation=\"horizontal\" className=\"w-fit\">\n          <FieldLabel htmlFor=\"table-13-rows-per-page\">Rows per page</FieldLabel>\n          <Select\n            value={`${pageSize}`}\n            onValueChange={(value) => table.setPageSize(Number(value))}\n          >\n            <SelectTrigger size=\"sm\" className=\"w-16\" id=\"table-13-rows-per-page\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectGroup>\n                {[5, 10, 20].map((size) => (\n                  <SelectItem key={size} value={`${size}`}>\n                    {size}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <div className=\"flex items-center gap-4\">\n          <span className=\"text-muted-foreground text-sm\">\n            Page {pageIndex + 1} of {table.getPageCount()}\n          </span>\n          <Pagination className=\"mx-0 w-auto\">\n            <PaginationContent>\n              <PaginationItem>\n                <PaginationPrevious\n                  href=\"#\"\n                  aria-disabled={!table.getCanPreviousPage()}\n                  className={cn(\n                    !table.getCanPreviousPage() &&\n                      'pointer-events-none opacity-50',\n                  )}\n                  onClick={(event) => {\n                    event.preventDefault()\n                    table.previousPage()\n                  }}\n                />\n              </PaginationItem>\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      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/table/table-13.tsx"
    }
  ],
  "type": "registry:block"
}