私は3つのものを持つng-containerを使用してマテリアルテーブルを使用しています:
a) th(マットヘッダーセル)
b) td(マットセル)
c) td(マットフッターセル)
このテーブルでは、現在、フッター行 (前の行のデータの合計) が期待どおりテーブルの下部に表示されていますが、このビジネス ケースでは、合計行 (mat-footer-cell) を上部に表示する必要があります。これにどのようにアプローチすればよいですか?
テーブルのスニペットを次に示します。
<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>
複数のテーブル ヘッダーを作成し、フッターを独自の ng-container に分離しようとしましたが、それは非常に冗長に見え、適切に機能しませんでした。trs を並べ替えると機能しません。したがって、冗長性のない複数のマットヘッダーを定義する、またはこれに対応するために現在のテーブルの構造を単純に操作する他の巧妙な方法があるかもしれませんが、それは私の知識が限られているところです。
要約すると、現在のヘッダー列のすぐ下にあるデータの上にフッター行を移動する必要があります。