Loading Animation

A loading notification can be displayed whilst vuetable is waiting for data from a remote server to indicate network activity. Vuetable can toggle a CSS class to your vuetable markup or allow you to execute a javascript function at the start and end of the loading cycle.

Using the CSS "loading" Class:

Using the vuetable's table-wrapper property, we can specify a parent element that wraps the vuetable. A parent wrapper can be specified by setting the optional wrapper-class property in the vuetable component. A user-defined CSS class can be set using the loading-class property. This class will be applied to this parent element when vuetable starts loading data from a remote server. The loading class will be removed from this parent element upon completion of the network request.

The loading-class property is optional, if not set, the default class name loading will be applied to the parent element specified by the table-wrapper property. The loading class can then be styled in CSS to show the loading activity.

Component setup:

<div class="vuetable-wrapper"><!--Wrapper Element -->
	<div class="loader">LOADING</div><!--Your Loading Message -->
	<vuetable
	    api-url="/api/users"
	    :fields="columns"
        wrapper-class="vuetable-wrapper"
	    >
	</vuetable>
</div>

Example CSS:

/* Loading Animation: */
.vuetable-wrapper {
    position: relative;
    opacity: 1;
}
.loader {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s linear;
    background: url('loader.gif') no-repeat bottom center;
    width: 200px;
    height: 30px;
    font-size: 1em;
    text-align: center;
    margin-left: -100px;
    letter-spacing: 4px;
    color: #3E97F6;
    position: absolute;
    top: 160px;
    left: 50%;
}
.loading .loader {
    visibility: visible;
    opacity: 1;
    z-index: 100;
}
.loading .vuetable{
    opacity:0.3;
    filter: alpha(opacity=30); /* IE8 and earlier */
}

Using Javascript Events:

A vuetable:loading javascript event is fired when the table starts loading data from the server and the vuetable:load-success event is dispatched when completes loading a request from the server. An event handler can then be setup to display a loading indicator using the vuetable:loading event listener and suppress the loading when vuetable:load-success is called.

Javascript function setup:

new Vue({
	el: '#app',
    data: { ... },
    methods: { ... },
    events: {
    	/** Start the loader ----------------------------------
    	 * Dispatched up the parent chain before vuetable
    	 * starts to request the data from the server
    	 */
        'vuetable:loading': function() {
            // display your loading notification
            // console.log ("load started");
        },

       	/** Disable the loader ---------------------------------
    	 * dispatched when vuetable receives response from server.
    	 * Response from server passed as the event argument
    	 */
        'vuetable:load-success': function(response) {
            // hide loading notification
            // console.log ("load completed");
        },
    },
});

Documentation:

• Component properties
• Events