Угловое форматирование ячейки таблицы материалов

Question

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

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

Мой код, как показано ниже:

<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"> {{ element[col] }} </td>
      </ng-container> 

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

А мои данные как

[
  {
    "REFERENCE_ID": "ENT201810637610",
    "PRODUCT_TYPE": "IMPS",
    "CUSTOMER_REFERENCE": "CUS12123",
    "BENEFICIARY_NAME": "arun",
    "DEBIT_ACCOUNT": "100002258062",
    "AMOUNT": 342234,
    "STAGE_CODE": "FULLFILMENT",
    "STATUS_CODE": "NEW"
  },
  {
    "REFERENCE_ID": "ENT201808820426",
    "PRODUCT_TYPE": "IMPS",
    "CUSTOMER_REFERENCE": "12121",
    "BENEFICIARY_NAME": "Arun",
    "DEBIT_ACCOUNT": "32423424",
    "AMOUNT": 700,
    "STAGE_CODE": "INITIATION",
    "STATUS_CODE": "NEW"
  }
]

Answer 1

Вы можете динамически установить выравнивание столбцов вправо, добавив что-то вроде [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>

Answer 2

В нашем проекте на работе мы используем много мат-таблиц. Мне никогда не удавалось создать действительно персонализированный стол с помощью 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.

Answer 3

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

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

если ваш столбец 'matColumnDef' равен 'сумма'

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

Answer 4

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

::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