CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-tables-2
Mor Vino
Mor Vino

Reputation: 85

How to add range filter in vue-tables-2 server side

I'm using a server side's vue-tables-2 component for representing information from the DB. This table contains numeric columns, textual columns and date columns.

My problem is with the numeric columns filtering. I want to add option for range filtering (>,>=,<,<=,=,between, etc).

The only documentation i could find is this:

https://www.npmjs.com/package/vue-tables-2#server-side-filters

Server Side Filters

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

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

B. the same as in the client component.

But i don't understand few things:

  1. Where is 'age-range' implemented?
  2. Where do I specify the filter of each column?
  3. Do i have to use the vuex\ bus?

Can someone please help me with the implementation?

Thanks

Upvotes: 4

Views: 2498

Answers (1)

Matanya
Matanya

Reputation: 6346

Custom Filters are external filters implemented by the consumer of the package. However, they can be embedded in the table instead of the text filter using slots (See Slots documentation).

Since the filter is external to the package, it is your responsibilty to let the package know when it has changed, using either the event bus or Vuex.

In other words, the only interface between the package and the custom filter is the event. The package has no knowledge or control of when or under which circumstances the event is emitted. It is passively listenning for a change and merges the query it receives with the native one.

For example, say you wrote an age-range-filter component that emits a changed event, and you want it to replace the age column native text filter:

<v-server-table ... :columns="['name','age']" :options="tableOptions">
<div slot="filter__age">
    <age-range-filter @changed="filter"></age-range-filter>
</div>
</v-server-table>

On your vue instance:

data:{
tableOptions:{
   filterable:['name'] // omit 'age' as it will be replaced by your component
   customFilters:['age-range']
  }
},
methods:{
   filter(query) {
     VueEvent.$emit('age-range', query);
   }
}

Upvotes: 2

Related Questions