Custom Searchbox for vue-table-2

Question

Using Vue Table 2, I do not want to use the default search/filter input and the Records drop down. I.e. I do not want to use controls in the image below:

Instead, I want to create my own input box outside the table. I am able to hide the default row containing the image above. However, after adding my own input box - example:

    <input type="text" v-model="searchTerm" v-on:keyup='filterResult()' />,

How can I trigger the filter event to process my filter request in the filterResult() method?

 data(){
        return {
            searchTerm:'',
            customFilters: [{
                name: 'mysearch',
                callback: function (row, query) {
                    return row.name[0] == query;
                }
            }],
        },
    },
    methods:{
        filterResult(){
           //how to trigger event to filter result using the searchTerm
        }
    }

Yes I did and I have tried tons of example. I tried using custom filter but this too didn't work. — bdfios
Can you post some of these attempts so we can help you investigate? — Yom T.
I added a custom search, but how do you trigger the custom search? — bdfios

Juan Juan · Accepted Answer · 2020-01-24T19:14:25

Given a table definition like this, where tableoptions its an object containing the options you are applying to your table(these have to match their documentation), in this case i'm only adding customFilters, but you might have columns, headings or others

<v-client-table :options="tableoptions">
</v-client-table>

In their documentation it says that you should use this to trigger the custom filter

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

But it fails to say that Event it's VueTables.Event, so you will need to update your js to the following:

data() {
    return {
      searchTerm: '',
      tableoptions: {
        customFilters: [{
          name: 'mysearch',
          callback: function(row, query) {
            //this should be updated to match your data objects
            return row.name[0] == query; 
          }
        }]
      },
    },
  },
  methods: {
    filterResult() {
      VueTables.Event.$emit('vue-tables.filter::mysearch', query);
    }
  }

Custom Searchbox for vue-table-2

1 Answers