Callbacks

Callbacks

Each field can have an associated callback function that will modify the content of the data before it gets displayed by vuetable. You define the callback function inside the field definition using the callback option by specifying the name of the function to be called.

The callbacks are defined inside the Vue.js instance where vuetable component is defined.

Here is the example of a field defining a callback function.

	{
		name: 'gender',
		callback: 'gender'
	}

In this case, the field named gender has a callback function, which is coincidently named gender as well. vuetable will automatically look for this callback function in its parent Vue.js instance.

Let's look at the gender callback function.

	new Vue({
		el: '#app',
		methods: {
			gender: function(value) {
                return value == 'M' ? 'Male' : 'Female'
			}
		}
	})

vuetable will automatically pass the value of that field to the callback function. The callback function can then work on the value and the return value from the callback will be used to display to the user.

In this case, if the value that gets passed to gender callback is M, it will return Male. vuetable will display Male for this field instead of M.

Passing Additional Parameters to Callback function

Suppose you have a callback function to format the date value to be displayed in certain date format, but you also would like to be able to override that default date format as well. You can do so like this:

	new Vue({
		el: '#app',
		columns: [
	        {
	            name: 'birthdate',
	            callback: 'formatDate|D/MM/Y'
	        }
		]
		methods: {
            formatDate: function(value, fmt) {
                if (value == null) return ''
                fmt = (typeof fmt == 'undefined') ? 'D MMM YYYY' : fmt
                return moment(value, 'YYYY-MM-DD').format(fmt)
            }
		}
	})

In this example, field birthdate has a callback named formatDate. The callback defines additional parameter using | character following the name of the callback function.

When the formatDate callback is called the value of the field will be passed as well as the additional parameters. So, the callback function can use that additional parameters to decide what the return value should be based on those additional parameters.