# Custom Filters

Custom filters allow you to integrate your own filters into the plugin using Vue's events system.

#### Client Side Filters

A. use the `customFilters` option to declare your filters, following this syntax:

```javascript
customFilters: [{
    name: 'alphabet',
    callback: function (row, query) {
        return row.name[0] == query;
    }
}]
```

B. Then emit the event when appropriate:

Using the event bus:

```javascript
Event.$emit('vue-tables.filter::alphabet', query);
```

[Vue 3](https://matanya.gitbook.io/vue-tables-2/installation/vue-version-3) Event Bus:

```javascript
EventBus.emit('vue-tables.filter::alphabet', query);
```

Using Vuex:

```javascript
this.$store.commit('myTable/SET_CUSTOM_FILTER', {filter:'alphabet', value:query})
```

#### Server Side Filters

A. use the customFilters option to declare your filters, following this syntax:

```javascript
customFilters: ['alphabet','age-range']
```

B. the same as in the client component.

C. Custom filters will be sent as request parameters. Implement the necessary logic on the server side.