ngx-datatable: Column not sortable when using headerTemplate?

1
votes

Angular 8 and ngx-datatable 16.0.2:

I've started using ngx-datatable and am faced with some challenges getting sort to work when I use a headerTemplate. My column definition is like this:

this.columns = [
  {
    prop: 'name',
    name: 'Navn',
    headerTemplate: this.headerTpl,
    flexGrow: 3
  },
  ...
];

My headerTemplate is declared like this:

@ViewChild('headerTpl', null) headerTpl: TemplateRef<any>;

and in my HTML:

  <ng-template #headerTpl let-column="column">
    <div class="column-headlines">{{ column.name }}</div>
  </ng-template>

The issue is that the css from the class column-headlines is applied but the column is not sortable. When I remove headerTemplate: this.headerTpl from my column definition sort works just fine (but styling is of course wrong). What am I missing here?

Here's a StackBlitz where I would have expected my column header to have been styled AND sortable.

It all seems to be tied to the use of the template. As soon as that's in play, everything else goes haywire...

2
angularngx-datatable
Can u provide minimal stackblitz? – Plochie
Added StackBlitz to OP – CJe

2 Answers

3
votes

There is a closed issue in ngx-datatable's github project: https://github.com/swimlane/ngx-datatable/issues/1807

It says you have to add a let-sort="sortFn" to the ng-template and insert a (click)="sort()" to its content. If you also want the mouse cursor to change you can insert class="datatable-header-cell-wrapper" to the content.

<!-- header templates-->
<ng-template #hdrTmpl let-sort="sortFn">
    <span class="datatable-header-cell-wrapper" (click)="sort()">
        header content goes here
    </span>
</ng-template>
1
votes

It's because the this.headerTpl is not set yet at constructor time. This will be available at the ngAfterViewInit hook, (or ngOnInit if you use {static: true}):

ngAfterViewInit() {
  this.columns = [{
    prop: 'name',
    name: 'Navn',
    headerTemplate: this.headerTpl
  }]
}

stack