Vuetify datatable search filter returning 0

Question

In the Vuetify datatable example we have the normal search: when we type a calorie value, it filter only the specif row. How can it return the specif row AND to fill the other rows with value 0?

https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/v-data-table/prop-custom-filter.vue

Answer 1

Here you go, I just created this working demo as per the codepen link you shared in the post.

 new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { search: '', calories: '', headers: [ { text: 'Dessert (100g serving)', align: 'start', sortable: false, value: 'name', filterable: false }, { text: 'Calories', value: 'calories', filterable: true }, { text: 'Fat (g)', value: 'fat', filterable: false }, { text: 'Carbs (g)', value: 'carbs', filterable: false }, { text: 'Protein (g)', value: 'protein', filterable: false }, { text: 'Iron (%)', value: 'iron', filterable: false }, ], desserts: [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: '1%', }, { name: 'Ice cream sandwich', calories: 0, fat: 9.0, carbs: 37, protein: 4.3, iron: '1%', }, { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, iron: '7%', }, { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, iron: '8%', }, { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, iron: '16%', }, { name: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, iron: '0%', }, { name: 'Lollipop', calories: 0, fat: 0.2, carbs: 98, protein: 0, iron: '2%', }, { name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, iron: '45%', }, { name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, iron: '22%', }, { name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, iron: '6%', }, ], clonedObj: null } }, methods: { filterOnlyCapsText (value, search, item) { return value.= null && search.= null && value toString() indexOf(search) == -1 || value === 0 } } })

 <script src="https://unpkg.com/vue@2.x/dist/vue.js"></script> <script src="https://unpkg.com/vuetify@2.6.8/dist/vuetify.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.8/dist/vuetify.min.css"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"/> <link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/css/materialdesignicons.min.css"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"/> <div id="app"> <v-app id="inspire"> <v-data-table:headers="headers":items="desserts":items-per-page="10" class="elevation-1" item-key="name":search="calories":custom-filter="filterOnlyCapsText" > <template v-slot:top> <tr> <td></td> <td> <v-text-field v-model="calories" type="number" label="Less than" ></v-text-field> </td> <td colspan="4"></td> </tr> </template> </v-data-table> </v-app> </div>