vue-column-sortable is an data sortable directive for vue.js.

• In ES2015

  npm install vue-column-sortable --save

  //globally
  import columnSortable from 'vue-column-sortable'
  Vue.use(columnSortable)
  
  //for a single instance
  import columnSortable from 'vue-column-sortable'
  new Vue({
    directives: {columnSortable}
  })

• Direct include

    <script src="https://cdn.jsdelivr.net/npm/vue-column-sortable@0.0.1/dist/vue-column-sortable.js"></script>

• Step 1

  • Use v-column-sortable:{ data key } in HTML

    <table>
      <thead>
        <th v-column-sortable:name>Name</th>
        <th v-column-sortable:age>Age</th>
        .
        .
      </thead>
    </table>

• Step 2

  • copy method: orderBy

    new Vue({
      el: '#app',
      data: {
        userArray: [
          { name: 'John', age: 20 },
          { name: 'Peter', age: 22 },
        ]
      },
      directives: {columnSortable},
      methods:{
        orderBy(sortFn) {
          // sort your array data like this.userArray
          this.userArray.sort(sortFn);
        },
      }
    })

  Options

  showIcon

  Default true Show sort icon with fortawesome svg

  Vue.use(columnSortable, {
    showIcon: false,
  });

<template>
  <div class="about">
    <table border="1">
      <thead>
        <th>#</th>
        <th v-column-sortable:name>Name</th>
        <th v-column-sortable:birthday>Date of Birth</th>
        <th v-column-sortable:point>Point</th>
        <th v-column-sortable:address.country>Country</th>
        <th v-column-sortable:address.city>City</th>
      </thead>
      <tbody>
        <tr v-for="(d,index) in dataArray" :key="index">
          <td>{{ index+1 }}</td>
          <td>{{ d.name }}</td>
          <td>{{ d.birthday }}</td>
          <td>{{ d.point }}</td>
          <td>{{ d.address.country }}</td>
          <td>{{ d.address.city }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import columnSortable from 'vue-column-sortable'

export default {
  data() {
    return {
      dataArray: [
        {
          name: 'Jimmy Rutherford',
          birthday: '1945-5-6',
          point: 100,
          address: {
            country: 'United States of America',
            city: 'South Ryann',
          },
        },
        {
          name: 'Camila Gutmann',
          birthday: '1950-11-16',
          point: 230,
          address: {
            country: 'Taiwan',
            city: 'Lake Destinview',
          },
        },
      ],
    };
  },
  methods: {
    orderBy(fn) {
      this.dataArray.sort(fn);
    },
  },
  directives: {
    columnSortable,
  },
};
</script>

MIT