Show sort icon by default - ngx-datatable-column

Question

I am using

    <ngx-datatable-column [flexGrow]="4" [sortable]="true" name="Name" prop="empName" [cellClass]="'text-left'" [headerClass]="'text-left'" [width]="450">
                                        <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                                            <span class="empName">{{value}}</span>
                                        </ng-template>
                                    </ngx-datatable-column>


 ngOnInit() {
    this.init();
  }

  init() {
    this.fetchDetails();
  }

  fetchDetails() {
    document.getElementsByClassName("sort-btn")[0].classList.add("datatable-iconCustom");
  }

Here, the sorting icon is enabled when we click on header title. Is there a way to enable sorting icon by default at all times, not just on hover of title.

Answer 1

ngx-datatable create icon dynamically. Its inital part is

<span class="sort-btn"></span>

after you clicked return to

<span class="sort-btn sort-asc datatable-icon-up"></span>

so you can't show or hide with css changing. You need to add these two clases dynamically or you need to trigger to click.

Code below add classes to first header as down icon. sort-asc and datatable-icon-up are for asc sort you should use another class if your default sort is descending

document.getElementsByClassName("sort-btn")[0].classList.add("sort-asc");
document.getElementsByClassName("sort-btn")[0].classList.add("datatable-icon-up");

another way is trigger to click

document.getElementsByClassName("sort-btn")[0].click();

if you want to show both icon then u need custom class

in style.css put

.datatable-iconCustom:before {
    content: "\66 \65";
}

and add custom class rather than above two class

document.getElementsByClassName("sort-btn")[0].classList.add("datatable-iconCustom");

Answer 2

You can add default unset icon like below:

.ngx-datatable { // datatable Style
  .datatable-header { // header Style
    .datatable-header-cell { // header Cell Style
      .sort-btn.datatable-icon-sort-unset::before { // Icon Style
        content: '\e968'; // You favorite Icon
        font-family: 'fontFamily'; // Your Font Family
        font-style: normal; // Font Style
     }
    }
  }
 }