{"_id":"@alemian95/laraveldatatable-react","_rev":"4-f31c8821e2667945caf641f2d7fb1da6","name":"@alemian95/laraveldatatable-react","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1":{"name":"@alemian95/laraveldatatable-react","version":"0.0.1","license":"MIT","_id":"@alemian95/laraveldatatable-react@0.0.1","maintainers":[{"name":"drchicco59","email":"alessandromian95@gmail.com"}],"homepage":"https://github.com/alemian95/LaravelDatatable/tree/main/react#readme","bugs":{"url":"https://github.com/alemian95/LaravelDatatable/issues"},"dist":{"shasum":"3e36fa4375b52bec37281585b37ad7b59d0b3522","tarball":"https://registry.npmjs.org/@alemian95/laraveldatatable-react/-/laraveldatatable-react-0.0.1.tgz","fileCount":5,"integrity":"sha512-NwqyWB/nGPFCTLB6Jw5s+nejEs/NFIX323O+wpD/zgRgvva5kJxM1wP/SpfWp8Okzi/Uo/JKvAYzZCdIGT46mQ==","signatures":[{"sig":"MEYCIQCWv45+fjhGT/68/Al/W4ldHriFPzJ7+iFQ/KOEJslYSQIhALMvKkx8AKdY5mjPhxhQMHJhPL8zFi6XJPuVia75b9S5","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":81220},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"7aefad683ab472c15d4f8fa0200141e00c43ab75","scripts":{"test":"vitest run","build":"tsup","typecheck":"tsc --noEmit","test:watch":"vitest","prepublishOnly":"npm run build"},"_npmUser":{"name":"drchicco59","email":"alessandromian95@gmail.com"},"repository":{"url":"git+https://github.com/alemian95/LaravelDatatable.git","type":"git","directory":"react"},"_npmVersion":"10.9.0","description":"React datatable for the alemian95/laraveldatatable Laravel package.","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","dependencies":{"clsx":"^2","@tanstack/react-table":"^8","@radix-ui/react-dialog":"^1","@radix-ui/react-select":"^2","@radix-ui/react-checkbox":"^1","@radix-ui/react-dropdown-menu":"^2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8","jsdom":"^25","react":"^18","vitest":"^2","react-dom":"^18","typescript":"^5","@types/react":"^18","@types/react-dom":"^18","@tanstack/react-query":"^5","@testing-library/react":"^16","@testing-library/user-event":"^14"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19","tailwindcss":"^3 || ^4","@tanstack/react-query":"^5"},"_npmOperationalInternal":{"tmp":"tmp/laraveldatatable-react_0.0.1_1783005973655_0.9044089467340581","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@alemian95/laraveldatatable-react","version":"0.0.2","license":"MIT","_id":"@alemian95/laraveldatatable-react@0.0.2","maintainers":[{"name":"drchicco59","email":"alessandromian95@gmail.com"}],"homepage":"https://github.com/alemian95/LaravelDatatable/tree/main/react#readme","bugs":{"url":"https://github.com/alemian95/LaravelDatatable/issues"},"dist":{"shasum":"94ec90b23336bc4dc82ab6244fb6c53b5bacc635","tarball":"https://registry.npmjs.org/@alemian95/laraveldatatable-react/-/laraveldatatable-react-0.0.2.tgz","fileCount":5,"integrity":"sha512-KS49ZF6+YD0QFsk+HRXBXivRGr6pG+z8Nbtu48J9R3vGzxJmEv13i7LcgAC1CqM3Aef1ZqVuNUUJ+ms0FnRrmw==","signatures":[{"sig":"MEUCIAXEJkTTZUoWUcTbUxEh8keI8PNNSVAupJ3XzsxERlUoAiEAi29KUU7piWogSEGybK1/P+/ZkfPJgv9zwzjy5rGnWlQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":82699},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"5774ce6b6acf1ddf8dc93be6aa3d5ed28b92e179","scripts":{"test":"vitest run","build":"tsup","typecheck":"tsc --noEmit","test:watch":"vitest","prepublishOnly":"npm run build"},"_npmUser":{"name":"drchicco59","email":"alessandromian95@gmail.com"},"repository":{"url":"git+https://github.com/alemian95/LaravelDatatable.git","type":"git","directory":"react"},"_npmVersion":"10.9.0","description":"React datatable for the alemian95/laraveldatatable Laravel package.","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","dependencies":{"clsx":"^2","@tanstack/react-query":"^5","@tanstack/react-table":"^8","@radix-ui/react-dialog":"^1","@radix-ui/react-select":"^2","@radix-ui/react-checkbox":"^1","@radix-ui/react-dropdown-menu":"^2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8","jsdom":"^25","react":"^18","vitest":"^2","react-dom":"^18","typescript":"^5","@types/react":"^18","@types/react-dom":"^18","@tanstack/react-query":"^5","@testing-library/react":"^16","@testing-library/user-event":"^14"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19","tailwindcss":"^3 || ^4"},"_npmOperationalInternal":{"tmp":"tmp/laraveldatatable-react_0.0.2_1783063030594_0.4813790665646098","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@alemian95/laraveldatatable-react","version":"0.0.3","license":"MIT","_id":"@alemian95/laraveldatatable-react@0.0.3","maintainers":[{"name":"drchicco59","email":"alessandromian95@gmail.com"}],"homepage":"https://github.com/alemian95/LaravelDatatable/tree/main/react#readme","bugs":{"url":"https://github.com/alemian95/LaravelDatatable/issues"},"dist":{"shasum":"aeb45d566944045cde284a7b757dfa293a0b4345","tarball":"https://registry.npmjs.org/@alemian95/laraveldatatable-react/-/laraveldatatable-react-0.0.3.tgz","fileCount":5,"integrity":"sha512-lSc4vs8NRmYcf1bV4KD1KADKhgP7ienXpNjXmvrvv5bXOHY3yEVSautqoorLNnsgBv5ujtqsZBv6K8xG9IUL+w==","signatures":[{"sig":"MEUCIDaoKenz7dq+lrdloYADmIBnFrK4w5XxJbfR8ZzSZH99AiEAreVB0+O6yQeznX74j+mP1rnN0bCTkX+RfvrWpgJOYv0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":90787},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"af52cea054bb4f0591cb13f2db2157942de8fc81","scripts":{"test":"vitest run","build":"tsup","typecheck":"tsc --noEmit","test:watch":"vitest","prepublishOnly":"npm run build"},"_npmUser":{"name":"drchicco59","email":"alessandromian95@gmail.com"},"repository":{"url":"git+https://github.com/alemian95/LaravelDatatable.git","type":"git","directory":"react"},"_npmVersion":"10.9.0","description":"React datatable for the alemian95/laraveldatatable Laravel package.","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","dependencies":{"clsx":"^2","@tanstack/react-query":"^5","@tanstack/react-table":"^8","@radix-ui/react-dialog":"^1","@radix-ui/react-select":"^2","@radix-ui/react-checkbox":"^1","@radix-ui/react-dropdown-menu":"^2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8","jsdom":"^25","react":"^18","vitest":"^2","react-dom":"^18","typescript":"^5","@types/react":"^18","@types/react-dom":"^18","@testing-library/react":"^16","@testing-library/user-event":"^14"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19","tailwindcss":"^3 || ^4"},"_npmOperationalInternal":{"tmp":"tmp/laraveldatatable-react_0.0.3_1783095696084_0.1750268579433465","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@alemian95/laraveldatatable-react","version":"0.1.0","description":"React datatable for the alemian95/laraveldatatable Laravel package.","license":"MIT","repository":{"type":"git","url":"git+https://github.com/alemian95/LaravelDatatable.git","directory":"react"},"homepage":"https://github.com/alemian95/LaravelDatatable/tree/main/react#readme","bugs":{"url":"https://github.com/alemian95/LaravelDatatable/issues"},"type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"sideEffects":false,"publishConfig":{"access":"public"},"scripts":{"build":"tsup","test":"vitest run","test:watch":"vitest","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19","tailwindcss":"^3 || ^4"},"dependencies":{"@radix-ui/react-checkbox":"^1","@radix-ui/react-dialog":"^1","@radix-ui/react-dropdown-menu":"^2","@radix-ui/react-select":"^2","@tanstack/react-query":"^5","@tanstack/react-table":"^8","clsx":"^2"},"devDependencies":{"@testing-library/react":"^16","@testing-library/user-event":"^14","@types/react":"^18","@types/react-dom":"^18","jsdom":"^25","react":"^18","react-dom":"^18","tsup":"^8","typescript":"^5","vitest":"^2"},"_id":"@alemian95/laraveldatatable-react@0.1.0","gitHead":"2189d68b33f2579ebcf4d0d6130b2327a2774bc1","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-rUNj0X7k2duXTfm1owEMwRmEh860k/VYw56KqLfO5nhXoFQuN3E+7FJdrWppAigwR3dTtz0TGffcjqjYj0x9Bw==","shasum":"6fe8a4d064494b70a7dd6f6cde0bc35172d39af1","tarball":"https://registry.npmjs.org/@alemian95/laraveldatatable-react/-/laraveldatatable-react-0.1.0.tgz","fileCount":5,"unpackedSize":92262,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICSKTmu7v9hd8lj1WOcU404Wf6GCqmUX/UQDp5sb6KIpAiAWn5PbqphaPSlZP94F6uZ7jIYHYuZCk5edWZQFkGNvtQ=="}]},"_npmUser":{"name":"drchicco59","email":"alessandromian95@gmail.com"},"directories":{},"maintainers":[{"name":"drchicco59","email":"alessandromian95@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/laraveldatatable-react_0.1.0_1783115507617_0.020537821122545763"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-02T15:26:13.457Z","modified":"2026-07-03T21:51:47.875Z","0.0.1":"2026-07-02T15:26:13.933Z","0.0.2":"2026-07-03T07:17:10.725Z","0.0.3":"2026-07-03T16:21:36.242Z","0.1.0":"2026-07-03T21:51:47.753Z"},"bugs":{"url":"https://github.com/alemian95/LaravelDatatable/issues"},"license":"MIT","homepage":"https://github.com/alemian95/LaravelDatatable/tree/main/react#readme","repository":{"type":"git","url":"git+https://github.com/alemian95/LaravelDatatable.git","directory":"react"},"description":"React datatable for the alemian95/laraveldatatable Laravel package.","maintainers":[{"name":"drchicco59","email":"alessandromian95@gmail.com"}],"readme":"# @alemian95/laraveldatatable-react\n\nReact datatable for the [`alemian95/laraveldatatable`](https://packagist.org/packages/alemian95/laraveldatatable)\nLaravel package. It drives the backend's server-side contract — search, sort, pagination —\nand adds column visibility, a filters slide-over, and bulk actions over selected rows.\n\nSelf-contained: it bundles its own shadcn-look UI (Radix + Tailwind), so it does **not**\ndepend on your project's `@/components/ui/*`. You only need Tailwind.\n\n## Install\n\n```bash\nnpm install @alemian95/laraveldatatable-react\n```\n\n### Peer dependencies\n\nOnly these — every React app already has them:\n\n- `react`, `react-dom` (^18 or ^19)\n- `tailwindcss` (^3 or ^4)\n\nEverything else (`@tanstack/react-query`, `@tanstack/react-table`, Radix) is a regular\ndependency and gets installed automatically. You do **not** need to install or configure\n`@tanstack/react-query` yourself — `DatatableProvider` owns an internal `QueryClient`. To\nshare your app's client instead, pass it: `<DatatableProvider queryClient={yourClient} …>`.\n\n### Tailwind\n\nThe components ship pre-written utility classes, so Tailwind must scan the package's `dist`\nto generate them. Tailwind ignores `node_modules` by default — point it at the package\nexplicitly, matching your Tailwind major version.\n\n**Tailwind v4** (CSS-first config — there is no `tailwind.config.js`). Add a `@source` next\nto your import:\n\n```css\n@import \"tailwindcss\";\n@source \"../../node_modules/@alemian95/laraveldatatable-react/dist\";\n```\n\nThe `@source` path is resolved relative to the CSS file. Adjust the `../` depth so it points\nat your project's `node_modules` — e.g. from `resources/css/app.css` in a Laravel app it is\n`../../node_modules/...`.\n\n**Tailwind v3** (`tailwind.config.js`). Add the package to `content`:\n\n```js\nexport default {\n  content: [\n    './src/**/*.{ts,tsx}',\n    './node_modules/@alemian95/laraveldatatable-react/dist/**/*.js',\n  ],\n}\n```\n\n## Usage\n\n```tsx\nimport {\n  DatatableProvider, DataTable,\n  type ColumnDef, type FilterDef, type BulkAction,\n} from '@alemian95/laraveldatatable-react'\n\ntype User = { id: number; name: string; email: string; created_at: string }\n\nconst columns: ColumnDef<User, unknown>[] = [\n  { accessorKey: 'name', header: 'Name', enableSorting: true, meta: { searchable: true } },\n  { accessorKey: 'email', header: 'Email', meta: { searchable: true } },\n  { accessorKey: 'created_at', header: 'Created', enableSorting: true, meta: { sortKey: 'created_at' } },\n]\n\nconst filters: FilterDef[] = [\n  { id: 'status', label: 'Status', type: 'select', options: [\n    { value: 'active', label: 'Active' },\n    { value: 'inactive', label: 'Inactive' },\n  ] },\n  { id: 'created_at', label: 'Created', type: 'date-range' },\n]\n\nconst bulkActions: BulkAction<User>[] = [\n  { value: 'delete', label: 'Delete', handler: (rows) => console.log('delete', rows) },\n]\n\nexport function Users() {\n  return (\n    <DatatableProvider config={{\n      baseUrl: '/api',\n      // Static object, or a (possibly async) function so tokens can refresh.\n      headers: async () => ({ Authorization: `Bearer ${await getToken()}` }),\n    }}>\n      <DataTable<User>\n        endpoint=\"/users\"\n        columns={columns}\n        defaultPerPage={15}\n        filters={filters}\n        bulkActions={bulkActions}\n      />\n    </DatatableProvider>\n  )\n}\n```\n\n## API\n\n### `DatatableProvider`\n\n```ts\ninterface DatatableConfig {\n  baseUrl: string           // prepended to each DataTable endpoint\n  headers?: HeadersInit | (() => HeadersInit | Promise<HeadersInit>)\n}\n```\n\nThe provider owns an internal `QueryClient` by default. Pass `queryClient` to share your\napp's own client with the tables.\n\n### `DataTable`\n\n```ts\ninterface DataTableProps<T> {\n  endpoint: string                        // appended to config.baseUrl\n  columns: ColumnDef<T, unknown>[]        // TanStack column defs + optional meta\n  defaultPerPage?: number                 // default 15\n  filters?: FilterDef[]                   // renders the Filters slide-over\n  bulkActions?: BulkAction<T>[]           // enables row selection + the bulk bar\n  getRowId?: (row: T, i: number) => string // stable row identity (defaults to row.id)\n}\n```\n\nColumn `meta` extension:\n\n```ts\ninterface ColumnMeta {\n  searchable?: boolean   // include this column id in search_columns\n  sortKey?: string       // sort_by value to send (defaults to the column id)\n}\n```\n\n### `useDatatable`\n\nThe hook behind `DataTable`, exported for custom UIs. Returns\n`{ rows, pageCount, total, isLoading, isFetching, error, refetch }`.\n\n## Request contract\n\n`DataTable` emits these query params (1:1 with the backend `DatatableRequest`):\n\n| Param                                     | Source                                    |\n|-------------------------------------------|-------------------------------------------|\n| `page` (1-based)                          | pagination                                |\n| `per_page`                                | rows-per-page select / `defaultPerPage`   |\n| `search`                                  | search box (debounced)                    |\n| `search_columns` (csv)                    | visible columns with `meta.searchable`    |\n| `sort_by`, `sort_order` (`asc`\\|`desc`)   | header sort (`meta.sortKey` ?? column id) |\n| `filter[<id>]` / `filter[<id>][from\\|to]` | filters slide-over                        |\n\nThe expected response is a Laravel length-aware paginator\n(`data`, `current_page`, `last_page`, `per_page`, `total`).\n\n### Filters are emitted, not applied\n\nThe package **sends** `filter[...]` params but does not know how to apply them server-side.\nRead them in your controller and translate them into `withCustomFilters(...)` closures on the\n`DatatableApi`, e.g.:\n\n```php\n->withCustomFilters([\n    fn ($q) => request('filter.status') ? $q->where('status', request('filter.status')) : $q,\n])\n```\n\n### Sorting is whitelisted server-side\n\nThe backend enforces a sort whitelist via `DatatableApi::withSortableColumns(...)`. Only\nexpose sortable columns (`enableSorting: true`) that the backend actually allows, otherwise\nthe sort is dropped server-side with a warning.\n","readmeFilename":"README.md"}