{"id":13535755,"url":"https://github.com/coderdiaz/vue-datasource","last_synced_at":"2025-09-30T04:32:22.100Z","repository":{"id":57142554,"uuid":"78689257","full_name":"coderdiaz/vue-datasource","owner":"coderdiaz","description":"A vue.js component to create dynamic tables","archived":true,"fork":false,"pushed_at":"2019-07-24T02:14:34.000Z","size":2560,"stargazers_count":416,"open_issues_count":6,"forks_count":91,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-01-19T18:42:43.107Z","etag":null,"topics":["dynamic-tables","laravel","pagination","table","vue","vue-datasource","vue2","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/coderdiaz.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}},"created_at":"2017-01-11T23:25:20.000Z","updated_at":"2025-01-18T12:22:45.000Z","dependencies_parsed_at":"2022-09-05T11:50:19.531Z","dependency_job_id":null,"html_url":"https://github.com/coderdiaz/vue-datasource","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Fvue-datasource","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Fvue-datasource/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Fvue-datasource/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Fvue-datasource/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coderdiaz","download_url":"https://codeload.github.com/coderdiaz/vue-datasource/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234702069,"owners_count":18873824,"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":["dynamic-tables","laravel","pagination","table","vue","vue-datasource","vue2","vuejs"],"created_at":"2024-08-01T09:00:25.896Z","updated_at":"2025-09-30T04:32:16.783Z","avatar_url":"https://github.com/coderdiaz.png","language":"JavaScript","readme":"[WIP] Vue Datasource go back renew. Coming soon V3.\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/coderdiaz/vue-datasource\"\u003e\n        \u003cimg src=\"logo.png\" width=\"120\"\u003e\n    \u003c/a\u003e\n    \u003ch2 align=\"center\"\u003eVue Datasource\u003c/h2\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    A Vue.js component to create dynamic tables. Compatible with Vue 2.x and Laravel.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://npmjs.com/package/vue-datasource\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/vue-datasource.svg?style=flat-square\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/coderdiaz/vue-datasource/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/coderdiaz/vue-datasource/stargazers\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/coderdiaz/vue-datasource.svg?style=flat-square\"\u003e\u003c/a\u003e\n    \u003ca href=\"http://npmjs.com/package/vue-datasource\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-datasource.svg?style=flat-square\"\u003e\u003c/a\u003e\n    \u003ca href=\"http://npmjs.com/package/vue-datasource\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/vue-datasource.svg?style=flat-square\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.paypal.me/coderdiaz\"\u003e\u003cimg src=\"https://img.shields.io/badge/invite-coffee-red.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n### Demo\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshot.png\"\u003e\n\u003c/p\u003e\n\n### Donate\n\n\u003ca class=\"bmc-button\" target=\"_blank\" href=\"https://www.buymeacoffee.com/coderdiaz\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/BMC-btn-logo.svg\" alt=\"Buy me a coffee\"\u003e\u003cspan style=\"margin-left:5px\"\u003eBuy me a coffee\u003c/span\u003e\u003c/a\u003e\n\n### Install/Usage\nFor use this package is necessary install [babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) dependency.\n\n```\n$ npm install vue-datasource\n```\n\n```html\n\u003cdiv id=\"#app\"\u003e\n    \u003cserver-datasource\n        :source=\"items\"\n        :total=\"total_of_items\"\n        :columns=\"columns\"\n        :actions=\"actions\"\u003e\u003c/server-datasource\u003e\n\u003c/div\u003e\n```\n\n```javascript\nimport { ServerDatasource } from 'vue-datasource'\n\nnew Vue({\n    el: '#app',\n    components: {\n        ServerDatasource\n    },\n    data() {\n        return {\n            items: [...],\n            total: 100,\n            columns: [...],\n            actions: [...]\n        }\n    }\n});\n```\n\n## Documentation\n\n### Available Props\n| Prop        | Type    | Default        | Description                                                                        |\n|-------------|---------|----------------|------------------------------------------------------------------------------------|\n| source      | Array   |                | Items to show in table                                                             |\n| total       | Number  |                | Total of items\n| translation | Object  | [Object]       | Defines the table labels language ([structure](#translation-structure))            |\n| limits      | Array   | [1,5,10,15,20] | Defines the limits to display                                                      |\n| columns     | Array   |                | Columns to display                                                                 |\n| actions     | Array   |                | Action buttons ([structure](#action-event-sctructure))                             |\n\n### Available Events\n| Event       | Description                                                                                         |\n|-------------|-----------------------------------------------------------------------------------------------------|\n| change      | Handle show limit changed. Gets object with new show limit and current page `{perpage: 10, page: 2}`|\n| searching   | Handles search input. Gets string as parameter                                                      |\n| column-sort | Only if `order` is defined in column array. Return the current column sorted with metadata ([Sort Column](#sort-column))\n\n### Columns\nEach column object needs `name` and `key` attributes.\n```javascript\n{\n    ...,\n    columns: [\n        {\n            name: 'Name', // Table column name to display\n            key: 'name', // Key name from row object\n        }\n    ]\n}\n```\n\nLaravel users can access relationships through the `key` attribute. Lets say we have the following object in our users array:\n\n```javascript\n[\n    ...,\n    {\n        name: 'Foo',\n        last_name: 'Bar'\n        role_id: 1,\n        role: {\n            name: 'admin'\n        }\n    }\n]\n```\n\nTo get the user role we would need to define in our columns array:\n```javascript\n{\n    ...,\n    columns: [\n        {\n            name: 'Role',\n            key: 'role.name'\n        }\n    ]\n}\n```\n\n### Sort column\n**[New]** You only need a `order` property in column defined for use this feature.\n```javascript\n{\n    ...,\n    columns: [\n        {\n            name: 'Name',\n            key: 'name',\n            order: true\n        }\n    ]\n}\n```\n\nThis feature emit a event `column-sort` with this data object\n```javascript \n{\n    sort: {\n        key: 'name',\n        order: false\n    },\n    type: 'DESC'\n}\n```\n\n### Render column\nThis callback will modify the data for various operations. Such as applying a specific format or an arithmetic operation to the column value and return it.\n\n```javascript\n{\n    ...,\n    columns: [\n        {\n            name: 'Name',\n            key: 'name',\n            render(value) { // Render callback\n                return `Enginner ${value}`;\n            }\n        }\n    ]\n}\n```\n\n**[New]** Now you can use JSX for render other templates and too use the row data.\n\n```javascript\n{\n    ...,\n    columns: [\n        {\n            name: 'Name',\n            key: 'key',\n            render (value, row) {\n                return \u003cstrong\u003e{value}\u003c/strong\u003e\n            }\n        }\n    ]\n}\n```\n\n### Translation Structure\n```javascript\n{\n    limit: 'Limit',\n    search: 'Search',\n    placeholder_search: 'Type to search..',\n    records_not_found: 'No records found',\n    pagination: {\n        show: 'Showing',\n        to: 'to',\n        of: 'of',\n        entries: 'entries'\n    }\n}\n```\n\n### Action Event Sctructure\n```javascript\n{\n    ...,\n    actions: [\n        {\n            text: 'Click me', // Button label\n            icon: 'glyphicon glyphicon-check', // Button icon\n            class: 'btn-primary', // Button class (background color)\n            show(selectedRow) { // Event to define a condition to display the button with the selected row\n                return true\n            },\n            event(e, row) { // Event handler callback. Gets event instace and selected row\n                console.log('Click row: ', row); // If no row is selected, row will be NULL\n            }\n        }\n    ]\n}\n```\n\n### Development\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# run unit tests\nnpm run unit\n\n# run e2e tests\nnpm run e2e\n\n# run all tests\nnpm test\n```\n\nFor detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).\n\n### Implementation examples\n- Using Laravel 5.3 and pagination: [laravel-datasource-example](https://github.com/coderdiaz/laravel-datasource-example).\n\n### Contributions\nAll contributions are welcome send your PR and Issues.\n\n### License\nThis is a open-source software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/vue-datasource/master/LICENSE)\n\n##### Crafted by Javier Diaz. Translation by [itsuwaribito](https://github.com/itsuwaribito)\n","funding_links":["https://www.paypal.me/coderdiaz","https://www.buymeacoffee.com/coderdiaz"],"categories":["UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","表","UI Components","Table"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderdiaz%2Fvue-datasource","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoderdiaz%2Fvue-datasource","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderdiaz%2Fvue-datasource/lists"}