cdk-table / mat-table: держать элемент нижнего колонтитула видимым, когда таблица больше окна - PullRequest
Новая
       13

cdk-table / mat-table: держать элемент нижнего колонтитула видимым, когда таблица больше окна

0 голосов
/ 02 марта 2020

У меня есть cdk-таблица с липким верхним и нижним колонтитулами? в нижний колонтитул я добавил компонент mat-paginator, который я хочу видеть не размером окна, в котором находится моя таблица.

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

Я бы хотел, чтобы он был липким относительно правого края окна.

Вот грубый (закрасить) эскиз того, что я хотел бы получить:

Полноразмерное окно: enter image description here

Уменьшено windows: enter image description here

Вот фрагмент кода, я очистил его от всего бесполезного: 

<table cdk-table [dataSource]="data">
    <!-- Templates -->
    <ng-container *ngFor='let key of columns'>
        <ng-container cdkColumnDef="{{ key.id }}">
                <th cdk-header-cell *cdkHeaderCellDef>
                    {{ key.label }}
                </th>
                <td cdk-cell *cdkCellDef="let row">
                    [...]
                </td>
        </ng-container>
    </ng-container>
    <ng-container cdkColumnDef="pager">
        <!-- Pager -->
        <td cdk-footer-cell *cdkFooterCellDef [attr.colspan]='columns.length'>
            <mat-paginator (page)="PageEventHandler($event) ">
            </mat-paginator>
        </td>
    </ng-container>
    <!-- Définition du tableau -->
    <tr cdk-header-row *cdkHeaderRowDef="columnsIds; sticky: true"></tr>
    <tr cdk-row *cdkRowDef="let row; columns: columnsIds"></tr>
    <tr cdk-footer-row *cdkFooterRowDef="['pager']; sticky: true"></tr>
</table>
...