How to use footer with colspan to align total in mat table

Question

Need to show the total below the amount column.

Currently, I'm using the margin-left property to show the total below the amount column. Since this is not working properly, could someone suggest to me how to achieve this using a table footer with colspan?

Demo

Does this answer your question? [How colSpan and row Span added to material table Header Angular 7?](https://stackoverflow.com/questions/55701270/how-colspan-and-row-span-added-to-material-table-header-angular-7) — Wandrille, May 10 '23 at 06:37
@Wandrille I need this total should be displayed at the end of the table also I think the table footer needs to be used here. — its me, May 10 '23 at 06:40
Just read the official docs on the `mat-footer-row` [here](https://material.angular.io/components/table/overview#footer-row). They even provide an working example [here](https://material.angular.io/components/table/examples#table-footer-row). — TotallyNewb, May 10 '23 at 06:45
@TotallyNewb thanks for the document I can able to do it https://stackblitz.com/edit/kp2rjx?file=src%2Fapp%2Ftable-footer-row-example.ts,src%2Fapp%2Ftable-footer-row-example.html — its me, May 10 '23 at 07:14

score 1 · Answer 1 · answered May 10 '23 at 07:04

1

You need the mat-footer-row as mentioned in the comment.

Add this line:

<tr mat-footer-row *matFooterRowDef="columnsToDisplay"></tr>

after <tr mat-row> element.

Make sure each element contains matColumnDef attribute must have:

<td mat-footer-cell *matFooterCellDef></td>

For Amount element, the mat-footer-cell should be:

<td mat-footer-cell *matFooterCellDef> Total: {{ getTotal() }} </td>

Demo @ StackBlitz

answered May 10 '23 at 07:04

Yong Shun

35,286
4
24
46

Thanks. i can able to do it https://stackblitz.com/edit/kp2rjx?file=src%2Fapp%2Ftable-footer-row-example.ts,src%2Fapp%2Ftable-footer-row-example.html – its me May 10 '23 at 07:15

score 0 · Answer 2 · answered May 10 '23 at 07:20

I am able to do it using mat-footer-row

Below need to add for each column

<td mat-footer-cell *matFooterCellDef></td>

For amount column

<td mat-footer-cell *matFooterCellDef>{{getTotalCost() | currency}}</td>

below needs to be added

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>

Demo

How to use footer with colspan to align total in mat table

2 Answers2