client side sorting in ngx-datatable angular

Question

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.

Answer 1

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 }
  ];

Answer 2

if you need to disable ngx-datatable sort and use only client sorting, my code:

<ngx-datatable
            ...
            [externalSorting] = "true"
            (sort)="onPageSorted($event)">
 </ngx-datatable>

onPageSorted($event) {
    let _sort = $event.sorts[0];
    this.filter.orderByColumnNameDESC = _sort.dir == 'desc' && _sort.prop == 'ColumnName';
    this.filter.orderByColumnNameASC = _sort.dir == 'asc' && _sort.prop == 'ColumnName';


    event.stopPropagation(); - stop auto table sort to use only from server
    event.preventDefault();
    this.performFilter(); - here your client request with this.filter params
}