Column sorting persists after loadData() and render() called when column sorting has been set to undefined

Tags: #<Tag:0x00007efc6a32bca8>

Hi,

We are looking at moving to the Pro version but am yet to commit.

I have a problem with column sorting. Calling loadData() and render() after sortOrder is set to ‘undefined’ results in the refreshed table having a sort order applied, which is not the last state that the table was in. The last state the table was in was ‘nothing sorted’.

Please look at the following fiddle for my example:
https://jsfiddle.net/stuartrichardson/9c5dhdfs/

So to reproduce the problem:

  1. Go to https://jsfiddle.net/stuartrichardson/9c5dhdfs/
  2. Click on the ‘currency’ title 3 times to sort, then reverse sort and return sort to undefined.
  3. Press Render button
    Note that the previous currency sort appears again, this is not the desired or expected behaviour.

There are 3 sortOrder states: (true, false and undefined)
In the function setSortingColumn(), if the order is of type undefined then it will always set the order to true.
setSortingColumn needs extra information to know where it is being called from, ie whether the settings are coming from settings or due to the user attempting to change the sorting.

In sortBySettings() call sortByColumn() with a true parameter for sort by settings
In setSortingColumn() using the fact that the parameter sortBySettings is true the desired result can be achieved.

 key: 'sortByColumn',
    value: function sortByColumn(col, order, sortBySettings) {
      this.setSortingColumn(col, order, sortBySettings);

      if (typeof this.hot.sortColumn == 'undefined') {
        return;
      }

      var allowSorting = this.hot.runHooks('beforeColumnSort', this.hot.sortColumn, this.hot.sortOrder);

      if (allowSorting !== false) {
        this.sort();
      }
      this.updateOrderClass();
      this.updateSortIndicator();

      this.hot.runHooks('afterColumnSort', this.hot.sortColumn, this.hot.sortOrder);

      this.hot.render();
      this.saveSortingState();
    }

key: 'sortBySettings',
value: function sortBySettings() {
  var sortingSettings = this.hot.getSettings().columnSorting;
  var loadedSortingState = this.loadSortingState();
  var sortingColumn = void 0;
  var sortingOrder = void 0;

  if (typeof loadedSortingState === 'undefined') {
sortingColumn = sortingSettings.column;
sortingOrder = sortingSettings.sortOrder;
  } else {
sortingColumn = loadedSortingState.sortColumn;
sortingOrder = loadedSortingState.sortOrder;
  }
  if (typeof sortingColumn === 'number') {
this.lastSortedColumn = sortingColumn;
this.sortByColumn(sortingColumn, sortingOrder, true);
  }

key: 'setSortingColumn',
value: function setSortingColumn(col, order, sortBySettings) {
  if (typeof col == 'undefined') {
this.hot.sortColumn = void 0;
this.hot.sortOrder = void 0;

return;
  } else if (sortBySettings) {
this.hot.sortOrder = order;
  } 
  else if (this.hot.sortColumn === col && typeof order == 'undefined') {
if (this.hot.sortOrder === false) {
  this.hot.sortOrder = void 0;
} else {
  this.hot.sortOrder = !this.hot.sortOrder;
}
  } else {
this.hot.sortOrder = typeof order === 'undefined' ? true : order;
  }

  this.hot.sortColumn = col;
}

Hi @srichardson

thank you for sharing a full bug description.
The following bug is related to this topic https://github.com/handsontable/handsontable/issues/3954 on our Github board.
This issue has been reviewed some time ago but I do not see any updates on the topic. I will try to schedule another review for the next week.

Hi @srichardson

we have refactored the columnSorting plugin and the issue is gone. Here is how it should be done from version 6.0.0 http://jsfiddle.net/handsoncode/wy1dhpz6/