Clicking on a sortable table column header not working (not sort) when 'sortable' value is dynamic

[alfianwahid]

Describe the bug

Clicking on a sortable table column header not working (not sort) when 'sortable' value is dynamic.
Like example below when default fields no sortable or sortable is false, then switch enableSortAble to true, column header is changed (there are arrow sort icon) but clicking the header column is not sorting the column.

Steps to reproduce the bug

<template>
  <div>
    <b-form-checkbox switch v-model="enableSortAble">
      <span :class="enableSortAble ? 'font-weight-bold text-primary' : 'text-secondary'">Sortable</span>
    </b-form-checkbox>

    <b-table :items="items" :fields="fields" responsive="sm"></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      enableSortAble: false,
      fields: [
        { key: "last_name" },
        { key: "first_name" },
        { key: "age" },
        { key: "isActive" }
      ],
      items: [
        {
          isActive: true,
          age: 40,
          first_name: "Dickerson",
          last_name: "Macdonald"
        },
        { isActive: false, age: 21, first_name: "Larsen", last_name: "Shaw" },
        { isActive: false, age: 89, first_name: "Geneva", last_name: "Wilson" },
        { isActive: true, age: 38, first_name: "Jami", last_name: "Carney" }
      ]
    };
  },
  watch: {
    enableSortAble(newVal) {
      this.fields = this.fields.map(el => {
        return { ...el, sortable: newVal };
      });
    }
  }
};
</script>

Expected behavior

When click switch button to enable sortable, then clicking on a sortable column header will sort the column.

Versions

Libraries:

• BootstrapVue: 2.15.0
• Bootstrap: 4.5.0
• Vue: 2.6.11

Environment:

• OS: Windows 10
• Browser: Chrome 83.0

Demo link

https://codesandbox.io/s/bvtable-sortable-g6lyz-g6lyz?file=/App.vue

[Hiws]

Looks like if there's is no sortable field when the table is mounted, it wont be sortable, even if changed dynamically as you're doing.
However, if a single field is sortable when the table is mounted, the dynamic changing works fine.

A workaround could be to add :key="enableSortAble" to b-table, which forces it to re-render when the property changes.

[alfianwahid]

Looks like if there's is no sortable field when the table is mounted, it wont be sortable, even if changed dynamically as you're doing.
However, if a single field is sortable when the table is mounted, the dynamic changing works fine.

A workaround could be to add :key="enableSortAble" to b-table, which forces it to re-render when the property changes.

Thanks for your answer.
This problem is solved by adding key to b-table.

[boukeversteegh]

I noticed a similar issue in my own scenario, where the fields are loaded asynchronously, and therefor the 'sortable' property was only true after loading. I could not reproduce it in the playground, but what happened is that some events are rebound after 'sortable' changes, causing each header click to trigger 2 (or more) 'sorting' events.

The two events cancel each-other out, first sorting descending, then again ascending, so in the end the column stays as it was.

The two mentioned workarounds worked:

• adding one column that is always sortable. not a good solution for me, since I don't have any extra sortable columns
• adding a :key= property to the b-table that forces a re-render. I'm using the library async-computed for my columns, so I solved it like this <b-table :key="$asyncComputed.columns.updating" .../>. During each load of the columns, the table is rerendered completely.