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.

Author: crisbeto

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;
       }
 

src/cdk/table/table.spec.ts

@@ -844,6 +844,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();
@@ -956,11 +964,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 = [];
@@ -1125,7 +1133,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'});