ngx-datatable: Sorting with custom template - click handler doesn't seem to work

True…but if you do this, it will work: https://github.com/swimlane/ngx-datatable/issues/681#issuecomment-297386597

In your case

<ngx-datatable-column  name="ID" [resizeable]="false" [sortable]="true" [flexGrow]="1">
        <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
 <span (click)="sort()">
        {{column.name}}
</span>
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
           <strong>{{value}}</strong>
        </ng-template>
    </ngx-datatable-column>

Use this

<ng-template let-column="column" let-sort="sortFn" let-sortDir="sortDir" ngx-datatable-header-template>
<span class="mobile-hidden" (click)="sort($event, sortDir, sortFn)">{{column.name}}</span>
</ng-template>

this works now. even if you do not provide the implementation for the sort function.

I also did server side sorting. You need to set the function on the ngx-datatable like (sort)=“onSort($event)” To extend the above example from my code it looks like this:

<ngx-datatable
    class="material"
    [messages]="customMessages"
    [rows]="objectsToDisplay"
    [columnMode]="'fixed'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="50"
    [externalPaging]="true"
    [count]="page.totalElements"
    [offset]="page.pageNumber"
    [limit]="page.size"
    (page)='setPage($event)'
    [selectionType]="'checkbox'"
    (select)="onSelect($event)"
    [selected]="selected"
    [loadingIndicator]="isLoading"
    (activate)="onActivate($event)"
    [scrollbarH]="true"
    [externalSorting]="true"
    (sort)="onSort($event)"
    [sorts]="[defaultSort]"
    #myTable
  >
    <ngx-datatable-column
      [width]="30"
      [sortable]="false"
      [canAutoResize]="false"
      [draggable]="false"
      [resizeable]="false"
      [headerCheckboxable]="true"
      [checkboxable]="true">
    </ngx-datatable-column>
    <ngx-datatable-column prop="transactionNumber">
      <ng-template ngx-datatable-header-template>
        Transaction_Number_Header
      </ng-template>
    </ngx-datatable-column>
<ngx-datatable-column prop="orderStatus" [sortable]="true">
      <ng-template ngx-datatable-header-template let-sort="sortFn">
        <span (click)="sort()">
         Order Status Header
        </span>
      </ng-template>
    </ngx-datatable-column>
<ngx-datatable-footer>
      <ng-template
        ngx-datatable-footer-template
        let-rowCount="rowCount"
        let-pageSize="pageSize"
        let-selectedCount="selectedCount"
        let-curPage="curPage"
        let-offset="offset"
      >
        <div style="padding: 5px 10px">
          <div>
            'Total Results': {{rowCount}} |
            'Page Size':
            <select [ngModel]="page.size" (ngModelChange)="onPageSizeChange($event)" class="page-size-combo">
              <option *ngFor="let size of sizeList" [value]="size"> {{size}}</option>
            </select>
            <span [hidden]="selectedCount<=0"> | Selected: {{selectedCount}}</span>
          </div>
        </div>
        <datatable-pager
          [pagerLeftArrowIcon]="'datatable-icon-left'"
          [pagerRightArrowIcon]="'datatable-icon-right'"
          [pagerPreviousIcon]="'datatable-icon-prev'"
          [pagerNextIcon]="'datatable-icon-skip'"
          [page]="curPage"
          [size]="pageSize"
          [count]="rowCount"
          [hidden]="!((rowCount / pageSize) > 1)"
          (change)="myTable.onFooterPage($event)">
        </datatable-pager>
      </ng-template>
    </ngx-datatable-footer>
  </ngx-datatable>

This icludes server side sorting, server side pagination, selection boxes, custom header and column templates with custom footer that allows the user to change the page size.

Hope that it helps you.

I am also not able to see direction indicator with custom header.

Yeah, I noticed let-sortDir is undefined now as well…this is not good 😦

@kedar700 Thank you your suggestion works for my scenario. Looking through the docs I didn’t see any examples of how to setup sorting when using custom templates like this. Or did I miss it?

But how do you define the sortFn in ts code? This way, the built-in sorting function runs. I need to call a custom function to call server-side sorting.

Shortly after posting my comment above I was able to find a workaround using let-sortDir="sortDir":

<ng-template let-column="column" let-sort="sortFn" let-sortDir="sortDir" ngx-datatable-header-template> 
  <span class="column-header" (click)="sort()">{{col.header}} - {{ sortDir }}</span>
  <wf-table-filter (onFilter)="filterColumn($event, column)"></wf-table-filter>
</ng-template>

Produces:

If I wanted icons specifically I could do something like this:

<ng-template let-column="column" let-sort="sortFn" let-sortDir="sortDir" ngx-datatable-header-template> 
  <span class="column-header" (click)="sort()">{{col.header}}</span>
  <span class="sort-btn"
    [class.sort-asc]="sortDir === 'asc'"
    [class.datatable-icon-up]="sortDir === 'asc'" 
    [class.sort-desc]="sortDir === 'desc'"
    [class.datatable-icon-down]="sortDir === 'desc'"  
  ></span>
  <wf-table-filter (onFilter)="filterColumn($event, column)"></wf-table-filter>
</ng-template>