├── .gitignore ├── LICENSE ├── README.md ├── bower.json ├── build.sh ├── dist ├── vue-table.js └── vue-table.min.js ├── examples ├── bootstrap.html ├── img │ └── loading.gif └── semantic.html ├── package.json └── src ├── components ├── Vuetable.vue ├── VuetablePagination.vue ├── VuetablePaginationBootstrap.vue ├── VuetablePaginationDropdown.vue └── VuetablePaginationMixin.vue └── vue-table.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Rati Wannapanop 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm](https://img.shields.io/npm/v/vuetable.svg)](https://www.npmjs.com/package/vuetable) 2 | [![npm](https://img.shields.io/npm/l/vuetable.svg?maxAge=2592000)]() 3 | 4 | ---- 5 | 6 | ## Please Note! 7 | 8 | This is the previous version that works with Vue 1.x. The most up-to-date version is the [Vuetable-2](https://github.com/ratiw/vuetable-2). If you like it, please *star* the [Vuetable-2 repo](https://github.com/ratiw/vuetable-2) instead, or make a small [donation](https://www.paypal.me/ratiw) to support it. 9 | 10 | ### This version is *"no longer supported"* as I do not have time to maintain different version. 11 | 12 | ---- 13 | 14 | vuetable - data table simplify! 15 | ======== 16 | 17 | - No need to render the table yourself 18 | - One simple `vuetable` tag 19 | - Display data retrieved from server with sort options 20 | - Support multi-column sorting (v1.2.0) by @balping 21 | - Pagination component included, swap-able and extensible 22 | - Define fields to map your JSON data structure 23 | - Define row actions and capture the click event to do whatever you want 24 | - Field display customizable via callback function inside Vue.js instance 25 | - Programmatically show/hide any field via reactivity of fields definition 26 | - Use your favorite CSS framework classes to nicely format your table and displayed data 27 | - Events to allow control from Vue.js instance programmatically 28 | - Capture events from `vuetable` to manipulate your table and your data 29 | - Should work with any pre-defined JSON data structure 30 | - Should work with any CSS Framework, e.g. Semantic UI, Twitter's Bootstrap 31 | - Optional detail row to display additional data (v.1.2.0) 32 | 33 | --- 34 | ## vuetable is only working for Vue 1.x, vuetable-2 is for Vue 2.x 35 | If you're looking for the version that's working with Vue 2.x, please go to [`vuetable-2`](https://github.com/ratiw/vuetable-2) repo. However, I still have no time to work on the documentation. But if you're familiar enough with `vuetable`, it shouldn't be any much different. Look at the [what's changed](https://github.com/ratiw/vuetable-2/blob/master/changes.md) for info on changes from version 1 and the [upgrade guide](https://github.com/ratiw/vuetable-2/blob/master/upgrade-guide.md) on how you could upgrade from version 1. 36 | 37 | --- 38 | 39 | ## Note on vue-resource version 40 | vuetable internally uses vue-resource to request data from the `api-url`. Prior to v1.5.3, vuetable uses vue-resource v0.7.4 and it retrieves the returned data from `response.data` object. However, since [v0.9.0](https://github.com/vuejs/vue-resource/releases/tag/0.9.0) the `response.data` has been renamed to `response.body`. vuetable v1.5.3 onward has been updated to use vue-resource v1.0.2. 41 | 42 | This will cause problem with vuetable to display no data because the expected object key is no longer existed and some other related problems as discussed in [#100](https://github.com/ratiw/vue-table/issues/100). 43 | 44 | **If you're using vue-resource in your project and the version is 0.9+, please upgrade to use vuetable v1.5.3.** 45 | 46 | ## Breaking Changes 47 | #### v1.5.0 48 | - deprecated props 49 | + `detail-row-callback`: use `row-detail-component` instead 50 | 51 | #### v1.3.0 52 | - deprecated props 53 | - `paginateConfig`: use `paginateConfigCallback` instead 54 | - `detail-row`: use `detail-row-callback` instead 55 | 56 | 57 | #### v1.2.0 58 | - `sort-order` option type was changed from `Object` to `Array` to support `multi-sort`, therefore it should be declared as array. [#36](https://github.com/ratiw/vue-table/pull/36) 59 | 60 | ``` 61 | 65 | ``` 66 | 67 | --- 68 | 69 | ##Live Demo 70 | - [JSON data structure](http://vuetable.ratiw.net/api/users) 71 | - [Semantic UI example](http://vuetable.ratiw.net/examples/semantic.html) 72 | - [Bootstrap UI example](http://vuetable.ratiw.net/examples/bootstrap.html) 73 | 74 | --- 75 | 76 | ## What is `vuetable`? 77 | `vuetable` is a Vue.js component that will automatically request (JSON) data 78 | from the server and display them nicely in html table with swappable/extensible 79 | pagination sub-component. You can also add buttons to each row and hook an event 80 | to it 81 | 82 | ![image](https://i.imgsafe.org/d46e5e1.gif) 83 | 84 | > Please note that all the examples show in here are styling using Semantic UI CSS Framework, 85 | > but `vuetable` should be able to work with any CSS framwork including Twitter's Bootstrap. 86 | > Please read through and see more info [below](#bootstrap). 87 | 88 | You do this: 89 | ```html 90 |
91 |
92 |
93 |

List of Users

94 | 100 |
101 |
102 |
103 | ``` 104 | 105 | ```javascript 106 | 142 | ``` 143 | 144 | And you get this! 145 | ![image](https://i.imgsafe.org/af08442.jpg) 146 | 147 | Since I'm mainly using [Semantic UI](http://semantic-ui.com) as my default CSS Framework, all the css 148 | styles in `vuetable` are based on Semantic UI. If you're using Twitter's [Bootstrap](http://getbootstrap.com) 149 | css framework, please see [documentation in the Wiki pages](https://github.com/ratiw/vue-table/wiki/Using-%60vuetable%60-with-Twitter's-Bootstrap). 150 | 151 | ## Usage 152 | 153 | ### Javascript 154 | ```javascript 155 | //vue-table dependencies (vue and vue-resource) 156 | 157 | 158 | 159 | 160 | 161 | //or 162 | 163 | ``` 164 | 165 | ### Bower 166 | 167 | ``` 168 | $ bower install vuetable 169 | ``` 170 | 171 | ### NPM 172 | 173 | ``` 174 | $ npm install vuetable 175 | ``` 176 | 177 | ### Vueify version for Browserify and Webpack 178 | 179 | Just `import` or `require` like so, 180 | 181 | ```javascript 182 | // 183 | // firstly, require or import vue and vue-resource 184 | // 185 | var Vue = require('vue'); 186 | var VueResource = require('vue-resource'); 187 | Vue.use(VueResource); 188 | 189 | // 190 | // secondly, require or import Vuetable and optional VuetablePagination component 191 | // 192 | import Vuetable from 'vuetable/src/components/Vuetable.vue'; 193 | import VuetablePagination from 'vuetable/src/components/VuetablePagination.vue'; 194 | import VuetablePaginationDropdown from 'vuetable/src/components/VuetablePaginationDropdown.vue'; 195 | 196 | // 197 | // thirdly, register components to Vue 198 | // 199 | Vue.component('vuetable', Vuetable); 200 | Vue.component('vuetable-pagination', VuetablePagination) 201 | Vue.component('vuetable-pagination-dropdown', VuetablePaginationDropdown) 202 | 203 | ``` 204 | You can combine the second and third steps into one if you like. 205 | 206 | You need to explicitly register the pagination components using `Vue.component()` (instead of just declaring them through the `components:` section); otherwise, the pagination component will not work or swappable or extensible. I *guess* this is because it is embedded inside `vuetable` component. 207 | 208 | ### Direct include 209 | 210 | Just import the `vue-table.js` after `vue.js` and `vue-resource.js` library in your page like so. 211 | ```html 212 | 213 | 214 | 215 | ``` 216 | 217 | Then, reference the vuetable via `` tag as following 218 | 219 | ```html 220 |
221 | 225 |
226 | 227 | 244 | ``` 245 | - `api-url` is the url of the api that `vuetable` should request data from. 246 | The returned data must be in the form of JSON formatted with at least the number of fields 247 | defined in `fields` property. 248 | - `fields` is the fields mapping that will be used to display data in the table. 249 | You can provide only the name of the fields to be used. But if you would like to get 250 | the true power of `vuetable`, you must provide some more information. 251 | Please see [Field Definition](https://github.com/ratiw/vue-table/wiki/Fields-Definition) 252 | section for more detail. 253 | 254 | For more detail, please see [documentation in the Wiki pages](https://github.com/ratiw/vue-table/wiki). 255 | 256 | 257 | ## Browser Compatability 258 | As I use **Chrome** almost exclusively, it is gaurantee to work on this browser and it SHOULD also work for other **WebKit** based browsers as well. But I can't really gaurantee that since I don't use them regularly. 259 | 260 | However, `vuetable` will NOT WORK on **Internet Explorer** (even IE11) due to the use of `