Vue Sorted Table (Sorted from highest to lowest)

Question

Hi i am a newbie in vuejs. I wanted to sort a table by Highest to lowest. However i install the library of vue-sorted-table. But when im trying run the code the data always return lowest to highest. Can anyone help me? Thank you..

Here is the code:

<template>
  <div id="app">
    <sorted-table :values="values" @sort-table="onSort">
      <thead>
        <tr>
          <th scope="col" style="text-align: left; width: 10rem;">
            <sort-link name="id">ID</sort-link>
          </th>
        </tr>
      </thead>
      <template #body="sort">
        <tbody>
          <tr v-for="value in sort.values" :key="value.id">
            <td>{{ value.id }}</td>
          </tr>
        </tbody>
      </template>
    </sorted-table>
  </div>
</template>

<script>
import { ChevronUpIcon } from "vue-feather-icons";

export default {
  name: "App",
  data: function() {
    return {
      values: [{ id: 2 }, { id: 1 }, { id: 3 }],
      sortBy: "",
      sortDir: ""
    };
  },
  components: {
    ChevronUpIcon
  },
  methods: {
    onSort(sortBy, sortDir) {
      this.sortBy = sortBy;
      this.sortDir = sortDir;
    }
  }
};
</script>

<style>
.feather {
  transition: 0.3s transform ease-in-out;
}

.feather.asc {
  transform: rotate(-180deg);
}
</style>

code can access here:

https://codesandbox.io/s/pedantic-kirch-bx9zv

Answer 1

Add dir property to sorted-table, and make its value equals to desc

<template>
  <div id="app">
    <sorted-table :values="values" @sort-table="onSort" dir="desc">
      <thead>
        <tr>
          <th scope="col" style="text-align: left; width: 10rem;">
            <sort-link name="id">ID</sort-link>
          </th>
        </tr>
      </thead>
      <template #body="sort">
        <tbody>
          <tr v-for="value in sort.values" :key="value.id">
            <td>{{ value.id }}</td>
          </tr>
        </tbody>
      </template>
    </sorted-table>
  </div>
</template>

<script>
import { ChevronUpIcon } from "vue-feather-icons";

export default {
  name: "App",
  data: function() {
    return {
      values: [{ id: 2 }, { id: 1 }, { id: 3 }],
      sortBy: "",
      sortDir: ""
    };
  },
  components: {
    ChevronUpIcon
  },
  methods: {
    onSort(sortBy, sortDir) {
      this.sortBy = sortBy;
      this.sortDir = sortDir;
    }
  }
};
</script>

<style>
.feather {
  transition: 0.3s transform ease-in-out;
}

.feather.asc {
  transform: rotate(-180deg);
}
</style>

check https://github.com/BernhardtD/vue-sorted-table and pay attention to dir property of the table, you'll find the answer