Форматирование ячеек таблицы материалов Angular

Лучшее решение - использовать селектор в css, как показано ниже, где 'column_name' - это имя, которое вы указываете в 'matColumnDef'

.mat-column-'column_name'{
   //your custom css 
   text-align: right;
 }

если ваш столбец matColumnDef - это количество

.mat-column-amount{
   //your custom css 
   text-align: right;
 }

Если вы хотите стилизовать ячейки на mat-table, вы можете настроить таргетинг на каждый элемент внутри, используя селектор ::ng-deep CSS следующим образом:

::ng-deep th.mat-header-cell{
    width: 140px;
    min-width: 140px;
}

Вы также можете использовать [ngClass] для применения классов к ячейке на основе такого условия:

 <ng-container matColumnDef="outcome">
  <th mat-header-cell *matHeaderCellDef mat-sort-header class="border"> Outcome </th>
  <td mat-cell *matCellDef="let element" class="font-weight-normal text-center text-capitalize"
  [ngClass]="[element.outcome == '' ? 'not-provided' : 'not-provided',
            element.outcome == 'stopped' ? 'provided-stoped' : 'not-provided']">{{element.outcome == '' ? "not provided" : "provided"}}</span> </td>
</ng-container>

и вы просто определяете классы в своем файле CSS

В нашем проекте на работе мы используем много мат-столов. Мне никогда не удавалось создать действительно настраиваемую таблицу с помощью ngFor-ing поверх <ng-container>. Почти каждая из наших таблиц строится путем индивидуального определения каждого <ng-container> для каждого столбца.

<ng-container matColumnDef="code">
    <th mat-header-cell *matHeaderCellDef> Employee Code </th>
    <td mat-cell *matCellDef="let employee"> {{ employee.code }} </td>
</ng-container>

<ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td mat-cell *matCellDef="let employee"> 
          {{ employee.status?.description }} 
    </td>
</ng-container>

<ng-container matColumnDef="salary">
    <th mat-header-cell *matHeaderCellDef> Salary </th>
    <td mat-cell *matCellDef="let employee"> {{ employee.salary | currency}} </td>
</ng-container>

Преимущество этого заключается в том, что вы можете определить каждый столбец с желаемыми стилями, а также добавить дополнительные параметры, зависящие от свойств, такие как трубы и / или оператор elvis.

Вы можете динамически установить выравнивание столбца вправо, добавив что-то вроде [align]="expression ? 'right' : ''" к элементу <td>, поэтому для вашего кода это будет выглядеть так:

<table mat-table [dataSource]="dataSource" class="" style="width: 100%;">

      <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns; let i = index">
        <th *matHeaderCellDef> {{displayedFields[i].name}}</th>
        <td mat-cell *matCellDef="let element" [align]="col === 'AMOUNT' ? 'right' : ''"> {{ element[col] }} </td>
      </ng-container> 

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

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

Возможно, этот фрагмент кода поможет

Я использовал простой ngIf внутри mat-header-cell и mat-cell, чтобы управлять этим.

<table mat-table [dataSource]="dataSource" class="preview-table">
    <ng-container matColumnDef="{{column}}" *ngFor="let column of dcolumns">

        <th mat-header-cell *matHeaderCellDef>
            <ng-container *ngIf="!(column === 'tagList')">
                {{column}}
            </ng-container>
            <ng-container *ngIf="column === 'tagList'">
                {{column}} h
            </ng-container>
        </th>
        <td mat-cell *matCellDef="let element">
            <ng-container *ngIf="!(column === 'tagList')">
                {{element[column]}}
            </ng-container>
            <ng-container *ngIf="column === 'tagList'">
                {{element[column]}} h
            </ng-container>
        </td>

    </ng-container>

    <!-- other field as per syntax -->

</table>