Sorting doesn't work if with a custom template header

[PEsteves8]

If a custom template is used in a header, the columns stop being sortable. If you click the header nothing happens.

That can actually be verified in the demo itself:
http://swimlane.github.io/ngx-datatable/#
If you go to templates - inline. The first column (which is the one with a custom header) is the only one that is not sortable.

EDIT: notice there was actually an old open issue with this. Maybe it has been forgotten #233

[aegyed91]

@amcdnl any suggestions how to get sorting work with custom templates?

related: #332

I see there is no click handler for header template: https://github.com/swimlane/ngx-datatable/blob/master/src/components/header/header-cell.component.ts#L21-L34

I also see the onSort method doesnt need any arguments: https://github.com/swimlane/ngx-datatable/blob/master/src/components/header/header-cell.component.ts#L123-L132 so all i need is to somehow invote it from the datatable instance, but i cannot find it :D

edit: this worked, if anybody else looking for a solution

header-cell.component.ts template:

<template
  *ngIf="column.headerTemplate"
  [ngTemplateOutlet]="column.headerTemplate"
  [ngOutletContext]="{ 
    column: column, 
    sortDir: sortDir,
    dosort: sortHak
  }">
</template>

and in the class definition sortHak = this.onSort.bind(this);

[amcdnl]

I was trying that same approach but it wasn't working the other day. Didn't dig in too much yet though.

[amcdnl]

@tsm91 - if that works for u, then do a PR maybe i missed something

[aegyed91]

@amcdnl after the project i working on is done (very soon) ill go through my notes regarding the datatable and patch it up where needed

[amcdnl]

This is resolved in latest

[burjua]

How is this closed? Sorting still doesn't work!

[winghei]

I was able to make it work by adding ng-click="handleClick($event)" in the headerCellTemplate

[Ryan-Haines]

For anyone else confused as to how to use a custom comparator in a template, you can pass the row data to the comparator by putting prop="" in the template, like this:

<ngx-datatable-column name="Reviewed" prop="" [comparator]="sortReviewedComparator">

<span {{(row.numReviewed/row.numEntries)*100||0}}% Reviewed">{{row.numReviewed}}/{{row.numEntries}}

[dougss10]

Somebody can provide a sample of sortable table using ngx-datatable-column i already tried a lot and didn't find any way to do this work.

[souzaemmanuel]

Sorting still doesn't working in client side !

[EzePerucca]

Still can´t find a way to get this working