Closed
Description
Bug, feature request, or proposal:
BUG: Sticked footer rows in a material table are sticked in the reversed order.
What is the expected behavior?
< table footer row 1 sticky >
< table footer row 2 >
< table footer row 3 >
What is the current behavior?
< table footer row 1 >
< table footer row 2 >
< table footer row 3 sticky > <-- this one was sticked
What are the steps to reproduce?
Create a mat table and add three footer rows, make the first one sticked.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
"@angular/cdk": "^9.2.3",
"@angular/common": "~9.1.6",
"@angular/core": "~9.1.6",
"@angular/material": "^9.2.3",
"typescript": "~3.8.3"
Max OSX 10.15.5 beta
Is there anything else we should know?
This is what I did to fix it:
[file] https://github.com/angular/components/blob/master/src/cdk/table/sticky-styler.ts
[function] stickRows(rowsToStick: HTMLElement[], stickyStates: boolean[], position: 'top' | 'bottom') {...}
After line 123
[line 123] const rows = position === 'bottom' ? rowsToStick.reverse() : rowsToStick;
Add
stickyStates = position === "bottom" ? stickyStates.reverse() : stickyStates;