How to develop sortable column by click on header ( ngx-datatable)?

Question

How to develop sortable column by click on the header?

I am trying to do like in the documentation, but it does not work.

 <ngx-datatable
    #table
    ...
    [rows]='vendors'>

    <ngx-datatable-column name="VENDOR" [flexGrow]="1">
      <ng-template let-column="column" let-sort="sortFn" let-sortDir="sortDir">
        <span (click)="sort($event, sortDir, sortFn)">{{column.name}}</span>
      </ng-template>
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
        <div class="vendor-name">{{row.vendorName}}</div>
      </ng-template>
    </ngx-datatable-column>

Answer 1

Sorting does not work if you use ng-template for defining your column header. Default sorting only works if you created a basic column with only the ngx-datatable-cell-template attribute.

This works:

  <ngx-datatable-column name="Navn" prop="name" [flexGrow]="3">
    <ng-template let-value="value" ngx-datatable-cell-template>
      <span [attr.aria-label]="value">{{ value }}</span>
    </ng-template>
  </ngx-datatable-column>

this doesn't:

  <!-- Name -->
  <ngx-datatable-column name="Navn" prop="name" [flexGrow]="3">
    <ng-template let-column="column" ngx-datatable-header-template>
      <span aria-label="Name">{{ column.name }}</span>
    </ng-template>

    <ng-template let-value="value" ngx-datatable-cell-template>
      <span [attr.aria-label]="value">{{ value }}</span>
    </ng-template>
  </ngx-datatable-column>

Answer 2

First of all, ngx-datatable by default supports Sorting. Dont pass any parameter to sort function. It is not required. Do this:

<ngx-datatable-column name="VENDOR" [flexGrow]="1" [sortable]="true">