Таблица сортировки угловых материалов - Как выровнять текст заголовка вправо?

Question

Я использую таблицу угловых материалов.

Я могу установить выравнивание столбцов вправо.

HTML:

<table mat-table [dataSource]="dataSource">
...
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    ...

CSS:

.mat-column-position {
    text-align: right;
}

Но когда я использую функцию сортировки, заголовок столбца больше не выравнивается по правому краю

<table mat-table [dataSource]="dataSource" matSort>
...
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
    ...

Я предполагаю, что проблема связана с символом "сортировки".

Есть мысли?

Живая демоверсия

Answer 1

Вы правы, это происходит от символа сортировки. Одним из способов исправить это с помощью CSS было бы просто изменить direction этого заголовка справа налево.

.mat-header-cell.mat-column-position {
    direction: rtl;
}

/* If you want the same default margin for the sort icon */
:host ::ng-deep .mat-header-cell.mat-column-symbol .mat-sort-header-arrow {
    margin-right: 6px;
    margin-left: 0px;
}

Answer 2

Кроме того, похоже, что использование атрибута arrowPosition дает тот же результат.

<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition='before'> No. </th>