Skip to content

Commit 586b862

Browse files
crisbetojelbourn
authored andcommitted
fix(table): incorrectly sticking multiple footer rows (#19321)
The loop that sticks headers and footers is run in reverse for footers. The problem is that we were only reversing the order of the elements, but not the sticky states which resulted in them being flipped. E.g. setting the last row to be sticky would actually stick the first one. Fixes #19311.
1 parent 53ea1db commit 586b862

File tree

2 files changed

+16
-6
lines changed

2 files changed

+16
-6
lines changed

src/cdk/table/sticky-styler.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,12 +119,14 @@ export class StickyStyler {
119119
}
120120

121121
// If positioning the rows to the bottom, reverse their order when evaluating the sticky
122-
// position such that the last row stuck will be "bottom: 0px" and so on.
123-
const rows = position === 'bottom' ? rowsToStick.reverse() : rowsToStick;
122+
// position such that the last row stuck will be "bottom: 0px" and so on. Note that the
123+
// sticky states need to be reversed as well.
124+
const rows = position === 'bottom' ? rowsToStick.slice().reverse() : rowsToStick;
125+
const states = position === 'bottom' ? stickyStates.slice().reverse() : stickyStates;
124126

125127
let stickyHeight = 0;
126128
for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
127-
if (!stickyStates[rowIndex]) {
129+
if (!states[rowIndex]) {
128130
continue;
129131
}
130132

src/cdk/table/table.spec.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -844,6 +844,14 @@ describe('CdkTable', () => {
844844
expectNoStickyStyles(footerRows);
845845
});
846846

847+
it('should stick the correct footer row', () => {
848+
component.stickyFooters = ['footer-3'];
849+
fixture.detectChanges();
850+
851+
expectStickyStyles(footerRows[2], '10', {bottom: '0px'});
852+
expectNoStickyStyles([footerRows[0], footerRows[1]]);
853+
});
854+
847855
it('should stick and unstick left columns', () => {
848856
component.stickyStartColumns = ['column-1', 'column-3'];
849857
fixture.detectChanges();
@@ -956,11 +964,11 @@ describe('CdkTable', () => {
956964
});
957965

958966
let footerCells = getFooterCells(footerRows[0]);
959-
expectStickyStyles(footerRows[0], '10', {bottom: '0px'});
967+
expectStickyStyles(footerRows[2], '10', {bottom: '0px'});
960968
expectStickyStyles(footerCells[0], '1', {left: '0px'});
961969
expectStickyStyles(footerCells[5], '1', {right: '0px'});
962970
expectNoStickyStyles([footerCells[1], footerCells[2], footerCells[3], footerCells[4]]);
963-
expectNoStickyStyles([footerRows[1], footerRows[2]]);
971+
expectNoStickyStyles([footerRows[0], footerRows[1]]);
964972

965973
component.stickyHeaders = [];
966974
component.stickyFooters = [];
@@ -1125,7 +1133,7 @@ describe('CdkTable', () => {
11251133
expectNoStickyStyles([cells[1], cells[2], cells[3], cells[4]]);
11261134
});
11271135

1128-
const footerCells = getFooterCells(footerRows[0]);
1136+
const footerCells = getFooterCells(footerRows[2]);
11291137
expectStickyStyles(footerCells[0], '11', {bottom: '0px', left: '0px'});
11301138
expectStickyStyles(footerCells[1], '10', {bottom: '0px'});
11311139
expectStickyStyles(footerCells[2], '10', {bottom: '0px'});

0 commit comments

Comments
 (0)