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

Question

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

Answer 1

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

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)
        }
    }