Sorting-Classes in Table-Header not applied correctly on initial load

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

When creating a DataTable with default sorting some of the css classes inside <datatable-header-cell> are wrong. See Reproduction of the problem for more information.

Expected behavior

On initial load the css classes should be set correctly.

Reproduction of the problem

Create a DataTable with default sorting.

@Component({
  selector: 'app-root',
  template: `
    <ngx-datatable
      [rows]="rows"
      [columns]="columns"
      [sorts]="sorts">
    </ngx-datatable>
  `,
})
export class AppComponent {

  rows = [
    { name: 'Austin', gender: 'Male', company: 'Swimlane' },
    { name: 'Dany', gender: 'Male', company: 'KFC' },
    { name: 'Molly', gender: 'Female', company: 'Burger King' },
  ];

  columns = [
    { prop: 'name' },
    { name: 'Gender' },
    { name: 'Company' }
  ];

  sorts = [
    {
      prop: 'name',
      dir: 'desc'
    },
  ];
}

The table is sorted descending according to the column name. This is correct.

But there is a problem with the header: Inside the <datatable-header-cell> there is a <span> which is used by css themes to display icons indicating the sort direction. The span has the classes sort-btn sort-desc undefined. Instead of undefined it should have the value of sortAscending or sortDescending according to the documentation.

If you click the header to sort the items manually the css classes are applied correctly.

This problem occurs in the official examples, too. See default sorting. The sorting is active for column name.

What is the motivation / use case for changing the behavior?

On initial load the sorting direction can’t be displayed correctly when using css to display sorting icons.

Please tell us about your environment: Angular 8/9, NPM, macOS

• Table version: 16.0.3

• Angular version: Angular 8/9

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] all

• Language: [all | TypeScript X.X | ES6/7 | ES5] all

[zankevich]

@amcdnl Can we merge this? Looks like a proper fix. https://github.com/swimlane/ngx-datatable/pull/1835

[sansantosh]

@preeco-privacy you might take a look on this pull request: https://github.com/swimlane/ngx-datatable/pull/1835/files