
<mat-card>
  <mat-card-header>
    <mat-card-title>System</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <mat-divider></mat-divider>
    <mat-tab-group>
      <mat-tab label="Custom beans">
        Content 1
        <table mat-table
               [dataSource]="customBeans" multiTemplateDataRows="true" class="mat-elevation-z8">
          @for (column of displayedColumns; track column) {
            <ng-container matColumnDef="{{column}}">
              <th mat-header-cell *matHeaderCellDef>{{column}}</th>
              <td mat-cell *matCellDef="let element ; let k = dataIndex;">{{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="expand row"
                (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">

                  <mat-list role="list">
                    <mat-list-item role="listitem">Name: {{element.name}}</mat-list-item>
                    <mat-list-item role="listitem">Type: {{element.type}}</mat-list-item>
                  </mat-list>
                </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>

      </mat-tab>
      <mat-tab label="All beans">
        Content 2
        <table mat-table
               [dataSource]="allBeans" multiTemplateDataRows="true" class="mat-elevation-z8">
          @for (column of displayedColumns; track column) {
            <ng-container matColumnDef="{{column}}">
              <th mat-header-cell *matHeaderCellDef>{{column}}</th>
              <td mat-cell *matCellDef="let element ; let k = dataIndex;">{{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="expand row"
                (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">

                  <mat-list role="list">
                    <mat-list-item role="listitem">Name: {{element.name}}</mat-list-item>
                    <mat-list-item role="listitem">Type: {{element.type}}</mat-list-item>
                  </mat-list>
                </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>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>
