{"id":18817833,"url":"https://github.com/vitorluizc/vue-data-tablee","last_synced_at":"2025-04-13T23:24:23.069Z","repository":{"id":89819240,"uuid":"111548051","full_name":"VitorLuizC/vue-data-tablee","owner":"VitorLuizC","description":"Yeap, another Vue table component.","archived":false,"fork":false,"pushed_at":"2018-08-02T01:49:24.000Z","size":596,"stargazers_count":42,"open_issues_count":4,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-12T17:05:31.678Z","etag":null,"topics":["data-table","javascript","vue","vue-data-table","vue-data-tablee","vue-table"],"latest_commit_sha":null,"homepage":"https://codepen.io/VitorLuizC/pen/qVJZoQ","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VitorLuizC.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-11-21T12:47:23.000Z","updated_at":"2023-10-02T17:47:58.000Z","dependencies_parsed_at":"2023-05-20T14:00:51.359Z","dependency_job_id":null,"html_url":"https://github.com/VitorLuizC/vue-data-tablee","commit_stats":{"total_commits":54,"total_committers":4,"mean_commits":13.5,"dds":"0.11111111111111116","last_synced_commit":"29e5c0052384b468021362ee705e2a698c9d521a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitorLuizC%2Fvue-data-tablee","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitorLuizC%2Fvue-data-tablee/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitorLuizC%2Fvue-data-tablee/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitorLuizC%2Fvue-data-tablee/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VitorLuizC","download_url":"https://codeload.github.com/VitorLuizC/vue-data-tablee/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248795258,"owners_count":21162739,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-table","javascript","vue","vue-data-table","vue-data-tablee","vue-table"],"created_at":"2024-11-08T00:13:36.829Z","updated_at":"2025-04-13T23:24:23.037Z","avatar_url":"https://github.com/VitorLuizC.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Data Tablee\n\n![[JavaScript Style Guide][2]][3]\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FVitorLuizC%2Fvue-data-tablee.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FVitorLuizC%2Fvue-data-tablee?ref=badge_shield)\n\nYeap, another Vue table component. This one is based on [vue-good-table][0], a\nsimple and pretty table component.\n\n\u003cimg\n  width=\"500\"\n  src=\"./demo/Screenshot.png\"\n  alt=\"Screenshot of a styled DataTable component\"\n  title=\"Screenshot of a styled DataTable component\"\n/\u003e\n\n## Install\n\nInstall from npm.\n\n```sh\nnpm install vue-data-tablee\n```\n\nWith `Vue.use` function declare vue-data-tablee components.\n\n```js\nimport 'vue-data-tablee/dist/vue-data-tablee.css'\nimport Vue from 'vue'\nimport DataTablee from 'vue-data-tablee'\n\nVue.use(DataTablee)\n```\n\nYou can also import just components you need, without installing globally.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdata-table :rows=\"rows\" :cols=\"cols\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { DataTable } from 'vue-data-tablee'\n\nexport default {\n  components: { DataTable },\n  ...\n}\n\u003c/script\u003e\n```\n\n## Component Props\n\nName         | Type                                     | Default  | About\n----         | ----                                     | -------  | -----\ncols         | `Array.\u003cCol\u003e`                            | `[]`     | [Cols][4] list.\nrows         | `Array.\u003cObject\u003e`                         | `[]`     | Rows list.\nalign        | `'center' \\| 'right' \\| 'left'`          | `'left'` | Global column alignment option.\nempty        | `String`                                 | `''`     | Empty cell's character.\nselectable   | `Boolean`                                | `false`  | Add checkbox column to select a row. It emits event on change\nsort         | `Boolean \\| Function.(a:*, b:*):Number`  | `true`   | Global sort option. Could enable/disable sort or use a custom [sort function][5].\nsortExternal | `Boolean`                                | `false`  | Only change sort and arrow. Useful to sort outsite component.\n## Cols properties\n\nName         | Type                                     | About\n----         | ----                                     | -----\nlabel        | `String`                                 | Column label (`\u003cth\u003e{{ label }}\u003c/th\u003e`).\nfield        | `String`                                 | Property name, or property path. Ex `'user.contact.phone'`.\nalign        | `'center' \\| 'right' \\| 'left'`          | Column alignment option. Stronger than global sort\nwidth        | `Number`                                 | Column width.\nhidden       | `Boolean`                                | Defines if column is hidden.\nheaderClass  | `String`                                 | Adds this class to column header cell.\ncontentClass | `String`                                 | Adds this class to columns content cells.\nsort         | `Boolean \\| Function.(a:*, b:*):Number`  | Could enable/disable column sort or use a custom [sort function][5]. Stronger than global sort\n\n## Events\n\nName   | Payload                                                | About\n-----  | -------                                                | -----\nselect | `Array.\u003cObject\u003e`                                       | Emitted on select row (`selectable` option).\nsort   | `{ column:Col, sortment:('ascending'\\|'descending') }` | Emitted on sort change.\n\n## License\n\nReleased under [MIT license][1].\n\n[0]: https://github.com/xaksis/vue-good-table\n[1]: ./LICENSE.md\n[2]: https://standardjs.com\n[3]: https://img.shields.io/badge/code_style-standard-brightgreen.svg\n[4]: /#cols-properties\n[5]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description\n\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FVitorLuizC%2Fvue-data-tablee.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FVitorLuizC%2Fvue-data-tablee?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitorluizc%2Fvue-data-tablee","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvitorluizc%2Fvue-data-tablee","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitorluizc%2Fvue-data-tablee/lists"}