I am working with a scrollable TreeTable where I have defined the rowHover attribute in the following manner:
<p-treeTable [value]="items" [columns]="scrollableCols" [resizableColumns]="true" [frozenColumns]="frozenCols" [scrollable]="true" scrollHeight="550px" frozenWidth="600px" [rowHover]="true" *ngIf="submitFinished">
I have customized the background of the second and third columns with the following code:
<td style="text-align: center; height: 40px" [ngStyle]="{'background-color' : (col.field=='diff') ? ((getColumnValue(rowData, columns, i) > 0) ?
'#e2fee2' : ((getColumnValue(rowData, columns, i) < 0) ? '#ffa695' : 'white') ) : 'white'}"> <!-- this code only applies on each 2nd and 3rd column, not the first one. The second is always white, the third is either #ffa695, #e2fee2 or white - the first still has its default value -->
Although this approach works well, the rowHover now extends to the cells with unchanged backgrounds. Is there a way to prevent this and still have the entire row highlighted on hover, even if the colored background is not visible during hover?
https://i.sstatic.net/rro92.png
Edit:
I suspect that the issue arises because the [ngStyle] keeps track of the field values and overrides the rowHover selection. I am unsure of how to resolve this.
Here is the desired outcome I am aiming for (example without applying the [ngStyle] of the mentioned <td>):
https://i.sstatic.net/2f4yh.png
The relevant code snippet:
The scrollable body (where the changes should be applied):
<ng-template pTemplate="body" let-rowData="rowData" let-columns="columns">
<tr *ngIf="!rowData.hours"><td *ngFor="let col of columns" style="height: 60px" class="psp-row-cell"></td></tr>
<tr *ngIf="rowData.hours">
<ng-template ngFor let-i="index" let-col [ngForOf]="columns">
<ng-template [ngIf]="rowDataIsEmpty(rowData, col)" [ngIfElse]="editableColumn">
<td class="blocked-cell" style="height: 40px">
</td>
</ng-template>
<ng-template #editableColumn>
<ng-template [ngIf]="col.field=='plan'" [ngIfElse]="blockedCell">
<td style="text-align: center; height: 40px" [ttEditableColumn]="rowData">
<p-treeTableCellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" style="text-align: center" [ngModel]="getColumnValue(rowData, columns, i)" (ngModelChange)="setColumnValue(rowData, columns, i, $event)" [ngStyle]="{'width':'100%'}">
</ng-template>
<ng-template pTemplate="output">{{getColumnValue(rowData, columns, i)}}</ng-template>
</p-treeTableCellEditor>
</td>
</ng-template>
<ng-template #blockedCell>
<td style="text-align: center; height: 40px" [ngStyle]="{'background-color' : (col.field=='diff') ? ((getColumnValue(rowData, columns, i) > 0) ?
'#e2fee2' : ((getColumnValue(rowData, columns, i) < 0) ? '#ffa695' : 'white') ) : 'white'}">
{{getColumnValue(rowData, columns, i)}}
</td>
</ng-template>
</ng-template>
</template>
</tr>
</ng-template>
The function getColumnValue:
getColumnValue(rowData: any[], columns: any, i: number): number {
let col = columns[i];
let val;
if (col.field == 'diff') {
col = columns[i-2];
val = rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
col = columns[i-1];
val = val - rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
} else {
val = rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
}
return val;
}