filter table search

Relieved Reindeer answered on May 8, 2020 Popularity 10/10 Helpfulness 1/10

answer filter table search

related table filter

filter table search

Comment

new Vue({
  el: '#demo',

  data: {
    sortKey: 'name',
    reverse: false,
    searchName: '',
    searchOperator: '',
    searchAge: '',
    columns: ['name', 'age'],
    newUser: {},
    search: "",
    name: "",
    age: "",

    users: [
      { name: 'John', age: 50 },
      { name: 'Jane', age: 22 },
      { name: 'Paul', age: 34 },
      { name: 'Kate', age: 15 },
      { name: 'Amanda', age: 65 },
      { name: 'Steve', age: 38 },
      { name: 'Keith', age: 21 },
      { name: 'Don', age: 50 },
      { name: 'Susan', age: 21 }
    ]
  },
  methods: {
    sortBy: function (sortKey) {
      this.reverse = (this.sortKey == sortKey) ? !this.reverse : false;

      this.sortKey = sortKey;
    }, 
    filterByName : function(user) {
      // no search, don't filter : 
      if (this.searchName.length === 0) {
        return true;
      }

      return  (user.name.toLowerCase().indexOf(this.searchName.toLowerCase()) > -1);
    }, 
    filterByAge : function (user) {
      // no operator selected or no age typed, don't filter : 
      if (this.searchOperator.length === 0 || this.age.length === 0) {
        return true;
      }

      if (this.searchOperator === '>') {
        return (user.age > this.age); 
      } else  if (this.searchOperator === '<') {
        return (user.age < this.age);
      }      
    }, 
    orderBy : function (userA, userB) {
      let condition = (userA[this.sortKey] > userB[this.sortKey]);
      if (this.reverse) {
        return !condition;
      } else {
        return condition;
      }
    }
  },
  computed: {
    filteredPersons: function () {
      return this.users
      .filter(this.filterByName)
      .filter(this.filterByAge)
      .sort(this.orderBy);
    }
  },  
});

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript search

Link to this answer
Share Copy Link

Contributed on May 08 2020

Relieved Reindeer

0 Answers Avg Quality 2/10

Closely Related Answers

table filter

Comment

computed: {
  filteredAndSortedData() {
    let filteredData = this.data;

    // Apply the search filter
    if (this.search) {
      filteredData = filteredData.filter(item => {
        // Customize this based on your data structure
        return item.full_name.includes(this.search) || item.date_of_birth.includes(this.search);
      });
    }

    // Apply the orderBy filter
    if (this.sortKey) {
      filteredData.sort((a, b) => {
        const x = a[this.sortKey];
        const y = b[this.sortKey];
        return this.reverse ? x.localeCompare(y) : y.localeCompare(x);
      });
    }

    return filteredData;
  },
},

Popularity 7/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: filter javascript

Link to this answer
Share Copy Link

Contributed on Nov 08 2023

Glamorous Gibbon

0 Answers Avg Quality 2/10

table filter

Comment

<tr v-for="item in filteredAndSortedData" :key="item.id">
  <!-- Your table row content here -->
</tr>

Popularity 5/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: filter javascript

Link to this answer
Share Copy Link

Contributed on Nov 08 2023

Glamorous Gibbon

0 Answers Avg Quality 2/10

table filter

Comment

computed: {
  ...mapGetters({
    authenticated: 'auth/check',
    user: 'auth/user',
    status: 'auth/status'
  }),

  filteredAndSortedData() {
    let filteredData = this.data;

    // Apply the search filter
    if (this.search) {
      filteredData = filteredData.filter(item => {
        // Customize this based on your data structure
        return item.full_name.includes(this.search) || item.date_of_birth.includes(this.search);
      });
    }

    // Apply the orderBy filter
    if (this.sortKey) {
      filteredData.sort((a, b) => {
        const x = a[this.sortKey];
        const y = b[this.sortKey];
        return this.reverse ? x.localeCompare(y) : y.localeCompare(x);
      });
    }

    return filteredData;
  },
},

Popularity 5/10 Helpfulness 1/10 Language html

Source: chat.openai.com

Tags: filter html

Link to this answer
Share Copy Link

Contributed on Nov 08 2023

Glamorous Gibbon

0 Answers Avg Quality 2/10

table filter

Comment

<th @click="sortBy(['first_name', 'sir_name'])">
  Full Name
</th>

Popularity 6/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: filter javascript

Link to this answer
Share Copy Link

Contributed on Nov 08 2023

Glamorous Gibbon

0 Answers Avg Quality 2/10

table filter

Comment

computed: {
  // ...

  filteredAndSortedData() {
    let filteredData = this.data;

    // Apply the search filter
    if (this.search) {
      filteredData = filteredData.filter(item => {
        // Customize this based on your data structure
        return item.first_name.includes(this.search) || item.sir_name.includes(this.search);
      });
    }

    // Apply the orderBy filter
    if (this.sortKeys && this.sortKeys.length > 0) {
      filteredData.sort((a, b) => {
        // Loop through the sort keys and compare each one
        for (const sortKey of this.sortKeys) {
          const x = a[sortKey];
          const y = b[sortKey];
          const comparison = x.localeCompare(y);

          if (comparison !== 0) {
            return this.reverse ? -comparison : comparison;
          }
        }
        return 0; // If all keys are equal, return 0
      });
    }

    return filteredData;
  },
},

Popularity 6/10 Helpfulness 1/10 Language html

Source: chat.openai.com

Tags: filter html

Link to this answer
Share Copy Link

Contributed on Nov 08 2023

Glamorous Gibbon

0 Answers Avg Quality 2/10

filter table search

Contents

More Related Answers