Sort icons are not displayed, reorder making weird side effects

[iron2414]

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

I am using Angular 9, hence using ngx-datatable 17.1.0. When I am applying sort, with SortType.Multi, and reorderable and selectable, then there are no sort icons at all. I can sort by clicking on the header properly. And when i try to reorder a column sometimes it gets sorted, or weird text selection happens.

Expected behavior

I expect there to be sort icons, like on the example here https://swimlane.github.io/ngx-datatable/#client-sorting. I expect reorder to do not modify my sort and do not select the header text.

Reproduction of the problem

Angular 9 with ngx-datatable 17.1.0.

ts:

  public rows: any[];
  public selected: any[] = [];
  public sortType: SortType = SortType.multi;
  public selectionType: SelectionType = SelectionType.checkbox;
  public columnMode: ColumnMode = ColumnMode.force;

 public ngOnInit(): void {
    this.rows = [
      { name: 'Austin', gender: 'Male', company: 'Swimlane' },
      { name: 'Dany', gender: 'Male', company: 'KFC' },
      { name: 'Molly', gender: 'Female', company: 'Burger King' }
    ];
  }

HTML:

<ngx-datatable
  class="material"
  [rows]="rows"
  [headerHeight]="50"
  [footerHeight]="50"
  [count] = 20
  [scrollbarH]="true"
  rowHeight="auto"
  [columnMode]="columnMode"
  [limit]="5"
  [selected]="selected"
  [selectionType]="selectionType"
  [sortType]="sortType"
  [selectAllRowsOnPage]="true"
>

  <ngx-datatable-column
    [width]="30"
    [sortable]="false"
    [canAutoResize]="false"
    [draggable]="false"
    [resizeable]="false"
    [headerCheckboxable]="true"
    [checkboxable]="true"
  >
  </ngx-datatable-column>
  <ngx-datatable-column name="Name"></ngx-datatable-column>
  <ngx-datatable-column name="Gender"></ngx-datatable-column>
  <ngx-datatable-column name="Company"></ngx-datatable-column>
</ngx-datatable>

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

I am trying to create a proper sortable/selectable/filterable data table for my application.

Please tell us about your environment: Windows 10, Webstorm, npm 6.14.5 serving with ng serve

• Table version: Haven't found an issue like this.

• Angular version: Angular 9

• Browser: Chrome, any version

• Language: TypeScript

[iron2414]

The sorting icons are solved. I had to import all the css from themeing.

[LucasDshg]

Just import the css like this.

@import "~@swimlane/ngx-datatable/index.css";
@import "~@swimlane/ngx-datatable/themes/material.scss";
@import "~@swimlane/ngx-datatable/assets/icons.css";

If it solved close de PR.

[ScottSpittle]

https://github.com/swimlane/ngx-datatable/issues/1999#issuecomment-869116484