title: How use sorting in ngx-datatable / ngx-datatable-column in Angular?
body: <p>I'm trying to use <code>ngx-datatable</code>'s sort feature to perform the action like this link: <a href="https://swimlane.github.io/ngx-datatable/" rel="nofollow noreferrer">https://swimlane.github.io/ngx-datatable/</a></p>
  
  <p>However, it does not work.</p>
  
  <p>I've tried without luck to use properties like:</p>
  
  <ul>
  <li><code>sortable="true"</code></li>
  <li><code>[sortType]="'multi'"</code></li>
  <li><code>[sorts]="[{prop: 'id_pessoa', dir: 'asc'}]"</code></li>
  </ul>
  
  <p>Below is the code and version of <code>ngx-datatable</code>:</p>
  
  <pre><code>"@swimlane/ngx-datatable": "^15.0.2"
  
  &lt;section class="basic-elements"&gt;
  &lt;!-- Breadcrumbs --&gt;
  &lt;nav&gt;
      &lt;ol class="breadcrumb"&gt;
          &lt;li class="breadcrumb-item"&gt;
              &lt;a routerLink="/"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="breadcrumb-item active"&gt;
              Pessoas
          &lt;/li&gt;
      &lt;/ol&gt;
  &lt;/nav&gt;
  
  &lt;div id="mb-4" class="row mb-4"&gt;
      &lt;div class="col-md"&gt;
          &lt;h1 class="h2"&gt;Pessoas&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="col-md"&gt;
          &lt;button routerLink="novo" type="button" class="btn btn-raised btn-raised btn-success btn-no-margin float-right btn-heigh2"&gt;
              + Nova Pessoa
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="mb-4" class="row mb-4"&gt;
          &lt;div class="col-md-11"&gt;
              &lt;input type="text" class="form-control" id="email" &gt;
          &lt;/div&gt;
          &lt;div class="col-md-1"&gt;
              &lt;button [disabled]="submittingForm " type="submit" class="btn btn-raised btn-raised btn-no-margin btn-primary float-right btn-heigh button-margin-top"&gt;
                  Buscar
              &lt;/button&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row text-left"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;div class="card"&gt;
              &lt;div class="card-content"&gt;
                  &lt;ngx-datatable 
                      class="bootstrap"
                      [rows]="rows"
                      [columns]="columns"
                      [columnMode]="'force'"
                      [headerHeight]="10"
                      [footerHeight]="35"
                      [rowHeight]="35"
                      [externalPaging]="true"
                      [externalSorting]="true"
                      [scrollbarH]="true"
                      [count]="page.count"
                      [offset]="page.offset"
                      [limit]="page.limit"
                      [sortType]="'multi'"
                      [sorts]="[{prop: 'id_pessoa', dir: 'asc'}]"
                      (page)="pageCallback($event)"&gt;
  
                      &lt;ngx-datatable-column name="Ações" sortable="true" prop="id_pessoa" width=140&gt;
                              &lt;ng-template let-row="data" let-value="value" ngx-datatable-cell-template&gt;                                  
                                  &lt;a class="btn btn-outline-primary mr-1" [routerLink]="[value,'editar']" href="javascript:void(0)"&gt;
                                      &lt;i class="fa fa-edit" title="Editar"&gt;&lt;/i&gt;
                                  &lt;/a&gt;
                                  &lt;a class="btn btn-outline-primary mr-1" [routerLink]="[value,'subst']" href="javascript:void(0)"&gt;
                                  &lt;i class="fa fa-exchange" title="Substituir"&gt;&lt;/i&gt;
                                  &lt;/a&gt;
                                  &lt;a class="btn btn-outline-primary mr-1" (click)="deletePessoa(value)" href="javascript:void(0)"&gt;
                                      &lt;i class="fa fa-trash" title="Remover"&gt;&lt;/i&gt;
                                  &lt;/a&gt;                                    
                              &lt;/ng-template&gt;
                          &lt;/ngx-datatable-column&gt;                                             
  
                      &lt;!--&lt;ngx-datatable-column name="Pré-cad." prop="pre_cadastro" width=75&gt;
                          &lt;ng-template ngx-datatable-cell-template let-value="value"&gt;
                              &lt;span *ngIf="value"&gt;
                                  &lt;i class="fa fa-check fa-2x"&gt;&lt;/i&gt;
                              &lt;/span&gt;
                              &lt;span *ngIf="!value"&gt;
                                  -
                              &lt;/span&gt;
                          &lt;/ng-template&gt;
                      &lt;/ngx-datatable-column&gt;--&gt;
  
                      &lt;ngx-datatable-column *ngFor="let col of columns" [sortable]="true" [name]="col.name" [prop]="col.prop" [width]="col.width" [headerClass]="col.headerClass" [cellClass]="col.cellClass"&gt;
                      &lt;/ngx-datatable-column&gt;
                      &lt;ngx-datatable-column name="Inativo" prop="inativo" width=70&gt;
                              &lt;ng-template ngx-datatable-cell-template let-value="value"&gt;
                                  &lt;span *ngIf="value"&gt;
                                      &lt;i class="fa fa-check fa-2x"&gt;&lt;/i&gt;
                                  &lt;/span&gt;
                                  &lt;span *ngIf="!value"&gt;
                                      -
                                  &lt;/span&gt;
                              &lt;/ng-template&gt;
                          &lt;/ngx-datatable-column&gt;
  
  
                  &lt;/ngx-datatable&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>