Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 682
Anjo Bautista Liwanag Avatar asked Oct 19 '25 11:10

Anjo Bautista Liwanag


1 Answers

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.

like image 69
Dan Avatar answered Oct 22 '25 01:10

Dan



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!