How do I use "custom filter" prop in data tables in vuetify? or How do I create a custom filter to filter by headers? How do I use "custom filter" prop in data tables in vuetify? or How do I create a custom filter to filter by headers? vue.js vue.js

How do I use "custom filter" prop in data tables in vuetify? or How do I create a custom filter to filter by headers?


Looking at the code on Github1, it looks like the customFilter prop is used to overwrite the default method used to determine how the filter prop is applied to the items in the table.

The default customFilter method applies the filter function to each property name of each item object and filters out any items that don't include one property name that passes the filter:

customFilter: {  type: Function,  default: (items, search, filter) => {    search = search.toString().toLowerCase()    return items.filter(i => (      Object.keys(i).some(j => filter(i[j], search))    ))  }},

You might want to overwrite this function if you wanted to prevent any columns from being included in the filter or if there were specific rows that you always wanted to prevent from being filtered out.

You'll notice that the method also depends on the search prop, which must be a string.


All that said, you really don't need to use that prop for what you want to do. You should just make a computed property to filter the items based on your dropdown value and pass that computed property as the items prop.

Here's an example:

new Vue({  el: '#app',  data() {    return {      food: [        { name: 'Bakchoi', type: 'vegetable', calories: 100 },        { name: 'Pork', type: 'meat', calories: 200 },        { name: 'Chicken Thigh', type: 'meat', calories: 300 },        { name: 'Watermelon', type: 'fruit', calories: 10 },      ],      headers: [        { text: 'Name', align: 'left', value: 'name' },        { text: 'Food Type', align: 'left', value: 'type' },         { text: 'Calories', align: 'left', value: 'calories' },      ],      foodType: null,    };  },  computed: {    filteredItems() {      return this.food.filter((i) => {        return !this.foodType || (i.type === this.foodType);      })    }  }})
<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script><script src="https://unpkg.com/vuetify@0.15.2/dist/vuetify.js"></script><link rel="stylesheet" href="https://unpkg.com/vuetify@0.15.2/dist/vuetify.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"><div id="app">  <v-app>      <v-select       label="Food Type"       :items="['vegetable', 'meat', 'fruit']"      v-model="foodType"    ></v-select>        <v-data-table       :headers="headers"      :items="filteredItems"      hide-actions    >      <template slot="items" scope="{ item }">        <td>{{ item.name }}</td>        <td>{{ item.type }}</td>        <td>{{ item.calories }}</td>      </template>    </v-data-table>  </v-app></div>