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.