1

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?

Dan
  • 45,062
  • 13
  • 59
  • 80
Anjo Bautista Liwanag
  • 97
  • 6

1 Answers1

2

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.

Dan
  • 45,062
  • 13
  • 59
  • 80
  • 1
    It kinda feels like a hack, but it's super elegant, and I can see why that'd work. I'm going to try it out in my project :) – Narxx Jan 28 '21 at 12:45