{"id":19615161,"url":"https://github.com/hc200ok/vue3-easy-data-table","last_synced_at":"2025-05-15T11:05:39.155Z","repository":{"id":37035599,"uuid":"490272136","full_name":"HC200ok/vue3-easy-data-table","owner":"HC200ok","description":"A customizable and easy-to-use data table component made with Vue.js 3.x","archived":false,"fork":false,"pushed_at":"2024-06-06T09:56:03.000Z","size":4118,"stargazers_count":548,"open_issues_count":124,"forks_count":108,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-05-06T07:05:56.295Z","etag":null,"topics":["data-table","table-component","vite","vue","vue3","vue3-component","vue3-typescript","vuejs3"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/HC200ok.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-09T12:25:05.000Z","updated_at":"2025-05-05T02:02:09.000Z","dependencies_parsed_at":"2024-01-22T19:34:08.881Z","dependency_job_id":"fec4c3b6-af72-409f-9974-fc840315cccc","html_url":"https://github.com/HC200ok/vue3-easy-data-table","commit_stats":{"total_commits":248,"total_committers":14,"mean_commits":"17.714285714285715","dds":"0.29032258064516125","last_synced_commit":"3dc9c689e29630f405ecc0379680dd0ad210696d"},"previous_names":[],"tags_count":82,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HC200ok%2Fvue3-easy-data-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HC200ok%2Fvue3-easy-data-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HC200ok%2Fvue3-easy-data-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HC200ok%2Fvue3-easy-data-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HC200ok","download_url":"https://codeload.github.com/HC200ok/vue3-easy-data-table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328385,"owners_count":22052632,"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","table-component","vite","vue","vue3","vue3-component","vue3-typescript","vuejs3"],"created_at":"2024-11-11T10:55:37.573Z","updated_at":"2025-05-15T11:05:39.134Z","avatar_url":"https://github.com/HC200ok.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"logo.png\"  width=\"400\"/ /\u003e\n\u003c/p\u003e\n\n## Introduction\nvue3-easy-data-table is a customizable and easy-to-use data table component made with Vue.js 3.x.\n\n## Website\nhttps://hc200ok.github.io/vue3-easy-data-table-doc/\n\n\u003cimg src=\"./images/demo.png\"  /\u003e\n\n## Features\n1. [Item slot](https://hc200ok.github.io/vue3-easy-data-table-doc/features/item-slot.html)\n2. [Buttons pagination](https://hc200ok.github.io/vue3-easy-data-table-doc/features/buttons-pagination.html)\n3. [Multiple selecting](https://hc200ok.github.io/vue3-easy-data-table-doc/features/multiple-selecting.html)\n4. [Pagination slot](https://hc200ok.github.io/vue3-easy-data-table-doc/features/pagination-slot.html)\n5. [Single field sorting](https://hc200ok.github.io/vue3-easy-data-table-doc/features/single-field-sorting.html)\n6. [Searching](https://hc200ok.github.io/vue3-easy-data-table-doc/features/searching.html)\n7. [Server side paginate and sort](https://hc200ok.github.io/vue3-easy-data-table-doc/features/server-side-paginate-and-sort.html)\n8. [Loading slot](https://hc200ok.github.io/vue3-easy-data-table-doc/features/loading-slot.html)\n9. [Footer customization](https://hc200ok.github.io/vue3-easy-data-table-doc/features/footer-customization.html)\n10. [Filtering](https://hc200ok.github.io/vue3-easy-data-table-doc/features/filtering.html) (new feature since version `1.2.3`)\n11. [Click row](https://hc200ok.github.io/vue3-easy-data-table-doc/features/click-row.html) (new feature since version `1.2.4`)\n12. [Column width](https://hc200ok.github.io/vue3-easy-data-table-doc/features/column-width.html) (new feature since version `1.2.10`)\n13. [Fixed columns](https://hc200ok.github.io/vue3-easy-data-table-doc/features/fixed-column.html) (new feature since version `1.2.10`)\n14. [Header slot](https://hc200ok.github.io/vue3-easy-data-table-doc/features/header-slot.html) (new feature since version `1.2.25`)\n15. [Expand slot](https://hc200ok.github.io/vue3-easy-data-table-doc/features/expand-slot.html) (new feature since version `1.3.2`)\n16. [Style customization](https://hc200ok.github.io/vue3-easy-data-table-doc/features/style-customization.html) (new feature since version `1.3.11`)\n17. [Border cell](https://hc200ok.github.io/vue3-easy-data-table-doc/features/border-cell.html) (new feature since version `1.3.11`)\n18. [Class name customization](https://hc200ok.github.io/vue3-easy-data-table-doc/features/class-name-customization.html) (new feature since version `1.3.11`)\n\n## Getting started\n### 1. ES module\n#### Install\n```js\nnpm install vue3-easy-data-table\n// or\nyarn add vue3-easy-data-table\n```\n\n#### Regist\n```js\nimport Vue3EasyDataTable from 'vue3-easy-data-table';\nimport 'vue3-easy-data-table/dist/style.css';\n\nconst app = createApp(App);\napp.component('EasyDataTable', Vue3EasyDataTable);\n```\n\n#### Use\n```js\n\u003ctemplate\u003e\n  \u003cEasyDataTable\n    :headers=\"headers\"\n    :items=\"items\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport type { Header, Item } from \"vue3-easy-data-table\";\n\nexport default defineComponent({\n  setup() {\n    const headers: Header[] = [\n      { text: \"Name\", value: \"name\" },\n      { text: \"Height (cm)\", value: \"height\", sortable: true },\n      { text: \"Weight (kg)\", value: \"weight\", sortable: true },\n      { text: \"Age\", value: \"age\", sortable: true }\n    ];\n\n    const items: Item[] = [\n      { \"name\": \"Curry\", \"height\": 178, \"weight\": 77, \"age\": 20 },\n      { \"name\": \"James\", \"height\": 180, \"weight\": 75, \"age\": 21 },\n      { \"name\": \"Jordan\", \"height\": 181, \"weight\": 73, \"age\": 22 }\n    ];\n\n    return {\n      headers,\n      items\n    };\n  },\n});\n\u003c/script\u003e\n```\n\n### 2. CDN:\n```html\n\u003clink href=\"https://unpkg.com/vue3-easy-data-table/dist/style.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@3.2.1/dist/vue.global.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/vue3-easy-data-table\"\u003e\u003c/script\u003e\n\n\u003cdiv id=\"app\"\u003e\n  \u003ceasy-data-table\n    :headers=\"headers\"\n    :items=\"items\"\n  /\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n  const App = {\n    components: {\n      EasyDataTable: window['vue3-easy-data-table'],\n    },\n    data () {\n      return {\n        headers:[\n          { text: \"Name\", value: \"name\" },\n          { text: \"Height (cm)\", value: \"height\", sortable: true },\n          { text: \"Weight (kg)\", value: \"weight\", sortable: true },\n          { text: \"Age\", value: \"age\", sortable: true }\n        ],\n        items: [\n          { \"name\": \"Curry\", \"height\": 178, \"weight\": 77, \"age\": 20 },\n          { \"name\": \"James\", \"height\": 180, \"weight\": 75, \"age\": 21 },\n          { \"name\": \"Jordan\", \"height\": 181, \"weight\": 73, \"age\": 22 }\n        ],\n      }\n    },\n  };\n  Vue.createApp(App).mount('#app');\n\u003c/script\u003e\n```\n\n## Todo\n1. Refactory.\n3. Make table header customizable 🎛️.\n4. Vitual table rows.\n5. Mobile responsive.\n\n## Contribution\nShout out to the people who made new feature requests and reported issues to make this component better.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhc200ok%2Fvue3-easy-data-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhc200ok%2Fvue3-easy-data-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhc200ok%2Fvue3-easy-data-table/lists"}