{"id":15980476,"url":"https://github.com/boussadjra/vueye-table","last_synced_at":"2025-09-01T12:03:20.031Z","repository":{"id":37742893,"uuid":"146220262","full_name":"boussadjra/vueye-table","owner":"boussadjra","description":"A data table created using Vue.js","archived":false,"fork":false,"pushed_at":"2024-03-30T07:19:31.000Z","size":7163,"stargazers_count":112,"open_issues_count":5,"forks_count":15,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-30T08:52:27.693Z","etag":null,"topics":["datatables","vue-components","vue-datatable","vuejs2","vueye","vueye-table"],"latest_commit_sha":null,"homepage":"https://boussadjra.github.io/vueye-table/","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/boussadjra.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2018-08-26T22:13:07.000Z","updated_at":"2024-04-12T23:37:02.000Z","dependencies_parsed_at":"2023-10-03T02:36:03.557Z","dependency_job_id":"4ca00eb2-916e-4519-ad7d-9e68b6be8b81","html_url":"https://github.com/boussadjra/vueye-table","commit_stats":{"total_commits":169,"total_committers":3,"mean_commits":"56.333333333333336","dds":0.2899408284023669,"last_synced_commit":"895d4055f025dc699c0b1cb3df71a44e8f2de87b"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boussadjra%2Fvueye-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boussadjra%2Fvueye-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boussadjra%2Fvueye-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boussadjra%2Fvueye-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/boussadjra","download_url":"https://codeload.github.com/boussadjra/vueye-table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252317117,"owners_count":21728529,"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":["datatables","vue-components","vue-datatable","vuejs2","vueye","vueye-table"],"created_at":"2024-10-08T00:05:18.054Z","updated_at":"2025-05-05T22:19:32.453Z","avatar_url":"https://github.com/boussadjra.png","language":"Vue","funding_links":[],"categories":["UI Components [🔝](#readme)","Components \u0026 Libraries","UI Components"],"sub_categories":["UI Components","Table"],"readme":"# Vueye Table\n\nVueye Table is a Vue 3 component for displaying data in a table.\n\n## Installation\n\nVue 3:\n\n```bash\nnpm install vueye-table\n```\n\nNuxt :\n\n```bash\nnpm install nuxt-vueye-table\n```\n\n## Usage\n\nVue :\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\n    import { VueyeTable } from 'vueye-table'\n\n    const items = [\n        {\n            id: 60,\n            name: {\n                first_name: 'Brahim',\n                last_name: 'Boussadjra',\n            },\n            age: 30,\n            address: {\n                country: 'Algeria',\n                city: 'Algiers',\n            },\n        },\n        //...\n    ]\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cVueyeTable :data=\"items\" /\u003e\n\u003c/template\u003e\n```\n\nNuxt :\n\n```js\n// nuxt.config.js\nexport default defineNuxtConfig({\n    modules: ['nuxt-vueye-table'],\n    // ...\n})\n```\n\n### VueyeTableProps\n\n| Prop Name | Type | Default Value | Description |\n| --- | --- | --- | --- |\n| data | TData[] | [] | An array of data for the table. |\n| columnHeaders | TColumn[] or a function returning an array | [] | An array of column headers for the table. |\n| itemValue | string | 'id' | The property name used as a unique identifier for each item. |\n| perPage | number | 10 | The number of items displayed per page. |\n| currentPage | number | 1 | The current page number. |\n| perPageOptions | number[] or a function returning an array | [5, 10, 20, 30] | An array of options for the number of items per page. |\n| loading | boolean | false | Indicates whether the table is in a loading state. |\n| selected | TData[], Row[], or null | null | An array of selected items or rows. |\n| selectMode | 'page' or 'all' | 'all' | The mode for selecting items: 'page' or 'all'. |\n| caption | string | '' | The table's caption. |\n| summary | string | '' | The table's summary. |\n\n### VueyeTableEmits\n\n| Emit Name       | Parameters     | Description                           |\n| --------------- | -------------- | ------------------------------------- |\n| update:loading  | value: boolean | Emits when the loading state changes. |\n| update:selected | value: T[]     | Emits when the selected items change. |\n\n### PaginationEmits\n\n| Emit Name          | Parameters    | Description                                      |\n| ------------------ | ------------- | ------------------------------------------------ |\n| update:currentPage | value: number | Emits when the current page changes.             |\n| update:perPage     | value: number | Emits when the number of items per page changes. |\n\n### SlotHeader\n\nThe SlotHeader component defines various slots for customizing the table header.\n\n-   `headerCell.\u003cColumnKey\u003e`: Slot for customizing the content of a specific column header.\n-   `headerCellContent.\u003cColumnKey\u003e`: Slot for customizing the content within a specific column header cell.\n-   `headers`: Slot for customizing the entire table header, containing all column headers.\n-   `checkbox`: Slot for customizing the checkbox used for selecting all items.\n\n### SlotRow\n\nThe SlotRow component defines various slots for customizing the table rows.\n\n-   `itemCell.\u003cItemKey\u003e`: Slot for customizing the content of a specific item cell within a row.\n-   `itemCellContent.\u003cItemKey\u003e`: Slot for customizing the content within a specific item cell.\n-   `rows`: Slot for customizing the entire table rows, containing all rows.\n-   `row`: Slot for customizing a specific row.\n-   `checkbox`: Slot for customizing the checkbox used for selecting a specific row.\n\nYou can use these Markdown tables to document the props, emits, and slot definitions for the data table and pagination components in your Vue 3 project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboussadjra%2Fvueye-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fboussadjra%2Fvueye-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboussadjra%2Fvueye-table/lists"}