[Vuejs]-Vuetify v-data-table using search function to search for item's property that is not indicated in the headers

I came up with this:

1. Have the searchable prop in your items array:

items: [
  // ... 
  { name: "MEDIHEAL Beauty Mask", quantity: 483, price: 0, somePropThatsNotVisible: "String it could be found by"  }
  // ...
]

2. Use a custom filter:

<v-data-table :headers="headers" :items="items" :search="search" :custom-filter="filter">

methods: {
  filter (value, search, item) {      
    return Object.values(item).some(prop => {
      return String(prop).includes(search)
    })
  }
},

That’s it! now all props are searchable but not shown if not included in the headers.

You can override the filter property on the header definition for that column.

headers: [
  { 
    text: "Product Name", value: "name", filter: product => { 
      // compare product.property against this.search and return true/false
    } 
  },
  // ... your other col definitions
]