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"
}
]
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;
}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With