CODEWITHSUNDEEP
angularangular-materialangular-material-tableng-container
nhmishaq
nhmishaq

Reputation: 21

Angular - how to move entire mat-footer-row to top of table

I am working with a material table with ng-container having 3 things:

a) th(mat-header-cell)
b) td(mat-cell)
c) td(mat-footer-cell)

In this table, the footer row (totals of data in preceding rows) is currently displaying on the bottom of the table as expected but for this business case, they need the totals row (mat-footer-cell) to appear at top. How should I approach this?

Here is a snippet of the table: 

<table mat-table class="status-table" [dataSource]="statSource" matSort #statSort="matSort">

            <ng-container matColumnDef="argName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header class="make-blue" scope="col">
                    ArgName
                </th>
                <td mat-cell class="cursor-pointer"
                    (click)="setTableProperties(this.formatMyData, 'first', 'second', arg.argTitle)"
                    *matCellDef="let area">
                    {{ arg.argTitle | uppercase }}
                </td>
                <td mat-footer-cell *matFooterCellDef>Total</td>
            </ng-container>

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

</table>

I tried making multiple table headers and separating the footers into their own ng-containers but that seemed incredibly redundant and didn't work properly. It doesn't work when rearranging the trs. So perhaps there might be some other crafty way of defining multiple mat-headers w/o redundancy or simply manipulating the current table anatomy to accommodate this, but that's where my knowledge is limited.

So in summary, I need to move the footer row above the data, where it will reside right underneath the current header column.

Upvotes: 0

Views: 2225

Answers (1)

Jorge Rivera
Jorge Rivera

Reputation: 51

I chose to do the following and adorned with some styles it looks like this: `

        <ng-container matColumnDef="argName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="make-blue" scope="col">
                <div>ArgName</div>
        <div>Total</div>
            </th>
            <td mat-cell class="cursor-pointer"
                (click)="setTableProperties(this.formatMyData, 'first', 'second', arg.argTitle)"
                *matCellDef="let area">
                {{ arg.argTitle | uppercase }}
            </td>
            <!--<td mat-footer-cell *matFooterCellDef>Total</td>-->
        </ng-container>

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

`

here photo

Upvotes: 0

Related Questions