{"id":22121258,"url":"https://github.com/linmasahiro/vue3-table-lite","last_synced_at":"2025-05-15T05:05:10.748Z","repository":{"id":39923095,"uuid":"302934146","full_name":"linmasahiro/vue3-table-lite","owner":"linmasahiro","description":"A simple and lightweight data table component for Vue.js 3. Features sorting, paging, row check, dynamic data rendering, supported TypeScript, and more.","archived":false,"fork":false,"pushed_at":"2025-01-31T12:19:40.000Z","size":2152,"stargazers_count":255,"open_issues_count":5,"forks_count":75,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-11T05:36:14.385Z","etag":null,"topics":["pagination","table","typescript","vue","vue3","vuejs","vuejs3"],"latest_commit_sha":null,"homepage":"https://vue3-lite-table.vercel.app/","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/linmasahiro.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":"2020-10-10T15:40:25.000Z","updated_at":"2025-04-23T11:26:10.000Z","dependencies_parsed_at":"2024-02-06T03:31:09.498Z","dependency_job_id":"6ba3d28d-9337-42e8-a2b8-03503434c878","html_url":"https://github.com/linmasahiro/vue3-table-lite","commit_stats":{"total_commits":122,"total_committers":11,"mean_commits":"11.090909090909092","dds":0.1885245901639344,"last_synced_commit":"269ece992d7703b3635fda160c6523dbf4ab26b3"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linmasahiro%2Fvue3-table-lite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linmasahiro%2Fvue3-table-lite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linmasahiro%2Fvue3-table-lite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linmasahiro%2Fvue3-table-lite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/linmasahiro","download_url":"https://codeload.github.com/linmasahiro/vue3-table-lite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253814982,"owners_count":21968560,"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":["pagination","table","typescript","vue","vue3","vuejs","vuejs3"],"created_at":"2024-12-01T14:37:03.358Z","updated_at":"2025-05-15T05:05:10.730Z","avatar_url":"https://github.com/linmasahiro.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# vue3-table-lite\n\n[![Lincense](https://img.shields.io/github/license/linmasahiro/vue3-table-lite)](https://github.com/linmasahiro/vue3-table-lite/blob/master/LICENSE) \n[![NPM](https://img.shields.io/npm/v/vue3-table-lite)](https://www.npmjs.com/package/vue3-table-lite)\n[![GitHub release (latest by date)](https://img.shields.io/github/v/release/linmasahiro/vue3-table-lite)](https://github.com/linmasahiro/vue3-table-lite)\n[![Website](https://img.shields.io/website?url=https%3A%2F%2Flinmasahiro.github.io%2Fvue3-table-lite%2Fdist%2F)](https://linmasahiro.github.io/vue3-table-lite/dist/)\n[![npm](https://img.shields.io/npm/dm/vue3-table-lite)](https://www.npmjs.com/package/vue3-table-lite)\n\n![GitHub Repo stars](https://img.shields.io/github/stars/linmasahiro/vue3-table-lite?style=social)\n![GitHub forks](https://img.shields.io/github/forks/linmasahiro/vue3-table-lite?style=social)\n\n![SampleGif](https://linmasahiro.github.io/vue3-table-lite/sample.gif)\n\nA simple and lightweight data table component for Vue.js 3. Features sorting, paging, row check, dynamic data rendering, supported TypeScript, and more.\n\n## Document and demo\n\n[Document](https://vue3-lite-table.vercel.app/)\n\n[Online Demo](https://vue3-lite-table.vercel.app/simple-examples.html)\n\n## Support\n\n+ Row check event Support\n+ Custom data display Support\n+ Pagging Support\n+ Sorting Support\n+ Custom message Support\n+ V-slot Support\n+ TypeScript Support\n+ Grouping Support\n\n## SampleCode\n\n### import\n    import VueTableLite from \"vue3-table-lite\";\n    import VueTableLite from \"vue3-table-lite/ts\"; // TypeScript\n\n## QuickStart\n### component\n    \u003cVueTableLite\n    :is-loading=\"table.isLoading\"\n    :columns=\"table.columns\"\n    :rows=\"table.rows\"\n    :total=\"table.totalRecordCount\"\n    :sortable=\"table.sortable\"\n    :messages=\"table.messages\"\n    @do-search=\"doSearch\"\n    @is-finished=\"table.isLoading = false\"\n    /\u003e\n  \u003e\n\n### data\n    const table = reactive({\n      isLoading: false,\n      columns: [\n        {\n          label: \"ID\",\n          field: \"id\",\n          width: \"3%\",\n          sortable: true,\n          isKey: true,\n        },\n        {\n          label: \"Name\",\n          field: \"name\",\n          width: \"10%\",\n          sortable: true,\n        },\n        {\n          label: \"Email\",\n          field: \"email\",\n          width: \"15%\",\n          sortable: true,\n        },\n      ],\n      rows: [],\n      totalRecordCount: 0,\n      sortable: {\n        order: \"id\",\n        sort: \"asc\",\n      },\n    });\n\n### Event\n    const doSearch = (offset, limit, order, sort) =\u003e {\n      table.isLoading = true;\n\n      // Start use axios to get data from Server\n      let url = 'https://www.example.com/api/some_endpoint?offset=' + offset + '\u0026limit=' + limit + '\u0026order=' + order + '\u0026sort=' + sort;\n      axios.get(url)\n      .then((response) =\u003e {\n        // Point: your response is like it on this example.\n        //   {\n        //   rows: [{\n        //     id: 1,\n        //     name: 'jack',\n        //     email: 'example@example.com'\n        //   },{\n        //     id: 2,\n        //     name: 'rose',\n        //     email: 'example@example.com'\n        //   }],\n        //   count: 2,\n        //   ...something\n        // }\n        \n        // refresh table rows\n        table.rows = response.rows;\n        table.totalRecordCount = response.count;\n        table.sortable.order = order;\n        table.sortable.sort = sort;\n      });\n      // End use axios to get data from Server\n    };\n\n## More...\n[Go to Check!!](https://vue3-lite-table.vercel.app/usage/default-mode.html)\n\n### release\n    ver 1.4.3 : Added skeletonScreen option. `#121`\n    ver 1.4.2 : Added Header's slot. `#120`\n    ver 1.4.1 : Fixed `#118`.\n    ver 1.4.0 : Added checkbox indeterminate state.\n    ver 1.3.9 : Added Vertical highlight option. `#93`\n    ver 1.3.8 : Allow HTML in header's label `#91`.\n    ver 1.3.7 : Fixed `#85`.\n    ver 1.3.6 : Fixed `#81`.\n    ver 1.3.5 : Fixed `#79`.\n    ver 1.3.4 : Fixed `#78`.\n    ver 1.3.3 : Fixed `#77`.\n    ver 1.3.2 : Fixed `#75`.\n    ver 1.3.1 : Fixed `#73`.\n    ver 1.3.0 : Fixed `#69`.\n    ver 1.2.9 : Added keep collapsed status option.\n    ver 1.2.8 : Added grouping collapse features. `#67`\n    ver 1.2.7 : Fixed `#63`.\n    ver 1.2.6 : Fixed `#61`.\n    ver 1.2.5 : Added table max-height prop and `#59` bugs.\n    ver 1.2.4 : Added grouping features. `#53`\n    ver 1.2.3 : Added option for fixed first column on horizontal scrolling.\n    ver 1.2.2 : Fixed result of sorting number as string was wrong on \"static-mode\" `#47`\n    ver 1.2.1 : Fixed \"setting.pageSize\" property is not accessible from outside and is not in sync with the \"props.pageSize\" property\n    ver 1.2.0 : Added Row click event `#41`\n    ver 1.1.9 : New Features `#35` `#36`\n    ver 1.1.8-1 : Removed unnecessary style-class and changed something class-name `#33`\n    ver 1.1.8 : Add option to set header/column class and style(in-line) `#32`\n    ver 1.1.7 : Add option to set custom values in page size dropdown `#29`\n    ver 1.1.6 : fixed bug. `#28`\n    ver 1.1.5 : Added classes to element for easier Styling. `#25`\n    ver 1.1.3 : fixed cannot get localTabel refs bugs.\n    ver 1.1.2 : changed import file on TypeScript.\n    ver 1.1.1 : added hide-paging and page number attribute and fixed `#23`.\n    ver 1.1.0 : remove Vue Dependency at bundle\n    ver 1.0.9 : column v-slot is not to be required on v-slot mode\n    ver 1.0.8 : fixed can't rendering customized display data on static mode bus.\n    ver 1.0.7 : support v-slot.\n    ver 1.0.6 : support static mode.\n    ver 1.0.5 : fixed Safari loading-mask is not overlapping the table.\n    ver 1.0.4 : support TypeScript.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinmasahiro%2Fvue3-table-lite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinmasahiro%2Fvue3-table-lite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinmasahiro%2Fvue3-table-lite/lists"}