CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Nszz
Nszz

Reputation: 147

how to create multiple dropdown select filter for vuetify data table

I am trying to create a filter for v-data-table

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%',
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%',
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%',
          },  
        ],
      }
    },
  }
</script>

I want to create a filter with multiple inputs where I can select the field, give a Threshold value input and select above/below the threshold value and then Apply this filter to get the filtered table

Could any one help me out at this please? I am quite new to vue and vuetify and I am really struggling with this

Thank you in advance. Let me know if you need any further information enter image description here

Upvotes: 2

Views: 1683

Answers (1)

hamid niakan
hamid niakan

Reputation: 2861

you can have some controls in your data that binds to your inputs like:

filterType: 'calories',
isAbove: false,
threshold: 12,
filteredDesserts: [],

then you need a method which is called on 'Apply' button click:

applyFilters() {
  this.filteredDesserts = this.desserts.filter(el => {
    if (this.isAbove) return el[this.filterType] > this.threshold;
    else return el[this.filterType] < this.threshold;
  });
}

now all you need to do is to bind the filteredDesserts to the items prop of v-data-table like :items="filteredDesserts

and you also need a method to remove the filter like this (you also need a remove filter button in your template to call this method):

removeFilter() {
  this.filteredDesserts = this.desserts;
}

by calling this function all the items are shown again. also when your page loads fill the filteredDesserts with desserts data like:

created() {
  this.filteredDesserts = this.desserts;
}

so when the page loads all the data are shown in the table.

you can also write a logic to use computed for filtering but since you have an apply button, I went with this method to implement the filtering only by clicking the button

Upvotes: 1

Related Questions