{"_id":"@augmentmy/react-laravel-pagination","_rev":"4-b7c92aabf0b5a9e52f241e879dbc5f5b","name":"@augmentmy/react-laravel-pagination","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@augmentmy/react-laravel-pagination","version":"0.1.0","license":"MIT","_id":"@augmentmy/react-laravel-pagination@0.1.0","maintainers":[{"name":"joshuajs343","email":"joshuajs92@gmail.com"}],"dist":{"shasum":"b95eb034f9bc72ca8f649bfedf33c6e4e20dfc87","tarball":"https://registry.npmjs.org/@augmentmy/react-laravel-pagination/-/react-laravel-pagination-0.1.0.tgz","fileCount":8,"integrity":"sha512-gzJGRXnRZUJZVcuI/cWFNjuuOd80lFq0nEsfDSAhgZCZAj8+leg6PbFuz+wCtWd75d2WFfITrXsTYtO3sU812g==","signatures":[{"sig":"MEQCIAoYnVBuoEwoYZ7445t6i3wKsmS3Gv26/Cz0BJ7xXjTOAiBFeqkJKh/huoeg/wv0QWlpqWAcWgPuMhsQnVlDVZGGdA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21402},"main":"dist/index.cjs","types":"dist/index.d.ts","module":"dist/index.mjs","scripts":{"test":"vitest","build":"tsup src/index.ts --dts --format cjs,esm","clean":"rm -rf dist"},"_npmUser":{"name":"joshuajs343","email":"joshuajs92@gmail.com"},"_npmVersion":"10.8.2","description":"React hooks and table components for Laravel-style paginated APIs","directories":{},"sideEffects":false,"_nodeVersion":"20.19.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","axios":"^1.0.0","react":"^18.0.0","vitest":"^2.0.0","react-dom":"^18.0.0","typescript":"^5.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@tanstack/react-table":"^8.0.0"},"peerDependencies":{"axios":"^1.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@tanstack/react-table":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-laravel-pagination_0.1.0_1763628403547_0.6306436652341241","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@augmentmy/react-laravel-pagination","version":"0.1.1","license":"MIT","_id":"@augmentmy/react-laravel-pagination@0.1.1","maintainers":[{"name":"joshuajs343","email":"joshuajs92@gmail.com"}],"dist":{"shasum":"ded70ea0cea3645ad6fbe5e0c25193ddd3e4433f","tarball":"https://registry.npmjs.org/@augmentmy/react-laravel-pagination/-/react-laravel-pagination-0.1.1.tgz","fileCount":8,"integrity":"sha512-l3n0IVFUBvLscUi5Py2yTEVfjSQsPgHt6Jo9jlaUwiuqBYNcLWmEdDRgvSSV92ntiXBbhK97RIL9H0nVXj2Dyw==","signatures":[{"sig":"MEYCIQDmsHrHDQB3sVaTZx9sHkXijhw4OVAcDxOhiKB120sQ0QIhAIMvuLBrYKdlOiD1d1xD/CeTU0PwPOEDbuVNRJw6gBC8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21417},"main":"dist/index.cjs","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"7fa0e3a158587e92c9bc8ca2cd0f142a52f8b823","scripts":{"test":"vitest","build":"tsup src/index.ts --dts --format cjs,esm","clean":"rm -rf dist"},"_npmUser":{"name":"joshuajs343","email":"joshuajs92@gmail.com"},"_npmVersion":"10.8.2","description":"React hooks and table components for Laravel-style paginated APIs","directories":{},"sideEffects":false,"_nodeVersion":"20.19.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","axios":"^1.0.0","react":"^18.0.0","vitest":"^2.0.0","react-dom":"^18.0.0","typescript":"^5.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@tanstack/react-table":"^8.0.0"},"peerDependencies":{"axios":"^1.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@tanstack/react-table":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-laravel-pagination_0.1.1_1763628613731_0.8069150192664778","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@augmentmy/react-laravel-pagination","version":"0.1.2","license":"MIT","_id":"@augmentmy/react-laravel-pagination@0.1.2","maintainers":[{"name":"joshuajs343","email":"joshuajs92@gmail.com"}],"dist":{"shasum":"23bd648716b0e76d070dba3caf4222d9b61b20f5","tarball":"https://registry.npmjs.org/@augmentmy/react-laravel-pagination/-/react-laravel-pagination-0.1.2.tgz","fileCount":8,"integrity":"sha512-rlRxxfDOm7muLM2nzYUVJi/Qf8m6OTh81A5cs6HcAFSyx/RN1RplhkdYvKbFdKVS3lhYEdqsd2gBCduuaBve9A==","signatures":[{"sig":"MEQCIBDYcze+aRmnXnhBfOvFwzzfG4BVW2gRmM0f1grP7zcOAiAY0LNoBYShLNx+zs9WGjDT621DF8bAtVZa26MkZeZZ7g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":88419},"main":"dist/index.cjs","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"f52f59d061544c962bfd5cd2d19eaaf6d598a5ae","scripts":{"test":"vitest","build":"tsup","clean":"rm -rf dist","build-old":"tsup src/index.ts --dts --format cjs,esm"},"_npmUser":{"name":"joshuajs343","email":"joshuajs92@gmail.com"},"_npmVersion":"10.8.2","description":"React hooks and table components for Laravel-style paginated APIs","directories":{},"sideEffects":false,"_nodeVersion":"20.19.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","axios":"^1.0.0","react":"^18.0.0","vitest":"^2.0.0","react-dom":"^18.0.0","typescript":"^5.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@tanstack/react-table":"^8.0.0"},"peerDependencies":{"axios":"^1.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@tanstack/react-table":"^8.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-laravel-pagination_0.1.2_1764216897500_0.6005739449063252","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@augmentmy/react-laravel-pagination","version":"0.1.3","description":"React hooks and table components for Laravel-style paginated APIs","license":"MIT","main":"dist/index.cjs","module":"dist/index.mjs","types":"dist/index.d.ts","sideEffects":false,"scripts":{"build":"tsup","build-old":"tsup src/index.ts --dts --format cjs,esm","test":"vitest","clean":"rm -rf dist"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","@tanstack/react-table":"^8.0.0","axios":"^1.0.0"},"devDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@tanstack/react-table":"^8.0.0","axios":"^1.0.0","typescript":"^5.0.0","tsup":"^8.0.0","vitest":"^2.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0"},"publishConfig":{"access":"public"},"_id":"@augmentmy/react-laravel-pagination@0.1.3","gitHead":"75a60da6f1b92558f7e144d5c4d294cc95808101","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-wpunQ6IYx0Bt7EAHatbdsskkacaVBVo4CGua7Ubwu+FeawE4rJf3o4K4COCp0Oc6jtvGw2tp+w/hoMBgHwU3Tw==","shasum":"40376c7f6b6310aee47dd6865eec7e1b703c29bb","tarball":"https://registry.npmjs.org/@augmentmy/react-laravel-pagination/-/react-laravel-pagination-0.1.3.tgz","fileCount":8,"unpackedSize":88998,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDZj4nMoNl9OUzqA8eyBQAEJLlarFkbASqdcTO3LeR9PQIhAPD1tJvSxdw4HH+t1tZ0v/IVAIFRebaGzypy0OlT30Zo"}]},"_npmUser":{"name":"joshuajs343","email":"joshuajs92@gmail.com"},"directories":{},"maintainers":[{"name":"joshuajs343","email":"joshuajs92@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-laravel-pagination_0.1.3_1764221686553_0.1961562142231008"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-20T08:46:43.428Z","modified":"2025-11-27T05:34:47.004Z","0.1.0":"2025-11-20T08:46:43.746Z","0.1.1":"2025-11-20T08:50:13.981Z","0.1.2":"2025-11-27T04:14:57.676Z","0.1.3":"2025-11-27T05:34:46.799Z"},"license":"MIT","description":"React hooks and table components for Laravel-style paginated APIs","maintainers":[{"name":"joshuajs343","email":"joshuajs92@gmail.com"}],"readme":"# @augmentmy/react-laravel-pagination\n\nReact hooks and table components for **Laravel-style paginated APIs**.\n\nThis library is built to work with a backend that returns data in the shape:\n\n```json\n{\n  \"data\": [...],\n  \"meta\": {\n    \"current_page\": 1,\n    \"from\": 1,\n    \"to\": 25,\n    \"per_page\": 25,\n    \"last_page\": 6,\n    \"total\": 143,\n    \"path\": \"https://api.example.com/api/users\",\n    \"first_page_url\": \"...\",\n    \"last_page_url\": \"...\",\n    \"next_page_url\": \"...\",\n    \"prev_page_url\": null,\n    \"has_more_pages\": true,\n    \"on_first_page\": true\n  }\n}\n```\n\nwhich matches the JSON produced by the sibling Laravel package (https://packagist.org/packages/augmentmy/laravel-query-pagination). \n\nIf you use that package, you may add it to laravel via \n```bash \ncomposer require augmentmy/laravel-query-pagination\n```\n\nYou get:\n\n- `usePagination` — a hook that talks to the Laravel API and manages page/search/sort/filter.\n- `PaginatedTable` — a **UI-agnostic** React table component using TanStack React Table, with pluggable render components (HTML by default, Chakra-ready).\n\n---\n\n## Installation\n\n```bash\nnpm install @augmentmy/react-laravel-pagination\n# or\nyarn add @augmentmy/react-laravel-pagination\n# or\npnpm add @augmentmy/react-laravel-pagination\n```\n\n### Peer dependencies\n\nYou must also have these installed in your app (they are declared as `peerDependencies`):\n\n- `react`\n- `react-dom`\n- `@tanstack/react-table` (v8)\n- `axios`\n\nExample:\n\n```bash\nnpm install react react-dom @tanstack/react-table axios\n```\n\nThis package assumes you already configure `axios` globally in your Laravel frontend (CSRF token, base URL, auth, etc.). The library will use that same axios instance.\n\n---\n\n## Backend expectations (Laravel or otherwise)\n\nYour API endpoint should accept the following query parameters:\n\n- `page` — integer, 1-based\n- `per_page` — integer\n- `search` — string\n- `filters[field]` — object mapping fields to values\n- `sort_by` — string, field name\n- `sort_dir` — `\"asc\"` or `\"desc\"`\n\nAnd respond with:\n\n```json\n{\n  \"data\": [...],\n  \"meta\": {\n    \"current_page\": 1,\n    \"from\": 1,\n    \"to\": 25,\n    \"per_page\": 25,\n    \"last_page\": 6,\n    \"total\": 143,\n    \"path\": \"...\",\n    \"first_page_url\": \"...\",\n    \"last_page_url\": \"...\",\n    \"next_page_url\": \"...\",\n    \"prev_page_url\": null,\n    \"has_more_pages\": true,\n    \"on_first_page\": true\n  }\n}\n```\n\nFor example, using the PHP package:\n\n```php\nreturn PaginatedQuery::make(\n    baseQuery: User::query(),\n    searchable: ['name', 'email'],\n    filterable: ['role', 'status'],\n    sortable: ['name', 'created_at'],\n    defaultSort: 'created_at',\n    defaultSortDir: 'desc',\n)->toResponse($request);\n```\n\n---\n\n## `usePagination` hook\n\n### Basic usage\n\n```tsx\nimport { usePagination } from \"@augmentmy/react-laravel-pagination\";\n\ntype User = {\n  id: number;\n  name: string;\n  email: string;\n  role: string;\n};\n\nfunction UsersList() {\n  const {\n    data,\n    meta,\n    isLoading,\n    error,\n    page,\n    pageSize,\n    sortBy,\n    sortDir,\n    search,\n    filters,\n    setPage,\n    setPageSize,\n    setSortBy,\n    setSortDir,\n    setSearch,\n    setFilters,\n    nextPage,\n    prevPage,\n    reset,\n  } = usePagination<User>({\n    endpoint: \"/api/users\", // relative to your axios baseURL\n    initialPage: 1,\n    initialPageSize: 25,\n    initialSortBy: \"created_at\",\n    initialSortDir: \"desc\",\n  });\n\n  if (isLoading) return <div>Loading…</div>;\n  if (error) return <div>Error: {error.message}</div>;\n\n  return (\n    <div>\n      <input\n        value={search}\n        onChange={(e) => setSearch(e.target.value)}\n        placeholder=\"Search users...\"\n      />\n\n      <ul>\n        {data.map((user) => (\n          <li key={user.id}>\n            {user.name} – {user.email}\n          </li>\n        ))}\n      </ul>\n\n      <button onClick={prevPage} disabled={page <= 1}>\n        Prev\n      </button>\n      <span>\n        Page {page} of {meta?.last_page ?? 1}\n      </span>\n      <button onClick={nextPage} disabled={!meta?.has_more_pages}>\n        Next\n      </button>\n    </div>\n  );\n}\n```\n\n### Hook options\n\n```ts\ntype UsePaginationOptions<TData, TFilters = Record<string, unknown>> = {\n  endpoint: string;\n  baseUrl?: string;\n\n  initialPage?: number;\n  initialPageSize?: number;\n  initialSortBy?: string;\n  initialSortDir?: \"asc\" | \"desc\";\n  initialSearch?: string;\n  initialFilters?: TFilters;\n\n  staticParams?: Record<string, unknown>;\n\n  fetcher?: (\n    url: string,\n    params: Record<string, unknown>\n  ) => Promise<LaravelPaginatedResponse<TData>>;\n};\n```\n\nIf you don’t provide `fetcher`, a default `axios.get(url, { params, withCredentials: true })` is used.\n\n### Returned values\n\n```ts\ntype UsePaginationResult<TData, TFilters> = {\n  data: TData[];\n  meta: LaravelPaginationMeta | null;\n\n  isLoading: boolean;\n  error: Error | null;\n\n  page: number;\n  pageSize: number;\n  sortBy?: string;\n  sortDir: \"asc\" | \"desc\";\n  search: string;\n  filters: TFilters;\n\n  setPage(page: number): void;\n  setPageSize(size: number): void;\n  setSortBy(field?: string): void;\n  setSortDir(dir: \"asc\" | \"desc\"): void;\n  setSearch(value: string): void;\n  setFilters(\n    update: TFilters | ((prev: TFilters) => TFilters)\n  ): void;\n\n  nextPage(): void;\n  prevPage(): void;\n  reset(): void;\n};\n```\n\n---\n\n## `PaginatedTable` component\n\nA generic table component that:\n\n- Uses `usePagination` under the hood.\n- Uses TanStack React Table for row/column logic.\n- Is **UI-agnostic** — by default uses plain HTML, but you can inject Chakra (or any other) components.\n\n### Basic example (HTML default)\n\n```tsx\nimport {\n  PaginatedTable,\n} from \"@augmentmy/react-laravel-pagination\";\nimport type { ColumnDef } from \"@tanstack/react-table\";\n\ntype User = {\n  id: number;\n  name: string;\n  email: string;\n  role: string;\n};\n\nconst columns: ColumnDef<User>[] = [\n  { accessorKey: \"name\", header: \"Name\" },\n  { accessorKey: \"email\", header: \"Email\" },\n  { accessorKey: \"role\", header: \"Role\" },\n];\n\nexport function UsersTable() {\n  return (\n    <PaginatedTable<User>\n      endpoint=\"/api/users\"\n      columns={columns}\n      sortableColumns={[\"name\", \"email\", \"role\", \"created_at\"]}\n    />\n  );\n}\n```\n\nThis gives you:\n\n- Search input\n- Page size selector\n- Loading/error/empty states\n- Clickable headers for server-side sorting\n- Pagination controls\n\n### Props\n\n```ts\ntype PaginatedTableProps<TData, TFilters> = {\n  endpoint: string;\n  baseUrl?: string;\n  columns: ColumnDef<TData, any>[];\n\n  initialPage?: number;\n  initialPageSize?: number;\n  initialSortBy?: string;\n  initialSortDir?: \"asc\" | \"desc\";\n  initialSearch?: string;\n  initialFilters?: TFilters;\n  staticParams?: Record<string, unknown>;\n  fetcher?: UsePaginationOptions<TData, TFilters>[\"fetcher\"];\n\n  sortableColumns?: string[]; // which fields your backend allows for `sort_by`\n\n  components?: Partial<DefaultTableComponents>;\n\n  renderToolbar?: (args: {\n    search: string;\n    setSearch: (value: string) => void;\n    filters: TFilters;\n    setFilters: (\n      update: TFilters | ((prev: TFilters) => TFilters)\n    ) => void;\n  }) => React.ReactNode;\n\n  renderCell?: (info: {\n    row: any;\n    column: any;\n    getValue: () => unknown;\n  }) => React.ReactNode;\n};\n```\n\n`sortableColumns` should match the `sort_by` keys your Laravel API expects (e.g. `['name', 'email', 'created_at']`).\n\n---\n\n## Customizing UI with Chakra UI\n\nThe library ships with default HTML components, but you can plug in Chakra components via the `components` prop.\n\n```tsx\nimport {\n  PaginatedTable,\n} from \"@augmentmy/react-laravel-pagination\";\nimport { ColumnDef } from \"@tanstack/react-table\";\nimport {\n  Table as CTable,\n  Thead as CThead,\n  Tbody as CTbody,\n  Tr as CTr,\n  Th as CTh,\n  Td as CTd,\n  Button as CButton,\n  Input as CInput,\n  Select as CSelect,\n  Spinner as CSpinner,\n  Flex,\n  Text,\n} from \"@chakra-ui/react\";\n\ntype User = {\n  id: number;\n  name: string;\n  email: string;\n  role: string;\n};\n\nconst columns: ColumnDef<User>[] = [\n  { accessorKey: \"name\", header: \"Name\" },\n  { accessorKey: \"email\", header: \"Email\" },\n  { accessorKey: \"role\", header: \"Role\" },\n];\n\nexport function UsersTableChakra() {\n  return (\n    <PaginatedTable<User>\n      endpoint=\"/api/users\"\n      columns={columns}\n      sortableColumns={[\"name\", \"email\", \"role\", \"created_at\"]}\n      components={{\n        Table: (props) => (\n          <CTable variant=\"striped\" size=\"sm\" {...props} />\n        ),\n        Thead: CThead,\n        Tbody: CTbody,\n        Tr: CTr,\n        Th: CTh,\n        Td: CTd,\n        PaginationWrapper: (props) => (\n          <Flex mt={4} justify=\"space-between\" align=\"center\" {...props} />\n        ),\n        Button: (props) => <CButton size=\"sm\" {...props} />,\n        Input: (props) => <CInput size=\"sm\" {...props} />,\n        Select: (props) => <CSelect size=\"sm\" {...props} />,\n        Spinner: CSpinner,\n        EmptyState: () => <Text>No users found.</Text>,\n        ErrorState: ({ error }) => (\n          <Text color=\"red.500\">{error.message}</Text>\n        ),\n      }}\n    />\n  );\n}\n```\n\nYou can also override `renderToolbar` to build a completely custom header (filters, bulk actions, etc.).\n\n---\n\n## Types\n\nUseful exports:\n\n```ts\nimport type {\n  LaravelPaginatedResponse,\n  LaravelPaginationMeta,\n  FiltersRecord,\n  UsePaginationOptions,\n  UsePaginationResult,\n} from \"@augmentmy/react-laravel-pagination\";\n```\n\nThese mirror the backend pagination contract and the hook’s shape.\n\n---\n\n## Development\n\n```bash\n# install deps\nnpm install\n\n# build\nnpm run build\n\n# test (if you add tests)\nnpm test\n```\n\n---\n\n## License\n\nMIT.\n","readmeFilename":"README.md"}