How do I search a Vuetify v-data-table column that is not in headers?

Question

My Header:

headers: [
 { text: "Product Name", value: "name" },
 { text: "Quantity", value: "quantity" },
 { text: "Price", value: "price" },
 { text: "Orders", value: "itemsSold" },
 { text: "Revenue", value: "revenue" },
 { text: "Status", value: "active" },
],

My Templated Item:

<template v-slot:item.name="{ item }">
 {{ item.name }} {{ item.sku }}
</template>

I will be able to search item.name but not item.sku, how will I able to use my search input for the item.sku if it's not indicated in the headers?

Answer 1

The simplest way that doesn't require even a custom-filter prop is to include the sku field in headers, but hide the column.

Do that by including the item in the headers array and using the align property. Set that align to " d-none". Notice the space in front of d-none, it's important:

headers: [
  { text: 'SKU', value: 'sku', align: ' d-none' }, // ✅ align ' d-none' hides it
  { text: "Product Name", value: "name" },
  { text: "Quantity", value: "quantity" },
  { text: "Price", value: "price" },
  { text: "Orders", value: "itemsSold" },
  { text: "Revenue", value: "revenue" },
  { text: "Status", value: "active" },
],

Now the SKU column exists and is searchable, but not shown.

Here is a demo using the Vuetify default <v-data-table> data with an additional SKU column.