data table simplify! -- vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination component.


npm npm

Please Note!

This is the previous version that works with Vue 1.x. The most up-to-date version is the Vuetable-2. If you like it, please star the Vuetable-2 repo instead, or make a small donation to support it.

This version is "no longer supported" as I do not have time to maintain different version.

vuetable - data table simplify!

  • No need to render the table yourself
  • One simple vuetable 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 from vuetable 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)

vuetable is only working for Vue 1.x, vuetable-2 is for Vue 2.x

If you're looking for the version that's working with Vue 2.x, please go to 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 for info on changes from version 1 and the upgrade guide on how you could upgrade from version 1.

Note on vue-resource version

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 object. However, since v0.9.0 the has been renamed to response.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.

Breaking Changes


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


  • deprecated props
    • paginateConfig: use paginateConfigCallback instead
    • detail-row: use detail-row-callback instead


  • sort-order option type was changed from Object to Array to support multi-sort, therefore it should be declared as array. #36

      :sort-order="[{ field: 'name', direction: 'asc' }]"

##Live Demo

What is vuetable?

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


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

You do this:

    <div id="app" class="ui vertical stripe segment">
        <div class="ui container">
            <div id="content" class="ui basic segment">
                <h3 class="ui header">List of Users</h3>
	    new Vue({
	        el: '#app',
	        data: {
	            columns: [
	            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') {
	            'vuetable:load-error': function(response) {
	                console.log('Load Error: ', response)

And you get this! image

Since I'm mainly using Semantic UI as my default CSS Framework, all the css styles in vuetable are based on Semantic UI. If you're using Twitter's Bootstrap css framework, please see documentation in the Wiki pages.



//vue-table dependencies (vue and vue-resource)
<script src=""></script>

<script src=""></script>

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>


$ bower install vuetable


$ npm install vuetable

Vueify version for Browserify and Webpack

Just import or require like so,

// firstly, require or import vue and vue-resource
var Vue = require('vue');
var VueResource = require('vue-resource');

// secondly, require or import Vuetable and optional VuetablePagination component
import Vuetable from 'vuetable/src/components/Vuetable.vue';
import VuetablePagination from 'vuetable/src/components/VuetablePagination.vue';
import VuetablePaginationDropdown from '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 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.

Direct include

Just import the vue-table.js after vue.js and vue-resource.js library in your page like so.

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

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

	<div id="app">

		new Vue({
			el: '#app',
			data: {
				columns: [
  • api-url is the url of the api that vuetable should request data from. The returned data must be in the form of JSON formatted with at least the number of fields defined in fields 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 get the true power of vuetable, you must provide some more information. Please see Field Definition section for more detail.

For more detail, please see documentation in the Wiki pages.

Browser Compatability

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.

However, vuetable will NOT WORK on Internet Explorer (even IE11) due to the use of <template> tag inside <table> according to this. 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 in Microsoft Edge though. Anyway, if you find that it does not work on any other browser, you can let me know by posting in the Issues. 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 into vuetable.

Your contributions can, not only help make vuetable 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.


Run npm 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:

$ ./

This will compile the vue components in the src directory to one file in the dist folder.

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

$ ./ 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

$ ./ watch

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


vuetable is open-sourced software licensed under the MIT license.

  • Making vue-table work with browserify / webpack

    Making vue-table work with browserify / webpack

    I've played around with this component and like it so far. Thank you @ratiw!

    I tried to use it in a new laravel project (via browserify & using laravel elixir) and noticed it stopped working. Digging around, I see that because of the way it's structured, it wont work with browserify as it is trying to access Vue globally. Are there any plans to restructure it so it can be pulled into a project via require('vuetable') statement?

    Im not an expert at this and still figuring out vue & browserify myself, but I think the component would need to be modularize / split into three .vue files: vuetable, vuetable-pagination, vuetable-pagination-dropdown. Each of these will have its own script, style and template code.

    I might try and do this if I get some time and a chance to figure it out. I've added some links below for reference:


    opened by mozami 77
  • New feature

    New feature

    Like a new feature, example: vuetable:cell-changed

    For inline editing data and update or any process after change data in the cell! :D

    This is a component -very tiny, simple- for this work, only for text data, not for select, or check. But works fine!

    opened by NightZpy 23
  • laravel 5.3.* zero rows problem

    laravel 5.3.* zero rows problem


    i've tested below but it displays zero rows. Displaying 0 to 0 of 0 items


    json data be like this

    total: 101,
    per_page: 15,
    current_page: 1,
    last_page: 7,
    next_page_url: "",
    prev_page_url: null,
    from: 1,
    to: 15,
    data: [
    id: 1,
    name: "example",
    email: "[email protected]",
    created_at: "2016-09-21 01:09:43",
    updated_at: "2016-09-21 01:09:43"

    Thank you!

    opened by myagmarsurensedjav 20
  • Loading label/icon during table computation

    Loading label/icon during table computation

    Hi, At the moment when the component is rendering the table the content remains empty and it seems quite like nothing has been loaded. I think it would be nice if it would be possible someway to implement a loading label or a loading icon where the content is being shown or anyway somewhere in the component in order to give users a better feedback.

    Cheers, Matteo

    opened by midium 17
  • Access data from other field on callback

    Access data from other field on callback


    I'm getting the rows of the database in vue table, but I need to get the data from other row here an example:

                    name: 'Breed',
                    title: Vue.t('message.class'),
                    callback: 'class',
                    dataClass: 'text-center',
                    titleClass: 'text-center',
    }, {
                    name: 'Sex',
                    title: Vue.t(''),
                    callback: 'sex',
                    dataClass: 'text-center',
                    titleClass: 'text-center',

    This the code I have:

    class: function(data) {
                return '<img src="/template/img/ladder/heads/' + data + '_1.png" width="30">'

    I need to do this:

    class: function(data) {
                return '<img src="/template/img/ladder/heads/' + data + '_'+ Sex + '.png" width="30">'


    (Sorry I'm not native english speaker)

    opened by WolfDan 16
  • Adding checkboxes to vuetable rows

    Adding checkboxes to vuetable rows

    I would like to add a checkbox on the left of each row, allowing the user to select multiple rows at a time, similar to this.

    I am aware of the actions buttons generated via the __action field - that is a great feature, and I suppose one could use them to somehow select the rows on a click event. However, the UI for those is a button tag and I would prefer to have a regular column of checkboxes (in addition the to the buttons as well). Is it possible to add something like this to vuetable?

    opened by mozami 16
  • load new data after its been initialized

    load new data after its been initialized

    Hi, I have a component that I show for show a table for each one of my models, all having different data, of course. I cant seem to figure out how to get this to reload with new data (ie changing the api-route) .. i see all of the events that can be fired, but none of them seems to change the intial api-route.. Any ideas on what I need to do to achieve this?

    opened by z1haze 14
  • Latest Vue problem and solution

    Latest Vue problem and solution

    I noticed that this wasn't working with the latest versions of Vue and Vue Resource.

    To fix this, I updated these lines in vue-table

    I changed this:

                this.$http.get(url, this.httpData, this.httpOptions).then(function (response) {
                    self.tableData = self.getObjectValue(, self.dataPath, null);

    to this:

                this.$http.get(url, this.httpData, this.httpOptions).then(function (response) {
           = JSON.parse(;
                    self.tableData = self.getObjectValue(, self.dataPath, null);

    Let me know if there is a better way. Thanks!

    I also noticed that this gets it closer to working in IE. I noticed that the pagination piece is returning the record count and pagination. It's simply not returning the records, which might be easy to fix.

    opened by snappykraken 12
  • Issue with IE (all versions)

    Issue with IE (all versions)

    Examples doesnt work in IE (all versions), neither my demo,

    This is the error: [Vue warn]: Unknown custom element: