{"id":16957279,"url":"https://github.com/bhaveshpatel200/vue3-datatable","last_synced_at":"2025-04-06T01:10:40.029Z","repository":{"id":65084125,"uuid":"565106089","full_name":"bhaveshpatel200/vue3-datatable","owner":"bhaveshpatel200","description":"vue3-datatable is a powerful component for creating dynamic and customizable data tables. It supports large amounts of data, sorting, pagination, and filtering and highly customizable","archived":false,"fork":false,"pushed_at":"2024-09-28T08:05:32.000Z","size":75,"stargazers_count":125,"open_issues_count":19,"forks_count":18,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-14T22:18:41.376Z","etag":null,"topics":["datatable","datatables","datatables-plugin","grid","nuxt","nuxtjs","table","vue","vue3","vuejs"],"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/bhaveshpatel200.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["vue3-datatable","vue3-datatable-document"]}},"created_at":"2022-11-12T11:08:40.000Z","updated_at":"2024-10-12T17:37:49.000Z","dependencies_parsed_at":"2023-12-19T01:01:53.527Z","dependency_job_id":"e3ee6562-5c6c-48d7-8b81-814f919919fc","html_url":"https://github.com/bhaveshpatel200/vue3-datatable","commit_stats":{"total_commits":28,"total_committers":2,"mean_commits":14.0,"dds":0.0714285714285714,"last_synced_commit":"501ac61dde3439a1b9873f35a159534acddbd431"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhaveshpatel200%2Fvue3-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhaveshpatel200%2Fvue3-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhaveshpatel200%2Fvue3-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhaveshpatel200%2Fvue3-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bhaveshpatel200","download_url":"https://codeload.github.com/bhaveshpatel200/vue3-datatable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247419861,"owners_count":20936012,"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","datatables","datatables-plugin","grid","nuxt","nuxtjs","table","vue","vue3","vuejs"],"created_at":"2024-10-13T22:18:38.992Z","updated_at":"2025-04-06T01:10:40.014Z","avatar_url":"https://github.com/bhaveshpatel200.png","language":"Vue","funding_links":["https://github.com/sponsors/vue3-datatable","https://github.com/sponsors/vue3-datatable-document","https://www.buymeacoffee.com/bhplugin"],"categories":["Vue"],"sub_categories":[],"readme":"# @bhplugin/vue3-datatable\n\n## Example\n\n[Document \u0026 Demos](https://vue3-datatable-document.vercel.app)\n\n## Install\n\n#### NPM\n\n```bash\nnpm install @bhplugin/vue3-datatable --save\n```\n\n#### Yarn\n\n```bash\nyarn add @bhplugin/vue3-datatable\n```\n\n#### Bower\n\n```bash\nbower install @bhplugin/vue3-datatable --save\n```\n\n## Usage\n\n```html\n\u003ctemplate\u003e\n \u003cvue3-datatable :rows=\"rows\" :columns=\"cols\"\u003e \u003c/vue3-datatable\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n import { ref } from \"vue\";\n import Vue3Datatable from \"@bhplugin/vue3-datatable\";\n import \"@bhplugin/vue3-datatable/dist/style.css\";\n\n const cols = ref([\n { field: \"id\", title: \"ID\", width: \"90px\", filter: false },\n { field: \"name\", title: \"Name\" },\n { field: \"username\", title: \"Username\" },\n { field: \"email\", title: \"Email\" },\n { field: \"phone\", title: \"Phone\" },\n { field: \"date\", title: \"Date\", type: \"date\" },\n { field: \"active\", title: \"Active\", type: \"bool\" },\n { field: \"age\", title: \"Age\", type: \"number\" },\n { field: \"address.city\", title: \"Address\" },\n { field: \"company.name\", title: \"Company\" },\n ]);\n\n const rows = ref([\n {\n id: 1,\n name: \"Leanne Graham\",\n username: \"Bret\",\n email: \"Sincere@april.biz\",\n address: {\n street: \"Kulas Light\",\n suite: \"Apt. 556\",\n city: \"Gwenborough\",\n zipcode: \"92998-3874\",\n geo: {\n lat: \"-37.3159\",\n lng: \"81.1496\",\n },\n },\n phone: \"1-770-736-8031 x56442\",\n website: \"hildegard.org\",\n company: {\n name: \"Romaguera-Crona\",\n catchPhrase: \"Multi-layered client-server neural-net\",\n bs: \"harness real-time e-markets\",\n },\n date: \"Tue Sep 27 2022 22:19:57\",\n age: 10,\n active: true,\n },\n .......\n ]);\n\u003c/script\u003e\n```\n\n## Props\n\n| Props | Type | Default | Description |\n| ----------------------- | :---------------------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **columns** (required) | array\u003ccolDef\u003e | [] | table columns |\n| **rows** (required) | array\u003cany\u003e | [] | table rows |\n| **isServerMode** | boolean | false | set **_true_** if you need server side pagination. |\n| **totalRows** | number | 0 | total number of rows. **_totalRows_** required when **_isServerMode_** is true |\n| **skin** | string | \"bh-table-striped bh-table-hover\" | custom class for skin ('**_bh-table-striped_**' - for stripe row, '**_bh-table-hover_**' - for hover row, '**_bh-table-bordered_**' - for bordered row, '**_bh-table-compact_**' - for compact table) |\n| **loading** | boolean | false | enable loader |\n| **hasCheckbox** | boolean | false | enable checkbox |\n| **search** | string | \"\" | enable global search |\n| **page** | number | 1 | current page |\n| **pageSize** | number | 10 | number of rows per page |\n| **pageSizeOptions** | array\u003cnumber\u003e | [10, 20, 30, 50, 100] | pagesize options |\n| **showPageSize** | boolean | true | enable pagesize options |\n| **rowClass** | array\u003cstring\u003e, function | \"\" | custom row class |\n| **cellClass** | array\u003cstring\u003e, function | \"\" | custom cell class |\n| **sortable** | boolean | true | enable sorting |\n| **sortColumn** | string | \"id\" | name of sort column |\n| **sortDirection** | string | \"asc\" | sort direction (asc or desc) |\n| **columnFilter** | boolean | false | enable individual column filter |\n| **columnFilterLang** | records\u003cstring,string\u003e | null | columns filters translation (**ex**: {no_filter: 'Aucun', contain: 'Contiens', not_contain: 'Ne contiens pas', equal: 'Egale', not_equal: 'Différent', start_with: 'Commence par', end_with: 'Termine par', greater_than: 'Supérieur à', greater_than_equal: 'Sup. ou égale à', less_than: 'Inférieur à', less_than_equal: 'Inf. ou égale à', is_null: 'Est null', is_not_null: 'Non null'} ) |\n| **pagination** | boolean | true | enable pagination |\n| **showNumbers** | boolean | true | enable numbers pagination |\n| **showNumbersCount** | number | 5 | show numbers of count in pagination |\n| **showFirstPage** | boolean | true | enable first page in pagination |\n| **showLastPage** | boolean | true | enable last page in pagination |\n| **firstArrow** | string | default arrow | custom first page arrow |\n| **lastArrow** | string | default arrow | custom last page arrow |\n| **previousArrow** | string | default arrow | custom previous page arrow |\n| **nextArrow** | string | default arrow | custom next page arrow |\n| **paginationInfo** | string | \"Showing {0} to {1} of {2} entries\" | custom pagination info |\n| **noDataContent** | string | No data available | custom no data message |\n| **stickyHeader** | boolean | false | enable fixed header |\n| **height** | string | 450px | only will be used when stickyHeader enabled |\n| **stickyFirstColumn** | boolean | false | enable fixed first column |\n| **cloneHeaderInFooter** | boolean | false | enable clone header in footer |\n| **selectRowOnClick** | boolean | false | enable to select row(checkbox) on row click |\n\n## Columns options\n\n| Props | Type | Default | Description |\n| ---------------- | :--------------- | --------- | ----------------------------------------------------- |\n| **isUnique** | boolean | false | db column is primary key or not |\n| **field** | string | \"\" | db column name |\n| **title** | string | \"\" | display column name |\n| **value** | string | \"\" | filter value if filter enabled |\n| **condition** | string | \"contain\" | default condition for column filter if filter enabled |\n| **type** | string | \"\" | column type (string, date, number, bool) |\n| **width** | string | \"\" | custom width of column |\n| **minWidth** | string | \"\" | custom minimum width of column |\n| **maxWidth** | string | \"\" | custom maximum width of column |\n| **hide** | boolean | false | show/hide column |\n| **filter** | boolean | true | enable column filter |\n| **search** | boolean | true | enabled global search |\n| **sort** | boolean | true | enable sorting |\n| **cellRenderer** | function, string | true | custom cell rendering |\n| **headerClass** | string | \"\" | custom header cell class |\n| **cellClass** | string | \"\" | custom cell class |\n\n## Events\n\n| Name | Description |\n| ------------------ | --------------------------------------------- |\n| **sortChange** | will trigger when sorting changed |\n| **searchChange** | will trigger when search changed |\n| **pageChange** | will trigger when page changed |\n| **pageSizeChange** | will trigger when pagesize changed |\n| **rowSelect** | will trigger when row selected using checkbox |\n| **filterChange** | will trigger when column filter changed |\n| **rowClick** | will trigger when row clicked |\n| **rowDBClick** | will trigger when row double clicked |\n\n## Methods\n\n| Name | Description |\n| ------------------------ | ---------------------------------------------------------------------------- |\n| **reset** | will reset all options like selected rows, filter, search, currennt page etc |\n| **getFilteredRows** | will returns all filtered rows |\n| **getVisibleRows** | will returns all visible rows |\n| **getColumnFilters** | will return all column filters |\n| **getSelectedRows** | will returns all selected rows |\n| **clearSelectedRows** | will unselect all selected rows |\n| **selectRow(index)** | will select row with the given index (non-existent row will be ignored) |\n| **unselectRow(index)** | will unselect row with the given index (non-existent row will be ignored) |\n| **isRowSelected(index)** | will return true if the row with given index is selected |\n\n\u003cbr/\u003e\n\n## Changelogs\n\n[Changelogs](https://vue3-datatable-document.vercel.app/changelog)\n\n\u003cbr/\u003e\n\n## License\n\n**_@bhplugin/vue3-datatable_** is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).\n\n\u003cbr/\u003e\n\n## **Our other plugins**\n\n\u003cbr/\u003e\n\n### Angular Datatable - [**@bhplugin/ng-datatable**](https://www.npmjs.com/package/@bhplugin/ng-datatable)\n\n\u003cbr/\u003e\n\n## Support\n\n\u003ca target=\"_blank\" href=\"https://www.buymeacoffee.com/bhplugin\"\u003e\n \u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" height=\"60\"\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhaveshpatel200%2Fvue3-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhaveshpatel200%2Fvue3-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhaveshpatel200%2Fvue3-datatable/lists"}