108 lines
4.8 KiB
HTML
108 lines
4.8 KiB
HTML
|
|
<mat-card>
|
|
<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"> </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"> </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>
|