Заголовки таблицы Dynami c всегда выровнены вправо - PullRequest
0 голосов
/ 27 апреля 2020

У меня есть таблица динамических c с пользовательскими заголовками и с условием для выравнивания текста заголовка и ячейки вправо. Проблема в том, что заголовки всегда выровнены вправо (даже когда я удаляю условие). Я хочу, чтобы заголовок и ячейка были выровнены по правому краю только при выполнении условия.

Как я могу это исправить?

PS: мне нужен этот код стрелки, поскольку заголовок выглядит плохо, когда стрелки следуют за, а заголовки выровнены вправо.

HTML:

<div perfectScrollbar [ngStyle]="{'max-height': '63vh', 'position': 'relative'}"
    class="mat-table__wrapper mat-table__wrapper--dashboard mb-4">

    <table mat-table class="lmat-elevation-z8" [dataSource]="dataSource" matSort matSortActive="id"
        matSortDirection="asc" matSortDisableClear>
        <ng-container *ngFor="let tbl of tableHeader" [matColumnDef]="tbl.columnID">
            <th arrowPosition='before' [class.align-right]="tbl.type === 'alignRight'" mat-header-cell *matHeaderCellDef
                mat-sort-header>
                {{tbl.columnName}}
            </th>

            <td [class.align-right]="tbl.type === 'alignRight'" mat-cell *matCellDef="let element">
                {{element[tbl.columnID]}}
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="getColumns(tableHeader); sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: getColumns(tableHeader)"></tr>
    </table>
</div>

CSS

:host {
    ::ng-deep {
        .mat-table-sticky {
            z-index: 0 !important;
        }

        .mat-header-cell { z-index: 2 !important;}

    }
}

.align-right{
    text-align: right;
    background-color: pink;
}

TABLE enter image description here

МОЯ ПОЛЬЗОВАТЕЛЬСКАЯ ГОЛОВКА

export const tableHeader1 = [
  {
    columnID: 'id',
    columnName: 'ID',
    type: ''
  },
  {
    columnID: 'name',
    columnName: 'Name',
    type: ''
  },
  {
    columnID: 'price',
    columnName: 'Price',
    type: 'alignRight'
  },
  {
    columnID: 'age',
    columnName: 'Age',
    type: 'number'
  },
];
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...