{"id":15067404,"url":"https://github.com/kellsworks/vue-datatable-x","last_synced_at":"2026-01-21T22:31:19.748Z","repository":{"id":256722208,"uuid":"856216041","full_name":"KellsWorks/vue-datatable-x","owner":"KellsWorks","description":"Vue 3 Datatable Component","archived":false,"fork":false,"pushed_at":"2024-09-26T20:10:32.000Z","size":89,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-22T16:04:48.863Z","etag":null,"topics":["datatable","vue","vue-3-datatable","vue3","vuedatatable"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KellsWorks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-09-12T07:35:04.000Z","updated_at":"2024-09-26T20:10:36.000Z","dependencies_parsed_at":"2024-09-29T11:54:42.439Z","dependency_job_id":null,"html_url":"https://github.com/KellsWorks/vue-datatable-x","commit_stats":null,"previous_names":["kellsworks/vue-datatable-x"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KellsWorks%2Fvue-datatable-x","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KellsWorks%2Fvue-datatable-x/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KellsWorks%2Fvue-datatable-x/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KellsWorks%2Fvue-datatable-x/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KellsWorks","download_url":"https://codeload.github.com/KellsWorks/vue-datatable-x/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248233935,"owners_count":21069493,"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","vue","vue-3-datatable","vue3","vuedatatable"],"created_at":"2024-09-25T01:20:47.964Z","updated_at":"2026-01-21T22:31:19.742Z","avatar_url":"https://github.com/KellsWorks.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue 3 Datatable X\n\nA highly customizable and feature-rich table component for Vue 3 applications\n\n## Features\n\n- Sortable columns\n- Pagination\n- Custom styling options\n- Striped rows\n- Loading state with customizable loaders\n- Search functionality\n- Responsive design with optional scrollbars\n- Cell click events\n- Customizable item display count\n\n## Installation\n\n```bash\nnpm install vue3-datatable-x\n```\n\n## Nuxt 3\n\n```ts \nimport Vue3EasyDataTable from 'vue3-datatable-x'\nimport 'vue3-datatable-x/dist/style.css'\n\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n  nuxtApp.vueApp.component('EasyDataTable', Vue3EasyDataTable)\n})\n```\n\n## Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cVue3DataTableX\n    :headers=\"headers\"\n    :items=\"items\"\n    :color=\"'#4CAF50'\"\n    :loading=\"isLoading\"\n    :search=\"searchField\"\n    :searchValue=\"searchQuery\"\n    :loader=\"'dots'\"\n    :showHorizontalScrollbar=\"true\"\n    :showVerticalScrollbar=\"false\"\n    :style=\"tableStyle\"\n    :striped=\"{ show: true, position: 'show-first' }\"\n    :totalItems=\"totalItemCount\"\n    :itemsPerPage=\"10\"\n    :currentPage=\"1\"\n    @update:page=\"handlePageChange\"\n    @update:itemsPerPage=\"handleItemsPerPageChange\"\n    @cell-click=\"handleCellClick\"\n  \u003e\n    \u003c!-- Optional: Custom cell content --\u003e\n    \u003ctemplate #cell-name=\"{ item }\"\u003e\n      \u003cstrong\u003e{{ item.name }}\u003c/strong\u003e\n    \u003c/template\u003e\n\n    \u003c!-- Optional: Custom loader --\u003e\n    \u003ctemplate #loader\u003e\n      \u003cMyCustomLoader /\u003e\n    \u003c/template\u003e\n  \u003c/Vue3DataTableX\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue';\nimport { Vue3DatatableX } from 'vue3-datatable-x';\n\nconst headers = [\n  { text: 'Name', value: 'name', position: 'left', style: { bold: true } },\n  { text: 'Age', value: 'age', position: 'center' },\n  { text: 'Email', value: 'email', position: 'right' },\n];\n\nconst items = ref([\n  { name: 'John Doe', age: 30, email: 'john@example.com' },\n  { name: 'Jane Smith', age: 25, email: 'jane@example.com' },\n  // ... more items\n]);\n\nconst isLoading = ref(false);\nconst searchField = 'name';\nconst searchQuery = ref('');\n\nconst tableStyle = {\n  borderColor: '#ddd',\n  borderWidth: 1,\n  borderRadius: 2,\n};\n\nconst handlePageChange = (page) =\u003e {\n  console.log('Page changed:', page);\n};\n\nconst handleItemsPerPageChange = (count) =\u003e {\n  console.log('Items per page changed:', count);\n};\n\nconst handleCellClick = ({ item, data, index, event }) =\u003e {\n  console.log('Cell clicked:', { item, data, index, event });\n};\n\u003c/script\u003e\n```\n\n## Props\n\n| Prop Name | Type | Required | Default | Description |\n|-----------|------|----------|---------|-------------|\n| headers | Array\u003cHeader\u003e | Yes | - | Array of header objects defining the table columns |\n| items | Array\u003cTableItem\u003e | Yes | - | Array of data objects to be displayed in the table |\n| color | String | No | - | Primary color for the table (e.g., for selected page) |\n| loading | Boolean | No | false | Whether the table is in a loading state |\n| search | String | No | - | The field to search in the items array |\n| searchValue | String | No | - | The value to search for |\n| loader | String | No | 'md-loop' | Type of loader to display ('dots', 'bubbles', 'alt-loop', 'md-loop', 'twotone-loop') |\n| loaderStyle | LoaderStyle (see types) | No | { height: 50, width: 50 } | Custom styles for the loader |\n| showHorizontalScrollbar | Boolean | No | false | Whether to show a horizontal scrollbar |\n| showVerticalScrollbar | Boolean | No | false | Whether to show a vertical scrollbar |\n| style | TableStyle (see types) | No | - | Custom styles for the table |\n| striped | Object | No | - | Configuration for striped rows |\n| totalItems | Number | No | - | Total number of items (for pagination) |\n| itemsPerPage | Number | No | 10 | Number of items to display per page |\n| currentPage | Number | No | 1 | Current active page |\n\n### Events\n\n| **Event**              | **Description**                                                     |\n|------------------------|---------------------------------------------------------------------|\n| `update:page`          | Emitted when the current page changes.                              |\n| `update:itemsPerPage`  | Emitted when the number of items per page changes.                  |\n| `cell-click`           | Emitted when a cell is clicked, providing details about the clicked item. |\n\n### Slots\n\n| **Slot**               | **Description**                                                     |\n|------------------------|---------------------------------------------------------------------|\n| `#[header.value]`       | Slot for custom content in a specific column, identified by `header.value`. |\n| `#loader`              | Slot for a custom loader component.                                 |\n\n## Styling\n\nThe component uses Tailwind CSS classes for styling. You can customize the appearance by providing a `style` prop or overriding the default classes.\n\n| **Type**       | **Description**                                                                                         | **Properties**                                                                                                                                                                   |\n|----------------|---------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| **HeaderStyle**  | Defines the style of table headers.                                                                    | `uppercase?: boolean` \u003cbr\u003e `bold?: boolean` \u003cbr\u003e `italic?: boolean` \u003cbr\u003e `underline?: boolean` \u003cbr\u003e `color?: string` \u003cbr\u003e `padding?: number` \u003cbr\u003e `cellStyle?: ItemStyle`         |\n| **HeaderPosition** | Specifies the position of the header text.                                                           | Can be one of: `'left'`, `'right'`, `'center'`.                                                                                                                                  |\n| **Header**        | Represents a table header with various options.                                                       | `text: string` \u003cbr\u003e `value: string` \u003cbr\u003e `sort?: boolean` \u003cbr\u003e `sortBy?: string` \u003cbr\u003e `style?: HeaderStyle` \u003cbr\u003e `position?: HeaderPosition` \u003cbr\u003e `rowSpan?: number` \u003cbr\u003e `colSpan?: number` |\n| **TableStyle**    | Defines the overall style of the table.                                                               | `backgroundColor?: string` \u003cbr\u003e `borderColor?: string` \u003cbr\u003e `borderStyle?: string` \u003cbr\u003e `borderWidth?: number` \u003cbr\u003e `borderRadius?: number`                                       |\n| **ItemStyle**     | Describes the style of individual items (cells) in the table.                                         | `backgroundColor?: string` \u003cbr\u003e `textColor?: string` \u003cbr\u003e `fontSize?: number` \u003cbr\u003e `fontWeight?: number` \u003cbr\u003e `fontFamily?: string` \u003cbr\u003e `textAlign?: 'left' \\| 'center' \\| 'right'` \u003cbr\u003e `padding?: number` \u003cbr\u003e `margin?: number` \u003cbr\u003e `borderRightWidth?: number` \u003cbr\u003e `borderBottomWidth?: number` \u003cbr\u003e `borderLeftWidth?: number` \u003cbr\u003e `borderTopWidth?: number` \u003cbr\u003e `borderColor?: string` |\n| **Value**         | Represents the value of a table item.                                                                 | Can be one of: `string`, `number`, `boolean`, `Date`.                                                                                                                            |\n| **TableItem**     | Defines a table item (cell) and its properties.                                                       | `[key: string]: Value` \u003cbr\u003e `isClickable?: boolean` \u003cbr\u003e `onClick?: () =\u003e void` \u003cbr\u003e `style?: ItemStyle`                                                                         |\n| **Striped**       | Describes whether to show striped rows and their pattern.                                             | `show?: boolean` \u003cbr\u003e `position?: \"skip-first\" \\| \"show-first\"`                                                                                                                  |\n| **Loader**        | Represents different loading animations.                                                              | Can be one of: `\"dots\"`, `\"alt-loop\"`, `\"twotone-loop\"`, `\"md-loop\"`, `\"bubbles\"`.                                                                                               |\n| **LoaderStyle**   | Defines the style of the loader animation.                                                            | `color?: string` \u003cbr\u003e `width?: number` \u003cbr\u003e `height?: number` \u003cbr\u003e `position?: \"center\" \\| \"left\" \\| \"right\" \\| \"bottom\"`                                                        |\n\nThis table summarizes the purpose and properties of each type or interface, providing an overview of their usage and fields.\n\n## Contributing\nHere's how you can help:\n\n1. Fork the repository\n2. Create a new branch for your feature or bug fix\n3. Make your changes and commit them with a clear commit message\n4. Push your changes to your fork\n5. Submit a pull request to the main repository\n\nPlease ensure that your code follows the existing style and includes appropriate tests.\n## Issues and Bug Reports\nThis package is still in progress. If you encounter any issues or want to request a new feature, please open an issue on our GitHub repository. When reporting bugs, please include:\n\n1. A clear description of the issue\n2. Steps to reproduce the problem\n3. Expected behavior\n4. Actual behavior\n5. Any relevant code snippets or error messages\n\n## License\n\n[MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkellsworks%2Fvue-datatable-x","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkellsworks%2Fvue-datatable-x","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkellsworks%2Fvue-datatable-x/lists"}