title: Vuetify Data Table Inline Filter
body: <p>Please see <a href="https://codepen.io/fontzter/pen/qywQjK" rel="nofollow noreferrer">this pretty Example by Dave Fontz on CodePen</a> on how to archive Date Table Inline Filter and to be able to customize how to display headers and tableData rows of a vuetify v-data-table. </p>
  
  <p>This worked like acharm for me with vuetify version below 2. </p>
  
  <p>However since upgrading to vuetify version 2 the </p>
  
  <pre><code>&lt;template slot="headers" slot-scope="props"&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>&lt;template slot="items" slot-scope="props"&gt;
  </code></pre>
  
  <p>inside </p>
  
  <pre><code>&lt;v-data-table&gt;
  </code></pre>
  
  <p>seem to be ignored. </p>
  
  <p>Anyone any suggestion on how to migrate Daves solution to be compatible with vuetify version 2?</p>
  
  <p>Any Help or Hint is much appreciated!</p>
  
  <p>Complete Code by Dave also below.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;v-app id="inspire"&gt;
      &lt;v-data-table
        v-model="selected"
        :headers="headers"
        :items="filteredDesserts"
        :pagination.sync="pagination"
        select-all
        item-key="name"
        class="elevation-1"
      &gt;
        &lt;template slot="headers" slot-scope="props"&gt;
          &lt;tr&gt;
            &lt;th&gt;
              &lt;v-checkbox
                :input-value="props.all"
                :indeterminate="props.indeterminate"
                primary
                hide-details
                @click.native="toggleAll"
              &gt;&lt;/v-checkbox&gt;
            &lt;/th&gt;
            &lt;th
              v-for="header in props.headers"
              :key="header.text"
              :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
              @click="changeSort(header.value)"
            &gt;
              &lt;v-icon small&gt;arrow_upward&lt;/v-icon&gt;
              {{ header.text }}
            &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr class="grey lighten-3"&gt;
            &lt;th&gt;
              &lt;v-icon&gt;filter_list&lt;/v-icon&gt;
            &lt;/th&gt;
            &lt;th
              v-for="header in props.headers"
              :key="header.text"
            &gt;
              &lt;div v-if="filters.hasOwnProperty(header.value)"&gt;
                &lt;v-select flat hide-details small multiple clearable :items="columnValueList(header.value)" v-model="filters[header.value]"&gt;
  
                &lt;/v-select&gt;
  
              &lt;/div&gt;
            &lt;/th&gt;
          &lt;/tr&gt;
        &lt;/template&gt;
        &lt;template slot="items" slot-scope="props"&gt;
          &lt;tr :active="props.selected" @click="props.selected = !props.selected"&gt;
            &lt;td&gt;
              &lt;v-checkbox
                :input-value="props.selected"
                primary
                hide-details
              &gt;&lt;/v-checkbox&gt;
            &lt;/td&gt;
            &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
            &lt;td class="text-xs-right"&gt;{{ props.item.calories }}&lt;/td&gt;
            &lt;td class="text-xs-right"&gt;{{ props.item.fat }}&lt;/td&gt;
            &lt;td class="text-xs-right"&gt;{{ props.item.carbs }}&lt;/td&gt;
            &lt;td class="text-xs-right"&gt;{{ props.item.protein }}&lt;/td&gt;
            &lt;td class="text-xs-right"&gt;{{ props.item.iron }}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/template&gt;
      &lt;/v-data-table&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>new Vue({
    el: '#app',
    data: () =&gt; ({
      pagination: {
        sortBy: 'name'
      },
      selected: [],
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          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' }
      ],
      filters: {
        fat: [],
        carbs: [],
        iron: [],
      },
      desserts: [
        {
          value: false,
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%'
        },
        {
          value: false,
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%'
        },
        {
          value: false,
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%'
        },
        {
          value: false,
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%'
        },
        {
          value: false,
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%'
        },
        {
          value: false,
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%'
        },
        {
          value: false,
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%'
        },
        {
          value: false,
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%'
        },
        {
          value: false,
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%'
        },
        {
          value: false,
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%'
        }
      ]
    }),
    computed: {
      filteredDesserts() {
        return this.desserts.filter(d =&gt; {
          return Object.keys(this.filters).every(f =&gt; {
            return this.filters[f].length &lt; 1 || this.filters[f].includes(d[f])
          })
        })
      }
    },
  
    methods: {
      toggleAll () {
        if (this.selected.length) this.selected = []
        else this.selected = this.desserts.slice()
      },
      changeSort (column) {
        if (this.pagination.sortBy === column) {
          this.pagination.descending = !this.pagination.descending
        } else {
          this.pagination.sortBy = column
          this.pagination.descending = false
        }
      },
      columnValueList(val) {
        return this.desserts.map(d =&gt; d[val])
      }
    }
  })
  </code></pre>
  
  <p><a href="https://codepen.io/fontzter/pen/qywQjK" rel="nofollow noreferrer">See it in Action on CodePen</a></p>