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?

score 7 · Accepted Answer · answered Jan 28 '21 at 07:49

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.

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

score 0 · Answer 2 · edited Jan 09 '22 at 16:50

Setting the align property to ' d-none' works, but the header is still visible on the mobile version of v-data-table (you can see it for yourself if you shrink the browser window enough).

In order to hide it on mobile also, you would have to use some CSS as well.

The following CSS worked for me:

.v-data-table
  >>> .v-data-table__wrapper
  > table
  > tbody
  > .v-data-table__mobile-table-row
  > .v-data-table__mobile-row:nth-of-type(2) {
  display: none;
}

Of course, in my example the header I wanted to hide was second in order. If yours is first or third or whatever, you just put the corresponding number in the :nth-of-type selector.

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

2 Answers2