I am using a mat-table so users can see a list of companyConnection objects for an application.

My issue occurs when a user clicks the edit button and updates a companyConnection using a modal, but the change does not reflect in the table.

For troubleshooting, I have printed the updated object to the console in multiple spots and have confirmed that the object is being updated, and it seems to just be a problem with the table not updating.

table.component.html

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z4">
  <!-- Columns -->
  <ng-container matColumnDef="DattoDomain">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Datto Domain </th>
    <td mat-cell *matCellDef="let company"> {{company.dattoDomain}} </td>
  </ng-container>
  <ng-container matColumnDef="connectWiseId">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ConnectWise Id </th>
    <td mat-cell *matCellDef="let company"> {{company.connectWiseId}} </td>
  </ng-container>
  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef>Actions</th>
    <td mat-cell *matCellDef="let company">
      <button mat-icon-button (click)="openEditCompanyModal(company)">
        <mat-icon>edit</mat-icon>
      </button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

export class CompanyTableComponent implements OnInit, AfterViewInit {
  @ViewChild(MatSort) sort: MatSort;
  @Input() companies: CompanyConnection[];
  @Input() getError: boolean; 
  displayedColumns: string[] = [ DattoDomain ,  connectWiseId ,  actions ];
  companies$: Observable<CompanyConnection[]> = of([]);
  dataSource = new MatTableDataSource<CompanyConnection>();

  constructor(
    private companyDataService: CompanyDataService,
    private dialog: MatDialog,
    private changeDetectorRef: ChangeDetectorRef
  ) {}

  ngOnInit() {
    if (this.getError) {
      this.companies$ = this.companyDataService.getErrorCompanyConnections();
    } else {
      this.companies$ = this.companyDataService.getHealthyCompanyConnections();
    }
    this.companies$.subscribe((companies: CompanyConnection[]) => {
      this.dataSource.data = companies;
      this.changeDetectorRef.detectChanges();
    });
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

  openEditCompanyModal(company: CompanyConnection) {
    const dialogRef = this.dialog.open(CompanyModalComponent, {
      data: { company }
    });
  
    dialogRef.afterClosed().subscribe((editedCompany: CompanyConnection) => {
      if (editedCompany) {
        // Update the existing company connection
        this.companyDataService.editCompanyConnection(editedCompany).subscribe(
          () => {},
          error => {}
        );
  
        // Retrieve the updated company connection
        this.companyDataService.getCompanyConnection(editedCompany.dattoDomain).subscribe(
          (updatedCompany: CompanyConnection | undefined) => {
            if (updatedCompany) {
              console.log( Updated company connection: , updatedCompany);
            } else {
              console.log( Company connection not found );
            }
          },
          error => {
            console.log( Error retrieving company connection: , error);
          }
        );
      } 
    });
  }
}

this file returns: Updated company connection: {dattoDomain: aptdynamics , connectWiseId: Bucks Communications , status: 200 }

if there is any other code I can provide that would help, please let me know!

Thanks!