// 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://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.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>
बहुत बहुत शुक्रिया! अब यह काम कर रहा है :) – Verba