title: Vuetify: How to filter data in v-data-table?
body: <p>In a data table, I want to display only items, where the property 'display' is 'true'. There is the property 'filter' in the component <a href="https://vuetifyjs.com/en/components/data-tables" rel="nofollow noreferrer">v-data-table</a>. But there is no example showing, how to use it.</p>
  
  <p>I have tried several approaches, but without success. The following code snippet is also available at <a href="https://codepen.io/antoninslejska/pen/qKwBda" rel="nofollow noreferrer">codepen</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    data () {
      return {
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'left',
            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: [
          {
            value: false,
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
            display: false
          },
          {
            value: false,
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%',
            display: true
          },
          {
            value: false,
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%',
            display: false
          },
          {
            value: false,
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%',
            display: true
          },
          {
            value: false,
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%',
            display: false
          },
          {
            value: false,
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0%',
            display: true
          },
          {
            value: false,
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%',
            display: false
          },
          {
            value: false,
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45%',
            display: false
          },
          {
            value: false,
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22%',
            display: false
          },
          {
            value: false,
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%',
            display: false
          }
        ]
      }
    },
    methods: {
      filterItems(val, search) {
        return val.display;
      }
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"&gt;
    &lt;link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="app"&gt;
    &lt;v-app id="inspire"&gt;
      &lt;v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        item-key="name"
        :filter="filterItems"
      &gt;
        &lt;template slot="items" slot-scope="props"&gt;
          &lt;tr @click="props.expanded = !props.expanded" :class="[props.expanded &amp;&amp; 'expanded']"&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;template slot="expand" slot-scope="props"&gt;
          &lt;v-card flat&gt;
            &lt;v-card-text&gt;Peek-a-boo!&lt;/v-card-text&gt;
          &lt;/v-card&gt;
        &lt;/template&gt;
      &lt;/v-data-table&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;
  
    &lt;script src="https://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/vuetify/dist/vuetify.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problematic part of the code is:</p>
  
  <pre><code>  methods: {
      filterItems(val, search) {
        return ???;
      }
    }
  </code></pre>