Vue Tables 2 - Custom Filters

Question

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

And it works fine, but I need to use custom filters to format some fields based on their value, etc.

In the settings, I have the following:

customFilters: [ { name:'count', callback: function(row, query) { console.log('see me?'); // Not firing this return row.count[0] == query; } } ] 

The docs say I have to do this:

 Using the event bus: Event.$emit('vue-tables.filter::count', query); 

But I have no idea where to put it? I have tried many places. For example, in my call to acios action, but nothing.

I think it is very simple, and I should know this, but I do not. So if someone can tell me where to put the staff of this bus, it will be awesome!

Answer 1

Documents could describe it better. This is a little hard to understand.

You need to import the named Export Event from vue-tables-2 so that you have the table event bus and output the custom event to your custom click handler.

In the demo, it is available on a global site. In ES6, you import it, as described in the docs, with import {ServerTable, ClientTable, Event} from 'vue-tables-2';

Please look at the alphabet filter demo below or in this fiddle .

The demo is similar to the vue-tables-1 demo fiddle, which you can find here .

 // Vue.use(VueTables) const ClientTable = VueTables.ClientTable const Event = VueTables.Event // import eventbus console.log(VueTables); Vue.use(ClientTable) new Vue({ el: "#people", methods: { applyFilter(letter) { this.selectedLetter = letter; Event.$emit('vue-tables.filter::alphabet', letter); } }, data() { return { letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'], selectedLetter: '', columns: ['id', 'name', 'age'], tableData: [{ id: 1, name: "John", age: "20" }, { id: 2, name: "Jane", age: "24" }, { id: 3, name: "Susan", age: "16" }, { id: 4, name: "Chris", age: "55" }, { id: 5, name: "Dan", age: "40" }], options: { // see the options API customFilters: [{ name: 'alphabet', callback: function(row, query) { return row.name[0] == query; } }] } } } }); 

 #people { text-align: center; width: 95%; margin: 0 auto; } h2 { margin-bottom: 30px; } th, td { text-align: left; } th:nth-child(n+2), td:nth-child(n+2) { text-align: center; } thead tr:nth-child(2) th { font-weight: normal; } .VueTables__sort-icon { margin-left: 10px; } .VueTables__dropdown-pagination { margin-left: 10px; } .VueTables__highlight { background: yellow; font-weight: normal; } .VueTables__sortable { cursor: pointer; } .VueTables__date-filter { border: 1px solid #ccc; padding: 6px; border-radius: 4px; cursor: pointer; } .VueTables__filter-placeholder { color: #aaa; } .VueTables__list-filter { width: 120px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/ vue-tables-2@1.4.70 /dist/vue-tables-2.min.js"></script> <div id="people"> <button @click="applyFilter(letter)" class="btn btn-default" v-for="letter in letters" :class="{active: letter==selectedLetter}"> {{letter}} </button> <button class="btn btn-default" @click="applyFilter('')"> clear </button> <v-client-table :data="tableData" :columns="columns" :options="options"></v-client-table> </div> 

Answer 2

I found this lesson to help me the best. https://github.com/ratiw/vuetable-2-tutorial/wiki/lesson-13

Description: You must generate events using the vue-events package or evaluate properties using Vuex (recommended). You want to use :append-params="moreParams" in vuetable, which is the vuetable2 function that will be added to the api-url along with the page number values ​​(separately from these parameters). I use Vuex, so I make moreParams a computed vuetable property. It uses this.$store.getters.moreParams is my Vuex recipient since I have several search fields. This responds to my Vuex commits from input field handlers.

  computed: { moreParams() { return this.$store.getters.moreParams }, }, 

Otherwise, you can use $ store.stage.property. I have a clock on moreParams that updates the table with a new query:

  watch: { moreParams(newVal, oldVal) { this.$nextTick(() => { this.$refs.vuetable.refresh() }) }, }, 

Answer 3

Hide the filter by default and on the page for selecting a page and defining one new filter "manual_agent".

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

Hiding because there is no 'slot' option to be able to add new custom filters between one by default and page selection, and one by default is also not too responsive. The following is an example implementation of a server table.

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 must define ref ref in our v-server table as follows:

 <v-server-table ref="serverTableRef" 

Now in the template there is a new user selection filter (the v-model simply points to the user variable defined in the data)

 <select name="typeoftrip" v-model="agentFilter" @change="toggleFilter('manual_agent', agentFilter)"> 

And a custom filter that will replace the default filter that we lost by disabling it. (he used the name "query", so we use the same thing)

 <input name="typeoftrip" v-model="mainQuery" v-on:keyup="toggleFilter('query', mainQuery)"> 

And a new custom choice for our own on the selection page

  <select v-model="limitFilter" @change="$refs.serverTableRef.setLimit($event.target.value)" > <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> </select>