Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
alfianwahid opened this issue Jun 23, 2020 · 3 comments · Fixed by #5753

Comments

@alfianwahid
Copy link

alfianwahid commented Jun 23, 2020

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
Copy link
Member

Hiws commented Jun 23, 2020

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
Copy link
Author

alfianwahid commented Jun 23, 2020

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.

@jacobmllr95 jacobmllr95 added this to To do in v2.17.0 via automation Aug 24, 2020
@jacobmllr95 jacobmllr95 moved this from To do to In progress in v2.17.0 Sep 9, 2020
v2.17.0 automation moved this from In progress to Done Sep 10, 2020
jacobmllr95 added a commit that referenced this issue Sep 10, 2020
…5520) (#5753)

* fix(b-table): reactivity issues for dynamically added listeners

* Revert "fix(b-table): reactivity issues for dynamically added listeners"

This reverts commit 70fe168.

* Update cache.js

* Update cache.js
@boukeversteegh
Copy link
Contributor

boukeversteegh commented Jul 15, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
v2.17.0
  
Done
3 participants