Sometimes, we want to use the custom filter prop in data tables in Vuetify.

In this article, we’ll look at how to use the custom filter prop in data tables in Vuetify.

How to use the custom filter prop in data tables in Vuetify?

To use the custom filter prop in data tables in Vuetify, we can return an array with the filtered items in a computed property.

For instance, we write

<template>
  <div>
    <v-data-table :headers="headers" :items="filteredItems" hide-actions>
    </v-data-table>
  </div>
</template>

<script>
//...
export default {
  //...
  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>

to add the food array that we filter to get the the filteredItems computed property.

And we use filteredItems as the data for the items prop in the v-data-table component.

Conclusion

To use the custom filter prop in data tables in Vuetify, we can return an array with the filtered items in a computed property.