Ngx-datatable: Can't reorder columns with custom column header template

[JackArlington]

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

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

Current behavior

When a custom column header template is set, the rows can't be reordered anymore.

Expected behavior

When reorder is activated, it should be possible to reorder all columns.

Reproduction of the problem
The behavior can be seen in the example: https://swimlane.github.io/ngx-datatable/#inline. Only age can be moved.

What is the motivation / use case for changing the behavior?
Better options for customization

Please tell us about your environment:

• Table version: 10.0.5
  

• Angular version: 4.3.4
  

• Browser: Firefox 55.0.2
  

• Language:

[JackArlington]

I have found the solution. Is already working as it should but ngx-datatable-header-template and datatable-header-cell-wrapper is needed.

    <ng-template #searchTpl let-column="column" let-sort="sortFn" ngx-datatable-header-template>
        <span class="datatable-header-cell-wrapper">
          <span class="datatable-header-cell-label draggable" (click)="sort()">{{column.name}}</span>
        </span>
    </ng-template>

[Matmo10]

What is the solution exactly? I have a bunch of columns that look like this:

<ngx-datatable-column prop="description">
    <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
      <span (click)="sort()">{{ 'description' | translate }}</span>
    </ng-template>
</ngx-datatable-column>

But they won't re-order anymore.

[Matmo10]

Ah ok, I see now. For any one looking at my example, you basically just have to add the classes mentioned by @JackArlington - so my example ends up looking like this:

  <ngx-datatable-column prop="description">
    <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
      <span class="datatable-header-cell-wrapper">
        <span class="datatable-header-cell-label draggable" (click)="sort()">{{ 'description' | translate }}</span>
      </span>
    </ng-template>
  </ngx-datatable-column>

[roberthelmick08]

The documentation really should be updated to make this more clear