Delayed sorting question with angular wrapper

Tags: #<Tag:0x00007f8b2b1d31a8>
#1

I copied the angular wrapper fiddle and added initial column sorting to the second column, as well as a delay before the columns are populated: https://jsfiddle.net/bfelda/u26nt48b/

Note the column doesn’t sort as expected, however the header does have the arrow, and clicking the header does sort the columns correctly. I am guessing I am to rebind after the data is set but not really finding any resources for this.

#2

You may do it by hooking onAfterInit event

public onAfterInit = (htInstance) => {
  htInstance.loadData(dataSet);
  htInstance.render();
}

in template set as

 <hot-table
        class="hot"
        [data]="dataset"
        [settings]="settings" [afterInit]="onAfterInit" ...
#3

Thanks for the reply. It doesn’t look like afterInit get’s triggered when the dataset is changed, just after the table is rendered.

I added this to the fiddle https://jsfiddle.net/bfelda/u26nt48b/38/ and the dataset isn’t defined so the function passed to afterInit, so it must be run in the context of the hotTable component, not the parent. Removing the loadData and just running render() didn’t resolve my issue.

#4

I ended up having to create a method after the data is loaded to grab the columnSorting plugin and calling sort on it.

let sortPlugin:Handsontable.plugins.ColumnSorting = hot1.getPlugin('columnSorting');
sortPlugin.sort({ 'column': 0, 'sortOrder': 'asc'});

Found in this example by @aleksandra_budnik

#5

Sorry for not taking part n this conversation. We had a national holiday yesterday.
I am happy that you’ve found the solution. Let me know if there’s anything I can do

#6