# Events

#### Listening for Events

Using Custom Events (For child-parent communication):

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

Using the event bus:

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

{% hint style="info" %}
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`
{% endhint %}

{% hint style="info" %}
If you are using the [Vue 3 ](https://matanya.gitbook.io/vue-tables-2/installation/vue-version-3)version use `EventBus.on` instead
{% endhint %}

Using Vuex:

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

#### List of Available Events

* `vue-tables.filter` / `tableName/FILTER`
  &#x20;: 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
  &#x20;: Fires off when a request is sent to the server. Sends through the request data.
  &#x20;Client: Fires off at the beginning of any interaction with the table.
* `vue-tables.loaded` / `tableName/LOADED` Server
  &#x20;: Fires off after the response data has been attached to the table. Sends through the response.
  &#x20;Client: Fires off when the new dataset is retrieved.

{% hint style="info" %}
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.
{% endhint %}

* `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)
  &#x20;: 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