table-expandable-rows-example.html

<table mat-table
       [dataSource]="dataSource" multiTemplateDataRows
       class="mat-elevation-z8">
  @for (column of columnsToDisplay; track column) {
    <ng-container matColumnDef="{{column}}">
      <th mat-header-cell *matHeaderCellDef>{{column}}</th>
      <td mat-cell *matCellDef="let element">{{element[column]}}</td>
    </ng-container>
  }
  <ng-container matColumnDef="expand">
    <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
    <td mat-cell *matCellDef="let element">
      <button
        matIconButton
        [aria-label]="isExpanded(element) ? 'collapse row' : 'expand row'"
        [aria-expanded]="isExpanded(element)"
        (click)="toggle(element); $event.stopPropagation()"
        class="example-toggle-button"
        [class.example-toggle-button-expanded]="isExpanded(element)">
        <mat-icon>keyboard_arrow_down</mat-icon>
      </button>
    </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
      <div class="example-element-detail-wrapper"
        [class.example-element-detail-wrapper-expanded]="isExpanded(element)">
        <div class="example-element-detail">
          <div class="example-element-diagram">
            <div class="example-element-position">{{element.position}}</div>
            <div class="example-element-symbol">{{element.symbol}}</div>
            <div class="example-element-name">{{element.name}}</div>
            <div class="example-element-weight">{{element.weight}}</div>
          </div>
          <div class="example-element-description">
            {{element.description}}
            <span class="example-element-description-attribution"> -- Wikipedia </span>
          </div>
        </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
      class="example-element-row"
      [class.example-expanded-row]="isExpanded(element)"
      (click)="toggle(element)">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>