vue-good-table custom sorting

Question

I am using vue-good-table and have the following code so far:

<vue-good-table :columns="columns" :rows="rows" 
 styleClass="vgt-table condensed striped bordered" 
 :sort-options="sortOptions" 
 :search-options="searchOptions" 
 :select-options="selectOptions" 
 @on-selected-rows-change="selectionChanged"> 
</vue-good-table>


sortOptions: {
   enabled: true,
   initialSortBy: { field: "date", type: "desc" },
}

columns() {
  return [
    {
      label: "Name",
      field: "name",
    },
    {
      label: "CreationDate",
      field: "date",
      type: "date",
      formatFn: function (value) {
        return value != null ? moment(value).format('YYYY-MM-DD') : null;
      },
      sortFn(x, y) {
        x = moment(x);
        y = moment(y);
        return x.unix() < y.unix() ? -1 : x.unix() > y.unix() ? 1 : 0;
      },
    },
  ]
}

Sorting works fine so far, and there are three states: 'asc', 'desc' and 'none'.

However i would like to achieve the following:

When clicking the column header and the current sorting type is 'none' for any of the columns, i would like to have the data sorted as defined in the initialSortBy property in the sortOptions. So sorted by date in desc order.

I tried using the @on-sort-change event but don't really know how to proceed further as i am quite new to Vue.

onSortChange(params) {
      console.log('on-sort-change:');

      console.log(params[0].field)
      console.log(params[0].type)

      if (params[0].type == 'none') {
          console.log("default sort")
          //TODO sort data as defined in initial sort
      }
  }

vue-good-table custom sorting

0 Answers0