CODEWITHSUNDEEP
vue.jsvuetify.js
Anjo Bautista Liwanag
Anjo Bautista Liwanag

Reputation: 129

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

My table looks like this:

enter image description here

I have a templated 'product name' wherein code goes like this:

                <template v-slot:item.name="{ item }">
                  <v-list-item two-line>
                    <v-list-item-avatar style="width: 70px; height: 70px" tile>
                      <v-img :src="item.img" alt="John" />
                    </v-list-item-avatar>
                    <v-list-item-content>
                      <v-list-item-title style="">
                        <a
                          style="
                            text-decoration: none;
                            color: #0b0b0b;
                            font-size: 0.9em;
                          "
                          >{{ item.name }} {{ item.variation }}</a
                        >
                      </v-list-item-title>
                      <v-list-item-subtitle class="mt-1">
                        <small class="mr-5">
                          <v-icon small>mdi-package-variant</v-icon>
                          {{ item.sku }}
                        </small>
                        <small>
                          {{ item.shop_name }}
                        </small>
                      </v-list-item-subtitle>
                    </v-list-item-content>
                  </v-list-item>
                </template>

as I understand, the search ONLY search for the value from the headers we indicated my headers btw:

      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" },
      ],

How do I search un-declared value from headers? such as MEDIHEAL-MASK-PLACENTAREVITAL-EX (the subtitle for the product name of the first item in the table)

I was thinking of putting another value in the headers without the "text" element and templating the value to display nothing to the table. Any cleaner way of doing this?

Upvotes: 0

Views: 3534

Answers (3)

madmaciora
madmaciora

Reputation: 1

You can try a simple solution:

First modify the opening v-data-table tag:

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

and then in the <script setup> add:

<script setup>
  function filter(value, search, item) {
  return String(item.name).toLowerCase().includes(search);
  }
</script>

where item.name will point to column desired to be filtered.

Upvotes: 0

SneakyLenny
SneakyLenny

Reputation: 553

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"  }
  // ...
]
  1. 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.

Upvotes: 2

Ohgodwhy
Ohgodwhy

Reputation: 50787

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
]

Upvotes: 1

Related Questions