{"id":21598106,"url":"https://github.com/matfish2/vue-tables","last_synced_at":"2025-04-04T14:08:03.178Z","repository":{"id":58228563,"uuid":"45352832","full_name":"matfish2/vue-tables","owner":"matfish2","description":"Vue.js grid components","archived":false,"fork":false,"pushed_at":"2017-11-07T12:42:12.000Z","size":487,"stargazers_count":357,"open_issues_count":1,"forks_count":77,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-03-28T13:08:03.927Z","etag":null,"topics":["grid","table","vue"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-tables","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/matfish2.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}},"created_at":"2015-11-01T18:47:36.000Z","updated_at":"2024-04-03T01:10:50.000Z","dependencies_parsed_at":"2022-08-31T09:20:40.383Z","dependency_job_id":null,"html_url":"https://github.com/matfish2/vue-tables","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matfish2%2Fvue-tables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matfish2%2Fvue-tables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matfish2%2Fvue-tables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matfish2%2Fvue-tables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matfish2","download_url":"https://codeload.github.com/matfish2/vue-tables/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190251,"owners_count":20898702,"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":["grid","table","vue"],"created_at":"2024-11-24T18:11:18.539Z","updated_at":"2025-04-04T14:08:03.148Z","avatar_url":"https://github.com/matfish2.png","language":"JavaScript","funding_links":[],"categories":["Specific Libraries"],"sub_categories":["Vue.js"],"readme":"# Vue Tables\n\nNote: using strings as templates is deprecated and will be removed in an upcoming release. Please use functions instead.\n\n[![npm version](https://badge.fury.io/js/vue-tables.svg)](https://badge.fury.io/js/vue-tables) [![Build Status](https://travis-ci.org/matfish2/vue-tables.svg?branch=master)](https://travis-ci.org/matfish2/vue-tables)\n\nUsers of VueJs 2 please use [this package](https://github.com/matfish2/vue-tables-2) instead.\n\nThis Vue package offers an easy and intuitive way of displaying Bootstrap-styled grids with data coming either from the client or from the server.\n\n- [Dependencies](#dependencies)\n- [Installation](#installation)\n- [Usage](#usage)\n    - [Client Side](#client-side)\n    - [Server Side](#server-side)\n- [Methods](#methods)\n- [Events](#events)\n- [Custom Filters](#custom-filters)\n- [List Filters](#list-filters)\n- [Options](#options)\n\n# Dependencies\n\n* Vue.js (\u003e=1.0). Required. ([NOT 1.0.27](https://github.com/matfish2/vue-tables/issues/107))\n* Bootstrap (CSS). Optional.\n* vue-resource (\u003e=0.9.0) (server-side component only)\n\n# Installation\n\n## Option 1\n\nCompile the code using `browserify` with the `stringify` transform, or [webpack](https://github.com/matfish2/vue-tables/issues/23)\n\n    npm install vue-tables\n\nRequire the script:\n\n    var VueTables = require('vue-tables');\n\n## Option 2\n\nImport the [compiled standalone file](https://raw.githubusercontent.com/matfish2/vue-tables/master/dist/vue-tables.min.js) into your HTML, which will expose a global `VueTables` variable.\n\n# Usage\n\n## Register the component(s)\n\n    Vue.use(VueTables.client, options);\n\n  Or/And\n\n    Vue.use(require('vue-resource'));\n    Vue.use(VueTables.server, options);\n\nIf you wish to customize the table template itself, pass the altered version as the third argument, like so:\n\n    Vue.use(VueTables.client, {}, { template: require('./my-template.html') });\n\n## Client Side\n\nAdd the following element to your page wherever you want it to render.\nMake sure to wrap it with a parent element you can latch your vue instance into.\n\n    \u003cdiv id=\"people\"\u003e\n      \u003cv-client-table :data=\"tableData\" :columns=\"columns\" :options=\"options\"\u003e\u003c/v-client-table\u003e\n    \u003c/div\u003e\n\nCreate a new Vue instance (You can also nest it within other components). An example works best to illustrate the syntax:\n\n    new Vue({\n      el:\"#people\",\n      data: {\n        columns:['id','name','age'],\n        tableData: [\n          {id:1, name:\"John\",age:\"20\"},\n          {id:2, name:\"Jane\",age:\"24\"},\n          {id:3, name:\"Susan\",age:\"16\"},\n          {id:4, name:\"Chris\",age:\"55\"},\n          {id:5, name:\"Dan\",age:\"40\"}\n        ],\n        options: {\n          // see the options API\n        }\n      }\n    });\n\n  Important: when loading data asynchronously add a `v-if` conditional to the component along with some `loaded` flag, so it will only compile once the data is attached.\n\n  [Check out the live client-side demo](https://jsfiddle.net/matfish2/f5h8xwgn/)\n\n## Server side\n\n    \u003cdiv id=\"people\"\u003e\n      \u003cv-server-table url=\"/people\" :columns=\"columns\" :options=\"options\"\u003e\u003c/v-server-table\u003e\n    \u003c/div\u003e\n\nJavascript:\n\n    new Vue({\n        el:\"#people\",\n        data: {\n          columns:['id','name','age'],\n          options: {\n           // see the options API\n         }\n      }\n    });\n\n  All the data is passed in the following GET parameters: `query`,`limit`,`page`,`orderBy`,`ascending`,`byColumn`.\n  You need to return a JSON object with two properties:\n\n  `data` `array` - An array of row objects with identical keys.\n\n  `count` `number` - Total count before limit.\n\n\n### Implementations\n\n  I have included [an Eloquent implementation](https://github.com/matfish2/vue-tables/tree/master/server/PHP) for Laravel Users.\n  If you happen to write other implementations for PHP or other languages, a pull request would be most welcome, under the following guidelines:\n\n  a. Include the class under `./server/{language}`.\n\n  b. Name it according to convention: `{concrete}VueTables`.\n\n  c. if this is the first implementation in this language add an interface similar to the one found in the PHP folder.\n\n  d. Have it implement the interface.\n\n  e. TEST IT.\n\n## Methods\n\nUse [refs](https://vuejs.org/api/#v-ref) to get the instance.\n\n* `setPage(page)`\n* `refresh()` - server component only\n\n## Events\n\n`vue-tables.loading` (server-side)\n\nFires off when a request is sent to the server. Sends through the request data.\n\n`vue-tables.loaded` (server-side)\n\nFires off after the response data has been attached to the table. Sends through the response.\n\nYou can listen to those two complementary events on a parent component and use them to add and remove a *loading indicator*, respectively.\n\n`vue-tables.error` (server-side)\n\nFires off if the server returns an invalid code. Sends through the error\n\n`vue-tables.row-click`\n\nFires off after a row was clicked. sends through the row\n\n`vue-tables.filtered` (client-side)\n\nFires off after a filter was applied to the dataset. Send through the filtered subset.\n\n\n# Custom Filters\n\nCustom filters allow you to integrate your own filters into the plugin using Vue's events system.\n\n## Client Side Filters\n\nA. use the `customFilters` option to declare your filters, following this syntax:\n\n      customFilters: [\n        {\n          name:'alphabet',\n          callback: function(row, query) {\n            return row.name[0] == query;\n        }\n        }\n      ]\n\nB. On your application broadcast an event when a filter was applied, and pass the query:\n\n      this.$broadcast('vue-tables.filter::alphabet', query);\n\n## Server Side Filters\n\nA. use the `customFilters` option to declare your filters, following this syntax:\n\n      customFilters: ['alphabet','age-range']\n\nB. the same as in the client component.\n\n# List Filters\n\nWhen filtering by column, the `listColumns` option allows for filtering columns whose values are part of a list, using a select box instead of the default free-text filter.\n\nFor example:\n\n      options: {\n        listColumns:{\n          animal: [\n            {id:1, text:'Dog'},\n            {id:2, text:'Cat'},\n            {id:3, text:'Tiger'},\n            {id:4, text:'Bear'}\n          ]\n        }\n      }\n\nThe values of this column should correspond to the values (`id`) passed to the list.\nThey will be automatically converted to their textual representation.\n\n# Options\n\nOptions are set in three layers, where the more particular overrides the more general.\n\n1. Pre-defined component defaults.\n2. Applicable user-defined defaults for the global Vue Instance. Passed as the second paramter to the `Use` statement.\n3. Options for a single table, passed through the `options` prop.\n\n[EXPLORE OPTIONS](//jsfiddle.net/matfish2/bp1g4khr/embedded/result/)\n\n-----------------\nCSS Note: to center the pagination apply `text-align:center` to the wrapping element\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatfish2%2Fvue-tables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatfish2%2Fvue-tables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatfish2%2Fvue-tables/lists"}