У меня есть таблица динамических 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
МОЯ ПОЛЬЗОВАТЕЛЬСКАЯ ГОЛОВКА
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'
},
];