web-dev-qa-db-ja.com

Angular材料表のセルのフォーマット

データを表示し、テーブルヘッダーとテーブルデータを動的にバインドするためにangularマテリアルテーブルを使用しています。特定の列のセルコンテンツを動的にフォーマットする方法はありますか？.

たとえば、金額列の値を右揃えにするにはどうすればよいですか？

私のコードは以下の通りです：

<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"
  }
]
javascriptangularangular-materialangular-material-table
4
Tom

最良の解決策は、以下のようにcssでセレクターを使用することです。ここで、「column_name」は「matColumnDef」で指定した名前です。

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

列「matColumnDef」が「amount」の場合

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

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ファイルでクラスを定義するだけです

3
IvanS95

作業中のプロジェクトでは、多くのマットテーブルを使用しています。 <ng-container>のngFor-ingを使用して、本当にカスタマイズされたテーブルを作成することはできませんでした。ほとんどすべてのテーブルは、各列の各<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演算子などのプロパティ固有のオプションを追加できることです。

2
Jesse

[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>
0
alisonmsmith