{"_id":"@2alheure/vue-datatable","_rev":"4-773a5d6406fa295d267ee261989fd09b","name":"@2alheure/vue-datatable","dist-tags":{"latest":"1.1.2"},"versions":{"1.0.0":{"name":"@2alheure/vue-datatable","version":"1.0.0","description":"A Vue.js component to display a DataTable. Based upon the jQuery plugin.","main":"src/Datatable.vue","scripts":{"test":"vue serve test/Test.vue"},"repository":{"type":"git","url":"git+https://github.com/2alheure/vue_js_datatable.git"},"keywords":["Vue.js","table","datatable"],"author":{"name":"2alheure","email":"contact@2alheure.fr"},"license":"ISC","bugs":{"url":"https://github.com/2alheure/vue_js_datatable/issues"},"homepage":"https://github.com/2alheure/vue_js_datatable#readme","dependencies":{"@2alheure/vue-pagination":"^1.0.1","lodash":"^4.17.21"},"gitHead":"077454d6043e155382523a90b9a5fe86c86427f1","_id":"@2alheure/vue-datatable@1.0.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-IhjLZPJERasBdLH/WuDCeRh8cuXstQXFhunw8KC2JegSzfYv37v63/jomu+sXL9Xl1XmloNOwTnyozq6wqikag==","shasum":"22a1db4805acba714ec02e3d38b16e0182561f5e","tarball":"https://registry.npmjs.org/@2alheure/vue-datatable/-/vue-datatable-1.0.0.tgz","fileCount":5,"unpackedSize":22549,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpC6YCRA9TVsSAnZWagAAufsP/RuthsoTkSahWKZIC4eY\ntQ8dLkbVEl0hj7b+kp9slNboRdhBlkHHneieJoytBvCu0zX4NIyDBSBCanw4\nk5pSVex9vtZoShTsmpPz+XIVsCRXs3QAq4SFu1dGfpFexf5Je1lL9pPf/bQ6\nZSNLDfumrJeT2LbiWENd/i2Y2H3z6aZvUjRa4m/LIs6DJksuVKroYQRugJvI\n93HSfQ95eP0NorHSOId5zs3r9A67RUvFXOQp4Ei/wboiRptl9EiUt/U4af6d\nD4JS6o9PWZR8F3kNojZEmIlGMWcFq000zxKbB3HCvz3Ey+VjbUFru7CETbJB\nuB4+jZ5ZgbjLA4JacT0C8Spl2gkVdwR4/WBYGJfnJ+2DBrHn6HZ/PSgup2Ej\nf7m5Gf9mZTA+Po5+h5ZgpcmI48B9Wbn7TQVMWhubXm8HxNyRRe9mVanjQNKa\npPmMo9EEIPwusHq7VOeEq1g//PNcZ6mllyXODkVtUDxjDq0hbzt/cQJJSTBw\nEAUhacfA7uAmjyOJxRjSoKCHqonq6Fe5V7TStPHHL58BXUnE2GZF+OjxToGa\nKCTHARRcuu0gRc2ivhY+HP+NmHyD0CWpbweBJ/VaMw92LT7m2dSbVwIo0s8G\nVKzt0785RqW20DW6E9Ne+mv2jwIr+ER89SfiVAlk8gqejD8w9bLLZbDdvfZW\n6UDv\r\n=go9t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIANA6bzKmW/DsfVHqlkkPvsV2wVP72a9ACy2v3BBvt2hAiAUK14a6nbG+bHkddrkE26W/RNim5R6EYp4/QfDsTp6+g=="}]},"_npmUser":{"name":"2alheure","email":"jordan.juventin@2alheure.fr"},"directories":{},"maintainers":[{"name":"2alheure","email":"jordan.juventin@2alheure.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-datatable_1.0.0_1621372567862_0.810315615413336"},"_hasShrinkwrap":false},"1.1.0":{"name":"@2alheure/vue-datatable","version":"1.1.0","description":"A Vue.js component to display a DataTable. Based upon the jQuery plugin.","main":"src/Datatable.vue","scripts":{"test":"vue serve test/Test.vue"},"repository":{"type":"git","url":"git+https://github.com/2alheure/vue_js_datatable.git"},"keywords":["Vue.js","table","datatable"],"author":{"name":"2alheure","email":"contact@2alheure.fr"},"license":"ISC","bugs":{"url":"https://github.com/2alheure/vue_js_datatable/issues"},"homepage":"https://github.com/2alheure/vue_js_datatable#readme","dependencies":{"@2alheure/vue-pagination":"^1.0.1","lodash":"^4.17.21"},"gitHead":"1e3eb4f3f07834ae194af488d247e895df93cb29","_id":"@2alheure/vue-datatable@1.1.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-rf97KlQDvph6+Cwsr1lYjNIFO0B4Cb1srT+6yocTkmcPQ3Qc4EGloEls7X8bmehsCXnUGvr28+MkaqJoQ56OxA==","shasum":"ade47e95e84f28df6764d20ff78c4804be16d7c7","tarball":"https://registry.npmjs.org/@2alheure/vue-datatable/-/vue-datatable-1.1.0.tgz","fileCount":5,"unpackedSize":22677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH99eCRA9TVsSAnZWagAApXkQAJpTvbzHtkPozQsAVcqL\n1EdWU2SYR/0yp9zq4CSzMBNhwJqBwrj+/pGGRYdZqR3uQMQHxmcQ/lG2KNgY\nwDVcQsazL6X/ARnCK+c5XWixAAJD5fjqnRjSWRUMXtrKuoppG8vPsa4c8GFG\npuQj6NnjaLm1xfR2csZmsDplGvVCzQH8zP+if7Yc28l6NXLgK/GlSwcqF3Rb\nUiAthv/ep8p6dhf+g6r3O2P9EAJCI/h3G1MXpFXVEADJleiPdFd8iM0P7P8z\n6C5i2NmqrJO1bPhKqfZnSltFIfKYO7zipFVI7TskCvqkPpP8rPJxuXVo41z8\nFgfaIm6Z24MbY3PSt6SfnfdVyna5ZeQwuPJIaS5JQ85kEMQ+xP/WUdTRxYif\necOvibF3cSbY4HR+tiFM51noVOTNoFT7/yAKwfYRqc9vgofPE2X7ydEtQ0r7\n9pzGjQXuiRRfWeu2aQ+OSshjxzhOD4se/oGakk1aZ9eiTDQVWgvcXEioNbYm\nzHAhzVHXYs/5MwceAgWf77xtyFE2sPy+Akylp1MIc7mRytJjtnMtFlrlOEhG\nsHweHX1edd2qKX0LypdbDPUx7ZdW/CEpgh1wsYR+akSz6mvtNWKFdBgGXg4S\nQ4MUwnfgz+m4Z/fZjDL3b9wZ3sfMjNjTiERC42qoQ/yeDs3QpepR8kSnoGth\nFjDs\r\n=PvWP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEKGSJijwv16l/CVsvfOQ3u7emJ6yfC0KWXryuj55cMqAiEA71910Ic5wLrcjwplF2tgJVwUFt9UIf1RvavYQ7aDJFs="}]},"_npmUser":{"name":"2alheure","email":"jordan.juventin@2alheure.fr"},"directories":{},"maintainers":[{"name":"2alheure","email":"jordan.juventin@2alheure.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-datatable_1.1.0_1629478750037_0.6939480461837353"},"_hasShrinkwrap":false},"1.1.1":{"name":"@2alheure/vue-datatable","version":"1.1.1","description":"A Vue.js component to display a DataTable. Based upon the jQuery plugin.","main":"src/Datatable.vue","scripts":{"test":"vue serve test/Test.vue"},"repository":{"type":"git","url":"git+https://github.com/2alheure/vue_js_datatable.git"},"keywords":["Vue.js","table","datatable"],"author":{"name":"2alheure","email":"contact@2alheure.fr"},"license":"ISC","bugs":{"url":"https://github.com/2alheure/vue_js_datatable/issues"},"homepage":"https://github.com/2alheure/vue_js_datatable#readme","dependencies":{"@2alheure/vue-pagination":"^1.1.0","lodash":"^4.17.21"},"gitHead":"0891b7918499ce612eb18510fdc364bea3b3fc97","_id":"@2alheure/vue-datatable@1.1.1","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Or4WBompp2QZfc9xe6gXx+SfK1i+sBcVWdUEIL498WrknafQal4o4k/WDAuBnYCAVsGZuhvGHZCiiIDlWGPong==","shasum":"22b4248b544680336bda953075be344404f22be0","tarball":"https://registry.npmjs.org/@2alheure/vue-datatable/-/vue-datatable-1.1.1.tgz","fileCount":5,"unpackedSize":22677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJPGuCRA9TVsSAnZWagAAn3wP/1GdOE/0Hh6mnwLSwCho\nBjUQqzfJPar6GI9oNyeVLyWRyZLiJwn5YacEMDviDqerVSN5cPZQKLhWWUKT\n7vrfKITh3y0o5QAYErOvS0RHavFdhoEW2o/cHEG9sNb2F1lib3sVMK7W9Unn\nhmbNb2qB8pkpsLbJiB1JeI0YPHeWBpz6tYyZ+jpkjI4o/9/FyPc81RSAX4f+\nPQEWMGMJV/Y49ZA6uTHIj5/96r0rmN3qC3kcGoOmFIZ1zFfVTq8EW2uLVY1g\n27KeK6Olh6IcHLiV+PecKnomRqD49VR0ZfElAKrAXxDvSER0NidLLiHUT12a\nfG7s0g6qRJ16Gt4DT3mc/B8rEWyY6jw3T4so18ArOWSIDKpevDcg33p74Nzj\nyh85SZyIEsANrfH3I/Vw1zKDZBtlqXgyj1To5WhvyDzquaWDbnUCX8FZts/f\nG65nX3yBy4iAEDVEXePnddnT7b7RxFhfBOl3Whdj4mmbks0ZQf/QQzyYAwSv\n5gKeC/SgLyRAam/gTamJgGW0cPap0dET8K6X33sow1fmpn0QEMzPdRsnNBQ4\nFg51SCAPBvNYQp/ombpCjXFbilmejTs8O1pLmZDh6TF79c9rc1qyk+zDJ+F5\nHCZCKg1/fgHNwN542lRPXjN0TWECMA9uZWn/XFBzrn0L9u9fS8i6RB+P2j9V\nmdmL\r\n=3132\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSjML18yTTJDHdkReML2aNu2LZK22CmzAUhyHAMLfiSAIgTraP06d9uTBxGaRoojM0P5a+GTTkGECTtZWqxcuOW+o="}]},"_npmUser":{"name":"2alheure","email":"jordan.juventin@2alheure.fr"},"directories":{},"maintainers":[{"name":"2alheure","email":"jordan.juventin@2alheure.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-datatable_1.1.1_1629811117936_0.8070036859991001"},"_hasShrinkwrap":false},"1.1.2":{"name":"@2alheure/vue-datatable","version":"1.1.2","description":"A Vue.js component to display a DataTable. Based upon the jQuery plugin.","main":"src/DataTable.vue","scripts":{"test":"vue serve test/Test.vue"},"repository":{"type":"git","url":"git+https://github.com/2alheure/vue_js_datatable.git"},"keywords":["Vue.js","Vue 3","table","datatable"],"author":{"name":"2alheure","email":"contact@2alheure.fr"},"license":"ISC","bugs":{"url":"https://github.com/2alheure/vue_js_datatable/issues"},"homepage":"https://github.com/2alheure/vue_js_datatable#readme","dependencies":{"@2alheure/vue-pagination":"^1.1.1","lodash":"^4.17.21"},"gitHead":"126572d99c1fa85e830fa48e861dc3695a39b27f","_id":"@2alheure/vue-datatable@1.1.2","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-VbjmlR8qH6sUWc5m+VNW76D1tGR9y1MdjmSM1l0ota59BhIHW50BYv91SlBcl8hmSTinwQmNRUoQLNsEV+PQFQ==","shasum":"b4d5bc29f43fb9e3298fbe5e11e6bda152db9b2a","tarball":"https://registry.npmjs.org/@2alheure/vue-datatable/-/vue-datatable-1.1.2.tgz","fileCount":5,"unpackedSize":22734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLepsCRA9TVsSAnZWagAAtVsP/Aly64MTOo2fPipo+sRj\n+kSC3kAr+ME2FNzpCj+/fUqcNG2kP5TeFoF7d08lnsPoIg+kqLvjOLro2T7y\nF1G8hK+9OvARYCj+Jo4KlRPZP5LwrBmVhQzsFMhKA6b22sgYfh0PUwiblCWp\nZWnxIc93I/UYuHh5CiO3cbco5qOyD1/yL0tgGf3EfM+HmKa0WwMk+jhPFii4\n4MdcnO+R4QPLctNsqn1n8Bwb9va/3y7Kb5CSQNQE7LZgd3X7xk0P66SzldAX\nHNu9ry57hqbtAeqOkcltcgQCDxI9+S6zTeqY5fg3vlwcOVQLR7dVNBK4CPnq\nhgot26P7x8flPw06qkDFTDwvNiODNd1hvylyhD/iu1niy9eUEBAU7A3WnLcL\nDlkYQY0X7ue2IAysQAK7zfAUNlKAuCIXR4CCaLKvUd3tx7AI+UZJ3c5X6zs4\nFp9oUuzbMtd2gghVuM5yXLxw1wovx7qXRaAvwBoD/ZhvDooPknBH/MDj+LFE\nz9KGwD5SKTE0nYvyP5BIXTFEVIyfRjA4beH0Z3zva+m8VEhTILZNQTRInOH7\nKdpSDJcjagNap9crEzlDQffHC0/LdpQbC18WoWv1L112nEdcrro/zFZvY0vr\na9Jnn+70U1VCoapXQgxpP+IgGCGZtgaNLC+DoLBOEfSTy64mN1I35XGg8jKl\nXpMC\r\n=07Me\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAaiiJsf0NE6gQW0mVafMlitL6rEyXyIhl2xv+0PWmXsAiAt+en1eRpkskIjl0sgy4ZCPaVzRkzw7zqqQa0EmW4TQw=="}]},"_npmUser":{"name":"2alheure","email":"jordan.juventin@2alheure.fr"},"directories":{},"maintainers":[{"name":"2alheure","email":"jordan.juventin@2alheure.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-datatable_1.1.2_1630399084364_0.39834175496457247"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-18T21:16:07.798Z","1.0.0":"2021-05-18T21:16:08.024Z","modified":"2022-04-04T10:41:59.048Z","1.1.0":"2021-08-20T16:59:10.166Z","1.1.1":"2021-08-24T13:18:38.077Z","1.1.2":"2021-08-31T08:38:04.468Z"},"maintainers":[{"name":"2alheure","email":"jordan.juventin@2alheure.fr"}],"description":"A Vue.js component to display a DataTable. Based upon the jQuery plugin.","homepage":"https://github.com/2alheure/vue_js_datatable#readme","keywords":["Vue.js","Vue 3","table","datatable"],"repository":{"type":"git","url":"git+https://github.com/2alheure/vue_js_datatable.git"},"author":{"name":"2alheure","email":"contact@2alheure.fr"},"bugs":{"url":"https://github.com/2alheure/vue_js_datatable/issues"},"license":"ISC","readme":"# Vue.js DataTable\r\nVue.js DataTable is a Vue.js component that offers functionnalities for tables, such as ordering, searching or pagination. \r\nIt has been inspired by the jQuery plugin [DataTables](https://datatables.net/). \r\nThis component is compatible with Vue 3.\r\n\r\n## Table of contents\r\n- [Vue.js DataTable](#vuejs-datatable)\r\n - [Table of contents](#table-of-contents)\r\n - [Installation](#installation)\r\n - [Dependencies](#dependencies)\r\n - [Test](#test)\r\n - [Usage](#usage)\r\n - [Basic Usage](#basic-usage)\r\n - [Template / Slot usage](#template--slot-usage)\r\n - [Props](#props)\r\n - [About the `headers` prop](#about-the-headers-prop)\r\n - [About translations](#about-translations)\r\n - [Events](#events)\r\n\r\n## Installation\r\nFirst run `npm install @2alheure/vue-datatable`. Then you can import the component with `import DataTable from \"@2alheure/vue-datatable\";`.\r\n\r\n### Dependencies\r\nThis package depends on two others:\r\n- [@2alheure/vue-pagination](https://www.npmjs.com/package/@2alheure/vue-pagination)\r\n- [lodash](https://www.npmjs.com/package/lodash)\r\n\r\n### Test\r\nThe `test` command in this package uses some random users provided by [@pixelastic](https://github.com/pixelastic/fakeusers/blob/master/data/randomuser.json). \r\n\r\n## Usage\r\n\r\n### Basic Usage\r\nThe minimum configuration usage is like following: \r\n```html\r\n\r\n\r\n\r\n```\r\nPlease note the `v-model` directive. The `users` object **will be modified** by the component. If needed, think of making a copy of your data, and not passing it directly to the component. \r\nPlease note that in this configuration, the order of the `headers` prop **does matters**. Columns will be displayed in that order. \r\n`headers.linkTo` property must correspond to a property of the `v-model` linked object. \r\n\r\n### Template / Slot usage\r\nYou can also be more verbous and write your own rows' templates. \r\nHere is an example, corresponding to the one above: \r\n```html\r\n\r\n \r\n \r\n | ID | \r\n Gender | \r\n First Name | \r\n Last Name | \r\n Email | \r\n IP Address | \r\n
\r\n \r\n\r\n \r\n \r\n
\r\n\r\n\r\n\r\n```\r\nThe `` describes the content of the `` tag of the table. \r\nThe rest stands for the `` tag. You can also specify the `` tag but I am lazy so I don't (😜). \r\nAs the templates renders according to `users` and `users` is used in the `v-model`, it re-renders automatically with rows that need to be printed. \r\nThis will produce the same result as the previous example, except that you won't have the column ordering. To do so, you can use the `data-order-by` attribute on the header: \r\n```html\r\n \r\n \r\n | ID | \r\n Gender | \r\n First Name | \r\n Last Name | \r\n Email | \r\n IP Address | \r\n
\r\n \r\n```\r\n\r\n## Props\r\n| Name | Type | Default value | Description |\r\n| :-------------- | :------------------: | :-------------------------: | ------------------------------------------------------------------------------------------- |\r\n| modelValue | Array | none | The prop linked to the `v-model` directive (mandatory). |\r\n| headers | Array | none | Refer to the \"[About the `headers` prop](#about-the-headers-prop)\" section. |\r\n| identifier | String | A randomly generated string | The id of the component. Used by default to distinguish two different DataTable components. |\r\n| ascSymbol | String | `↓` | The symbol when a column is ordered ascendingly. |\r\n| descSymbol | String | `↑` | The symbol when a column is ordered descendingly. |\r\n| neutralSymbol | String | `↕` | The symbol when a column is not ordered. |\r\n| byPageOptions | Array | `[10, 25, 50, 100]` | The possible values for the number of elements by page. |\r\n| paginationProps | Object | `null` | See [the Pagination component props](https://github.com/2alheure/vue_pagination#props). |\r\n| hover | Boolean | `false` | Whether an hovered row should be styled to be a bit more visible. |\r\n| stripe | Boolean | `false` | Whether the table should style rows such as even rows are greyish. |\r\n| translation | String | Object | `en` | Refer to the \"[About translations](#about-translations)\" section. |\r\n\r\n### About the `headers` prop\r\nThe `headers` prop is **mandatory** when you use the DataTable without specifying the ``. \r\nIt must be an array of objects, each one containing two keys:\r\n- `html`: This will be the HTML content of the `` tag\r\n- `linkTo`: This is the property of the corresponding key in the `v-model` linked prop for the column.\r\n\r\n### About translations\r\nA translation can be a string, corresponding to one of the following values:\r\n- `de`: german\r\n- `en`: english (default value)\r\n- `es`: spanish\r\n- `fr`: french\r\n\r\nYou can also provide an object, which will replace the default translation sentences. \r\nThe translation object looks like following (which is the default one):\r\n```json\r\n{\r\n \"noContent\": \"There is nothing to print.\",\r\n \"showing\": \"Showing lines {0} to {1} of {2}.\",\r\n \"search\": \"Search\"\r\n}\r\n```\r\nIf you provide an object, it must match this template, and all keys are required.\r\n\r\n## Events\r\n| Name | Value type | Value | Description |\r\n| :---------------- | :--------: | ------------------------------------------ | ------------------------------------------------------------- |\r\n| update:modelValue | Array | The new value of the `v-model` linked prop | Emitted each time a change in made in the component |\r\n| page | Number | The page number | Emitted each time the page changes (including when searching) |\r\n| by-page | Number | The number of elements by page | Emitted each time the number of elements by page changes |\r\n| order-by | String | The column to order by | Emitted each time the order changes |\r\n| search | String | The search string | Emitted each time a search is made |\r\n","readmeFilename":"README.md"} |