Проблема с шаблоном Ngx-Datatable

Я использую ngx-datatable для отображения табличных данных (изображение ниже) в моем компоненте Angular. Все работает нормально, за исключением того факта, что я не могу удалить функцию сортировки из столбца заголовка «Действие». Осмотрев его, я вижу, что он использует span class = "sort-btn" под span class = "datatable-header-cell-wrapper". Есть идеи, как можно удалить функцию сортировки? Я добавил код ниже:

schedule-management.component.html:

<ol class = "breadcrumb">
    <li class = "breadcrumb-item"><a [routerLink] = "['/home']">Home</a></li>
    <li class = "breadcrumb-item"><a [routerLink] = "['/cldtools']">Cloud Runner Tools</a></li>
    <li class = "breadcrumb-item active">Schedule Management</li>
</ol>

<div class = "row" style = "margin-top:20px;">
    <div class = "col-lg-12">
        <h2>All Schedules</h2>
    </div>
</div>

<div class = "row" style = "margin-top:20px;">
    <div class = "col-lg-12">
        <div class = "dropdown">
            <button class = "btn btn-primary">Create New </button>
            <div class = "dropdown-content">
                <a [routerLink] = "['/schedulemanagement/autoStartStopVm']" [queryParams] = "{dropDownListSelectedItem:'AutoStart'}">AutoStart</a>
                <a [routerLink] = "['/schedulemanagement/autoStartStopVm']" [queryParams] = "{dropDownListSelectedItem:'AutoShutdown'}">AutoShutdown</a>
                <!--<a href = "#">Auto Scale</a>-->
            </div>
        </div>
    </div>
</div>
<div class = "row">
    <div class = "col-lg-12">
        <!--<div style = "overflow-x:scroll; overflow-y:scroll; width: 100%">-->
        <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">

            <ngx-datatable-group-header [rowHeight] = "60" #myGroupHeader>
                <ng-template let-group = "group" let-expanded = "expanded" ngx-datatable-group-header-template>
                    <div style = "padding-left:5px;">
                        <a title = "Expand/Collapse Group"
                           (click) = "toggleExpandGroup(group)">
                            <b>{{group.value[0].isCurrentDate === true? 'Scheduled for Today':'Scheduled for other days'}}</b>
                        </a>
                    </div>
                </ng-template>
            </ngx-datatable-group-header>

            <ng-template #sortableColumnTemplate let-sort = "sortFn" let-column = "column" ngx-datatable-header-template>
                <span (click) = "sort()" class = "sort-fullwidth">{{column?.name}}</span>
                <input class = "filter-box" placeholder='' (keyup)='updateFilter($event)' />
            </ng-template>

            <ng-template #dateColumn let-row = "row" let-value = "value" ngx-datatable-cell-template>
                <div>{{value | date:"short"}}</div>
            </ng-template>

            <ng-template #actionRowTemplate let-row = "row" let-value = "value" ngx-datatable-cell-template>
                <div style = "display:block; text-align:center;">
                    <!-- <a title = "copy"><i class = "glyphicon glyphicon-copy"></i></a>                    -->
                    <a title = "delete" (click) = "deleteWarningModal.show();scheduleToDelete = value"><i class = "glyphicon glyphicon-remove"></i></a>
                </div>

            </ng-template>
        </ngx-datatable>
    </div>
</div>

    <loading-spinner *ngIf = "showSpinner"></loading-spinner>
    <modal #deleteWarningModal>
        <div class = "app-modal-header">
            Warning
        </div>
        <div class = "app-modal-body">
            Are you sure you want to delete the schedule?
        </div>
        <div class = "app-modal-footer">
            <button type = "button" (click) = "deleteSchedule()" class = "btn btn-primary">Yes</button>
            <button type = "button" (click) = "deleteWarningModal.hide()" class = "btn btn-secondary">No</button>
        </div>
    </modal>

schedule-management.component.ts:

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<any>;

    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=>{
                this.showSpinner = false;
                this.updateRows(response);
            }, error => {
                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 =>{
                this.rows = this.rows.filter(r=> r.id !== id);              
                this.deleteWarningModal.hide();
            },error =>{                
                this.notificationsService.notify('error', 'Error', "Unexpected error occured while deleting schedule.");
            });
    }
}