javascript - Vuetify Data Tables creating custom filters -
how use custom-filter prop , add new filter within? using data find "unemployed chickens" , remove special characters , 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 }, ] } },
putting here because couldn't find documentation. changed search custom filter can search multiple fields using space. way using code below can search "unemployed chicken" 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 multi-match separated space. //e.g if (!search) { return items } //if search empty return 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 encounter space in our search filter both first , 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 data (row[key]) in current row looking match. // .some return true , exit loop if finds 1 return false if doesnt // .every exit loop if dont find match return true if needles match // .filter 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 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>
Comments
Post a Comment