initialSortBy can not click on. default to reverse. the order

[pm-designs]

Issue Type (delete the irrelevant ones)

• Bug

What browser?
Chrome. Latest

Expected Behavior

The Table have an inital order (initalSortBy). When i click on the default label the order switch to reverse order.

Actual Behavior

I can not click on thedefault label. I have to click on another label and then back to the first label to that i can change the order

`

<vue-good-table
  :columns="columns"
  :rows="rows"
  :search-options="{
    enabled: true,
    externalQuery: searchExp,
  }"
  :pagination-options="pagination"
  :sort-options="{
    enabled: true,
    initialSortBy: {field: 'location'},
  }"
  @on-sort-change="onSortChange"
>
  <template slot="table-actions">
    <div class="vgt__header">
      <h3 class="vgt__headline">{{ headline }}</h3>
      <span class="vgt__subline">{{ subline }}</span>
        <button
          class="l-link l-link--with-icon l-link--with-icon-right l-link--hover-underline u-margin--top-1bu"
          @click="goToPage(eventIdToBack, '')"
        >
          {{ linkTextToBack }}
          <cy-icon class="u-rotate--minus90deg" icon-name="arrow"></cy-icon>
        </button>

    </div>

    <div class="vgt-filter l-flex-column l-flex-positioning--space-between">
      <div class="c-floating-label c-input-wrap c-input-wrap--form-elem c-input-wrap--flex-button is-floating">
        <label for="table-search" class="c-floating-label__label">
          <span>{{ searchLabel }}</span>
        </label>
        <input class="c-input c-floating-label__input" v-model="searchExp" :placeholder="searchPlaceholder" id="table-search" type="text" >
        <button v-if="resetManager" class="c-button c-button--icon-only c-button--ghost" @click="clearFilter()">
          <cy-icon class="c-button__icon" icon-name="cancel" size="21" />
        </button>
      </div>

      <button
        class="l-link l-link--with-icon l-link--with-icon-right l-link--hover-underline u-margin--top-1bu"
        @click="goToPage(eventIdToRelatedPage, '')"
      >
        {{ linkTextToRelatedPage }}
        <cy-icon class="u-rotate--minus90deg" icon-name="arrow"></cy-icon>
      </button>
    </div>

    <div class="u-display--none">
      <input id="detailForm-orderId" ref="detailFormOrderId" name="orderId" type="hidden" v-model="this.orderId"/>
      <input id="detailForm-_eventId" ref="detailFormEventId" name="_eventId" type="hidden" v-model="this.eventId" />
    </div>
  </template>

  <template slot="table-column" slot-scope="props">
    {{ props.column.label }}
    <cy-icon icon-name="arrow" class="vgt__column-icon c-icon--size-21px" />
  </template>

  <template slot="table-row" slot-scope="props">
    <template v-if="props.column.field === 'orderId'">
      <button
        type="button"
        class="vgt__button-link"
        @click="goToPage('detail', props.row.id)"
      >
        {{ props.row.orderId }}
      </button>
    </template>
  </template>

  <template slot="emptystate">
    <p>{{ noResults }}</p>
  </template>
</vue-good-table>

import { VueGoodTable } from 'vue-good-table';

export default {
components: {
VueGoodTable,
},
props: {
headline: {
type: String,
default: '',
},
subline: {
type: String,
default: '',
},
action: {
type: String,
default: '',
},
linkTextToBack: {
type: String,
default: '',
},
eventIdToBack: {
type: String,
default: '',
},
linkTextToRelatedPage: {
type: String,
default: '',
},
eventIdToRelatedPage: {
type: String,
default: '',
},
searchLabel: {
type: String,
default: '',
},
searchPlaceholder: {
type: String,
default: '',
},
noResults: {
type: String,
default: '',
},
rows: {
type: Array,
default: () => ([]),
},
tableHeaderLabels: {
type: Array,
default: () => ([]),
},
},
data() {
return {
searchExp: '',
orderId: '',
eventId: '',
dateRangeStart: '',
dateRangeEnd: '',
search: {
enabled: true,
placeholder: 'Tabelle durchsuchen...',
},
pagination: {
enabled: true,
perPage: 5,
perPageDropdown: [5, 10, 25, 50],
dropdownAllowAll: false,
rowsPerPageLabel: 'Anzahl der Einträge:',
ofLabel: 'von',
pageLabel: 'Seite',
allLabel: 'Alle',
},
columns: [
{
label: this.tableHeaderLabels[0],
field: 'location',
type: 'string',
},
{
label: this.tableHeaderLabels[1],
field: 'dateOfDeliveryStart',
type: 'date',
dateInputFormat: 'yyyy-mm-dd',
dateOutputFormat: 'dd.mm.yyyy',
},
{
label: this.tableHeaderLabels[2],
field: 'dateOfDeliveryEnd',
type: 'date',
dateInputFormat: 'yyyy-mm-dd',
dateOutputFormat: 'dd.mm.yyyy',
},
{
label: this.tableHeaderLabels[3],
field: 'product',
type: 'string',
},
{
label: this.tableHeaderLabels[4],
field: 'phone',
type: 'string',
},
{
label: this.tableHeaderLabels[5],
field: 'orderId',
type: 'number',
href: '#',
},
],
};
},
computed: {
resetManager() {
return this.searchExp;
},
},
methods: {
// BE: post actions are required for these links
goToPage(event, order) {
this.eventId = event;
this.orderId = order;
this.$nextTick(() => {
document.getElementById('order-history').submit();
});
},
onSortChange() {
console.log('sort 123');
},
clearFilter(filter) {
// if param not exists or param includes key
if (!filter || filter.includes('search')) {
this.searchExp = '';
}
},
},
};

`

[pm-designs]

The Solution:
-> initialSortBy need type value
-> initialSortBy: {field: 'location', type: 'asc'}, (or type: desc)

Maybe this should pointed out in the docs! I could not read this. on this. page:
https://xaksis.github.io/vue-good-table/guide/configuration/sort-options.html#enabled

[xaksis]

hey @pm-designs initially I was a bit confused because the doc clearly mentions the syntax you need to use. But I've added a line to indicate that both properties are required to make it clear.