Repository files navigation

This is the previous version that works with Vue 1.x. The most up-to-date version is theVuetable-2. If you like it, pleasestar theVuetable-2 repo instead, or make a smalldonation to support it.

• No need to render the table yourself
• One simplevuetable tag
• Display data retrieved from server with sort options
• Support multi-column sorting (v1.2.0) by @balping
• Pagination component included, swap-able and extensible
• Define fields to map your JSON data structure
• Define row actions and capture the click event to do whatever you want
• Field display customizable via callback function inside Vue.js instance
• Programmatically show/hide any field via reactivity of fields definition
• Use your favorite CSS framework classes to nicely format your table and displayed data
• Events to allow control from Vue.js instance programmatically
• Capture events fromvuetable to manipulate your table and your data
• Should work with any pre-defined JSON data structure
• Should work with any CSS Framework, e.g. Semantic UI, Twitter's Bootstrap
• Optional detail row to display additional data (v.1.2.0)

If you're looking for the version that's working with Vue 2.x, please go tovuetable-2 repo. However, I still have no time to work on the documentation. But if you're familiar enough withvuetable, it shouldn't be any much different. Look at thewhat's changed for info on changes from version 1 and theupgrade guide on how you could upgrade from version 1.

vuetable internally uses vue-resource to request data from theapi-url. Prior to v1.5.3, vuetable uses vue-resource v0.7.4 and it retrieves the returned data fromresponse.data object. However, sincev0.9.0 theresponse.data has been renamed toresponse.body. vuetable v1.5.3 onward has been updated to use vue-resource v1.0.2.

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.

If you're using vue-resource in your project and the version is 0.9+, please upgrade to use vuetable v1.5.3.

• deprecated props
  • detail-row-callback: userow-detail-component instead

• deprecated props
  • paginateConfig: usepaginateConfigCallback instead
  • detail-row: usedetail-row-callback instead

• sort-order option type was changed fromObject toArray to supportmulti-sort, therefore it should be declared as array.#36

  <vuetable   //...  :sort-order="[{ field: 'name', direction: 'asc' }]"></vuetable>

##Live Demo

• JSON data structure
• Semantic UI example
• Bootstrap UI example

vuetable is a Vue.js component that will automatically request (JSON) datafrom the server and display them nicely in html table with swappable/extensiblepagination sub-component. You can also add buttons to each row and hook an eventto it

Please note that all the examples show in here are styling using Semantic UI CSS Framework,butvuetable should be able to work with any CSS framwork including Twitter's Bootstrap.Please read through and see more infobelow.

You do this:

<divid="app"class="ui vertical stripe segment"><divclass="ui container"><divid="content"class="ui basic segment"><h3class="ui header">List of Users</h3><vuetableapi-url="http://example.app:8000/api/users"table-wrapper="#content":fields="columns":item-actions="itemActions"></vuetable></div></div></div>

<script>    new Vue({el:'#app',data:{columns:['name','nickname','email','birthdate','gender','__actions'],itemActions:[{name:'view-item',label:'',icon:'zoom icon',class:'ui teal button'},{name:'edit-item',label:'',icon:'edit icon',class:'ui orange button'},{name:'delete-item',label:'',icon:'delete icon',class:'ui red button'}]},methods:{viewProfile:function(id){console.log('view profile with id:',id)}},events:{'vuetable:action':function(action,data){console.log('vuetable:action',action,data)if(action=='view-item'){this.viewProfile(data.id)}},'vuetable:load-error':function(response){console.log('Load Error: ',response)}}})</script>

And you get this!

Since I'm mainly usingSemantic UI as my default CSS Framework, all the cssstyles invuetable are based on Semantic UI. If you're using Twitter'sBootstrapcss framework, please seedocumentation in the Wiki pages.

//vue-table dependencies (vue and vue-resource)<scriptsrc="https://cdn.jsdelivr.net/vue/1.0.28/vue.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.common.js"></script><scripttype="text/javascript"src="http://cdn.jsdelivr.net/vue.table/1.5.3/vue-table.min.js"></script>//or<scripttype="text/javascript"src="http://cdn.jsdelivr.net/vue.table/1.5.3/vue-table.js"></script>

$ bower install vuetable

$ npm install vuetable

Justimport orrequire like so,

//// firstly, require or import vue and vue-resource//varVue=require('vue');varVueResource=require('vue-resource');Vue.use(VueResource);//// secondly, require or import Vuetable and optional VuetablePagination component//importVuetablefrom'vuetable/src/components/Vuetable.vue';importVuetablePaginationfrom'vuetable/src/components/VuetablePagination.vue';importVuetablePaginationDropdownfrom'vuetable/src/components/VuetablePaginationDropdown.vue';//// thirdly, register components to Vue//Vue.component('vuetable',Vuetable);Vue.component('vuetable-pagination',VuetablePagination)Vue.component('vuetable-pagination-dropdown',VuetablePaginationDropdown)

You can combine the second and third steps into one if you like.

You need to explicitly register the pagination components usingVue.component() (instead of just declaring them through thecomponents: section); otherwise, the pagination component will not work or swappable or extensible. Iguess this is because it is embedded insidevuetable component.

Just import thevue-table.js aftervue.js andvue-resource.js library in your page like so.

<scriptsrc="js/vue.js"></script><scriptsrc="js/vue-resource.js"></script><scriptsrc="js/vue-table.js"></script>

Then, reference the vuetable via<vuetable> tag as following

<divid="app"><vuetableapi-url="/api/users":fields="columns"></vuetable></div><script>newVue({el:'#app',data:{columns:['firstname','lastname','nickname','birthdate','group.name_en','gender','last_login','__actions']}})</script>

• api-url is the url of the api thatvuetable should request data from.The returned data must be in the form of JSON formatted with at least the number of fieldsdefined infields property.
• fields is the fields mapping that will be used to display data in the table.You can provide only the name of the fields to be used. But if you would like to getthe true power ofvuetable, you must provide some more information.Please seeField Definitionsection for more detail.

For more detail, please seedocumentation in the Wiki pages.

As I useChrome almost exclusively, it is gaurantee to work on this browser and it SHOULD also work for otherWebKit based browsers as well. But I can't really gaurantee that since I don't use them regularly.

However,vuetable will NOT WORK onInternet Explorer (even IE11) due to the use of<template> tag inside<table> according tothis. In order to make it work with CSS framework table styling, I have to preserve the use of<table> and<template> tag inside it.

It seems to work just fine inMicrosoft Edge though. Anyway, if you find that it does not work on any other browser, you can let me know by posting in theIssues. Or if you are able to make it work on those browser, please let me know or create a pull request.

Any contribution to the code (via pull request would be nice) or any part of the documentation (the Wiki always need some love and care) and any idea and/or suggestion are very welcome.

However, please do not feel bad if your pull requests or contributions do not get merged or implemented intovuetable.

Your contributions can, not only help makevuetable better, but also push it away from what I intend to use it for. I just hope that you find it useful for your use or learn something useful from its source code. But remember, you can always fork it to make it work the way you want.

Runnpm install

Then make sure, you have installed browserify:

# npm install browserify -g

You might need root access for running the above command.

Then you can simply run the build script included in the root folder:

$ ./build.sh

This will compile the vue components in thesrc directory to one file in thedist folder.

You might want to get a minified version, in this case run this:

$ ./build.sh production

For developement it's useful when it's not needed to recompile manually each time you make a change. If you want this convenience first install watchify globally:

# npm install watchify -g

then run

$ ./build.sh watch

Now each time you make a change, the source will be recompiled automatically.

vuetable is open-sourced software licensed under theMIT license.