Mat-Table Sorting not working with async data

Question

I'm trying to sort data from a table but it's not working. I'm also using a filter search and it's working fine but the sorting does not work. The header appears and everything, but it just doesn't sort the data.

I think that the problem lies in that I'm retrieving the data after the table loads but I'm not entirely sure.

[Table Picure][1]

Typescript Code

import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MatPaginator} from '@angular/material/paginator';
import { MatSort} from '@angular/material/sort';
import { MatTableDataSource} from '@angular/material/table';


//Models
import { Quote } from '../../_models/quote';

//Services
import { HttpRequestService } from 'src/app/_services/httpRequest.service';


@Component({
  selector: 'app-qDashboard',
  templateUrl: './qDashboard.html',
  styleUrls: ['./qDashboard.css']
})

export class QDashboardComponent implements OnInit {

  users: string[] = [];
  quotes: Quote[] = [];
  displayedColumns: string[] = ['title', 'state_id', 'description','client','clientsite','poc','dateReceived','dueDate'];
  dataSource!: MatTableDataSource<Quote>;
  table: any = [];

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  constructor(private route: ActivatedRoute, private router: Router, private service: HttpRequestService) { 
    //Get quotes
    this.quotes = []
    this.dataSource = new MatTableDataSource();
    this.getAll();
  }

  ngOnInit(): void {
 
  }

  getAll(): void {
    this.service.getQuotes()
      .subscribe((quotes: Quote[]) => {
        this.quotes = quotes;
        this.tabulateQuotes();
        this.dataSource = new MatTableDataSource(quotes);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      });
  }

  /**
   * Set the paginator and sort after the view init since this component will
   * be able to query its view for the initialized paginator and sort.
   */
  ngAfterViewInit() {
  
  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  tabulateQuotes(){
    for(let quote of this.quotes) {
        quote.state_name = this.service.getState(quote.state_id);
      this.service.getClient(quote.client_id).subscribe((result:any)=>{
        quote.client_name = result[0].companyName;
      });
      this.service.getClientSite(quote.client_site_id, quote.client_id).subscribe((result:any)=>{
        quote.client_site_name = result[0].name;
      });
      this.service.getPointOfContact(quote.point_of_contact_id, quote.client_id).subscribe((result:any)=>{
        quote.point_of_contact_name = result[0].name;
      });
    } 
  }
  
  getQuotePage(id: number){
    this.router.navigate(['/quote-page', id]);
  }



}

HTML Code

  <mat-form-field>
    <input matInput (keyup)="applyFilter($any($event.target).value)" placeholder="Filter">
  </mat-form-field>
</div>

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


    <!-- Progress Column -->
    <ng-container matColumnDef="title">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Title </mat-header-cell>
      <mat-cell *matCellDef="let quote"> {{quote.title}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="state_id">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Status </mat-header-cell>
      <mat-cell *matCellDef="let quote"> {{quote.state_name}} </mat-cell>
    </ng-container>

    <!-- Color Column -->
    <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
      <mat-cell *matCellDef="let quote"> {{quote.projectDescription}} </mat-cell>
    </ng-container>

    <!-- Color Column -->
    <ng-container matColumnDef="client">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Client </mat-header-cell>
      <mat-cell *matCellDef="let quote"> {{quote.client_name}} </mat-cell>
    </ng-container>

    <!-- Color Column -->
    <ng-container matColumnDef="clientsite">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Client Site </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.client_site_name}} </mat-cell>
    </ng-container>

       <!-- Color Column -->
       <ng-container matColumnDef="poc">
        <mat-header-cell *matHeaderCellDef mat-sort-header> POC </mat-header-cell>
        <mat-cell *matCellDef="let quote"> {{quote.point_of_contact_name}} </mat-cell>
      </ng-container>

         <!-- Color Column -->
    <ng-container matColumnDef="dateReceived">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Date Received </mat-header-cell>
      <mat-cell *matCellDef="let quote"> {{quote.dateReceived}} </mat-cell>
    </ng-container>

       <!-- Color Column -->
       <ng-container matColumnDef="dueDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header> due Date </mat-header-cell>
        <mat-cell *matCellDef="let quote"> {{quote.dueDate}} </mat-cell>
      </ng-container>

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

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>```


  [1]: https://i.stack.imgur.com/IxnOy.png