Skip to content

Commit ceb0066

Browse files
kseamonmmalerba
kseamon
authored and
mmalerba
committed
fix(material-experimental/mdc-table): Fix sticky scrolling (#21211)
Also adds some demos that show it working and how to work around some of the other style differences from the original MatTable. (cherry picked from commit b6be078)
1 parent 8ee9369 commit ceb0066

File tree

6 files changed

+226
-31
lines changed

6 files changed

+226
-31
lines changed

‎src/dev-app/mdc-table/BUILD.bazel‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ ng_module(
1212
],
1313
deps = [
1414
"//src/material-experimental/mdc-table",
15+
"//src/material/icon",
1516
"@npm//@angular/router",
1617
],
1718
)

‎src/dev-app/mdc-table/mdc-table-demo-module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@
77
*/
88

99
import {NgModule} from '@angular/core';
10+
import {MatIconModule} from '@angular/material/icon';
1011
import {MatTableModule} from '@angular/material-experimental/mdc-table';
1112
import {RouterModule} from '@angular/router';
1213
import {MdcTableDemo} from './mdc-table-demo';
1314

1415
@NgModule({
1516
imports: [
17+
MatIconModule,
1618
MatTableModule,
1719
RouterModule.forChild([{path: '', component: MdcTableDemo}]),
1820
],

‎src/dev-app/mdc-table/mdc-table-demo.html‎

Lines changed: 141 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,141 @@
1-
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
2-
<!-- Position Column -->
3-
<ng-container matColumnDef="position">
4-
<th mat-header-cell *matHeaderCellDef> No. </th>
5-
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
6-
</ng-container>
7-
8-
<!-- Name Column -->
9-
<ng-container matColumnDef="name">
10-
<th mat-header-cell *matHeaderCellDef> Name </th>
11-
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
12-
</ng-container>
13-
14-
<!-- Weight Column -->
15-
<ng-container matColumnDef="weight">
16-
<th mat-header-cell *matHeaderCellDef> Weight </th>
17-
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
18-
</ng-container>
19-
20-
<!-- Symbol Column -->
21-
<ng-container matColumnDef="symbol">
22-
<th mat-header-cell *matHeaderCellDef> Symbol </th>
23-
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
24-
</ng-container>
25-
26-
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
27-
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
28-
</table>
1+
<h2> Basic </h2>
2+
<div class="example-container mat-elevation-z8">
3+
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
4+
<!-- Position Column -->
5+
<ng-container matColumnDef="position">
6+
<th mat-header-cell *matHeaderCellDef> No. </th>
7+
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
8+
</ng-container>
9+
10+
<!-- Name Column -->
11+
<ng-container matColumnDef="name">
12+
<th mat-header-cell *matHeaderCellDef> Name </th>
13+
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
14+
</ng-container>
15+
16+
<!-- Weight Column -->
17+
<ng-container matColumnDef="weight">
18+
<th mat-header-cell *matHeaderCellDef> Weight </th>
19+
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
20+
</ng-container>
21+
22+
<!-- Symbol Column -->
23+
<ng-container matColumnDef="symbol">
24+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
25+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
26+
</ng-container>
27+
28+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
29+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
30+
</table>
31+
</div>
32+
33+
<h2> Sticky Columns </h2>
34+
<div class="example-container mat-elevation-z8 example-sticky-columns">
35+
<table mat-table [dataSource]="dataSource">
36+
<!-- Name Column -->
37+
<ng-container matColumnDef="name" sticky>
38+
<th mat-header-cell *matHeaderCellDef> Name </th>
39+
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
40+
</ng-container>
41+
42+
<!-- Position Column -->
43+
<ng-container matColumnDef="position">
44+
<th mat-header-cell *matHeaderCellDef> No. </th>
45+
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
46+
</ng-container>
47+
48+
<!-- Weight Column -->
49+
<ng-container matColumnDef="weight">
50+
<th mat-header-cell *matHeaderCellDef> Weight </th>
51+
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
52+
</ng-container>
53+
54+
<!-- Symbol Column -->
55+
<ng-container matColumnDef="symbol">
56+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
57+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
58+
</ng-container>
59+
60+
<!-- Star Column -->
61+
<ng-container matColumnDef="star" stickyEnd>
62+
<th mat-header-cell *matHeaderCellDef></th>
63+
<td mat-cell *matCellDef="let element">
64+
<mat-icon>more_vert</mat-icon>
65+
</td>
66+
</ng-container>
67+
68+
<tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr>
69+
<tr mat-row *matRowDef="let row; columns: displayedColumns2;"></tr>
70+
</table>
71+
</div>
72+
73+
<h2> Sticky Header </h2>
74+
<div class="example-container mat-elevation-z8 example-sticky-header">
75+
<table mat-table [dataSource]="dataSource">
76+
77+
<!-- Position Column -->
78+
<ng-container matColumnDef="position">
79+
<th mat-header-cell *matHeaderCellDef> No. </th>
80+
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
81+
</ng-container>
82+
83+
<!-- Name Column -->
84+
<ng-container matColumnDef="name">
85+
<th mat-header-cell *matHeaderCellDef> Name </th>
86+
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
87+
</ng-container>
88+
89+
<!-- Weight Column -->
90+
<ng-container matColumnDef="weight">
91+
<th mat-header-cell *matHeaderCellDef> Weight </th>
92+
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
93+
</ng-container>
94+
95+
<!-- Symbol Column -->
96+
<ng-container matColumnDef="symbol">
97+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
98+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
99+
</ng-container>
100+
101+
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
102+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
103+
</table>
104+
</div>
105+
106+
<h2> Sticky Footer </h2>
107+
<div class="example-container mat-elevation-z8 example-sticky-footer">
108+
<table mat-table [dataSource]="dataSource">
109+
<!-- Position Column -->
110+
<ng-container matColumnDef="position">
111+
<th mat-header-cell *matHeaderCellDef> No. </th>
112+
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
113+
<td mat-footer-cell *matFooterCellDef> number </td>
114+
</ng-container>
115+
116+
<!-- Name Column -->
117+
<ng-container matColumnDef="name">
118+
<th mat-header-cell *matHeaderCellDef> Name </th>
119+
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
120+
<td mat-footer-cell *matFooterCellDef> string </td>
121+
</ng-container>
122+
123+
<!-- Weight Column -->
124+
<ng-container matColumnDef="weight">
125+
<th mat-header-cell *matHeaderCellDef> Weight </th>
126+
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
127+
<td mat-footer-cell *matFooterCellDef> number </td>
128+
</ng-container>
129+
130+
<!-- Symbol Column -->
131+
<ng-container matColumnDef="symbol">
132+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
133+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
134+
<td mat-footer-cell *matFooterCellDef> string </td>
135+
</ng-container>
136+
137+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
138+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
139+
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
140+
</table>
141+
</div>

‎src/dev-app/mdc-table/mdc-table-demo.scss‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,80 @@
1+
.example-container {
2+
height: 400px;
3+
margin-bottom: 24px;
4+
width: 550px;
5+
max-width: 100%;
6+
overflow: auto;
7+
}
8+
9+
h2 {
10+
margin: 0 0 16px;
11+
}
12+
113
table {
214
width: 800px;
315
}
16+
17+
.example-sticky-columns {
18+
td {
19+
background-color: white;
20+
}
21+
22+
td.mat-mdc-column-star {
23+
width: 20px;
24+
padding-right: 8px;
25+
}
26+
27+
th.mat-mdc-column-position, td.mat-mdc-column-position {
28+
padding-left: 8px;
29+
}
30+
31+
// Unlike with the classic MatTable, border-right does not work due to border-collapse.
32+
// Using :before to not conflict with popover-edit and column-resize which use :after.
33+
.mat-mdc-table-sticky:first-child,
34+
.mat-mdc-table-sticky:last-child {
35+
&::before {
36+
background-color: #e0e0e0;
37+
bottom: 0;
38+
content: '';
39+
position: absolute;
40+
top: 0;
41+
width: 1px;
42+
}
43+
}
44+
45+
.mat-mdc-table-sticky:first-child::before {
46+
right: 0;
47+
}
48+
49+
.mat-mdc-table-sticky:last-child::before {
50+
left: 0;
51+
}
52+
}
53+
54+
.example-sticky-header {
55+
.mat-mdc-header-row th::before {
56+
background-color: #e0e0e0;
57+
bottom: 0;
58+
content: '';
59+
height: 1px;
60+
left: 0;
61+
position: absolute;
62+
right: 0;
63+
}
64+
}
65+
66+
.example-sticky-footer {
67+
td {
68+
background-color: white;
69+
}
70+
71+
.mat-mdc-footer-row td::before {
72+
background-color: #e0e0e0;
73+
content: '';
74+
height: 1px;
75+
left: 0;
76+
position: absolute;
77+
right: 0;
78+
top: 0;
79+
}
80+
}

‎src/dev-app/mdc-table/mdc-table-demo.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ const ELEMENT_DATA: PeriodicElement[] = [
3434
styleUrls: ['mdc-table-demo.css'],
3535
})
3636
export class MdcTableDemo {
37-
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
38-
dataSource = ELEMENT_DATA;
37+
readonly displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
38+
readonly displayedColumns2 =
39+
['name', 'position', 'weight', 'symbol', 'position', 'weight', 'symbol', 'star'];
40+
readonly dataSource = ELEMENT_DATA;
3941
}

‎src/material-experimental/mdc-table/table.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
@include mdc-data-table-core-styles($query: $mat-base-styles-without-animation-query);
66

7-
.mat-table-sticky {
7+
.mat-mdc-table-sticky {
88
@include vendor-prefixes.position-sticky;
99
}
1010

0 commit comments

Comments
 (0)