I'm using ngx-datatable with Angular 5.0 and am implementing sorting with externalSorting set to true as I am doing server side pagination and sorting in the backend. I have a button that on click, resets the data in the table to the data that is displayed on load, so that when a bunch of sorting is done, the user can reset to the original view. It works as intended, however I don't know how to clear out the sorting icons in the column header. Is there a way to do this?

I'm using ngx-datatable with Angular 5.0 and am implementing sorting with externalSorting set to true as I am doing server side pagination and sorting in the backend. I have a button that on click, resets the data in the table to the data that is displayed on load, so that when a bunch of sorting is done, the user can reset to the original view. It works as intended, however I don't know how to clear out the sorting icons in the column header. Is there a way to do this?

• javascript
• html
• css
• angular
• ngx-datatable

1 Answer 1

The solution ended up being creating a reference to the ngx-datatable element, and setting the sorts array to a blank array.

Example HTML:

<ngx-datatable #table
   class="material"
   [columns]="cols"
   [rows]="rows"
>

And TypeScript:

@ViewChild(DatatableComponent) table: DatatableComponent;

reset() {
    this.table.sorts = [];
}