{"id":13810048,"url":"https://github.com/hunterae/vue-table-for","last_synced_at":"2025-10-27T08:31:39.168Z","repository":{"id":33549647,"uuid":"157612945","full_name":"hunterae/vue-table-for","owner":"hunterae","description":"Easily build a table for your records","archived":false,"fork":false,"pushed_at":"2024-06-30T18:04:27.000Z","size":9032,"stargazers_count":33,"open_issues_count":27,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-14T00:02:23.679Z","etag":null,"topics":["table","table-builder","vue","vue-table","vuejs","vuejs-components","vuejs2"],"latest_commit_sha":null,"homepage":"https://hunterae.github.io/vue-table-for/","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/hunterae.png","metadata":{"files":{"readme":"README.md","changelog":null,"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-11-14T21:25:06.000Z","updated_at":"2022-05-13T13:34:26.000Z","dependencies_parsed_at":"2024-09-26T23:57:52.351Z","dependency_job_id":"b4f2efd6-94cd-4880-a734-4f0f6a198f21","html_url":"https://github.com/hunterae/vue-table-for","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunterae%2Fvue-table-for","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunterae%2Fvue-table-for/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunterae%2Fvue-table-for/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hunterae%2Fvue-table-for/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hunterae","download_url":"https://codeload.github.com/hunterae/vue-table-for/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238470185,"owners_count":19477792,"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":["table","table-builder","vue","vue-table","vuejs","vuejs-components","vuejs2"],"created_at":"2024-08-04T02:00:44.155Z","updated_at":"2025-10-27T08:31:38.762Z","avatar_url":"https://github.com/hunterae.png","language":"JavaScript","readme":"# vue-table-for\n\n[![npm version](https://badge.fury.io/js/vue-table-for.svg)](https://badge.fury.io/js/vue-table-for)\n\n## Installation\n\nYarn:\n\n```\nyarn add vue-table-for\n```\n\nNpm:\n\n```\nnpm install vue-table-for\n```\n\nCDN: [UNPKG](https://unpkg.com/vue-table-for) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-table-for)\n\n## Usage\n\nFirst you need to load `vue-table-for` somewhere in your app:\n\n```\nimport Vue from 'vue'\nimport TableFor from 'vue-table-for'\nVue.use(TableFor)\n```\n\n## DEMO\n\n[LIVE DEMO](https://hunterae.github.io/vue-table-for/) for examples.\n\n## Components\n\n### TableFor\n\nBuilds a table for a collection of records.\n\nOnly the data columns are required. Header columns will be automatically generated based on the data columns but can be overridden using slots.\n\n```\n\u003ctemplate\u003e\n  \u003ctable-for\n    class=\"table table-bordered\"\n    :records=\"records\"\n  \u003e\n    \u003ctd name=\"first_name\" /\u003e\n    \u003ctd name=\"last_name\" /\u003e\n    \u003ctd name=\"email\" /\u003e\n  \u003c/table-for\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Axios from 'axios'\nexport default {\n  data() {\n    return {\n      records: []\n    }\n  },\n  mounted() {\n    axios\n      .get(\n        \"https://raw.githubusercontent.com/hunterae/vue-table-for/master/examples/people.json\"\n      )\n      .then(response =\u003e {\n        this.records = response.data\n      })\n  }\n}\n\u003c/script\u003e\n```\n\nMore documentation coming soon\n\n## Coming Soon\n\n- Tests\n- More documentation and examples (including the TableFor API)\n- Ability to specify table columns as a prop\n- Globally apply options to each data column\n- Sorting utilities and abilities for each column\n- Styling and overrides for the pagination links\n- Filtering utilities\n- Ability to provide slots in relation to various hooks provided throughout the component (integration with vue-slot-hooks - wip plugin)\n- Install plugin with a global instance of Vue (i.e. not as plugin using Vue.use(TableFor))\n- Release notes and tagged versions in Git\n\n## Acknowledgements\n\nvue-table-for is more-or-less a direct port over of my [Ruby on Rails' table-for Gem](https://github.com/hunterae/table-for), which spawned out of my [Ruby on Rails' blocks Gem](https://github.com/hunterae/blocks). Upon learning VueJS, I realized that a ton of the concepts could be reused (and possibly improved) using VueJS syntax.\n\nI also thank [Fernando Garcia](https://github.com/fernandoagarcia) for recommending VueJS in the first place, helping me learn a lot of the ins and outs, and also acting as a collaborator for this plugin.\n\nI studied the [vue-fullscreen](https://github.com/mirari/vue-fullscreen) plugin and reproduced a lot of similar approaches for how that plugin is setup, particularly with how it is used to create its own documentation and examples.\n\nI also followed used approaches from these two articles [How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0](https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3) and [Writing a very simple plugin in Vue.js - (Example)](https://dev.to/nkoik/writing-a-very-simple-plugin-in-vuejs---example-8g8) in learning how to create a VueJS plugin.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhunterae%2Fvue-table-for","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhunterae%2Fvue-table-for","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhunterae%2Fvue-table-for/lists"}