сортировка по цвету класса в angular2

Question

Я пытаюсь отсортировать таблицу в зависимости от цвета переключателя (element.IsOnline). Я пытаюсь отсортировать по дате в последний раз, но, хотя формат, кажется, в порядке, не сортирует. Вот почему я пытаюсь сделать это зеленым или красным, но не знаю, как я могу это сделать.

Как я могу это сделать?

my. html

 <table mat-table [dataSource]="dataSource" matSort class=" mat-elevation-z8">


              <ng-container matColumnDef="online">
                <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
                <td mat-cell *matCellDef="let element">
                  <i *ngIf="element.isOnline" class="material-icons"
                    style="color: rgba(0, 100, 0, 0.80)">radio_button_checked</i>
                  <i *ngIf="!element.isOnline" class="material-icons"
                    style="color: rgba(190, 0, 0, 0.80)">radio_button_checked</i>
                </td>
              </ng-container>

 <ng-container matColumnDef="deviceName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Device Id </th>
                <td mat-cell *matCellDef="let element"> {{element.deviceName}} </td>
              </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let element; columns: displayedColumns;" (click)="goToDeviceDetails(element)">
              </tr>

 <ng-container matColumnDef="lastSeen">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Last seen </th>
                <td mat-cell *matCellDef="let element"> {{element.telemetryUtc | date: 'medium'}} </td>
              </ng-container>
            </table>

my .ts

import { Component, OnInit, OnDestroy, ViewEncapsulation, ViewChild } from "@angular/core";

import { MatSort } from '@angular/material/sort';

@Component({
  selector: "app-provisioned-list",
  templateUrl: "./provisioned-list.component.html",
  styleUrls: ["./provisioned-list.component.scss"],
  encapsulation: ViewEncapsulation.None,
  animations: fuseAnimations
})
export class ProvisionedListComponent implements OnInit, OnDestroy {
  deviceList: DeviceModel[];
  displayedColumns: string[] = ["checkbox", "online", "deviceName", "tags", "actualVersion", "status", "runningApps", "appVersion", "lastSeen"];

 @ViewChild(MatSort) sort: MatSort;
 devices: any;

private getDeviceList() {
    this.provisionedService.getProvisionedDevicesList().then(response => {
      this.deviceErrorMessage = null;
      this.dataSource.data = response;

this.dataSource.data.map(device => {
        this.provisionedService.getIsDeviceAlive(device._id).then(response => device.isOnline = response);

  }