1new Vue({
2  el: '#demo',
3
4  data: {
5    sortKey: 'name',
6    reverse: false,
7    searchName: '',
8    searchOperator: '',
9    searchAge: '',
10    columns: ['name', 'age'],
11    newUser: {},
12    search: "",
13    name: "",
14    age: "",
15
16    users: [
17      { name: 'John', age: 50 },
18      { name: 'Jane', age: 22 },
19      { name: 'Paul', age: 34 },
20      { name: 'Kate', age: 15 },
21      { name: 'Amanda', age: 65 },
22      { name: 'Steve', age: 38 },
23      { name: 'Keith', age: 21 },
24      { name: 'Don', age: 50 },
25      { name: 'Susan', age: 21 }
26    ]
27  },
28  methods: {
29    sortBy: function (sortKey) {
30      this.reverse = (this.sortKey == sortKey) ? !this.reverse : false;
31
32      this.sortKey = sortKey;
33    }, 
34    filterByName : function(user) {
35      // no search, don't filter : 
36      if (this.searchName.length === 0) {
37        return true;
38      }
39
40      return  (user.name.toLowerCase().indexOf(this.searchName.toLowerCase()) > -1);
41    }, 
42    filterByAge : function (user) {
43      // no operator selected or no age typed, don't filter : 
44      if (this.searchOperator.length === 0 || this.age.length === 0) {
45        return true;
46      }
47
48      if (this.searchOperator === '>') {
49        return (user.age > this.age); 
50      } else  if (this.searchOperator === '<') {
51        return (user.age < this.age);
52      }      
53    }, 
54    orderBy : function (userA, userB) {
55      let condition = (userA[this.sortKey] > userB[this.sortKey]);
56      if (this.reverse) {
57        return !condition;
58      } else {
59        return condition;
60      }
61    }
62  },
63  computed: {
64    filteredPersons: function () {
65      return this.users
66      .filter(this.filterByName)
67      .filter(this.filterByAge)
68      .sort(this.orderBy);
69    }
70  },  
71});