title: Ngx-Datatable template issue
body: <p>I am using an ngx-datatable to render tabular data(image below) in my Angular component. Everything works fine except the fact that I am unable to remove the sort function from the 'Action' header column. On inspecting it, I can see that it is using span class = "sort-btn" under span class = "datatable-header-cell-wrapper". Any idea on how the sort function can be removed? I have added the code below:</p>
  
  <p><a href="https://i.stack.imgur.com/Qb6yf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qb6yf.jpg" alt="enter image description here"></a>   </p>
  
  <p><a href="https://i.stack.imgur.com/Q5IIr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q5IIr.jpg" alt="enter image description here"></a>  </p>
  
  <p><strong>schedule-management.component.html:</strong></p>
  
  <pre><code>&lt;ol class="breadcrumb"&gt;
      &lt;li class="breadcrumb-item"&gt;&lt;a [routerLink]="['/home']"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="breadcrumb-item"&gt;&lt;a [routerLink]="['/cldtools']"&gt;Cloud Runner Tools&lt;/a&gt;&lt;/li&gt;
      &lt;li class="breadcrumb-item active"&gt;Schedule Management&lt;/li&gt;
  &lt;/ol&gt;
  
  &lt;div class="row" style="margin-top:20px;"&gt;
      &lt;div class="col-lg-12"&gt;
          &lt;h2&gt;All Schedules&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row" style="margin-top:20px;"&gt;
      &lt;div class="col-lg-12"&gt;
          &lt;div class="dropdown"&gt;
              &lt;button class="btn btn-primary"&gt;Create New &lt;/button&gt;
              &lt;div class="dropdown-content"&gt;
                  &lt;a [routerLink]="['/schedulemanagement/autoStartStopVm']" [queryParams]="{dropDownListSelectedItem:'AutoStart'}"&gt;AutoStart&lt;/a&gt;
                  &lt;a [routerLink]="['/schedulemanagement/autoStartStopVm']" [queryParams]="{dropDownListSelectedItem:'AutoShutdown'}"&gt;AutoShutdown&lt;/a&gt;
                  &lt;!--&lt;a href="#"&gt;Auto Scale&lt;/a&gt;--&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-lg-12"&gt;
          &lt;!--&lt;div style="overflow-x:scroll; overflow-y:scroll; width: 100%"&gt;--&gt;
          &lt;ngx-datatable #table
                         class='datatable'
                         [sortType]="'single'"
                         [columns]="columns"
                         [columnMode]="'flex'"
                         [headerHeight]="40"
                         [footerHeight]="50"
                         [rowHeight]="'auto'"
                         [groupRowsBy]="'isCurrentDate'"
                         [limit]="10"
                         [rows]='rows'
                         [groupExpansionDefault]="true"
                         [scrollbarH]="true"&gt;
  
              &lt;ngx-datatable-group-header [rowHeight]="60" #myGroupHeader&gt;
                  &lt;ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template&gt;
                      &lt;div style="padding-left:5px;"&gt;
                          &lt;a title="Expand/Collapse Group"
                             (click)="toggleExpandGroup(group)"&gt;
                              &lt;b&gt;{{group.value[0].isCurrentDate === true? 'Scheduled for Today':'Scheduled for other days'}}&lt;/b&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/ng-template&gt;
              &lt;/ngx-datatable-group-header&gt;
  
              &lt;ng-template #sortableColumnTemplate let-sort="sortFn" let-column="column" ngx-datatable-header-template&gt;
                  &lt;span (click)="sort()" class="sort-fullwidth"&gt;{{column?.name}}&lt;/span&gt;
                  &lt;input class="filter-box" placeholder='' (keyup)='updateFilter($event)' /&gt;
              &lt;/ng-template&gt;
  
              &lt;ng-template #dateColumn let-row="row" let-value="value" ngx-datatable-cell-template&gt;
                  &lt;div&gt;{{value | date:"short"}}&lt;/div&gt;
              &lt;/ng-template&gt;
  
              &lt;ng-template #actionRowTemplate let-row="row" let-value="value" ngx-datatable-cell-template&gt;
                  &lt;div style="display:block; text-align:center;"&gt;
                      &lt;!-- &lt;a title="copy"&gt;&lt;i class="glyphicon glyphicon-copy"&gt;&lt;/i&gt;&lt;/a&gt;                    --&gt;
                      &lt;a title="delete" (click)="deleteWarningModal.show();scheduleToDelete = value"&gt;&lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
  
              &lt;/ng-template&gt;
          &lt;/ngx-datatable&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;loading-spinner *ngIf="showSpinner"&gt;&lt;/loading-spinner&gt;
      &lt;modal #deleteWarningModal&gt;
          &lt;div class="app-modal-header"&gt;
              Warning
          &lt;/div&gt;
          &lt;div class="app-modal-body"&gt;
              Are you sure you want to delete the schedule?
          &lt;/div&gt;
          &lt;div class="app-modal-footer"&gt;
              &lt;button type="button" (click)="deleteSchedule()" class="btn btn-primary"&gt;Yes&lt;/button&gt;
              &lt;button type="button" (click)="deleteWarningModal.hide()" class="btn btn-secondary"&gt;No&lt;/button&gt;
          &lt;/div&gt;
      &lt;/modal&gt;
  </code></pre>
  
  <p><strong>schedule-management.component.ts:</strong></p>
  
  <pre><code>import { Component, Inject, OnInit, ViewChild, TemplateRef } from '@angular/core';
  import { GridComponent } from '../shared/grid.component';
  import { SchdedulingDetails } from '../../models/schedulingDetails';
  
  //Services
  import { ScheduleManagementService } from '../../services/schedulemanagement.service';
  import { ToasterNotificationService } from '../../services/toasterNotification.service';
  import { ModalComponent } from '../shared/modal.component';
  
  
  @Component({
      selector: 'schedulemanagement',
      templateUrl: './schedule-management.component.html',
      styleUrls: ['./schedule-management.component.css', '../shared/grid.component.css']
  })
  export class ScheduleManagementComponent extends GridComponent implements OnInit {
  
      constructor(private _schedManagementService: ScheduleManagementService,
          private notificationsService: ToasterNotificationService) {
          super();
      }
  
      scheduleToDelete: string;
      showSpinner: boolean = true;
      @ViewChild('deleteWarningModal') deleteWarningModal: ModalComponent;
      @ViewChild('dateColumn') dateColumn: TemplateRef&lt;any&gt;;
  
      ngOnInit(){
          this.buildTable();
          this.populateTable();
      }
  
  
  
      buildTable() {
          this.columns = [
              {
                  name: 'SID',
                  prop: 'sapsid',
                  sortable: true,
                  sortString: '',
                  flexGrow: 1,
                  cellTemplate: this.customColumnTemplate,
                  headerTemplate: this.sortableColumnTemplate
              },
              {
                  name: 'CI Host',
                  prop: 'ciHostName',
                  sortable: true,
                  sortString: '',
                  flexGrow: 2,
                  cellTemplate: this.customColumnTemplate,
                  headerTemplate: this.sortableColumnTemplate
              },
              {
                  name: 'App Host',
                  prop: 'sapAppHostName',
                  sortable: true,
                  sortString: '',
                  flexGrow: 2,
                  headerTemplate: this.sortableColumnTemplate
              },
              {
                  name: 'Instance#',
                  prop: 'sapAppInstanceNumber',
                  sortable: true,
                  sortString: '',
                  flexGrow: 2,
                  headerTemplate: this.sortableColumnTemplate
              },
              {
                  name: 'DB Host',
                  prop: 'dbHostName',
                  sortable: true,
                  sortString: '',
                  flexGrow: 2,
                  headerTemplate: this.sortableColumnTemplate
              },
              {
                  name: 'Starts on',
                  prop: 'startDateTime',
                  sortable: true,
                  sortString: '',
                  flexGrow: 3,
                  headerTemplate: this.sortableColumnTemplate,
                  cellTemplate: this.dateColumn
              },
              {
                  name: 'Ends on',
                  prop: 'stopDateTime',
                  sortable: true,
                  sortString: '',
                  flexGrow: 3,
                  headerTemplate: this.sortableColumnTemplate,
                  cellTemplate: this.dateColumn
              },
              {
                  name: 'Scheduled For',
                  prop: 'actionName',
                  sortable: true,
                  sortString: '',
                  flexGrow: 2.7,
                  headerTemplate: this.sortableColumnTemplate,
              },
              {
                  name: 'Frequency',
                  prop: 'frequency',
                  sortable: true,
                  sortString: '',
                  flexGrow: 2,
                  headerTemplate: this.sortableColumnTemplate
              },                      
              {
                  name: 'Action',
                  prop: 'id',
                  cellTemplate: this.actionRowTemplate,
                  sortable: false,
                  flexGrow: 1.3
              }            
  
          ];
      }
  
      populateTable() {
          this._schedManagementService.getSchedulingDetails().subscribe(
              response=&gt;{
                  this.showSpinner = false;
                  this.updateRows(response);
              }, error =&gt; {
                  this.showSpinner = false;
                  this.notificationsService.notify('error', 'Error', "Unexpected error occured while retrieving Scheduling details.");
              }
          )
      }
  
      deleteSchedule(){
          let id = this.scheduleToDelete;
          this._schedManagementService.deleteSchedulingDetails(id).subscribe(
              result =&gt;{
                  this.rows = this.rows.filter(r=&gt; r.id !== id);              
                  this.deleteWarningModal.hide();
              },error =&gt;{                
                  this.notificationsService.notify('error', 'Error', "Unexpected error occured while deleting schedule.");
              });
      }
  }
  </code></pre>