CODEWITHSUNDEEP
angularsortingicons
Nancy
Nancy

Reputation: 1021

Show sort icon by default - ngx-datatable-column

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.

Upvotes: 4

Views: 5496

Answers (2)

Manjeet Singh
Manjeet Singh

Reputation: 31

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
     }
    }
  }
 }

Upvotes: 0

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

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");

Upvotes: 5

Related Questions