Skip to content

Commit ff72a2f

Browse files
MichaelJamesParsonswagnermaciel
MichaelJamesParsons
authored and
wagnermaciel
committed
feat(cdk/table): add HTML elements to sticky styler update (angular#21704)
1 parent 1d4c34e commit ff72a2f

File tree

4 files changed

+57
-45
lines changed

4 files changed

+57
-45
lines changed

‎src/cdk/table/sticky-position-listener.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const STICKY_POSITIONING_LISTENER =
1515
export type StickySize = number|null|undefined;
1616

1717
export interface StickyUpdate {
18+
elements?: ReadonlyArray<HTMLElement[]|undefined>;
1819
sizes: StickySize[];
1920
}
2021

‎src/cdk/table/sticky-styler.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -227,9 +227,11 @@ export class StickyStyler {
227227
}
228228

229229
if (position === 'top') {
230-
this._positionListener?.stickyHeaderRowsUpdated({sizes: stickyCellHeights});
230+
this._positionListener?.stickyHeaderRowsUpdated(
231+
{sizes: stickyCellHeights, elements: elementsToStick});
231232
} else {
232-
this._positionListener?.stickyFooterRowsUpdated({sizes: stickyCellHeights});
233+
this._positionListener?.stickyFooterRowsUpdated(
234+
{sizes: stickyCellHeights, elements: elementsToStick});
233235
}
234236
});
235237
}

‎src/cdk/table/table.spec.ts

Lines changed: 51 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -921,18 +921,19 @@ describe('CdkTable', () => {
921921
headerRows[0].getBoundingClientRect().height,
922922
undefined,
923923
headerRows[2].getBoundingClientRect().height,
924-
]
924+
],
925+
elements: [[headerRows[0]], undefined, [headerRows[2]]],
925926
});
926-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
927+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
927928
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
928929
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
929930

