Add a fixed static row in a angular Mat Table

Question

I have a dynamic table using mat-table where i render the columns from the data object.

 <table #myTable mat-table [dataSource]="dataSource" class="mat-elevation-z8">...

I render the columns

<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>id</th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
...

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

I want to add a static row in the end of the table data where i want to show some sum values from the mat-table columns.

I can provide this row name in the array like: private displayedColumns: string[] = ['id', 'column1', 'column2', 'column3', 'sum']; Where id and other column names are present in my object and mapped accordingly but how can i add this static sum row ?

i don't get your point. you want to add row? or column ? you already have sum column in your table ! — Zulqarnain Jalil
Does this answer your question? How to calculate sum of table columns and show in footer using Angular? — Zulqarnain Jalil
Yes that and this one stackblitz.com/edit/… . So basicly i need to add mat-footer-cell to each element. — Nikola Noxious Dimitrov

ADEEL ADEEL · Accepted Answer · 2020-08-05T13:02:29

You can add a footer to the bottom either you can make it stick to bottom like this Sticky Footer

or you can add non sticky footer Non Sticky footer with added text

Add a fixed static row in a angular Mat Table

1 Answers