-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
table-sticky-complex-example.html
78 lines (67 loc) · 3.54 KB
/
table-sticky-complex-example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<div>
<button mat-raised-button (click)="tables.push(tables.length)">Add table</button>
<button mat-raised-button (click)="tables.pop()">Remove table</button>
</div>
<div>
Sticky Headers:
<mat-button-toggle-group multiple [value]="['header-1']"
#stickyHeaders="matButtonToggleGroup"
class="example-sticky-toggle-group">
<mat-button-toggle value="header-1"> Row 1 </mat-button-toggle>
<mat-button-toggle value="header-2"> Row 2 </mat-button-toggle>
</mat-button-toggle-group>
</div>
<div>
Sticky Footers:
<mat-button-toggle-group multiple [value]="['footer-1']"
#stickyFooters="matButtonToggleGroup"
class="example-sticky-toggle-group">
<mat-button-toggle value="footer-1"> Row 1 </mat-button-toggle>
<mat-button-toggle value="footer-2"> Row 2 </mat-button-toggle>
</mat-button-toggle-group>
</div>
<div>
Sticky Columns:
<mat-button-toggle-group multiple [value]="['position', 'symbol']"
#stickyColumns="matButtonToggleGroup"
class="example-sticky-toggle-group">
<mat-button-toggle value="position"> Position </mat-button-toggle>
<mat-button-toggle value="name"> Name </mat-button-toggle>
<mat-button-toggle value="weight"> Weight </mat-button-toggle>
<mat-button-toggle value="symbol"> Symbol </mat-button-toggle>
</mat-button-toggle-group>
</div>
<section class="example-container mat-elevation-z8" tabindex="0">
<table mat-table [dataSource]="dataSource" *ngFor="let table of tables">
<ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
<th mat-header-cell *matHeaderCellDef> Position </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
<td mat-footer-cell *matFooterCellDef> Position Footer </td>
</ng-container>
<ng-container matColumnDef="name" [sticky]="isSticky(stickyColumns, 'name')">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
<td mat-footer-cell *matFooterCellDef> Name Footer </td>
</ng-container>
<ng-container matColumnDef="weight" [stickyEnd]="isSticky(stickyColumns, 'weight')">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
<td mat-footer-cell *matFooterCellDef> Weight Footer </td>
</ng-container>
<ng-container matColumnDef="symbol" [stickyEnd]="isSticky(stickyColumns, 'symbol')">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
<td mat-footer-cell *matFooterCellDef> Symbol Footer </td>
</ng-container>
<ng-container matColumnDef="filler">
<th mat-header-cell *matHeaderCellDef> Filler header cell </th>
<td mat-cell *matCellDef="let element"> Filler data cell </td>
<td mat-footer-cell *matFooterCellDef> Filler footer cell </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-1')"></tr>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-2')"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></tr>
</table>
</section>