vs-table default sort-key prop

[maksbychok]

It`s nice ui-framework. Have a small question. Could you suggest, how can I set the default sorting key?

[Caceresenzo]

Hi,

I was having the same problem myself. And as far as I can tell, even with a look at the code, it is not possible.

Even changing by hand the currentSortKey and currentSortType variables does not seems to work.

But what about the sort(key, sortType) function? Same problem, it does not update the UI.

I am afraid that there is no solution or trick to avoid this. The best you can do is to wait for an update.

[mohammad128]

`hi bro... this work
     
<template>
     ...
     <vs-th sort ref="th_name" @click="sort($event, 'name')"> Name </vs-th>
     ...
<template>

<script> 
export default {
      .... 
     mounted(){ 
          // Set Default Sort Type For th_name 
          this.$refs.th_name.$el.dataset["sortType" + 'name'] = 'desc';
          this.$refs.th_name.$el.dataset["sortType"] = 'desc';
          this.$refs.th_name.$el.dataset["sortKey"] = "sortType" + 'name'; 
     }, 
     methods: { 
        sort(event, sortKey, type) {

            var sortType = type || 'desc';
            var el = event.target;

            if (el.dataset["sortType" + sortKey] == 'desc') {
                sortType = 'asc';
            } else if (el.dataset["sortType" + sortKey] == 'asc') {
                sortType = null;
            }

            el.dataset["sortType" + sortKey] = sortType;
            el.dataset["sortType"] = sortType;
            el.dataset["sortKey"] = "sortType" + sortKey;
            var parent = el.closest('.vs-table__tr');
            var ths = parent.querySelectorAll('th.sort');
            ths.forEach(function (th) {
                if (th != el) {
                    th.dataset.sortType = null;
                    th.dataset[th.dataset["sortKey"]] = null;
                }
            });
            this.sortKey = sortKey;
            this.sortType = sortType;
        },
     } 
     .... 
}
 </script>`