Angular Material Table Cell Formatting

Question

I'm using angular material table for displaying data and dyanmically binding the table header and table data. Is there any way to format particaular column's cell content dynamically?.

For example how can i format the value of amount column right aligned?

My code is as below :

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

And my data is like

[
  {
    "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

If you want to style cells on a mat-table you can target every element inside by using the ::ng-deep CSS selector like this:

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

You can also use [ngClass] to apply classes to a cell based on a condition like this:

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

and you just define the classes in your CSS file

Answer 2

At our project at work we use a lot of mat-tables. I've never had luck making any kind of truly customized table by ngFor-ing over the <ng-container> . Almost every one of our tables is built by individually defining each <ng-container> for each column.

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

The advantage of this is you can define each column with the styles you want, as well as add more property-specific options such as pipes and/or the elvis operator.

Answer 3

Best solution is to use selector in css as below where 'column_name' is the name you provide in 'matColumnDef'

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

if your column 'matColumnDef' is 'amount'

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

Answer 4

You can dynamically set the column alignment to right by adding something like, [align]="expression ? 'right' : ''" to the <td> element, so for your code this would look like:

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

I wanted a similar thing, but more of complex displaying style on a particular column. I am using a loop to display all desired columns.

Maybe this code snippet helps

I used a simple ngIf inside mat-header-cell and mat-cell to control that.

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