Vuetify Data Tables creating custom filters

Question

How do you use the custom-filter prop and add new filter within? Using this data I would like to find all the "Unemployed Chickens" and remove all special Characters and spaces:

data () {
        return {
            headers: [
                { text: 'Name', value: 'name' },
                { text: 'Animal', value: 'animal' },
                { text: 'Job', value: 'job' },
                { text: 'Age', value: 'age' },
            ],
            items: [
                { name: 'Frozen Yogurt',  animal: 'Chicken',  job: 'Electrician', age: 24 },
                { name: 'Eclair',  animal: 'Cow',  job: 'IT Consultant', age:45  },
                { name: 'Cupcake',  animal: 'Cow',  job: 'Unemployed', age:26  },
                { name: 'Gingerbread',  animal: 'Chicken',  job: 'Unemployed', age:38  },
                { name: 'Jelly bean',  animal: 'Cow',  job: 'Fraud Specalist', age:52  },
                { name: 'Lollipop',  animal: 'Sheep',  job: 'Unemployed', age:18  },
                { name: 'Honeycomb',  animal: 'Sheep',  job: 'Plumber', age:32  },
                { name: 'Donut',  animal: 'Chicken',  job: 'Unemployed', age:22  },
                { name: 'KitKat',  animal: 'Sheep',  job: 'Gym Junkie', age:41  },
            ]
        }
    },

Answer 1

Putting this here because I couldn't find the documentation. I changed the search to a custom filter so that you can search multiple fields using a space. That way using the code below you can search for "Unemployed Chicken" to get your results.

new Vue({
        el: '#app',
        data () {
            return {
                search: '',
                headers: [
                    { text: 'Name', value: 'name' },
                    { text: 'Animal', value: 'animal' },
                    { text: 'Job', value: 'job' },
                    { text: 'Age', value: 'age' },
                ],
                items: [
                    { name: 'Frozen Yogurt',  animal: 'Chicken',  job: 'Electrician', age: 24 },
                    { name: 'Eclair',  animal: 'Cow',  job: 'IT Consultant', age:45  },
                    { name: 'Cupcake',  animal: 'Cow',  job: 'Unemployed', age:26  },
                    { name: 'Gingerbread',  animal: 'Chicken',  job: 'Unemployed', age:38  },
                    { name: 'Jelly bean',  animal: 'Cow',  job: 'Fraud Specalist', age:52  },
                    { name: 'Lollipop',  animal: 'Sheep',  job: 'Unemployed', age:18  },
                    { name: 'Honeycomb',  animal: 'Sheep',  job: 'Plumber', age:32  },
                    { name: 'Donut',  animal: 'Chicken',  job: 'Unemployed', age:22  },
                    { name: 'KitKat',  animal: 'Sheep',  job: 'Gym Junkie', age:41  },
                ]
            }
        },
        methods: {
            customFilter(items, search, filter) {
                //this custom filter will do a multi-match separated by a space.
                //e.g

                if (!search) { return items } //if the search is empty just return all the items

                function  new_filter (val, search) {
                    return val !== null &&
                        ['undefined', 'boolean'].indexOf(typeof val) === -1 &&
                        val.toString().toLowerCase().replace(/[^0-9a-zA-Z]+/g,"").indexOf(search) !== -1
                }

                let needleAry = search.toString().toLowerCase().split(" ").filter(x => x);
                //whenever we encounter a space in our search we will filter for both the first and second word (or third word)

                return items.filter(row => needleAry.every(needle => Object.keys(row).some(key => new_filter(row[key],needle))));
                //foreach needle in our array cycle through the data (row[key]) in the current row looking for a match.
                // .some will return true and exit the loop if it finds one it will return false if it doesnt
                // .every will exit the loop if we dont find a match but will return true if all needles match
                // .filter the rows on each match


            }
        }

    })

<!DOCTYPE html>
<html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
    <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>


</head>
<body>
<div id="app">
    <v-app id="inspire">
        <v-card>
            <v-card-title>
                Animals in the workforce
                <v-spacer></v-spacer>
                <v-text-field
                        append-icon="search"
                        label="Search"
                        single-line
                        hide-details
                        v-model="search"
                ></v-text-field>
            </v-card-title>
            <v-data-table
                    hide-actions
                    :headers="headers"
                    :items="items"
                    :search="search"
                    :custom-filter="customFilter"
            >
                <template slot="items" scope="props">
                    <td class="text-xs-right">{{ props.item.name }}</td>
                    <td class="text-xs-right">{{ props.item.animal }}</td>
                    <td class="text-xs-right">{{ props.item.job }}</td>
                    <td class="text-xs-right">{{ props.item.age }}</td>
                </template>
            </v-data-table>
        </v-card>
    </v-app>
</div>
</body>
</html>