Dynamic table with sorting with Angular 5 Material (the important bits)

important-bits.html

<mat-table #table [dataSource]="dataSource" matSort (matSortChange)="onSortData($event)">
    <!-- Address Column -->
    <ng-container matColumnDef="address">
        <mat-header-cell class="table-address-column" *matHeaderCellDef mat-sort-header> Address </mat-header-cell>
        <mat-cell class="table-address-column" *matCellDef="let element"> {{element.address}} </mat-cell>
    </ng-container>

    <!-- Beds Column -->
    <ng-container matColumnDef="beds">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Beds </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.beds}} </mat-cell>
    </ng-container>

    <!-- Baths Column -->
    <ng-container matColumnDef="baths">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Baths </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.baths}} </mat-cell>
    </ng-container>

    <!-- Sqft Column -->
    <ng-container matColumnDef="sqft">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Sqft </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.sqft}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

important-bits.ts

export class ViewComponent implements OnInit, OnDestroy {
    sub: Subscription;

    dataTableElements: Element[] = [];
    displayedColumns = ['address', 'beds', 'baths', 'sqft'];
    dataSource: RecordsDataSource | null;
    dataSubject = new BehaviorSubject<Element[]>([]);

    constructor(private dataHelper: DataHelperService) { }

    ngOnInit() {
        this.dataSource = new RecordsDataSource(this.dataSubject);
        this.sub = this.dataHelper.oData.subscribe(
            (dataMap) => {
                Object.entries(dataMap).forEach(
                    ([key, value]) => {
                        const newElement: Element = {
                            address: value.Address,
                            beds: value.TotalBeds,
                            baths: value.TotalBaths,
                            sqft: value.SqftTotal
                        };

                        this.dataTableElements.push(newElement);
                    }
                );
                this.dataSubject.next(this.dataTableElements);
            });
    }

    onSortData(sort: Sort) {
        let data = this.dataTableElements.slice();
        if (sort.active && sort.direction !== '') {
            data = data.sort((a: Element, b: Element) => {
                const isAsc = sort.direction === 'asc';
                switch (sort.active) {
                    case 'address': return this.compare(a.address, b.address, isAsc);
                    case 'beds': return this.compare(+a.beds, +b.beds, isAsc);
                    case 'baths': return this.compare(+a.baths, +b.baths, isAsc);
                    case 'sqft': return this.compare(+a.sqft, +b.sqft, isAsc);
                    default: return 0;
                }
            });
        }
        this.dataSubject.next(data);
    }

    private compare(a, b, isAsc) {
        return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
    }

    ngOnDestroy() {
        if (this.sub) {
            this.sub.unsubscribe();
        }
    }

}

export interface Element {
    address: string;
    beds: number;
    baths: number;
    sqft: number;
}

export class RecordsDataSource extends MatTableDataSource<Element> {

    constructor(private subject: BehaviorSubject<Element[]>) {
        super();
    }

    connect(): BehaviorSubject<any[]> {
        return this.subject;
    }

    disconnect(): void {

    }
}