{"_id":"@anemo27/vue3-datatable","_rev":"3-16c89bd9945b15458c4ee603fec0048b","name":"@anemo27/vue3-datatable","dist-tags":{"latest":"1.2.0"},"versions":{"1.0.0":{"name":"@anemo27/vue3-datatable","version":"1.0.0","keywords":["vue3","vue","vuejs","component","datatable","vue3 datatable","vue datatable","vue3-datatable","vue grid","vue3 grid","vue table","vue3 table","datagrid","data-grid","data-table","table","grid","filter","sorting","pagination"],"author":{"name":"Anemo27","email":"premieofficial@gmail.com"},"license":"MIT","_id":"@anemo27/vue3-datatable@1.0.0","maintainers":[{"name":"anemo27","email":"purnomokadir@gmail.com"}],"homepage":"https://github.com/Anemo27/vue3-datatable#readme","bugs":{"url":"https://github.com/Anemo27/vue3-datatable/issues"},"dist":{"shasum":"c6b82de6edc31fbfc9c1f7ada8464722e29fd346","tarball":"https://registry.npmjs.org/@anemo27/vue3-datatable/-/vue3-datatable-1.0.0.tgz","fileCount":10,"integrity":"sha512-pj6iSsw3GIjh6xdFIbZvBMbHTsn8jRee9QJsgthf+OmtBQvxZYA+FlE1v+OcCdcb1R8By8ioDN+uZ+UJ7PRpmA==","signatures":[{"sig":"MEYCIQCoGqUi/ZlEA4Lpmw9sAmIztnOcioBDLGDr9dYqzIxYiwIhAJfD7hc0iULZm9DleMTWKPMlmbR7UEw9oQ9bpuXIjaC+","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":145897},"main":"./dist/vue3-datatable.umd.js","type":"module","types":"./dist/main.d.ts","module":"./dist/vue3-datatable.js","exports":{".":{"import":"./dist/vue3-datatable.js","require":"./dist/vue3-datatable.umd.js"},"./dist/style.css":"./dist/style.css"},"funding":"https://github.com/sponsors/Anemo27","gitHead":"dae96efd6e18c6f591f10efe55957903e9421076","private":false,"scripts":{"dev":"vite","build":"vite build && vue-tsc --emitDeclarationOnly && pnpm run tailwind:build && pnpm run copy-css","preview":"vite preview","copy-css":"copy dist\\style.css dist\\vue3-datatable.css","tailwind":"npx @tailwindcss/cli -i ./src/assets/css/tailwind.css -o ./dist/style.css --watch","tailwind:build":"npx @tailwindcss/cli -i ./src/assets/css/tailwind.css -o ./dist/style.css --minify"},"_npmUser":{"name":"anemo27","email":"purnomokadir@gmail.com"},"repository":{"url":"git+https://github.com/Anemo27/vue3-datatable.git","type":"git"},"_npmVersion":"10.9.3","description":"Vue3 Datatable - fully customizable & easy to use datatable library","directories":{},"_nodeVersion":"22.18.0","browserslist":["> 1%","last 2 versions","not dead","not ie 11"],"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.21","vite":"^7.1.5","postcss":"^8.5.6","vue-tsc":"^3.0.7","typescript":"^5.9.2","@types/node":"^24.5.0","tailwindcss":"^4.1.13","autoprefixer":"^10.4.21","@vitejs/plugin-vue":"^6.0.1","@tailwindcss/postcss":"^4.1.13"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-datatable_1.0.0_1757992890763_0.7487655430611662","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@anemo27/vue3-datatable","version":"1.1.0","keywords":["vue3","vue","vuejs","component","datatable","vue3 datatable","vue datatable","vue3-datatable","vue grid","vue3 grid","vue table","vue3 table","datagrid","data-grid","data-table","table","grid","filter","sorting","pagination"],"author":{"name":"Anemo27","email":"premieofficial@gmail.com"},"license":"MIT","_id":"@anemo27/vue3-datatable@1.1.0","maintainers":[{"name":"anemo27","email":"purnomokadir@gmail.com"}],"homepage":"https://github.com/Anemo27/vue3-datatable#readme","bugs":{"url":"https://github.com/Anemo27/vue3-datatable/issues"},"dist":{"shasum":"2e08d0129e8aedd9c56c04207865f22f242842c7","tarball":"https://registry.npmjs.org/@anemo27/vue3-datatable/-/vue3-datatable-1.1.0.tgz","fileCount":10,"integrity":"sha512-H1SJ5bMmSKRx+gBgcqWFrQMm7MXe6DLTE2KTCMo05mJgdswA9OGmxPLNb3AosHLioZmmkcqXKcuGYWmf2d0n4g==","signatures":[{"sig":"MEUCIFSwQ9xYvG5myfX50Abtcx9EGxmycCWF4kzLCxrZt9hcAiEAv8WcPAwEjOGd0KDFKV3t77ZvwzUnUagPqBOvqn7Iqrs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":149676},"main":"./dist/vue3-datatable.umd.js","type":"module","types":"./dist/main.d.ts","module":"./dist/vue3-datatable.js","exports":{".":{"import":"./dist/vue3-datatable.js","require":"./dist/vue3-datatable.umd.js"},"./dist/style.css":"./dist/style.css"},"funding":"https://github.com/sponsors/Anemo27","gitHead":"c2988935a3c2f0da3ab46f550e5e9a8bf8d36f10","private":false,"scripts":{"dev":"vite","build":"vite build && vue-tsc --emitDeclarationOnly && pnpm run tailwind:build && pnpm run copy-css","preview":"vite preview","copy-css":"copy dist\\style.css dist\\vue3-datatable.css","tailwind":"npx @tailwindcss/cli -i ./src/assets/css/tailwind.css -o ./dist/style.css --watch","tailwind:build":"npx @tailwindcss/cli -i ./src/assets/css/tailwind.css -o ./dist/style.css --minify"},"_npmUser":{"name":"anemo27","email":"purnomokadir@gmail.com"},"repository":{"url":"git+https://github.com/Anemo27/vue3-datatable.git","type":"git"},"_npmVersion":"10.9.3","description":"Vue3 Datatable - fully customizable & easy to use datatable library with enhanced type safety","directories":{},"_nodeVersion":"22.18.0","browserslist":["> 1%","last 2 versions","not dead","not ie 11"],"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.21","vite":"^7.1.5","postcss":"^8.5.6","vue-tsc":"^3.0.7","typescript":"^5.9.2","@types/node":"^24.5.0","tailwindcss":"^4.1.13","autoprefixer":"^10.4.21","@vitejs/plugin-vue":"^6.0.1","@tailwindcss/postcss":"^4.1.13"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-datatable_1.1.0_1757994224496_0.7392933919062628","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@anemo27/vue3-datatable","version":"1.2.0","description":"Vue3 Datatable - fully customizable & easy to use datatable library with enhanced type safety","private":false,"type":"module","main":"./dist/vue3-datatable.umd.js","module":"./dist/vue3-datatable.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/vue3-datatable.js","require":"./dist/vue3-datatable.umd.js","types":"./dist/index.d.ts"},"./dist/style.css":"./dist/style.css"},"author":{"name":"Anemo27","email":"premieofficial@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/Anemo27/vue3-datatable.git"},"bugs":{"url":"https://github.com/Anemo27/vue3-datatable/issues"},"homepage":"https://github.com/Anemo27/vue3-datatable#readme","funding":"https://github.com/sponsors/Anemo27","keywords":["vue3","vue","vuejs","component","datatable","vue3 datatable","vue datatable","vue3-datatable","vue grid","vue3 grid","vue table","vue3 table","datagrid","data-grid","data-table","table","grid","filter","sorting","pagination"],"license":"MIT","publishConfig":{"access":"public"},"scripts":{"dev":"vite","build":"vite build && vue-tsc --emitDeclarationOnly && pnpm run tailwind:build && pnpm run copy-css","preview":"vite preview","tailwind":"npx @tailwindcss/cli -i ./src/assets/css/tailwind.css -o ./dist/style.css --watch","tailwind:build":"npx @tailwindcss/cli -i ./src/assets/css/tailwind.css -o ./dist/style.css --minify","copy-css":"copy dist\\style.css dist\\vue3-datatable.css"},"devDependencies":{"@tailwindcss/postcss":"^4.1.13","@types/node":"^24.5.0","@vitejs/plugin-vue":"^6.0.1","autoprefixer":"^10.4.21","postcss":"^8.5.6","tailwindcss":"^4.1.13","typescript":"^5.9.2","vite":"^7.1.5","vue":"^3.5.21","vue-tsc":"^3.0.7"},"peerDependencies":{"vue":">=3.0.0"},"browserslist":["> 1%","last 2 versions","not dead","not ie 11"],"_id":"@anemo27/vue3-datatable@1.2.0","gitHead":"c2988935a3c2f0da3ab46f550e5e9a8bf8d36f10","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-+3wr3E2pvLu4BnY8qPll1JIcsj5XS59mHDIXik3r2Tuv6qVhaJC5Z5Xqb14AwK77SN4QAW5ty/P2Zt4O2cUAtw==","shasum":"04f257ad83a22514893ab916d2486fc943bcc97e","tarball":"https://registry.npmjs.org/@anemo27/vue3-datatable/-/vue3-datatable-1.2.0.tgz","fileCount":24,"unpackedSize":164755,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBoKzI0vDeJfx/uKwAPMLcN17bWE9hISNxVXeu5Cl4CXAiAyePTk8cEJjCdSSVjZ4eRwBgYLd7XJbeOYQuZiAcDJyw=="}]},"_npmUser":{"name":"anemo27","email":"purnomokadir@gmail.com"},"directories":{},"maintainers":[{"name":"anemo27","email":"purnomokadir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue3-datatable_1.2.0_1757995854334_0.6005262717081084"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-16T03:21:30.646Z","modified":"2025-09-16T04:10:54.679Z","1.0.0":"2025-09-16T03:21:30.959Z","1.1.0":"2025-09-16T03:43:44.682Z","1.2.0":"2025-09-16T04:10:54.504Z"},"bugs":{"url":"https://github.com/Anemo27/vue3-datatable/issues"},"author":{"name":"Anemo27","email":"premieofficial@gmail.com"},"license":"MIT","homepage":"https://github.com/Anemo27/vue3-datatable#readme","keywords":["vue3","vue","vuejs","component","datatable","vue3 datatable","vue datatable","vue3-datatable","vue grid","vue3 grid","vue table","vue3 table","datagrid","data-grid","data-table","table","grid","filter","sorting","pagination"],"repository":{"type":"git","url":"git+https://github.com/Anemo27/vue3-datatable.git"},"description":"Vue3 Datatable - fully customizable & easy to use datatable library with enhanced type safety","maintainers":[{"name":"anemo27","email":"purnomokadir@gmail.com"}],"readme":"# @anemo27/vue3-datatable\r\n\r\n## Example\r\n\r\n[Document & Demos](https://vue3-datatable-document.vercel.app)\r\n\r\n## Install\r\n\r\n#### NPM\r\n\r\n```bash\r\nnpm install @anemo27/vue3-datatable --save\r\n```\r\n\r\n#### Yarn\r\n\r\n```bash\r\nyarn add @anemo27/vue3-datatable\r\n```\r\n\r\n#### Bower\r\n\r\n```bash\r\nbower install @anemo27/vue3-datatable --save\r\n```\r\n\r\n## Usage\r\n\r\n```html\r\n\r\n\r\n\r\n```\r\n\r\n## Class Usage\r\n\r\nYou can use any CSS classes (including Tailwind CSS) to customize the datatable component using the `class` prop:\r\n\r\n```html\r\n\r\n```\r\n\r\n**Layout Structure:**\r\nThe component uses a flexbox layout (`flex flex-col`) to ensure proper containment:\r\n- **Table container**: Uses `flex-1` to take available space\r\n- **Pagination**: Uses `flex-shrink-0` to maintain its size\r\n- This prevents pagination from overflowing the parent container when height is constrained\r\n\r\n**Common Tailwind CSS classes:**\r\n- **Height**: `h-64`, `h-80`, `h-96`, `h-screen`, `max-h-screen`\r\n- **Background**: `bg-white`, `bg-gray-50`, `bg-blue-50`, `bg-gradient-to-br from-white to-gray-50`\r\n- **Border**: `border`, `border-gray-200`, `border-2`, `rounded-lg`, `rounded-xl`\r\n- **Shadow**: `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`\r\n- **Spacing**: `p-4`, `m-2`, `space-y-4`\r\n- **Colors**: `text-white`, `bg-gray-900`, `border-blue-200`\r\n- **Responsive**: `md:h-96`, `lg:h-screen`, `sm:shadow-md`\r\n\r\n## Props\r\n\r\n| Props | Type | Default | Description |\r\n| ----------------------- | :---------------------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| **columns** (required) | array | [] | table columns |\r\n| **rows** (required) | array | [] | table rows |\r\n| **isServerMode** | boolean | false | set **_true_** if you need server side pagination. |\r\n| **totalRows** | number | 0 | total number of rows. **_totalRows_** required when **_isServerMode_** is true |\r\n| **skin** | string | \"table-striped table-hover\" | custom class for skin ('**_table-striped_**' - for stripe row, '**_table-hover_**' - for hover row, '**_table-bordered_**' - for bordered row, '**_table-compact_**' - for compact table) |\r\n| **loading** | boolean | false | enable loader |\r\n| **hasCheckbox** | boolean | false | enable checkbox |\r\n| **search** | string | \"\" | enable global search |\r\n| **page** | number | 1 | current page |\r\n| **pageSize** | number | 10 | number of rows per page |\r\n| **pageSizeOptions** | array | [10, 20, 30, 50, 100] | pagesize options |\r\n| **showPageSize** | boolean | true | enable pagesize options |\r\n| **rowClass** | array, function | \"\" | custom row class |\r\n| **cellClass** | array, function | \"\" | custom cell class |\r\n| **sortable** | boolean | true | enable sorting |\r\n| **sortColumn** | string | \"id\" | name of sort column |\r\n| **sortDirection** | string | \"asc\" | sort direction (asc or desc) |\r\n| **columnFilter** | boolean | false | enable individual column filter |\r\n| **columnFilterLang** | records | null | columns filters translation (**ex**: {no_filter: 'Aucun', contain: 'Contiens', not_contain: 'Ne contiens pas', equal: 'Egale', not_equal: 'Différent', start_with: 'Commence par', end_with: 'Termine par', greater_than: 'Supérieur à', greater_than_equal: 'Sup. ou égale à', less_than: 'Inférieur à', less_than_equal: 'Inf. ou égale à', is_null: 'Est null', is_not_null: 'Non null'} ) |\r\n| **pagination** | boolean | true | enable pagination |\r\n| **showNumbers** | boolean | true | enable numbers pagination |\r\n| **showNumbersCount** | number | 5 | show numbers of count in pagination |\r\n| **showFirstPage** | boolean | true | enable first page in pagination |\r\n| **showLastPage** | boolean | true | enable last page in pagination |\r\n| **firstArrow** | string | default arrow | custom first page arrow |\r\n| **lastArrow** | string | default arrow | custom last page arrow |\r\n| **previousArrow** | string | default arrow | custom previous page arrow |\r\n| **nextArrow** | string | default arrow | custom next page arrow |\r\n| **paginationInfo** | string | \"Showing {0} to {1} of {2} entries\" | custom pagination info |\r\n| **noDataContent** | string | No data available | custom no data message |\r\n| **stickyHeader** | boolean | false | enable fixed header |\r\n| **height** | string | 450px | only will be used when stickyHeader enabled |\r\n| **class** | string | \"\" | Custom CSS classes for the datatable wrapper. Supports Tailwind CSS classes like \"h-96\", \"border\", \"shadow-lg\", etc. The component uses flexbox layout to ensure proper containment of table and pagination. |\r\n| **stickyFirstColumn** | boolean | false | enable fixed first column |\r\n| **cloneHeaderInFooter** | boolean | false | enable clone header in footer |\r\n| **selectRowOnClick** | boolean | false | enable to select row(checkbox) on row click |\r\n\r\n## Columns options\r\n\r\n| Props | Type | Default | Description |\r\n| ---------------- | :--------------- | --------- | ----------------------------------------------------- |\r\n| **isUnique** | boolean | false | db column is primary key or not |\r\n| **field** | string | \"\" | db column name |\r\n| **title** | string | \"\" | display column name |\r\n| **value** | string | \"\" | filter value if filter enabled |\r\n| **condition** | string | \"contain\" | default condition for column filter if filter enabled |\r\n| **type** | string | \"\" | column type (string, date, number, bool) |\r\n| **width** | string | \"\" | custom width of column |\r\n| **minWidth** | string | \"\" | custom minimum width of column |\r\n| **maxWidth** | string | \"\" | custom maximum width of column |\r\n| **hide** | boolean | false | show/hide column |\r\n| **filter** | boolean | true | enable column filter |\r\n| **search** | boolean | true | enabled global search |\r\n| **sort** | boolean | true | enable sorting |\r\n| **cellRenderer** | function, string | true | custom cell rendering |\r\n| **headerClass** | string | \"\" | custom header cell class |\r\n| **cellClass** | string | \"\" | custom cell class |\r\n\r\n## Events\r\n\r\n| Name | Description |\r\n| ------------------ | --------------------------------------------- |\r\n| **sortChange** | will trigger when sorting changed |\r\n| **searchChange** | will trigger when search changed |\r\n| **pageChange** | will trigger when page changed |\r\n| **pageSizeChange** | will trigger when pagesize changed |\r\n| **rowSelect** | will trigger when row selected using checkbox |\r\n| **filterChange** | will trigger when column filter changed |\r\n| **rowClick** | will trigger when row clicked |\r\n| **rowDBClick** | will trigger when row double clicked |\r\n\r\n## Methods\r\n\r\n| Name | Description |\r\n| ------------------------ | ---------------------------------------------------------------------------- |\r\n| **reset** | will reset all options like selected rows, filter, search, currennt page etc |\r\n| **getFilteredRows** | will returns all filtered rows |\r\n| **getVisibleRows** | will returns all visible rows |\r\n| **getColumnFilters** | will return all column filters |\r\n| **getSelectedRows** | will returns all selected rows |\r\n| **clearSelectedRows** | will unselect all selected rows |\r\n| **selectRow(index)** | will select row with the given index (non-existent row will be ignored) |\r\n| **unselectRow(index)** | will unselect row with the given index (non-existent row will be ignored) |\r\n| **isRowSelected(index)** | will return true if the row with given index is selected |\r\n\r\n
\r\n\r\n## Changelogs\r\n\r\n[Changelogs](https://vue3-datatable-document.vercel.app/changelog)\r\n\r\n
\r\n\r\n## License\r\n\r\n**_@anemo27/vue3-datatable_** is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).\r\n\r\n
\r\n\r\n## **Our other plugins**\r\n\r\n
\r\n\r\n### Angular Datatable - [**@anemo27/ng-datatable**](https://www.npmjs.com/package/@anemo27/ng-datatable)\r\n\r\n
\r\n\r\n## Support\r\n\r\n\r\n \"Buy\r\n\r\n","readmeFilename":"README.md"}