SortIndicator appears with unsorted rows

Tags: #<Tag:0x00007efc83a6f348>
#1

Hi,

We use Vue wrapper version of HandsOnTable. Same HandsOnTable set-up is used to render multiple pages of data. Sorting Indicator appears as expected when I sort in one page. But when I click on another page, Sort Indicator selected from page one is still displayed with no sorted data. How do I reset sorting indicator programmatically between data loads?

Thanks!

#2

Hi @christopher.hopkins

Can you guide me on how to replicate the issue.The tables need to be on a separate page (html document)?

#3

Hi @aleksandra_budnik,

Please use this jsfiddle to replicate the issue - http://jsfiddle.net/dcepzv06/1/

Way to replicate

  1. Sort Column B to descending order
  2. Observe SortIndicator getting displayed in a proper way
  3. Click ‘Load Data’ button
  4. Data gets loaded but descending SortIndicator still appears on the screen (which is incorrect).

I am looking for a way to remove SortIndicator when new data is loaded.

Thanks!

#4

Thank you for sharing the details. The issue has been reported at https://github.com/handsontable/handsontable/issues/5035. Please track changes to that issue for changes.

#5

@aleksandra_budnik Is there any workaround to solve this issue in the mean time? May be try removing ascending or descending css class when rows are not sorted?

#6

A bit hacky but it works http://jsfiddle.net/vx62dwue/

#7

Sorting Indicator still stays after Load Data. Does this fix work on your end?

#8

Yes, it does. You may try to change the ms value from 150 to something bigger. I’ve tried 50 but it was to quick for the browser. The slower the browser is (or gets by calculations) the higher ms delay you need to use.

#9

Sorry, it does not work on my end. Let’s not worry about timeout. If I just want to hide Sort Indicator during “Load data” function, will the below code turn off Column Sorting and hide Sort Indicator? I tried commenting timeout code in jsfiddle to observe the behavior. Sort Indicator still stays.

hot.updateSettings({
   columnSorting: false
});
#10

Does it stay if you rerenderer the table (hot.render())?
Are you using any framework or page builders?

#11

I am trying to fix the issue in jsfiddle with below steps:

http://jsfiddle.net/yt58fpzw/1/

  • Sort column B descending
  • Click load data button
  • Observe Sort Indicator on the screen even though Column Sorting is turned off through Load data function
#12

Now it doesn’t work for me either. I have an issue for this subject https://github.com/handsontable/handsontable/issues/3582
Shame that I haven’t record it before when it was working. Now I do not know how to replicate it.

#13

I see! I was trying to see whether we could remove all css classes ‘ascending’ and ‘descending’ (SortIndicator CSS) from DOM when Column Sorting is turned off. Not sure whether anyone has tried it before, would this work?

#14

That is an interesting idea, but we haven’t tried it so it’s hard to say if it would work

#15

Hi @christopher.hopkins

the issue that I have mentioned at https://github.com/handsontable/handsontable/issues/5035 and we discussed here has been solved. Please update to 6.0.0+

#16