# Examples

<template>
  <div id="app" class="p-3">
    <vue-table class="table-bordered" 
      :columns="columns" 
      :rows="sorted_rows"
      :sort-by="sort.by"
      :sort-direction="sort.direction"
      @column:sort="onSort"
    ></vue-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      // set sortable as true, the column will be rendered as a clickable link with an icon if you're using FA 
      columns: [
        {
          name: "name",
          title: "Identity",
          sortable: true
        },
        {
          name: "note",
          title: "Judgement",
          sortable: true
        }
      ],
      // result set
      rows: [
        {
          name: "Robert Duvak",
          note: 10
        },
        {
          name: "Isabelle Champion",
          note: 2
        },
        {
          name: "Jürgen Karsolinger",
          note: 5
        },
        {
          name: "Alberto Tulador",
          note: 13
        }
      ],
      // passed as props to the component
      sort: {
        by: "name",
        direction: "asc"
      }
    };
  },
  computed: {
    // This could also be done server side
    sorted_rows() {
      const me = this;
      return this.rows.sort((a, b) => {
        if (me.sort.direction === "asc") {
          if (a[me.sort.by] < b[me.sort.by]) return -1;
          if (a[me.sort.by] > b[me.sort.by]) return 1;
          return 0;
        }

        if (b[me.sort.by] < a[me.sort.by]) return -1;
        if (b[me.sort.by] > a[me.sort.by]) return 1;
        return 0;
      });
    }
  },
  methods: {
    onSort({ sortBy, sortDirection }) {
      this.sort.by = sortBy;
      this.sort.direction = sortDirection;
    }
  }
};
</script>

<style>
a.sortable-link {
  text-decoration: none !important;
}
</style>