<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- ID Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{ element.id }} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{ element.name }} </td>
  </ng-container>

  <!-- Value Column -->
  <ng-container matColumnDef="value">
    <th mat-header-cell *matHeaderCellDef> Value </th>
    <td mat-cell *matCellDef="let element"> {{ element.value }} </td>
  </ng-container>

  <!-- Expand Row Toggle -->
  <ng-container matColumnDef="expand">
    <th mat-header-cell *matHeaderCellDef> Actions </th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button (click)="toggleRow(element)">
        <mat-icon>{{ expandedRow === element.id ? 'expand_less' : 'expand_more' }}</mat-icon>
      </button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns.concat('expand')"></tr>
  <tr mat-row 
      *matRowDef="let row; columns: displayedColumns.concat('expand');" 
      (click)="toggleRow(row)"
      matRowDefWhen="row => expandedRow !== row.id"></tr>

  <!-- Expanded Detail Row -->
  <tr mat-row 
      *matRowDef="let row; columns: ['expand']; let index=index" 
      class="expanded-row"
      [ngClass]="{'expanded': expandedRow === row.id}"
      matRowDefWhen="row => expandedRow === row.id">
    <td colspan="4">
      olá mundo
      <!--
      <div *ngIf="expandedRow === row.id" class="expanded-content">
        <span>teste</span>
        <table mat-table [dataSource]="expandedDetails[row.id] || []" class="mat-elevation-z8">
          
          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef> ID </th>
            <td mat-cell *matCellDef="let detail"> {{ detail.id }} </td>
          </ng-container>

          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Name </th>
            <td mat-cell *matCellDef="let detail"> {{ detail.name }} </td>
          </ng-container>

          <ng-container matColumnDef="value">
            <th mat-header-cell *matHeaderCellDef> Value </th>
            <td mat-cell *matCellDef="let detail"> {{ detail.value }} </td>
          </ng-container>

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

        </table>
      </div>
      -->
    </td>
  </tr>
</table>
