How to make content in an expand slot of a data table in VuetifyJS searchable?

Question

I'm using the VuetifyJS/VueJS data table with an expand slot. How to make the content in the expand slot searchable? I tried wrap the content within <td></td> but that didn't work.

Here is a codepen example: https://codepen.io/anon/pen/VBemRK?&editors=101 If you search for "find me" it always results in a Your search for "find me" found no results.

      <v-data-table
    :headers="headers"
    :items="desserts"
    :search="search"
    item-key="name"
  >

<template slot="items" slot-scope="props">
  <tr @click="props.expanded = !props.expanded">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>

     <template slot="expand" slot-scope="props">
  <v-card flat>
    <v-card-text><td>Peek-a-boo! Please find me too.</td></v-card-text>
  </v-card>
         </template> 

    <v-alert slot="no-results" :value="true" color="error" icon="warning">
      Your search for "{{ search }}" found no results.
    </v-alert>
  </v-data-table>

I recon the default search filter will try to find the correct rows based on the fields you have in your `desserts` variable. Since the expanded text does not appear there, you cannot find it. I am guessing you may need to add your expand text to your `desserts` rows, or override `filter` or `custom-filter` as per https://vuetifyjs.com/en/components/data-tables — Sumurai8, Jul 15 '18 at 09:14
Thanks for your suggestions. I added a `text` value to `dessert` and updated the CodePen example. Still nothing in the search result. How to a the row by using a custom-filter? — Tom, Jul 15 '18 at 14:39

Julian Paolo Dayag · Accepted Answer · 2018-07-17T12:18:22.533

5

Use a custom filter.

First, create a custom filter method:

methods: {
    customFilter(items, search) {
      return items.filter(dessert => JSON.stringify(dessert).toLowerCase().indexOf(search.toLowerCase()) !== -1)
    }
}

then add :custom-filter="customFilter" to the v-data-table:

<v-data-table
    :headers="headers"
    :custom-filter="customFilter"
    :items="desserts"
    :search="search"
    item-key="name"
>

See this updated codepen: https://codepen.io/WisdomSky/pen/PBNvYY

edited Jul 17 '18 at 12:18

answered Jul 17 '18 at 09:48

Julian Paolo Dayag

3,562
3
20
32

If I could, I would give you ten +1, because your answer was really helpful. Thanks for unlocking my problem! – informaticienzero Jan 03 '19 at 14:52
I'm glad I am of help to you :) – Julian Paolo Dayag Jan 06 '19 at 17:40

score 4 · Answer 2 · answered Oct 22 '19 at 13:35

Since Vuetify version >= 2 you'll need to use the custom-filter prop which has a new pattern.

export default {
  methods: {
    customDataTableItemsFilter(value, search, items) {
      /*
      Filter for individual words in search string. Filters
      all object values rather than just the keys included
      in the data table headers.
       */
      const wordArray = search
        .toString()
        .toLowerCase()
        .split(' ')
        .filter(x => x)
      return wordArray.every(word =>
        JSON.stringify(Object.values(items))
          .toString()
          .toLowerCase()
          .includes(word)
      )
    }
  }
}

This answer works perfectly!!! +++++++ – inane Feb 08 '22 at 15:59 — inane, Feb 08 '22 at 15:59

How to make content in an expand slot of a data table in VuetifyJS searchable?

2 Answers2