Angular - как переместить весь ряд нижнего колонтитула в верхнюю часть таблицы - PullRequest
Новая
       39

Angular - как переместить весь ряд нижнего колонтитула в верхнюю часть таблицы

0 голосов
/ 05 февраля 2020

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

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

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

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

1 Ответ

0 голосов
/ 29 апреля 2020

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

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

`

здесь фото

...