Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <mat-table #table [dataSource]="dataSource">
- <!-- Position Column -->
- <ng-container matColumnDef="position">
- <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
- <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
- </ng-container>
- <!-- Name Column -->
- <ng-container matColumnDef="name">
- <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
- <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
- </ng-container>
- <!-- Weight Column -->
- <ng-container matColumnDef="weight">
- <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
- <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
- </ng-container>
- <!-- Symbol Column -->
- <ng-container matColumnDef="symbol">
- <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
- <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
- </ng-container>
- <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
- <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
- </mat-table>
- <table>
- <tr>
- <th>Company</th>
- <th>Contact</th>
- <th>Country</th>
- </tr>
- <tr>
- <td>
- <button (click)="expand = !expand">{{expand ? 'Collapse' : 'Expand'}}</button> Futterkiste</td>
- <td>Maria Anders</td>
- <td>Germany</td>
- </tr>
- <tr *ngIf="expand">
- <td colspan="3" style="background: #eee; padding: 30px; height: 100px;">Expanded View</td>
- </tr>
- <tr>
- <td>Centro comercial Moctezuma</td>
- <td>Francisco Chang</td>
- <td>Mexico</td>
- </tr>
- <tr>
- <td>Ernst Handel</td>
- <td>Roland Mendel</td>
- <td>Austria</td>
- </tr>
- <tr>
- <td>Island Trading</td>
- <td>Helen Bennett</td>
- <td>UK</td>
- </tr>
- <tr>
- <td>Laughing Bacchus Winecellars</td>
- <td>Yoshi Tannamuri</td>
- <td>Canada</td>
- </tr>
- <tr>
- <td>Magazzini Alimentari Riuniti</td>
- <td>Giovanni Rovelli</td>
- <td>Italy</td>
- </tr>
- </table>
Add Comment
Please, Sign In to add comment