CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
ddjk
ddjk

Reputation: 133

Vuetify: Searching a v-data-table by multiple values?

<v-card-title>
    <v-text-field
        v-model="search"
        label="Search Product Name"
        single-line
        hide-details
    ></v-text-field>
</v-card-title>
<v-data-table
    :headers="headers"
    :items="this.$store.getters['options/getAllAvailableProducts']"
    :items-per-page="10"
    :search="search"
    class="elevation-1"
>
</v-data-table>


///

data() {
    return {
        dialog: this.$store.getters['liveDashboard/getShowDynamicSelectionModal'],
        search: '',
        headers: [
            { text: 'Image',
              value: 'thumb',
              sortable: false,
            },
            {
              text: 'Product',
              sortable: true,
              value: 'product_name',
            },
            {
              text: 'Price',
              sortable: false,
              value: 'inventory_min',
            },
            {
              text: 'Inventory',
              sortable: true,
              value: 'inventory_quantity',
            },
            {
              text: '',
              sortable: true,
              value: 'inventory_id',
            },
        ],
    }
},

I have a data table populated by products. A single product has multiple fields:

example:

the value of this.$store.getters['options/getAllAvailableProducts'] is an array of products.

   [
     {
       'product_name': "test test",
       'sku': "145534",
       'brand': "Nike",
       'inventory_id': 4,
       'inventory_min': 44,
       'inventory_quantity': 2,
     },
     {
       'product_name': "new product",
       'sku': "5534545",
       'brand': "Nike test",
       'inventory_id': 5,
       'inventory_min': 512,
       'inventory_quantity': 44, 
     }
   ]

Right now, typing in the name of the product brings up the products that match the name but I want it to where typing in the name, sku or brand will bring up all the matching products.

So typing in "test" would bring up both of those products since the first product has "test" in the name field and the 2nd product has "test" in the brand name.

Upvotes: 0

Views: 5470

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362430

Vuetify's data-table is only searchable on the fields that are defined in the headers prop.

However, you can get it to search all fields by using a custom-filter...

<v-card>
  <v-card-title>
    <v-text-field
      v-model="search"
      label="Search"
      single-line
      hide-details
    ></v-text-field>
  </v-card-title>
  <v-data-table
      :headers="headers"
      :items="items"
      :search="search"
      :custom-filter="customSearch"
   >
   </v-data-table>
</v-card>


methods: {
      customSearch (value, search, item) {
          return Object.values(item).some(v=>v&&v.toString().toLowerCase().includes(search))
      }
}

Demo

I answered a similar question here.

Upvotes: 2

Related Questions