Sorting, Paging, and Page Sizing of Data

vuetable is a component that helps convert the raw (JSON) data returned from the server into a nicely formatted table.

It also handles the interaction with the user and request new data when its display states changed without you having to do anything. This includes sorting, paging, and filtering of data to be displayed.

Hoever, it doesn't do any real operation on sorting, paging, or filtering, but using the available configuration information to make the view shows appropriate states.

vuetable will pass through those information via query string to the server for it to process and returns back the processed JSON data.

For sorting, it will pass sort= on the query string. The value of the sort key will be constructed from the sortOrder.sortField and sortOrder.direction, separated by | character. Or, you can override it to suit your backend api requirements. Please see below section for more info.

For paging, vuetable will pass page= on the query string. The value of the page key is from currentPage property.

For page size, vuetable will pass per_page= on the query string. The default value of the page size is 10, but you can override this by specifying the value via per-page property.

If you are using different keys for this purpose, you can specify them via query-params property like so:

	<div id="app">
	    <vuetable
	        api-url="/api/users"
	        :fields="columns"
	        :query-params="{ sort: 'sortorder', page: 'pageNo', perPage: 'pagesize'}"
	    ></vuetable>
    </div>

Multi-column Sorting

Multi-column sorting state can be enabled by setting multi-sort prop value to true. Then the user can use Alt+Click (Option+Click on mac) to work with multi-column sorting feature. If you would like to use other key than the alt, use multi-column-key prop to specify one of the following value

• alt -- Alt / Option
• ctrl -- Ctrl / Control
• meta -- Window / Command
• shift -- Shift

Initial Sorting Order

To provide initial sorting order, use sort-order prop to specify the default sorting column.

Sort Query String

You can override how the sort query string is constructed by defining a method named 'getSortParam()' in your main vue instance. When vuetable needs to make a request to the server, it will first check if this method is existed in its parent. If so, it will call this method, passing sortOrder prop to it, and will use whatever returned from the method to build the sort query string to be sent to the server.

    // If
    //      sortOrder = [
    //          { field: "gender", direction: "desc"},
    //          { field: "name", direction: "asc"},
    //      ]
    // This will return
    //      '-gender,name'
    //
    getSortParam: function(sortOrder) {
        return sortOrder.map(function(sort) {
            return (sort.direction === 'desc' ? '+' : '') + sort.field
        }).join(',')
    }