930931
component.stickyHeaders = [];
931932
fixture.detectChanges();
932933
flushMicrotasks();
933934
expectNoStickyStyles(headerRows);
934-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
935-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
935+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
936+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
936937
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
937938
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
938939
}));
@@ -948,13 +949,14 @@ describe('CdkTable', () => {
948949
expectNoStickyStyles([footerRows[1]]);
949950
expectStickyStyles(footerRows[2], '10', {bottom: '0px'});
950951
expectStickyBorderClass(footerRows[2]);
951-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
952+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
952953
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({
953954
sizes: [
954955
footerRows[2].getBoundingClientRect().height,
955956
undefined,
956-
footerRows[1].getBoundingClientRect().height,
957-
]
957+
footerRows[0].getBoundingClientRect().height,
958+
],
959+
elements: [[footerRows[2]], undefined, [footerRows[0]]],
958960
});
959961
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
960962
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
@@ -963,8 +965,8 @@ describe('CdkTable', () => {
963965
fixture.detectChanges();
964966
flushMicrotasks();
965967
expectNoStickyStyles(footerRows);
966-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
967-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
968+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
969+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
968970
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
969971
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
970972
}));
@@ -1008,8 +1010,8 @@ describe('CdkTable', () => {
10081010
expectStickyBorderClass(cells[2], {left: true});
10091011
expectNoStickyStyles([cells[1], cells[3], cells[4], cells[5]]);
10101012
});
1011-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
1012-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
1013+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
1014+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
10131015
expect(component.mostRecentStickyColumnsUpdate).toEqual({
10141016
sizes: [
10151017
getCells(dataRows[0])[0].getBoundingClientRect().width,
@@ -1026,8 +1028,8 @@ describe('CdkTable', () => {
10261028
headerRows.forEach(row => expectNoStickyStyles(getHeaderCells(row)));
10271029
dataRows.forEach(row => expectNoStickyStyles(getCells(row)));
10281030
footerRows.forEach(row => expectNoStickyStyles(getFooterCells(row)));
1029-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
1030-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
1031+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
1032+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
10311033
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
10321034
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
10331035
}));
@@ -1061,8 +1063,8 @@ describe('CdkTable', () => {
10611063
expectStickyBorderClass(cells[3], {right: true});
10621064
expectNoStickyStyles([cells[0], cells[1], cells[2], cells[4]]);
10631065
});
1064-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
1065-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
1066+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
1067+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
10661068
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
10671069
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({
10681070
sizes: [
@@ -1078,8 +1080,8 @@ describe('CdkTable', () => {
10781080
headerRows.forEach(row => expectNoStickyStyles(getHeaderCells(row)));
10791081
dataRows.forEach(row => expectNoStickyStyles(getCells(row)));
10801082
footerRows.forEach(row => expectNoStickyStyles(getFooterCells(row)));
1081-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
1082-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
1083+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
1084+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
10831085
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
10841086
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
10851087
}));
@@ -1166,10 +1168,12 @@ describe('CdkTable', () => {
11661168
expectNoStickyStyles([footerRows[0], footerRows[1]]);
11671169

11681170
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({
1169-
sizes: [headerRows[0].getBoundingClientRect().height]
1171+
sizes: [headerRows[0].getBoundingClientRect().height],
1172+
elements: [[headerRows[0]]],
11701173
});
11711174
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({
1172-
sizes: [footerRows[2].getBoundingClientRect().height]
1175+
sizes: [footerRows[2].getBoundingClientRect().height],
1176+
elements: [[footerRows[2]]],
11731177
});
11741178
expect(component.mostRecentStickyColumnsUpdate).toEqual({
11751179
sizes: [getCells(dataRows[0])[0].getBoundingClientRect().width]
@@ -1189,8 +1193,8 @@ describe('CdkTable', () => {
11891193
dataRows.forEach(row => expectNoStickyStyles([row, ...getCells(row)]));
11901194
footerRows.forEach(row => expectNoStickyStyles([row, ...getFooterCells(row)]));
11911195

1192-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
1193-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
1196+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
1197+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
11941198
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
11951199
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
11961200
}));
@@ -1230,9 +1234,10 @@ describe('CdkTable', () => {
12301234
headerRows[0].getBoundingClientRect().height,
12311235
undefined,
12321236
headerRows[2].getBoundingClientRect().height,
1233-
]
1237+
],
1238+
elements: [getHeaderCells(headerRows[0]), undefined, getHeaderCells(headerRows[2])],
12341239
});
1235-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
1240+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
12361241
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
12371242
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
12381243

@@ -1241,8 +1246,8 @@ describe('CdkTable', () => {
12411246
flushMicrotasks();
12421247
expectNoStickyStyles(headerRows); // No sticky styles on rows for native table
12431248
headerRows.forEach(row => expectNoStickyStyles(getHeaderCells(row)));
1244-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
1245-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
1249+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
1250+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
12461251
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
12471252
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
12481253
}));
@@ -1263,13 +1268,14 @@ describe('CdkTable', () => {
12631268
});
12641269
expectNoStickyStyles(getFooterCells(footerRows[1]));
12651270
expectNoStickyStyles(footerRows); // No sticky styles on rows for native table
1266-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
1271+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
12671272
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({
12681273
sizes: [
12691274
footerRows[2].getBoundingClientRect().height,
12701275
undefined,
1271-
footerRows[1].getBoundingClientRect().height,
1272-
]
1276+
footerRows[0].getBoundingClientRect().height,
1277+
],
1278+
elements: [getFooterCells(footerRows[2]), undefined, getFooterCells(footerRows[0])],
12731279
});
12741280
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
12751281
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
@@ -1279,8 +1285,8 @@ describe('CdkTable', () => {
12791285
flushMicrotasks();
12801286
expectNoStickyStyles(footerRows); // No sticky styles on rows for native table
12811287
footerRows.forEach(row => expectNoStickyStyles(getFooterCells(row)));
1282-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
1283-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
1288+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
1289+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
12841290
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
12851291
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
12861292
}));
@@ -1333,14 +1339,14 @@ describe('CdkTable', () => {
13331339
expectStickyBorderClass(cells[2], {left: true});
13341340
expectNoStickyStyles([cells[1], cells[3], cells[4], cells[5]]);
13351341
});
1336-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
1337-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
1342+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
1343+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
13381344
expect(component.mostRecentStickyColumnsUpdate).toEqual({
13391345
sizes: [
13401346
getCells(dataRows[0])[0].getBoundingClientRect().width,
13411347
null,
13421348
getCells(dataRows[0])[2].getBoundingClientRect().width,
1343-
]
1349+
],
13441350
});
13451351
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
13461352

@@ -1350,8 +1356,8 @@ describe('CdkTable', () => {
13501356
headerRows.forEach(row => expectNoStickyStyles(getHeaderCells(row)));
13511357
dataRows.forEach(row => expectNoStickyStyles(getCells(row)));
13521358
footerRows.forEach(row => expectNoStickyStyles(getFooterCells(row)));
1353-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
1354-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
1359+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
1360+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
13551361
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
13561362
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
13571363
}));
@@ -1385,8 +1391,8 @@ describe('CdkTable', () => {
13851391
expectStickyBorderClass(cells[3], {right: true});
13861392
expectNoStickyStyles([cells[0], cells[1], cells[2], cells[4]]);
13871393
});
1388-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
1389-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
1394+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
1395+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
13901396
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
13911397
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({
13921398
sizes: [
@@ -1402,8 +1408,8 @@ describe('CdkTable', () => {
14021408
headerRows.forEach(row => expectNoStickyStyles(getHeaderCells(row)));
14031409
dataRows.forEach(row => expectNoStickyStyles(getCells(row)));
14041410
footerRows.forEach(row => expectNoStickyStyles(getFooterCells(row)));
1405-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
1406-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
1411+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
1412+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
14071413
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
14081414
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
14091415
}));
@@ -1457,10 +1463,12 @@ describe('CdkTable', () => {
14571463
expectNoStickyStyles(footerRows);
14581464

14591465
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({
1460-
sizes: [headerRows[0].getBoundingClientRect().height]
1466+
sizes: [headerRows[0].getBoundingClientRect().height],
1467+
elements: [getHeaderCells(headerRows[0])],
14611468
});
14621469
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({
1463-
sizes: [footerRows[2].getBoundingClientRect().height]
1470+
sizes: [footerRows[2].getBoundingClientRect().height],
1471+
elements: [getFooterCells(footerRows[2])],
14641472
});
14651473
expect(component.mostRecentStickyColumnsUpdate).toEqual({
14661474
sizes: [getCells(dataRows[0])[0].getBoundingClientRect().width]
@@ -1480,8 +1488,8 @@ describe('CdkTable', () => {
14801488
dataRows.forEach(row => expectNoStickyStyles([row, ...getCells(row)]));
14811489
footerRows.forEach(row => expectNoStickyStyles([row, ...getFooterCells(row)]));
14821490

1483-
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: []});
1484-
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: []});
1491+
expect(component.mostRecentStickyHeaderRowsUpdate).toEqual({sizes: [], elements: []});
1492+
expect(component.mostRecentStickyFooterRowsUpdate).toEqual({sizes: [], elements: []});
14851493
expect(component.mostRecentStickyColumnsUpdate).toEqual({sizes: []});
14861494
expect(component.mostRecentStickyEndColumnsUpdate).toEqual({sizes: []});
14871495
}));

‎tools/public_api_guard/cdk/table.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -354,6 +354,7 @@ export declare class StickyStyler {
354354
}
355355

356356
export interface StickyUpdate {
357+
elements?: ReadonlyArray<HTMLElement[] | undefined>;
357358
sizes: StickySize[];
358359
}
359360

0 commit comments

Comments
 (0)