Having a small issue styling a row in my table. Essentially, the table consists of 4 rows.
a) If the data under column Title 5 is below 0, then the entire row should display in red color.
b) If the data under column Title 5 is equal to 17, then the complete row should be in orange color.
c) All other rows should NOT have any specific color.
Most of it is functioning correctly. However, I have encountered an issue:
If a row does not have any assigned color, I still want to ensure the check icon is green.
Here is the code that is currently working:
<p-panel class="a-panel-checkIn" header='Compliance Tracking' [toggleable]="true" [collapsed]="isPanelCollapsed" [style]="{ height: '100%' }">
<p-table [value]="complianceTracking" [columns]="cols" selectionMode="single">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [ngClass]="rowData.field5 < 0 ? 'a-danger-row' : (rowData.field5 === 17) ? 'a-yellow-row' : 'a-green-row'">
<td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? 'a-check-icon' : ''">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
</p-panel>