[Fixed] client side sorting in ngx-datatable angular

Issue

client side sorting works if we specify columns as shown below.

View page

<ngx-datatable class="material" [rows]="rows" [columns]="columns"> </ngx-datatable>

ts page

columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];

but if we remove the column definiton from ts page and then specify them in view page as

<ngx-datatable class="material" [rows]="rows">
    <ngx-datatable-column>
      <ng-template ngx-datatable-header-template>
        <span>name</span>
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{row.name }}
      </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column>
    <ng-template ngx-datatable-header-template>
      <span>Gender</span>
    </ng-template>
    <ng-template let-row="row" ngx-datatable-cell-template>
      {{row.Gender}}
    </ng-template>
</ngx-datatable-column>
<ngx-datatable-column>
  <ng-template ngx-datatable-header-template>
    <span>Company</span>
  </ng-template>
  <ng-template let-row="row" ngx-datatable-cell-template>
    {{row.Company}}
  </ng-template>
</ngx-datatable-column>
  </ngx-datatable>

sorting fails.
any idea why this happens.. thanks in advance.

Solution

Seems an issue with your HTML template. This is work for me without columns definition.

<ngx-datatable [rows]="rows">

  <ngx-datatable-column name="name">
    <ng-template let-row="row" ngx-datatable-cell-template>
      {{row.name}}
    </ng-template>
  </ngx-datatable-column>

  <ngx-datatable-column name="company">
    <ng-template let-row="row" ngx-datatable-cell-template>
      {{row.company}}
    </ng-template>
  </ngx-datatable-column>

</ngx-datatable>

also, we can use these ways to sort.

<ngx-datatable class="material" [rows]="rows" [sorts]="[{prop: 'name', dir: 'desc'}]">

,

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

or

  columns = [
    { name: 'company', sortable: true },
    { name: 'name', sortable: false }
  ];