{"id":13620938,"url":"https://github.com/JoBinsJP/vue3-datatable","last_synced_at":"2025-04-14T22:32:56.828Z","repository":{"id":42479616,"uuid":"355878011","full_name":"JoBinsJP/vue3-datatable","owner":"JoBinsJP","description":"Data table component for Vue3","archived":false,"fork":false,"pushed_at":"2023-03-02T15:35:19.000Z","size":451,"stargazers_count":112,"open_issues_count":10,"forks_count":20,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-10T02:42:27.805Z","etag":null,"topics":["datatable","hacktoberfest","vue"],"latest_commit_sha":null,"homepage":"https://vue3-datatable.netlify.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JoBinsJP.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}},"created_at":"2021-04-08T11:23:06.000Z","updated_at":"2024-12-24T01:31:02.000Z","dependencies_parsed_at":"2024-01-14T08:07:01.169Z","dependency_job_id":null,"html_url":"https://github.com/JoBinsJP/vue3-datatable","commit_stats":{"total_commits":54,"total_committers":4,"mean_commits":13.5,"dds":0.05555555555555558,"last_synced_commit":"6dbf38e3bcda50353862d0b67e97c0c7200a90b7"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoBinsJP%2Fvue3-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoBinsJP%2Fvue3-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoBinsJP%2Fvue3-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoBinsJP%2Fvue3-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JoBinsJP","download_url":"https://codeload.github.com/JoBinsJP/vue3-datatable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248972481,"owners_count":21191800,"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":["datatable","hacktoberfest","vue"],"created_at":"2024-08-01T21:01:00.908Z","updated_at":"2025-04-14T22:32:56.796Z","avatar_url":"https://github.com/JoBinsJP.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# DataTable - Vue3 Component\n\n\u003e Basic DataTable component for Vue3 in typescript and Composition API. It has basic functionality such as Filter/Search, pagination etc.\n\n[![NPM](https://img.shields.io/npm/v/@jobinsjp/vue3-datatable.svg)](https://www.npmjs.com/package/@jobinsjp/vue3-datatable)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![Build](https://img.shields.io/travis/JoBinsJP/vue3-datatable?logo=travis)](https://travis-ci.org/JoBinsJP/vue3-datatable)\n\n## [Demo](https://vue3-datatable.netlify.app/)\n\n![DataTable Demo](demo.png)\n\n## Install\n\n```bash\nnpm install --save @jobinsjp/vue3-datatable\n```\nor,\n```bash\nyarn add @jobinsjp/vue3-datatable\n```\n## Usage\nA minimal setup example is presented here using composition api and typescript; though typescript is not necessary to use this package. \n```vue\n\u003ctemplate\u003e\n    \u003cDataTable :rows=\"data\"\u003e\u003c/DataTable\u003e\n\u003c/template\u003e\n\u003cscript setup lang=\"ts\"\u003e\n    import { DataTable } from \"@jobinsjp/vue3-datatable\"\n    import \"@jobinsjp/vue3-datatable/dist/style.css\"\n\n    const data = [\n        {\n            \"id\": 1,\n            \"first_name\": \"Misti\",\n            \"last_name\": \"Strase\",\n            \"email\": \"mstrase0@instagram.com\",\n            \"gender\": \"Non-binary\",\n            \"ip_address\": \"151.38.32.165\",\n        },\n        {\n            \"id\": 2,\n            \"first_name\": \"Valentina\",\n            \"last_name\": \"Bonas\",\n            \"email\": \"vbonas1@is.gd\",\n            \"gender\": \"Agender\",\n            \"ip_address\": \"103.10.225.246\",\n        },\n    ]\n\u003c/script\u003e\n```\n\n## Properties\n\nIn addition to basic use it you can configure data-table behaviour by applying following properties and template slots.\n\n### Striped\n\n**striped** property\n\n```vue\n    \u003cdata-table :rows=\"data\" striped/\u003e\n```\n\n### Custom Loader\n\n**loading** property\n\n**loadData** event\n\n```vue\n\u003ctemplate\u003e\n    \u003cdata-table ...\n                :loading=\"isLoading\"\n                @loadData=\"loadData\"\u003e\n        \u003ctemplate #loading\u003e\n            \u003cdiv class=\"\"\u003eLoading....\u003c/div\u003e\n        \u003c/template\u003e\n    \u003c/data-table\u003e\n\u003c/template\u003e\n\n\nsetup() {\n    // ...\n\n    const isLoading = ref(false)\n    const loadData = async (query) =\u003e {\n        isLoading.value = true\n        // ...\n        isLoading.value = false\n    }\n\n    return {\n        isLoading,\n        loadData,\n        // ...\n        }\n}\n```\n\n### Clickable Row\n\n**rowClicked** event\n\n```vue\n\u003ctemplate\u003e\n    \u003cdata-table ...\n                @rowClicked=\"rowClickHandler\"\u003e\n    \u003c/data-table\u003e\n\u003c/template\u003e\n\nsetup() {\n    // ...\n\n    const rowClickHandler = (row) =\u003e {\n        console.log(\"Row Clicked\", row)\n    }\n```\n\n### Empty Table\n\n**empty** slot\n\n```vue\n\nimport { TableBodyCell } from \"@jobinsjp/vue3-datatable\"\n\n   \u003cdata-table :rows=\"[]\"\u003e\n        \u003ctemplate #empty\u003e\n            \u003cTableBodyCell colspan=\"2\"\u003e\n                No record found.\n            \u003c/TableBodyCell\u003e\n        \u003c/template\u003e\n    \u003c/data-table\u003e\n```\n\n### Custom Row \u0026 Column, Paginated, Filter\n\nDocumentation, in todo, see code example here: https://github.com/JoBinsJP/vue3-datatable/tree/master/src/components/Tables\n\n## License\n\nMIT © [https://github.com/JoBinsJP/vue3-datatable](https://github.com/JoBinsJP/vue3-datatable)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJoBinsJP%2Fvue3-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJoBinsJP%2Fvue3-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJoBinsJP%2Fvue3-datatable/lists"}