CODEWITHSUNDEEP
javascriptvue.jsdatatablefull-text-searchvuetify.js
Tom
Tom

Reputation: 6004

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

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>

Upvotes: 4

Views: 4941

Answers (2)

bdoubleu
bdoubleu

Reputation: 6107

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)
      )
    }
  }
}

Upvotes: 4

Julian Paolo Dayag
Julian Paolo Dayag

Reputation: 3719

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

Upvotes: 6

Related Questions