Ngx-datatable: Placement of sort icon in header row

[johnny-the-coder]

I'm submitting a ... (check one with "x")

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

Current behavior
Sort icon is always added at the end of header column.

Expected behavior
When is use header template i would like to place sort icon anywhere.
Example:

<ng-template #headerColumn let-column="column" let-sort="sortFn">
  <sort-icon> <!-- i would like to have possibility to put sort icon at the beginning or anywhere else -->
  <span (click)="sort()">{{label(column.name)}}</span>
</ng-template>

Please tell us about your environment:
Windows

• Table version:
  13.0.1

• Angular version:
  6.1.1

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

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

[leunardo]

@jmalkiewicz I think I have found a way. I saw that along with sortFn, the sortDir is also exported. With this I was able to create a new button to sort into the header, like this:

<button type="button" (click)="sort">
      <i class="material-icons" [innerText]="sortDir ? (sortDir === 'asc' ? 'expand_less' : 'expand_more') : 'unfold_more'"></i>
</button>

And to not have two sort buttons, I have hidden the default one with this css:

.sort-btn { display: none; }

Hope this helps.

[johnny-the-coder]

@leunardo
Muchas gracias, your solution works!

[argelj289]

is there other way to put it away those sort buttons completely instead of doing a work around through css?

[designermanjeets]

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