Vue Tables 2 - Custom filters

Question

I\'m trying to use this https://github.com/matfish2/vue-tables-2 with Vue 2.1.8.

And it\'s working perfectly BUT I need to use custom filters to format some fields based

Answer 1

Hide default filter and per page seletbox and defining one new filter 'manual_agent' .

        optionsTable: {
            customFilters: ['manual_agent'],
            filterable: false,
            perPageValues: []
        },

Hiding because there is not 'slot' option to be able add new custom filters between default one and per page select, and default one is also not much repsonsive. Below example is for server table implementation.

Method to be used globally for custom filters :

toggleFilter: function(filterName, $event) {
                this.$refs.serverTableRef.setPage(1);
                setTimeout(function () {
                    let searchItem = '';
                    if (typeof $event === 'string') { searchItem = $event; } else { searchItem = $event.target.value; }
                    let table = this.$refs.serverTableRef;
                    table.customQueries[filterName] = searchItem;
                    table.getData();
                }.bind(this), 1000);
            }

For this to work we have to have defined ref name on our v-server table like this :

Now in template new custom selectbox filter (v-model just points to custom variable defined in data)

And custom filter that will replace default filter we lost by dissabling it. (it used 'query' name so we use same)

And new custom select for our own per page select

            
                10
                25
                50