{"_id":"@aipng/vuetify-datagrid","_rev":"3-328f3402fd054756d53bcf3ca18ebb06","name":"@aipng/vuetify-datagrid","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@aipng/vuetify-datagrid","version":"1.0.0","keywords":["vue 3","vuetify","datagrid","pagination","sorting"],"author":{"name":"aipng"},"license":"MIT","_id":"@aipng/vuetify-datagrid@1.0.0","maintainers":[{"name":"karel.horsky","email":"karel.horsky@centrum.cz"}],"homepage":"https://github.com/aipng/vuetify-datagrid#readme","bugs":{"url":"https://github.com/aipng/vuetify-datagrid/issues"},"dist":{"shasum":"264e6513ff5b5193e604e5154ef614dfa4998475","tarball":"https://registry.npmjs.org/@aipng/vuetify-datagrid/-/vuetify-datagrid-1.0.0.tgz","fileCount":5,"integrity":"sha512-a+i8U+mBAIjOmrD+yBnjdL44B4hJebkmzBhEdeEZVK2VXVNzGq8pIjsvLPBxICxTzTZXlDqEQL+NJnTRvea5SA==","signatures":[{"sig":"MEUCIQDyOvdySJRmxNuYsSqx0JGTKVfgZWFRISbcafWttx4ZuAIgF4PSG9FhtpQV+Up2Iqp3GxE8zVJR3BrLvFXyCTlktjI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34688},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"1376c8ffdea762202d001b5bf654f0f4785c3530","scripts":{"build":"vue-tsc && vite build","type-check":"vue-tsc --build","prepublishOnly":"npm run build"},"_npmUser":{"name":"karel.horsky","email":"karel.horsky@centrum.cz"},"repository":{"url":"git+https://github.com/aipng/vuetify-datagrid.git","type":"git"},"_npmVersion":"10.9.2","description":"Opiniated and extended version of Vuetify's datagrid component for Vue 3.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"@mdi/js":"^7.4.47"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.6","vue-tsc":"^2.2.8","typescript":"^5.6.3","@types/node":"^22.15.29","@vitejs/plugin-vue":"^5.2.3"},"peerDependencies":{"vue":"^3.5.0","vuetify":"^3.8.0"},"_npmOperationalInternal":{"tmp":"tmp/vuetify-datagrid_1.0.0_1749121017196_0.145300068002425","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aipng/vuetify-datagrid","version":"1.0.1","keywords":["vue 3","vuetify","datagrid","pagination","sorting"],"author":{"name":"aipng"},"license":"MIT","_id":"@aipng/vuetify-datagrid@1.0.1","maintainers":[{"name":"karel.horsky","email":"karel.horsky@centrum.cz"}],"homepage":"https://github.com/aipng/vuetify-datagrid#readme","bugs":{"url":"https://github.com/aipng/vuetify-datagrid/issues"},"dist":{"shasum":"261180a2e79bc5a457ad539955a71df15083eec8","tarball":"https://registry.npmjs.org/@aipng/vuetify-datagrid/-/vuetify-datagrid-1.0.1.tgz","fileCount":7,"integrity":"sha512-QkkSaFqbWR39eMY2e3aGT7XgPsZMPdOZzxr/44GbdsA4C4xjKsqnDYo6CkxMDsn2B0vUntmPS76UpSWnhXz2Ag==","signatures":[{"sig":"MEUCIQCxh+yVSPBZTg2jbk8f5l7BDmV+VERoc/SL6NBsvCZH9AIgC4Ro2n4uM9x45QFTaWB78P0+mfeDYi2vNEV9cTNXIKo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5797762},"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","require":"./dist/index.js"}},"gitHead":"d9aef04a1504836c654036bcbac4a498d7896309","scripts":{"build":"vue-tsc && vite build","type-check":"vue-tsc --build","prepublishOnly":"npm run build"},"_npmUser":{"name":"karel.horsky","email":"karel.horsky@centrum.cz"},"repository":{"url":"git+https://github.com/aipng/vuetify-datagrid.git","type":"git"},"_npmVersion":"10.9.2","description":"Opiniated and extended version of Vuetify's datagrid component for Vue 3.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"@mdi/js":"^7.4.47"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.6","vue-tsc":"^2.2.8","typescript":"^5.6.3","@types/node":"^22.15.29","@vitejs/plugin-vue":"^5.2.3"},"peerDependencies":{"vue":"^3.5.0","vuetify":"^3.8.0"},"_npmOperationalInternal":{"tmp":"tmp/vuetify-datagrid_1.0.1_1749131672421_0.8688564926043936","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@aipng/vuetify-datagrid","version":"1.0.4","type":"module","main":"./dist/index.umd.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.umd.js"},"./dist/vuetify-datagrid.css":"./dist/vuetify-datagrid.css"},"scripts":{"build":"vue-tsc && vite build","type-check":"vue-tsc --build","prepublishOnly":"npm run build","release":"standard-version","release:alpha":"standard-version --prerelease alpha","release:beta":"standard-version --prerelease beta","release:rc":"standard-version --prerelease rc"},"peerDependencies":{"vue":"^3.5.0","vuetify":"^3.8.0"},"dependencies":{"@mdi/js":"^7.4.47"},"devDependencies":{"@types/node":"^22.15.29","@vitejs/plugin-vue":"^5.2.3","standard-version":"^9.5.0","typescript":"^5.6.3","vite":"^6.2.6","vite-plugin-dts":"^4.5.4","vue-tsc":"^2.2.8"},"keywords":["vue 3","vuetify","datagrid","pagination","sorting"],"author":{"name":"aipng"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aipng/vuetify-datagrid.git"},"bugs":{"url":"https://github.com/aipng/vuetify-datagrid/issues"},"homepage":"https://github.com/aipng/vuetify-datagrid#readme","publishConfig":{"access":"public"},"_id":"@aipng/vuetify-datagrid@1.0.4","gitHead":"54429f46ae5435c8970772bdd588f68be8a13990","description":"Opiniated and extended version of Vuetify's datagrid component for Vue 3.","_nodeVersion":"20.19.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-osrzJ4/8Gx9GG08bP00UvXGnScRI/trlCvzUYAyW2XxsGDfUiKx1MFcDu/vqybel+LkGycfRChqlD71LKTTdAQ==","shasum":"7ce245b0f90218ad12218fa17de7a411c845fdff","tarball":"https://registry.npmjs.org/@aipng/vuetify-datagrid/-/vuetify-datagrid-1.0.4.tgz","fileCount":25,"unpackedSize":8079026,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCzYPhd+YPN0LwkZT3FE0rHPKaCn3RUTEPup1uwiKMiFQIhAI+nQ92ss9ECbodC/4a2Azhk3NjAnbLpTDAbsl1BKY/R"}]},"_npmUser":{"name":"karel.horsky","email":"karel.horsky@centrum.cz"},"directories":{},"maintainers":[{"name":"karel.horsky","email":"karel.horsky@centrum.cz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vuetify-datagrid_1.0.4_1749311546956_0.00045534768827337757"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-05T10:56:57.079Z","modified":"2025-06-07T15:52:27.366Z","1.0.0":"2025-06-05T10:56:57.380Z","1.0.1":"2025-06-05T13:54:32.628Z","1.0.4":"2025-06-07T15:52:27.176Z"},"bugs":{"url":"https://github.com/aipng/vuetify-datagrid/issues"},"author":{"name":"aipng"},"license":"MIT","homepage":"https://github.com/aipng/vuetify-datagrid#readme","keywords":["vue 3","vuetify","datagrid","pagination","sorting"],"repository":{"type":"git","url":"git+https://github.com/aipng/vuetify-datagrid.git"},"description":"Opiniated and extended version of Vuetify's datagrid component for Vue 3.","maintainers":[{"name":"karel.horsky","email":"karel.horsky@centrum.cz"}],"readme":"# aipng/datagrid\n\nOpiniated and extended version of Vuetify's datagrid component for Vue 3.\n\nProvides sorting, pagination, row selection and row expansion.\n\nThis component builds upon Vuetify's foundation while adding more functionality and customization options.\n\n## Installation\n\n```bash\nnpm install aipng/datagrid\n```\n\n# Datagrid\n\n## Usage\n\n```vue\n<template>\n  <TheDatagrid\n    :headers=\"headers\"\n    :result=\"result\"\n    :cursor=\"cursor\"\n    :sort-by=\"sortBy\"\n    @onCursorChange=\"handleCursorChange\"\n    @onSortChange=\"handleSortChange\"\n  >\n    <!-- Optional slots for custom column rendering -->\n    <template #col-name=\"{ item }\">\n      {{ item.name }}\n    </template>\n  </TheDatagrid>\n</template>\n\n<script setup lang=\"ts\">\nimport { TheDatagrid } from 'aipng/datagrid'\nimport type { DatagridColumnHeader, CursorPosition, SortItem } from 'aipng/datagrid'\n\nconst headers: DatagridColumnHeader[] = [\n  {\n    key: 'id',\n    title: '#',\n    align: 'center',\n    sortable: false,\n  },\n  {\n    key: 'name',\n    title: 'Name',\n    sortable: true,\n  },\n]\n\nconst result = {\n  itemsTotal: 100,\n  items: [\n    { id: 1, name: 'Item 1' },\n    { id: 2, name: 'Item 2' },\n  ],\n}\n\nconst cursor: CursorPosition = {\n  page: 1,\n  pageSize: 10,\n}\n\nconst sortBy: SortItem = {\n  sort: 'id',\n  order: 'desc',\n}\n\nconst handleCursorChange = (newCursor: CursorPosition) => {\n  // Handle page change\n}\n\nconst handleSortChange = (newSort: SortItem) => {\n  // Handle sort change\n}\n</script>\n```\n\n## Props\n\n| Prop | Type | Required | Default | Description |\n|------|-----|---------|-----------------|-------|\n| headers | DatagridColumnHeader[] | Yes | - | Column configuration |\n| result | { itemsTotal: number, items: T[] } | Yes | - | Data to display |\n| showSelect | boolean | No | false | Show checkbox for row selection |\n| showExpand | boolean | No | false | Show button for row expansion |\n\n## Events\n\n| Event | Parameters | Description |\n|-------|-----------|-------|\n| onCursorChange | CursorPosition | Page or page size change |\n| onSortChange | SortItem | Sort change |\n\n## Slots\n\n| Slot | Parameters | Description |\n|------|-----------|-------|\n| col-{key} | { item: T } | Custom column rendering |\n| itemExpandButton | { item: T, isExpanded: boolean, toggleExpand: () => void } | Custom expand button |\n| expandedRow | { item: T } | Custom expanded row content |\n\n# Pagination\n\nThe datagrid includes a built-in pagination component that appears when the total number of items exceeds 5. The pagination component is displayed both at the top and bottom of the table for better user experience.\n\nThe pagination component accepts the following props:\n\n| Prop | Type | Required | Description |\n|------|-----|---------|-------|\n| cursor | CursorPosition | Yes | Current page and page size |\n| itemsTotal | number | Yes | Total number of items |\n\nAnd emits the following events:\n\n| Event | Parameters | Description |\n|-------|-----------|-------|\n| change | CursorPosition | Emitted when page or page size changes |\n\n## Types\n\n### DatagridColumnHeader\n\n```typescript\ntype DatagridColumnHeader = {\n  key: string\n  title: string\n  align?: 'start' | 'center' | 'end'\n  sortable?: boolean\n  type?: 'text' | 'number' | 'boolean' | 'date' | 'url' | 'array' | 'email'\n  value?: (item: unknown) => string | null\n}\n```\n\n### CursorPosition\n\n```typescript\ntype CursorPosition = {\n  page: number\n  pageSize: number\n}\n```\n\n### SortItem\n\n```typescript\ntype SortItem = {\n  sort: string\n  order: 'asc' | 'desc'\n}\n```\n","readmeFilename":"README.md"}