diff --git a/src/cdk/table/sticky-styler.ts b/src/cdk/table/sticky-styler.ts index a2ee0eec752c..05f6bd35bd96 100644 --- a/src/cdk/table/sticky-styler.ts +++ b/src/cdk/table/sticky-styler.ts @@ -119,12 +119,14 @@ export class StickyStyler { } // If positioning the rows to the bottom, reverse their order when evaluating the sticky - // position such that the last row stuck will be "bottom: 0px" and so on. - const rows = position === 'bottom' ? rowsToStick.reverse() : rowsToStick; + // position such that the last row stuck will be "bottom: 0px" and so on. Note that the + // sticky states need to be reversed as well. + const rows = position === 'bottom' ? rowsToStick.slice().reverse() : rowsToStick; + const states = position === 'bottom' ? stickyStates.slice().reverse() : stickyStates; let stickyHeight = 0; for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) { - if (!stickyStates[rowIndex]) { + if (!states[rowIndex]) { continue; } diff --git a/src/cdk/table/table.spec.ts b/src/cdk/table/table.spec.ts index 5d0c9043787c..bc5a447ad723 100644 --- a/src/cdk/table/table.spec.ts +++ b/src/cdk/table/table.spec.ts @@ -898,6 +898,14 @@ describe('CdkTable', () => { expectNoStickyStyles(footerRows); }); + it('should stick the correct footer row', () => { + component.stickyFooters = ['footer-3']; + fixture.detectChanges(); + + expectStickyStyles(footerRows[2], '10', {bottom: '0px'}); + expectNoStickyStyles([footerRows[0], footerRows[1]]); + }); + it('should stick and unstick left columns', () => { component.stickyStartColumns = ['column-1', 'column-3']; fixture.detectChanges(); @@ -1010,11 +1018,11 @@ describe('CdkTable', () => { }); let footerCells = getFooterCells(footerRows[0]); - expectStickyStyles(footerRows[0], '10', {bottom: '0px'}); + expectStickyStyles(footerRows[2], '10', {bottom: '0px'}); expectStickyStyles(footerCells[0], '1', {left: '0px'}); expectStickyStyles(footerCells[5], '1', {right: '0px'}); expectNoStickyStyles([footerCells[1], footerCells[2], footerCells[3], footerCells[4]]); - expectNoStickyStyles([footerRows[1], footerRows[2]]); + expectNoStickyStyles([footerRows[0], footerRows[1]]); component.stickyHeaders = []; component.stickyFooters = []; @@ -1179,7 +1187,7 @@ describe('CdkTable', () => { expectNoStickyStyles([cells[1], cells[2], cells[3], cells[4]]); }); - const footerCells = getFooterCells(footerRows[0]); + const footerCells = getFooterCells(footerRows[2]); expectStickyStyles(footerCells[0], '11', {bottom: '0px', left: '0px'}); expectStickyStyles(footerCells[1], '10', {bottom: '0px'}); expectStickyStyles(footerCells[2], '10', {bottom: '0px'});