Data Format (JSON)

The default data format which is as follow:

{
	"links": {
		"pagination": {
			"total": 50,
			"per_page": 15,
			"current_page": 1,
			"last_page": 4,
			"from": 1,
			"to": 15,
		}
	},
	"data": [
		{
			"id": 1,
			"name": "xxxxxxxxx",
			"nickname": "xxxxxxx",
			"email": "[email protected]",
			"birthdate": "xxxx-xx-xx",
			"gender": "X",
			"group_id": 1,
		}
			.
			.
			.
		{
			"id": 50,
			"name": "xxxxxxxxx",
			"nickname": "xxxxxxx",
			"email": "[email protected]",
			"birthdate": "xxxx-xx-xx",
			"gender": "X",
			"group_id": 3,
		}
	]
}

But you can always provide the path to the data and pagination in your JSON data structure instead, by using data-path and pagination-path properties.

If you're familiar with Laravel, you would know that Laravel automatically convert the query data to JSON format when Eloquent objects are returned from application's routes or controllers. And if you use paginate() function, the result would look something like this.

{
	"total": 50,
	"per_page": 15,
	"current_page": 1,
	"last_page": 4,
	"from": 1,
	"to": 15,
	"data": [
		{
			"id": 1,
			"name": "xxxxxxxxx",
			"nickname": "xxxxxxx",
			"email": "[email protected]",
			"birthdate": "xxxx-xx-xx",
			"gender": "X",
			"group_id": 1,
		}
			.
			.
			.
		{
			"id": 50,
			"name": "xxxxxxxxx",
			"nickname": "xxxxxxx",
			"email": "[email protected]",
			"birthdate": "xxxx-xx-xx",
			"gender": "X",
			"group_id": 3,
		}
	]
}

In this case, you just specify values for data-path and pagination-path like so

	<div id="app">
	    <vuetable
	        api-url="/api/users"
	        :fields="columns"
	        data-path="data"
	        pagination-path=""
	    ></vuetable>
    </div>

This tells vuetable that the data is in the path named data inside the JSON structure returned from the server, and the pagination is in the root of the JSON structure.

Data Transformation

If the data you're working with is not in the default format of vuetable, you can setup a transform() method, which accept response data as the argument, to transform it to the format that vuetable can work with.

Just create a transform method in your main Vue instance like so,

new Vue({
    el: '#app',
    data: {
        //...
    },
    methods: {
        transform: function(data) {
            var transformed = {}

            transformed.pagination = {
                total: data.total,
                per_page: data.per_page,
                current_page: data.current_page,
                last_page: data.last_page,
                next_page_url: data.next_page_url,
                prev_page_url: data.prev_page_url,
                from: data.from,
                to: data.to
            }

            transformed.mydata = []

            for (var i=0; i < data.length; i++) {
                transformed.data.push({
                    id: data[i].id,
                    fullname: data[i].name,
                    email: data[i].email
                })
            }

            return transformed
        }
    }    
})

    <vuetable
        api-url="..."
        :fields="fields"
        data-path="mydata"
        pagination-path="pagination"
    ></vuetable>