{"id":15019267,"url":"https://github.com/marcodpt/vue-tmx","last_synced_at":"2025-10-24T08:31:05.650Z","repository":{"id":57396692,"uuid":"131326922","full_name":"marcodpt/vue-tmx","owner":"marcodpt","description":"Vue json based table with bootstrap3","archived":false,"fork":false,"pushed_at":"2019-04-29T20:52:34.000Z","size":2622,"stargazers_count":13,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-31T00:32:34.733Z","etag":null,"topics":["aggregate","bootstrap3","component","filter","json","pagination","sort","table","vue"],"latest_commit_sha":null,"homepage":"https://marcodpt.github.io/vue-tmx","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/marcodpt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-27T17:36:54.000Z","updated_at":"2023-12-29T18:38:21.000Z","dependencies_parsed_at":"2022-09-13T12:02:45.630Z","dependency_job_id":null,"html_url":"https://github.com/marcodpt/vue-tmx","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fvue-tmx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fvue-tmx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fvue-tmx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fvue-tmx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcodpt","download_url":"https://codeload.github.com/marcodpt/vue-tmx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237937735,"owners_count":19390542,"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":["aggregate","bootstrap3","component","filter","json","pagination","sort","table","vue"],"created_at":"2024-09-24T19:53:14.796Z","updated_at":"2025-10-24T08:31:05.180Z","avatar_url":"https://github.com/marcodpt.png","language":"Vue","readme":"# vue-tmx \nVue json based table with bootstrap3  \n[Live Demo](http://marcodpt.github.io/vue-tmx)\n - very easy to use, ready out of the box\n - filters\n - checkbox\n - aggregations like sum, avg, min, max\n - pagination\n - group by\n\n```\nnpm install --save vue-tmx\n```\n\n## Usage\n```javascript\n  import Vue from 'vue'\n  import tmx from 'vue-tmx'\n\n  new Vue({\n    components: {\n      tmx: tmx,\n      modal: modal,\n    },\n    data: {\n      table: [/*My amazing data*/]\n    }\n  }).$mount('#app')\n```\n\nYou must use with **bootstrap3** css, or send a pull request with other frameworks :)\n```html\n  \u003ctmx :data=\"table\" /\u003e\n```\n\nWith modals\n```javascript\n  import {modal} from 'vue-transform'\n```\n\n```html\n  \u003cmodal /\u003e \n```\nmodal tag only one time in your app in any place\n\n### Props\n - data\n   - type: Array\n   - default: none\n   - description: if nothing is passed it will display loading icon, otherwise table data\n - fields\n   - type: Array\n   - default: none\n   - description: Field description, if nothing is passed it will deduce based on your data\n   - items (object):\n     - id\n       - type: String\n       - default: ''\n       - description: Field key inside the **data** json\n     - label\n       - type: String\n       - default: use same than **id** \n       - description: Field label\n     - format\n       - type: String\n       - default: string\n       - description: boolean, integer, number, date, string\n     - icon\n       - type: String\n       - default: ''\n       - description: One of **vue-awesome** icons \n     - button\n       - type: String\n       - default: ''\n       - description: One of **bootstrap3** buttons types, like success, danger, warning, ...\n     - click\n       - type: Function\n       - default: none\n       - description: button click method\n     - static\n       - type: Boolean\n       - default: true\n       - description: Field should be static or contain an input?\n - sort\n   - type: Boolean\n   - default: false\n   - description: is sortable?\n - rows \n   - type: Number\n   - default: 0\n   - description: Rows per page, 0 means without pagination \n - search \n   - type: Boolean\n   - default: false\n   - description: is search bar visible?\n - filter \n   - type: Boolean\n   - default: false\n   - description: is filter button visible?\n - group \n   - type: Boolean\n   - default: false\n   - description: is group button visible?\n - aggregate \n   - type: Boolean\n   - default: false\n   - description: is aggregations visible?\n - download \n   - type: Object\n   - default: none\n   - description: Download button info, if nothing passed no download button will be shown\n   - props:\n     - json\n       - type: Boolean\n       - default: false\n       - description: false means type = **csv**, true means type = **json** \n     - ident\n       - type: Number\n       - default: 2\n       - description: Identation for **json**\n     - field\n       - type: String\n       - default: \\t\n       - description: Field separator on **csv**\n     - line\n       - type: String\n       - default: \\n\n       - description: New line on **csv**\n     - header\n       - type: Boolean\n       - default: true\n       - description: Show header on **csv**\n     - file\n       - type: String\n       - default: download\n       - description: file name on download\n - methods \n   - type: Array\n   - default: []\n   - description: Array of user defined methods \n   - items (object):\n     - button\n       - type: String\n       - default: ''\n       - description:  One of **bootstrap3** buttons types, like success, danger, warning, ...\n     - icon \n       - type: String\n       - default: ''\n       - description: **vue-awesome** icon\n     - label \n       - type: String\n       - default: ''\n       - description: Button label\n     - click\n       - type: Function\n       - default: none\n       - description: on click function\n - icon \n   - type: String\n   - default: ''\n   - description: **vue-awesome** icon before table title\n - label\n   - type: String\n   - default: ''\n   - description: table title \n\n## Contribute\nWe need help! Our goals are:\n - Separate classes and styles in order to add more css frameworks\n - Change props api in order to correctly support other css frameworks\n - Add more css frameworks like bootstrap4, bulma and foundation\n - Separate as plugin functions like sort, filter, group, etc\n - More language support\n - Add tests\n - More usage examples and better home page\n - Add support to most browsers\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcodpt%2Fvue-tmx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcodpt%2Fvue-tmx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcodpt%2Fvue-tmx/lists"}