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

user_8461496 0
Viewed 50441

As of date of posting, I cannot find any documentation to use the "custom filter" prop in data tables.

I just want to create a custom filter to filter my data table by headers. I have a dropdown, and when user click on one of the options for the dropdown, it will filter the list for one specific header.

Example: Dropdown options: Food type: fruit, meat, vegetable

  1. Bakchoi (vegetable)
  2. Pork (meat)
  3. Chicken Thigh (meat)
  4. watermelon (fruit)

If I select dropdown as meat, it should only show me pork and chicken thigh.

vuetify.js vue.js frontend
3 Answers

In my case I have 2 different way of filtering which are search bar and drop down. I tried to use custom-filter for both of them, but it doesn't work, so I came up with another approach

<v-text-field v-model="search" label="Label"></v-text-field>
<v-select
    v-model="select"
    :items="food"
    item-text="type"
    item-value="type"
    :label="Types"
    @change="filterFoodUsingDropDown"
>
</v-select>
<v-data-table
    :search="search"
    :headers="headers"
    :items="food"
    :custom-filter="filterFoodUsingSearchbar"
>

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' },
        ],
        search: '',
        select: '',
    };
},
methods: {
    filterFoodUsingSearchbar(items, search, filter) {
            // Condition
    }
        
    filterFoodUsingDropDown() {
        if (this.select !== '') {
            // In this case I use vuex to store the original data of the 
               food so that all the data is still exist even we filtered it out
            this.food = this.$store.state.food.filter((item) => item.type === this.select)
        }
    }
user_113101520
Related