I am using Angular 17.3.6 with Angular Material. I have a view that contains a mat-table with two nested mat-tables. Functionally, it works fine, but the UI presents a blank row after every top-level row. I hope someone can help me get rid of the blank row after every top-level row in the top-level mat-table.
If I remove the last in the HTML (<tr mat-row *matRowDef=”let row; columns: [‘expandedDetail’]” class=”example-detail-row”>), the extra line goes away (but so does the functionality of expand/collapse).
Here’s the relevant code:
HTML:

    <ng-container matColumnDef="expandedDetail">
  <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
    <div *ngIf="isExpanded(element) && element.SubmitData">
      <div class="detail-grids">
        <div class="grid-item">
          <div class="grid-content">
            <table
              mat-table
              class="nested-table mat-elevation-z8"
              [dataSource]="innerDataSource"
              multiTemplateDataRows
            >
              <ng-container matColumnDef="DisplayName">
                <th mat-header-cell *matHeaderCellDef>Installed</th>
                <td mat-cell *matCellDef="let data">{{ data.DisplayName }}</td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="['DisplayName']"></tr>
              <tr mat-row *matRowDef="let row; columns: ['DisplayName']"></tr>
            </table>
          </div>
        </div>
        <div class="grid-item">
          <div class="grid-content">
            <table
              mat-table
              class="nested-table mat-elevation-z8"
              [dataSource]="innerDataSource"
              multiTemplateDataRows
            >
              <ng-container matColumnDef="DisplayName">
                <th mat-header-cell *matHeaderCellDef>Uninstalled</th>
                <td mat-cell *matCellDef="let data">{{ data.DisplayName }}</td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="['DisplayName']"></tr>
              <tr mat-row *matRowDef="let row; columns: ['DisplayName']"></tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

TypeScript (excerpts):

   export class RemediationPreviewModalComponent {
  @ViewChildren("innerTables") innerTables!: QueryList<MatTable<SubmitData>>;
  columnsToDisplay = ["Date/Time", "Result", "progressData"];
  innerColumnstoDisplay = ["DisplayName"];
  displayedColumns = ["expandedRow", ...this.columnsToDisplay];

  isExpanded(element: RemediationPreview): boolean {
    const expandedElementArr = this.expandedElement ? Object.entries(this.expandedElement) : [];
    const elementArr = Object.entries(element);

    return JSON.stringify(expandedElementArr) === JSON.stringify(elementArr);
  }
}