Properties

Here are the list of properties that will allow you to customize the vuetable functionality. You are only required to provide 2 properties which are api-url and fields. The rest is optional.

####Please Note!

Many props are being deprecated and will be removed in the next minor release for clearity and consistency naming.

Property	Type	Default	Description
api-url	String	(required)	The URL of the api that vuetable will interact with.
fields	Array	(required)	The array of fields that would be mapped to the structure of data returned from the server.
sort-order	Array	[]	The default sort order that vuetable should use when the data get rendered.
multi-sort	Boolean	false	Enable multiple sort column interface
multi-sort-key	String	alt	The key to trigger sort colum adding/subtracting when multi-sort is enabled. Possible values are alt, ctrl, meta, shift.
per-page	Number	10	The number of data to be requested per page.
data-path	String	data	The path into the JSON data structure that vuetable will use to refer to the actual data. See Data Format (JSON).
pagination-path	String	links.pagination	The path into the JSON data structure that vuetable will use to refer to the pagination information of the return data. See Data Format (JSON).
ascending-icon	String	blue chevron up icon	The css class(es) that will be rendered as ascending icon on the table column header
descending-icon	String	blue chevron down icon	The css class(es) that will be rendered as descending icon on the table column header
item-actions	Array	[]	The array of actions to be rendered as button inside special field named actions. See Special Field.
table-wrapper	String	null	The parent DOM element that uses to wrap vuetable where the loading image should appear to cover the whole table while requesting data from the server.
table-class	String	ui blue striped selectable celled stackable attached table	The css class to be applied to the table element that vuetable will generate.
loading-class	String	loading	The css class to be applied during the request of data from server.
show-pagination	Boolean	true	Tells vuetable to display pagination or not.
pagination-component	String	vuetable-pagination	PaginationInfo component that vuetable will use to render the pagination.
pagination-info-template	String	Displaying {from} to {to} of {total} items	The pagination information to be shown. See Customize the Pagination Info.
pagination-info-no-data-template	String	No relevant data	The pagination information to be displayed when there is no data.
pagination-class	String	ui bottom attached segment grid	The css class to be applied to the pagination section.
pagination-info-class	String	left floated left aligned six wide column	The css class to be applied to the pagination info section.
pagination-component-class	String	right floated right aligned six wide column	The css class to be applied to the pagination component section.
query-params	Object	{ sort: 'sort', page: 'page', perPage: 'per_page' }	The text key to be used as query string that will be sent to the server. See Sorting, Paging, and Page Sizing of Data
append-params	Array	[]	Additional parameters that vuetable should append to the query string when requesting data from the server. See Appending Other Parameters to the Query String
wrapper-class	String	null	A CSS class to be used in the wrapper div of vuetable component.
pagination-config	String	paginationConfig	Deprecated. Use pagination-config-callback instead
pagination-config-callback	String	paginationConfig	A method name to be called by vuetable to config pagination settings.
load-on-start	Boolean	true	Whether vuetable should load the data from the server immediately during initialization.
select-to	Array	[]	The array variable that vuetable will be used to store selected row to. See Special Field __checkbox
http-data	Object	{}	Allow passing additional data and options to the server during AJAX call. See vue-resource
http-options	Object	{}	Same as http-data.
detail-row	String	''	Deprecated. Use detail-row-callback instead
detail-row-callback	String	''	Deprecated. Use detail-row-component instead.
detail-row-component	String	''	(v1.5.0) A component name to be used as the content of detail row to be displayed underneath the current row.
detail-row-id	String	id	The colum name of the data to be used as a key to unqiuely identified each data row.
detail-row-transition	String	''	The CSS class to apply to detail row during transition.
detail-row-class	String	vuetable-detail-row	The CSS class name to be used for the detail row.
row-class-callback	String	''	The method name of a callback to be called by vuetable to get the CSS class name for each table row during rendering.