Vuetify data-table, how to apply external filters?

2
votes

How, if at all possible, to apply a filter to a Vuetify v-data-table, in conjunction with the 'regular' search property?

Following the Vuetify example (https://vuetifyjs.com/en/components/data-tables) , consider a Vuetify data-table with two columns:

  • Dessert
  • Category

I want to control the table with a search box, linked to the "Dessert" column:

        <v-data-table
          :headers="headers"
          :items="desserts"
          :search="search"
        ></v-data-table>

and:

    headers: [
      { text: 'Dessert (100g serving)', value: 'name' },
      { text: 'Category', value: 'category' },
    ],

But I want to control a filter on the Category column with a group of checkboxes (exact match). There is such a thing as a "custom-filter", but the documentation is not very detailed on that.

This looks to be the same question (unanswered): How to add individual filters for data-table in vuetify?

1
vuetify.js

1 Answers

1
votes

Turns out it's actually quite simple! The filters are defined in the headers property.

No changes required to the html element:

<v-data-table
  :headers="headers"
  :items="desserts"
  :search="search"
></v-data-table>

The headers are moved to the computed-section and defined like this:

computed: {
  headers() {
    return [ { text: 'Dessert (100g serving)', value:'name' }
           , { text: 'Category', value: 'category', filter: value => {
                  return this.array_of_matches.indexOf(value) !== -1
                },
             }
           ]
  }

Where array_of_matches is a variable containing a list of search items. You may optionally want to add case conversion stuff like this: value.toString().toLocaleUpperCase()

The 'regular' search won't match anything on a header that has such a filter defined.