Vue-good-table: During upgrade from v2.6.2 sort headers stop switching from desc to asc (in the remote mode)

[nikolay-turpitko]

Issue Type (delete the irrelevant ones)

• [x] Bug

Specs

What version are you using?

I tried to upgrade from 2.6.2 to 2.7.0 and 2.8.1

What browser?

Chrome 66

Expected Behavior

What did you expect to happen?

In version 2.6.2 when I click several times on the sortable column header, sorting switches between asc/desc and back.

Actual Behavior

What actually happened?

In version 2.7.0 and above it switches from desc once and then keep returning desc for all consequent clicks. It happens in the remote mode, so, I guess, it resets ordering during update of the data. The same code with version 2.6.2 works as expected.

Steps to Reproduce the Problem

Please detail your steps here

1. Create table with sortable column
2. Click on the sortable column header
3. Click on the sortable column header
4. Click on the sortable column header

jsfiddle

If you provide a jsfiddle reproducing the issue, it'll be addressed much faster.
you can use this as base

[xaksis]

@nikolay-turpitko this was a bug introduced in 2.6.3 but was fixed in 2.6.4. Are you sure that you don't have that version cached somehow?

[nikolay-turpitko]

@xaksis yes, absolutely. I've never used 2.6.3, and switched from 2.6.2 to 2.7.0. Also I tried to upgrade to 2.8.1 and then downgraded back to 2.6.2 because of the error.

[xaksis]

are you using remote mode? or regular mode?

[nikolay-turpitko]

@xaksis Yes, as I said it both in the header and in the issue description, I use vue-good-table in the remote mode. It seems to me like order directions changes after rows are populated from the remote response. It seems like it briefly changed to the right value (arrow blinks) while request is in progress and then reset back after response.

[xaksis]

Sounds like the columns are being recreated when the results come back? Does the handler for your request, re-mount the table? Are you doing anything other than just updating the rows.

There are a few people using the remote mode including myself and its working fine, so I'm thinking this might be something specific to your implementation. Maybe put up some code to show how you're using it?

[nikolay-turpitko]

@xaksis

Does the handler for your request, re-mount the table?

I'm not sure (because of other frameworks involved), but probably no.
As far, as I can tell, I'm updating total rows number on the app.data, and then I'm updating rows array on the app.data, but via setter (lib I'm working with have some restrictions, so that events won't emit for complex type otherwise). As far, as I know, vuejs emits some events to update component. This magic worked OK in older versions, it still works, but somehow clears column ordering now.

There are a few people using the remote mode including myself and its working fine, so I'm thinking this might be something specific to your implementation. Maybe put up some code to show how you're using it?

Well, may be it's something specific to my case. Indeed, I have quite specific case, because I'm not working with JS directly, but experimenting with Go to JS compiler. Because of that I think code I can provide won't help much. Well, if you are pretty sure, that lib is working OK, then you may close this issue with "cannot reproduce". I'll use older version and will try to guess what's may be wrong in my case. BTW, does order of setting total before rows matter? I'll be glad to some other tips if you can share them. Thanks.

[xaksis]

so here's what I think is happening (my best guess since I don't know your exact implementation). The only reason column order is reset, is because columns are being recreated in the table. Internally, VGT has no watchers that recreate columns. So the only way the columns get reset is if externally one resets them on the component level like... columns = new data or makes a reactive edit like Vue.set(column[0], 'sort', null). Now if you're not doing this explicitly, the other way this can happen is if the component is re-mounted. if the component is remounted, all of the data is reset and VGT has no idea what the sort was before.

To answer your question, setting totalRow or setting rows alone doesn't matter as they don't re-generate the columns.

The thing that is interesting to me here is that if the mechanism of your env hasn't changed, how was this working before for you? I'll keep this open for a bit to see if someone else jumps in with an idea (and give us both some time to investigate deeper).

[xaksis]

ohh! something just came to me... are you setting an initialSort on your table?

[nikolay-turpitko]

@xaksis Yeah, that's it! I have declaration like below in my html:

    :sort-options="{enabled: true, initialSortBy: {field: 'UserEmail', type: 'asc'}}"

I removed it and it started to work (v2.8.1). Is there a way to have them both, though?

[xaksis]

ah ok! so we're getting somewhere. So basically what's happening is :sort-options is being set again once your results come back. But if it's hardcoded like that, then it shouldn't be set again when your call returns. so weird... almost feel like your component is in fact, being mounted again.

One thing you can do is have :sort-options="sortOptions" then set sortOptions = {enabled: true, , initialSortBy: {field: 'UserEmail', type: 'asc'}} in a place where you know will only be run once in the beginning. If that object never changes, on new calls, your columns would work fine.

[nikolay-turpitko]

@xaksis Yep, this trick worked. I moved sort options initialization into the app.data property, as you suggested and it works fine with v2.8.1. I vaguely suspect (not quite sure, I have not much experience with vue), that it's related to this: https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key. You see, actually I'm using 2 table (master-detail), which I'm switching with conditional block and use "key" because of some issues I had with events otherwise. So, probably because of that it behave as if it is re-mounted at every view update... I don't completely understand this magic, to be honest. Strange, that v2.6.2 works OK with exact same code, though. Anyway, thank you very much for the help. Feel free to close the issue if you no longer need it.

[xaksis]

@nikolay-turpitko ah! yeah, that makes sense. Using a unique key probably re-mounts the component each time. I'm glad we figured this out!!

going to close this now.

[K1ngMX]

Hello :)

Sorry for writing in a closed issue.

It is just that i seem to have encountered the exact same problem (i have two tabled in remote mode, user can switch between them, they get shown / hidden via v-show ...).
Now the solution here did work for me (i had the sort options hard coded in the props itself. after moving them to data() it works). I also had the mysterious "it does always make two calls on user sorting, one call always with the initial sort options".

So, while i do not fully understand why it does work as soon as the initialSortBy is not directly in the props anymore (which is what i initially did, following https://xaksis.github.io/vue-good-table/guide/configuration/sort-options.html#enabled), i would like to suggest to add a small hint in the documentation mentioning that this might cause a problem.

Again thanks for your work xaksis. We have vue-good-table in a lot of views in our project and are pretty happy with it :)

[xaksis]

@K1ngMX thank you for your kind words and I'm glad you're finding VGT useful! I'll update the document with the relevant hint in the next update.