How to get the searched text in v-client-table?

Question

I am trying to create a custom column filter in v-client-table.

https://codepen.io/pydev/pen/BaZKgpR

    options: {
      dateColumns: ['birth_date'],
      filterable: ['name','manufacturer', 'birth_date'],  
      headings: {
        name: 'Name',
        birth_date: 'Birth Date',
        age: 'Age',
      },

I am trying to make some tweaks to the 'Name' column filter.

• I tried to get the text entered in the 'Name' search field so that I can mimic a customFilter, but unable to find a way to get the searched text.

• I am strictly looking to keep the search box in the column filter.

Thanks in advance.

Answer 1

The vue-tables component does not expose API to read the filter value. It dispatches vue-tables.filtered event but with just resulting items matching the query as the parameter. Query itself is not reachable. Here are the details

It is worth raising an issue to the author maybe, to extend this event with the query as well.

You can still hack the component, and use this event to know when the value of the input is changed like this (ready method). But it's obviously very hacky.

  ready: function() {
    // ... other things
    this.$on('vue-tables.filtered', function(event) {
      console.log(this.$el.querySelector('.VueTables__name-filter-wrapper input').value);
    });

  },