# 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 ](/vue-tables-2/installation/vue-version-3.md)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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://matanya.gitbook.io/vue-tables-2/events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.