{"_id":"@adesin-fr/vue-query-builder-table","_rev":"3-4bab8afcb245019117b5cddcd70512ab","name":"@adesin-fr/vue-query-builder-table","dist-tags":{"latest":"2026.33.3"},"versions":{"2026.33.1":{"name":"@adesin-fr/vue-query-builder-table","version":"2026.33.1","keywords":["vue","table","spatie","laravel-query-builder"],"author":{"name":"AdesinFr","email":"ludovic@adesin.fr"},"license":"MIT","_id":"@adesin-fr/vue-query-builder-table@2026.33.1","maintainers":[{"name":"adesin-fr","email":"ludovic@adesin.fr"}],"dist":{"shasum":"e8683bdf18ff900908979371e2f463221b099311","tarball":"https://registry.npmjs.org/@adesin-fr/vue-query-builder-table/-/vue-query-builder-table-2026.33.1.tgz","fileCount":10,"integrity":"sha512-/BWia/Eb3QKSehMPpcOhmq2amy6iwCGRvq52WuDdJvIHBTE5nY9XtypBOXCfH8wbVSEVHn3vZTtpOdylwKhKXw==","signatures":[{"sig":"MEUCIBSvMAax720n3jlxhcBonMDY8Iho2KsS0jMcBA4mwKG7AiEAr+eEBcobMInOhEcP0KkbIb3EbrEnSWUUeTGFy4SueFk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":325148},"main":"./dist/vue-query-builder-table.umd.js","type":"module","types":"./dist/main.d.ts","module":"./dist/vue-query-builder-table.es.js","exports":{".":{"types":"./dist/main.d.ts","import":"./dist/vue-query-builder-table.es.js","require":"./dist/vue-query-builder-table.umd.js"},"./style.css":"./dist/vue-query-builder-table.css","./dist/style.css":"./dist/vue-query-builder-table.css","./styles/default.css":"./js/styles/default.css"},"gitHead":"7f4c1b625def93dcb666eb3e129aa9868b032a53","private":false,"scripts":{"dev":"vite build --watch","build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"adesin-fr","email":"ludovic@adesin.fr"},"_npmVersion":"10.9.4","description":"Vue 3 data table compatible with Spatie Laravel Query Builder query parameters.","directories":{},"_nodeVersion":"22.21.1","dependencies":{"lodash-es":"^4.17.21","@popperjs/core":"^2.11.8"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","typescript":"^5.0.0","vite-plugin-dts":"^4.0.0","@vitejs/plugin-vue":"^5.2.0"},"peerDependencies":{"vue":"^3.4.0","axios":"^1.0.0","vuedraggable":"^4.1.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-query-builder-table_2026.33.1_1786346496311_0.7119955388800396","host":"s3://npm-registry-packages-npm-production"}},"2026.33.2":{"name":"@adesin-fr/vue-query-builder-table","version":"2026.33.2","keywords":["vue","table","spatie","laravel-query-builder"],"author":{"name":"AdesinFr","email":"ludovic@adesin.fr"},"license":"MIT","_id":"@adesin-fr/vue-query-builder-table@2026.33.2","maintainers":[{"name":"adesin-fr","email":"ludovic@adesin.fr"}],"dist":{"shasum":"8a0d85528105639dafc505d4a9d5f723489ebec7","tarball":"https://registry.npmjs.org/@adesin-fr/vue-query-builder-table/-/vue-query-builder-table-2026.33.2.tgz","fileCount":10,"integrity":"sha512-JgHWZX2aVIsbc4jJuaqKNimVTb5moPphJivy6FVQiXq1kTUIGY8lv9nT0tatZaf7shmL2F8euVtIWaAL3iVL9Q==","signatures":[{"sig":"MEYCIQCP+L639+NLFuJhZuQgf1iXdtttn+rLgHixhGS5ivLzRAIhANL3tOpd5b1eZB3wrvcHdwJ8Hs7UIRw/d7jU5EaGbUFD","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":325035},"main":"./dist/vue-query-builder-table.umd.js","type":"module","types":"./dist/main.d.ts","module":"./dist/vue-query-builder-table.es.js","exports":{".":{"types":"./dist/main.d.ts","import":"./dist/vue-query-builder-table.es.js","require":"./dist/vue-query-builder-table.umd.js"},"./style.css":"./dist/vue-query-builder-table.css","./dist/style.css":"./dist/vue-query-builder-table.css","./styles/default.css":"./js/styles/default.css"},"gitHead":"d94b440b5c6c71f10a85bc6371893a5f48e3b3ce","private":false,"scripts":{"dev":"vite build --watch","build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"adesin-fr","email":"ludovic@adesin.fr"},"_npmVersion":"10.9.4","description":"Vue 3 data table compatible with Spatie Laravel Query Builder query parameters.","directories":{},"_nodeVersion":"22.21.1","dependencies":{"lodash-es":"^4.17.21","@popperjs/core":"^2.11.8"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","typescript":"^5.0.0","vite-plugin-dts":"^4.0.0","@vitejs/plugin-vue":"^5.2.0"},"peerDependencies":{"vue":"^3.4.0","axios":"^1.0.0","vuedraggable":"^4.1.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-query-builder-table_2026.33.2_1786350714584_0.6196930227401143","host":"s3://npm-registry-packages-npm-production"}},"2026.33.3":{"name":"@adesin-fr/vue-query-builder-table","version":"2026.33.3","description":"Vue 3 data table compatible with Spatie Laravel Query Builder query parameters.","private":false,"author":{"name":"AdesinFr","email":"ludovic@adesin.fr"},"license":"MIT","type":"module","main":"./dist/vue-query-builder-table.umd.js","module":"./dist/vue-query-builder-table.es.js","types":"./dist/main.d.ts","exports":{".":{"types":"./dist/main.d.ts","import":"./dist/vue-query-builder-table.es.js","require":"./dist/vue-query-builder-table.umd.js"},"./dist/style.css":"./dist/vue-query-builder-table.css","./style.css":"./dist/vue-query-builder-table.css","./styles/default.css":"./js/styles/default.css"},"scripts":{"dev":"vite build --watch","build":"vite build","prepublishOnly":"npm run build"},"peerDependencies":{"axios":"^1.0.0","vue":"^3.4.0","vuedraggable":"^4.1.0"},"dependencies":{"@popperjs/core":"^2.11.8","lodash-es":"^4.17.21"},"devDependencies":{"@vitejs/plugin-vue":"^5.2.0","typescript":"^5.0.0","vite":"^6.0.0","vite-plugin-dts":"^4.0.0"},"keywords":["vue","table","spatie","laravel-query-builder"],"_id":"@adesin-fr/vue-query-builder-table@2026.33.3","gitHead":"3d507e354c81fac314665820fede139e00d8a4fc","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-hxnRtyk6L1KLRuYOPH49BnqiMM2O8aQoNM8MlwI/1l7Z4b3j3icSLPyabOLgiaBmGmyc0bpLU32BcgEuyskMsQ==","shasum":"bb4b2f8b62f2fd7ae30860e39c7a06fe7fc2a48b","tarball":"https://registry.npmjs.org/@adesin-fr/vue-query-builder-table/-/vue-query-builder-table-2026.33.3.tgz","fileCount":10,"unpackedSize":325486,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGvvWT03RJxAPgYT9VTbju/EnV/6g5B/f6M04O6sLq3tAiA2DmXo9YO9Yjsr7eJFwvnlMIBIVK8NGWxg3bF042glTA=="}]},"_npmUser":{"name":"adesin-fr","email":"ludovic@adesin.fr"},"directories":{},"maintainers":[{"name":"adesin-fr","email":"ludovic@adesin.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-query-builder-table_2026.33.3_1787596034730_0.9337044873939155"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-10T07:21:36.089Z","modified":"2026-08-24T18:27:15.037Z","2026.33.1":"2026-08-10T07:21:36.449Z","2026.33.2":"2026-08-10T08:31:54.714Z","2026.33.3":"2026-08-24T18:27:14.880Z"},"author":{"name":"AdesinFr","email":"ludovic@adesin.fr"},"license":"MIT","keywords":["vue","table","spatie","laravel-query-builder"],"description":"Vue 3 data table compatible with Spatie Laravel Query Builder query parameters.","maintainers":[{"name":"adesin-fr","email":"ludovic@adesin.fr"}],"readme":"# Vue Query Builder Table\n\nVue 3 table component that talks to JSON endpoints and emits query parameters compatible with Spatie Laravel Query Builder.\n\nThis package does not depend on Inertia. Data loading is done with Axios by default, and the HTTP client can be injected.\n\n## Install\n\n```bash\nnpm install @adesin-fr/vue-query-builder-table axios vue vuedraggable\n```\n\n## Usage\n\n```vue\n<script setup lang=\"ts\">\nimport { Table, type TableOptions } from \"@adesin-fr/vue-query-builder-table\";\nimport \"@adesin-fr/vue-query-builder-table/dist/style.css\";\n\nconst usersTable: TableOptions = {\n  name: \"users\",\n  endpoint: \"/api/users\",\n  defaultSort: \"name\",\n  globalSearch: \"Search users...\",\n  columns: [\n    { key: \"name\", label: \"Name\", sortable: true },\n    { key: \"email\", label: \"Email\", sortable: true },\n    { key: \"created_at\", label: \"Created at\", sortable: true },\n  ],\n  searchInputs: [\n    { key: \"name\", label: \"Name\" },\n    { key: \"email\", label: \"Email\" },\n  ],\n  filters: [\n    { key: \"created_at\", label: \"Created at\", type: \"date\" },\n  ],\n};\n</script>\n\n<template>\n  <Table :options=\"usersTable\" />\n</template>\n```\n\n## Initial Data Props\n\nThe table can render initial data from props:\n\n```vue\n<Table\n  :options=\"usersTable\"\n  :initial-data=\"users.data\"\n  :initial-meta=\"users.meta\"\n/>\n```\n\nYou can also pass a Laravel paginator/API Resource object directly:\n\n```vue\n<Table\n  :options=\"usersTable\"\n  :initial-resource=\"users\"\n/>\n```\n\nShort aliases are also supported for convenience:\n\n```vue\n<Table :options=\"usersTable\" :data=\"users.data\" :meta=\"users.meta\" />\n<Table :options=\"usersTable\" :resource=\"users\" />\n```\n\nWhen initial data is provided through props and `options.autoLoad` is omitted, the table does not perform an immediate initial request. User interactions such as sorting, filtering, searching, and pagination still use `options.endpoint`. Set `autoLoad: true` to force an immediate refresh.\n\n## Options Contract\n\nThe public contract is typed in `TableOptions` and exported from the package.\n\nImportant options:\n\n- `name`: table name, defaults to `default`.\n- `endpoint`: JSON endpoint used by Axios.\n- `queryPrefix`: parameter prefix. Defaults to `\"\"` for `default`, otherwise `${name}_`.\n- `pageName`: pagination parameter. Defaults to `page` or `${name}Page`.\n- `columns`: column definitions.\n- `filters`: select, toggle, number range, date, or number filters.\n- `searchInputs`: Spatie `filter[...]` text inputs.\n- `globalSearch`: adds a `filter[global]` input.\n- `httpClient`: optional Axios-compatible client.\n- `responseDataPath` and `responseMetaPath`: optional dot paths for custom payloads.\n- Initial data can be passed either through `options.data/options.meta/options.resource` or through component props `initialData/initialMeta/initialResource`.\n\n## Request Shape\n\nFor a table named `users`, the default request shape is:\n\n```text\nGET /api/users?users_filter[name]=john&users_sort=-created_at&usersPage=2&perPage=30\n```\n\nFor `name: \"default\"`:\n\n```text\nGET /api/users?filter[name]=john&sort=-created_at&page=2&perPage=30\n```\n\n## Response Shape\n\nThe component accepts Laravel paginator/API Resource shapes:\n\n```json\n{\n  \"data\": [],\n  \"links\": { \"next\": null, \"prev\": null },\n  \"meta\": { \"total\": 0, \"per_page\": 15 }\n}\n```\n\nIt also accepts a raw paginator with `data`, `next_page_url`, `prev_page_url`, and pagination metadata.\n\n## TypeScript\n\nTypes are declared once in `js/types.ts` and exported from the package entry:\n\n```ts\nimport type {\n  TableOptions,\n  TableColumn,\n  TableFilter,\n  NormalizedResponse,\n} from \"@adesin-fr/vue-query-builder-table\";\n```\n\nShared helpers are also typed:\n\n```ts\nimport { buildQueryParams, createTableOptions, normalizePaginatedResponse } from \"@adesin-fr/vue-query-builder-table\";\n```\n\n## Migration From Inertia Package\n\n- Replace `queryBuilderProps` from Inertia with a local `options` object.\n- Replace Inertia visits with `endpoint` JSON requests.\n- Keep Spatie-compatible filter/sort names by using `queryPrefix` and `pageName`.\n- Use one endpoint per table for the simplest multi-table pages.\n","readmeFilename":"README.md"}