Question

2

Vue Tables 2 - Custom filters

rated 0 times [ 8] [ 6] / answers: 1 / hits: 19989 / 7 Years ago, sat, january 21, 2017, 12:00:00

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 on their value etc.

In options I have this:

customFilters: [

{

  name:'count',

  callback: function(row, query) {

    console.log('see me?'); // Not firing this

    return row.count[0] == query;

}

}

]

In the docs it says I have to do this:

Using the event bus:



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

But I have no idea where to put this? I tried many places. For example in my axios success callback but nothing.

I guess this is very basic and I should know this but I don't. So if someone could tell me where to put that event bus staff would be awesome!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

judydestiniem

Add To Favorites

Follow

Total Points: 215

Total Questions: 109

Total Answers: 86

Location: Indonesia

Member since Wed, Jul 7, 2021

3 Years ago

answered 8 Years ago ryderalfonsos · Accepted Answer

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>