How to Sort Table in Laravel using Vue.js

Question

I am trying to make a sort table in Laravel using Vue.js. I tried some solutions on the internet, but it still doesn't work for me.

Here is my template file:

<template>
  <div class="container">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th v-for="column in columns">{{ column }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(emp, key) in emp">
          <td>{{ emp.id }}</td>
          <td>{{ emp.emp_name }}</td>
          <td>{{ emp.salary }}</td>
          <td>{{ emp.phone_number }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

My script file:

<script>
export default {
  data() {
    return {
      emp: [],
      columns: ['No','Name', 'Salary', 'Phone Number']
    }
  },
  mounted() {
    this.fetchUser();
  },
  methods: {
    fetchUser(){    
      fetch('api/employee').then(res => res.json())
      .then(res => {
        this.emp = res.data;
        console.log(res);
      })
    },  
  }
}
</script>

I'll appreciate of all your help. Thanks in advance..

what do you mean by sort , you can sort your data from you backend [ laravel ] — Hussam Adil
– Hussam Adil, Commented Aug 4, 2019 at 15:56
<div v-if="reverseList"> {{ reverseList }} </div> <button v-on:click="reverseList">Reverse list</button> methods: { reverseList() { return emp.reverse(); } } — user6854465
– user6854465, Commented Aug 4, 2019 at 16:09

Andrew Vasylchuk · Accepted Answer · 2019-08-04 16:31:23Z

new Vue({
  el: "#app",
  data() {
    return {
      emp: [{
          id: 1,
          emp_name: "Andrew",
          salary: 256,
          phone_number: "123"
        }, {
          id: 2,
          emp_name: "John",
          salary: 512,
          phone_number: "321"
        },
        {
          id: 3,
          emp_name: "Sam",
          salary: 1024,
          phone_number: "456"
        }
      ],
      columns: [{
        label: "No"
      }, {
        label: "Name",
        key: "emp_name",
        sortable: true
      }, {
        label: "Salary",
        key: "salary",
        sortable: true,
        isNumber: true
      }, {
        label: "Phone Number"
      }],
      sortKey: "",
      sortOrder: "desc"
    }
  },
  computed: {
    sortedEmp() {
      if (!this.sortKey) return this.emp;

      const arr = JSON.parse(JSON.stringify(this.emp));
      const {
        sortKey,
        sortOrder
      } = this;

      if (this.columns.find(column => column.key === sortKey).isNumber) {
        arr.sort((a, b) => this.numberComporator(a[sortKey], b[sortKey]));
      }

      return sortOrder === "asc" ? arr : arr.reverse();
    }
  },
  mounted() {
    this.fetchUser();
  },
  methods: {
    fetchUser() {
      fetch('api/employee').then(res => res.json())
        .then(res => {
          this.emp = res.data;
        })
    },
    sortHandler(key) {
      if (key === this.sortKey) {
        this.sortOrder = this.sortOrder === "asc" ? "desc" : "asc";
      } else {
        this.sortKey = key;
      }
    },
    numberComporator(a, b) {
      return a - b;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.label">
          {{ column.label }}
          <button v-if="column.sortable" type="button" @click="sortHandler(column.key)">
            Sort
            <span v-if="sortKey === column.key">{{ sortOrder }}</span>
          </button>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="emp in sortedEmp" :key="emp.id">
        <td>{{ emp.id }}</td>
        <td>{{ emp.emp_name }}</td>
        <td>{{ emp.salary }}</td>
        <td>{{ emp.phone_number }}</td>
      </tr>
    </tbody>
  </table>
</div>

Collectives™ on Stack Overflow

How to Sort Table in Laravel using Vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related