Teradata Covalent datatable (sortChange) output doesn't sort table columns

Question

I am trying to make all columns of a Teradata covalent datatable sortable. I am using the atomic table components as I have to add action buttons to the table. As far as I understand from the documentation the (sortChange) output is used to call a function in my component code where I add the sorting logic? For some reason my Sort function doesn't ever sort the columns... Any idea what i'm doing wrong here?

Update

I see that the ITdDataTableSortChangeEvent's name property is always empty when the sort function is called instead of containing the mane of the specific column... Any idea how I could pass that event to the sort function with the column's name property set?

my html code?

Update 2

After @Chic's suggestion I can see that the event passed to the sort function contains the correct data however the columns still doesn't get sorted...

My filter function:

filter(): void {
        let newData: IEmployee[] = this.employees;
        let excludedColumns: string[] = this.columns
            .filter((column: ITdDataTableColumn) => {
                return ((column.filter === undefined && column.hidden === true) ||
                (column.filter !== undefined && column.filter === false));
            }).map((column: ITdDataTableColumn) => {
            return column.name;
        });
    newData = this._dataTableService.filterData(newData, this.searchTerm, true, excludedColumns);
    this.filteredTotal = newData.length;
    newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
    newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
    this.filteredEmployees = newData;
  }

<table *ngIf="filteredEmployees.length > 0" td-data-table>
                <thead>
                    <tr td-data-table-column-row>
                        <th td-data-table-column [sortable]="true" [sortOrder]="'ASC'"  *ngFor="let column of columns" (sortChange)="sort($event)">
                            {{column.label}}
                        </th>
                        <th>
                            Action
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr td-data-table-row *ngFor="let row of filteredEmployees">
                        <td td-data-table-cell *ngFor="let column of columns">
                                {{row[column.name]}}
                        </td>
                        <td>
                            <mat-icon class="fa fa-edit fa-2x" (click)="editCashier(row)" matTooltip="Edit Cashier"></mat-icon>
                            <mat-icon class="fa fa-trash fa-2x" title="Delete" (click)="deleteCashier(row)" matTooltip="Delete Cashier" aria-label="Delete"></mat-icon>
                        </td>
                    </tr>
                </tbody>
            </table>

my sort function:

sort(sortEvent: ITdDataTableSortChangeEvent): void {
      console.log("sort called");
        this.sortBy = sortEvent.name;
        console.log(sortEvent.name);
        this.filter();
    }

Answer 1

You will need to set the [name]="column.name" input on the td-data-table-column component. That is used in the sort change event.

As an additional note, make sure your filter function is changing the array reference (i.e. creating a new array) each time you filter to trigger change detection. This wasn't done automatically for version 1.0.0-rc.0 but it will be done for you in the future.