Events

Listening for Events

Using Custom Events (For child-parent communication):

<v-server-table :columns="columns" url="/getData" @loaded="onLoaded"></v-server-table>

Using the event bus:

Event.$on('vue-tables.loaded', function (data) {
    // Do something
});

If you are using the bus and want the event to be "namespaced", so you can distinguish bewteen different tables on the same page, use the name prop. The event name will then take the shape of vue-tables.tableName.eventName

If you are using the Vue 3 version use EventBus.on instead

Using Vuex:

mutations: {
    ['tableName/LOADED'](state, data) {
        // Do something
    }
}

List of Available Events

• vue-tables.filter / tableName/FILTER : Fires off when a filter is changed. Sends through the name and value in case of column filter, or just the value in case of the general filter

• vue-tables.filter::colName : Same as above, only this one has the name attached to the event itself, and only sends through the value. Releveant only for non-vuex tables with filterByColumn set to true.

• vue-tables.sorted / tableName/SORTED : Fires off when the user sorts the table. Sends through the column and direction. In case of multisorting (Shift+Click) an array will be sent sorted by precedence.

• vue-tables.loading / tableName/LOADING Server : Fires off when a request is sent to the server. Sends through the request data. Client: Fires off at the beginning of any interaction with the table.

• vue-tables.loaded / tableName/LOADED Server : Fires off after the response data has been attached to the table. Sends through the response. Client: Fires off when the new dataset is retrieved.

You can listen to those complementary events (loading and loaded) on a parent component and use them to add and remove a loading indicator, respectively.

• vue-tables.pagination / tableName/PAGINATION : Fires off whenever the user changes a page. Send through the page number.

• vue-tables.limit / tableName/LIMIT : Fires off when the per page limit is changed

• vue-tables.error / tableName/ERROR (server) : Fires off if the server returns an invalid code. Sends through the error

• vue-tables.row-click / tableName/ROW_CLICK : Fires off after a row was clicked. sends through the row and the mouse event. When using the client component, if you want to recieve the original row, so that it can be directly mutated, you must have a unique row identifier. The key defaults to id, but can be changed using the uniqueKey option