Vue Tables 2 - Custom filters
The docs could be describing this better. It's a bit difficult to understand.
You need to import the named export Event
of vue-tables-2, so you have the event bus of the table and emit the custom event in your custom click handler.
In the demo it's available on global object. In ES6 you'll import it as described in the docs with import {ServerTable, ClientTable, Event} from 'vue-tables-2';
Please have a look at the alphabet filter demo below or in this fiddle.
The demo is similar to the vue-tables-1 demo fiddle that 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/[email protected]/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>