Angular - как переместить всю строку mat-footer-row в верхнюю часть таблицы

Я работаю с таблицей материалов с ng-контейнером, имеющим 3 вещи:

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-контейнеры, но это казалось невероятно избыточным и не работало должным образом. Не работает при перестановке trs. Так что, возможно, может быть какой-то другой хитрый способ определения нескольких заголовков mat без избыточности или просто манипулировать анатомией текущей таблицы, чтобы учесть это, но это то, где мои знания ограничены.

Таким образом, мне нужно переместить строку нижнего колонтитула над данными, где она будет находиться прямо под текущим столбцом заголовка.


person nhmishaq    schedule 05.02.2020    source источник


Ответы (1)


Я решил сделать следующее и украсил несколько стилей, это выглядит так:

        <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>-->

`

вот фото

person Jorge Rivera    schedule 29.04.2020