How do I keep one row always at the bottom of an Angular Material table when sorting?-CodePudding

I have a table with a list of objects, and a row at the bottom containing the totals.

| name  | value1 | value2 |
---------------------------
| Alice | 1      | 2      |
| Bob   | 2      | 4      |
| Carl  | 3      | 1      |
| TOTAL | 6      | 7      |

I have implemented a custom sort accessor to sort on various properties of my objects, and it's working correctly.

My only problem is that the total row is also being sorted.

i.e. If I sort by name (either ascending or descending) then the row titled TOTAL should always be last.

I can sort TOTAL to the bottom in one direction by returning 'ZZZZZZZZ' as the value from the custom sort accessor when asked for it's name, but that also places that row as the first row when sorting in the other direction!

How do I make sure that the final row in the table is always last, no matter which way the other rows in the table are sorted?

CodePudding user response：

You need to set the MatFooterRowDef input to sticky. API docs are here. Official Stackblitz is here. This question might help you.