title: PrimeNG Table [rowHovered] not working on cells where the cell-background is set
body: <p>I have a scrollable <a href="https://www.primefaces.org/primeng/#/treetable" rel="nofollow noreferrer">TreeTable</a> with the <code>rowHover</code>-attribute defined like this:</p>
  
  <pre><code>&lt;p-treeTable [value]="items" [columns]="scrollableCols" [resizableColumns]="true" [frozenColumns]="frozenCols" [scrollable]="true" scrollHeight="550px" frozenWidth="600px" [rowHover]="true" *ngIf="submitFinished"&gt;
  </code></pre>
  
  <p>So I set the background of the second and third columns - I do this like this:</p>
  
  <pre><code>&lt;td style="text-align: center; height: 40px" [ngStyle]="{'background-color' : (col.field=='diff') ? ((getColumnValue(rowData, columns, i) &gt; 0) ? 
                  '#e2fee2' : ((getColumnValue(rowData, columns, i) &lt; 0) ? '#ffa695' : 'white') ) : 'white'}"&gt; &lt;!-- 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 --&gt;
  </code></pre>
  
  <p>This works out completely fine, sadly the <code>rowHover</code> is not only hovering the cells where I did not change the background. Is there a chance to avoid this and still hover the complete row? It is fine if you cannot see the colored background while the row hovers.</p>
  
  <p><a href="https://i.stack.imgur.com/rro92.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rro92.png" alt="enter image description here"></a></p>
  
  <p>Edit:</p>
  
  <p>I assume that it does that because applying the <code>[ngStyle]</code> "keeps tracking" the value of the field and then applies the color to it, so even the selection from <code>rowHover</code> should be overridden. Sadly I have no idea how to work around that. </p>
  
  <p>This is what I would like it to look like: (example created by not applying <code>[ngStyle]</code> of the <code>&lt;td&gt;</code> mentioned above)</p>
  
  <p><a href="https://i.stack.imgur.com/2f4yh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2f4yh.png" alt="enter image description here"></a></p>
  
  <p>Still, the code if it helps:</p>
  
  <p>The full scrollable body (where it should apply):</p>
  
  <pre><code>&lt;ng-template pTemplate="body" let-rowData="rowData" let-columns="columns"&gt;
      &lt;tr *ngIf="!rowData.hours"&gt;&lt;td *ngFor="let col of columns" style="height: 60px" class="psp-row-cell"&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr *ngIf="rowData.hours"&gt;
        &lt;ng-template ngFor let-i="index" let-col [ngForOf]="columns"&gt;
          &lt;ng-template [ngIf]="rowDataIsEmpty(rowData, col)" [ngIfElse]="editableColumn"&gt;
            &lt;td class="blocked-cell" style="height: 40px"&gt;
            &lt;/td&gt;
          &lt;/ng-template&gt;
          &lt;ng-template #editableColumn&gt;
            &lt;ng-template [ngIf]="col.field=='plan'" [ngIfElse]="blockedCell"&gt;
                &lt;td style="text-align: center; height: 40px" [ttEditableColumn]="rowData"&gt; 
                    &lt;p-treeTableCellEditor&gt;
                        &lt;ng-template pTemplate="input"&gt;
                            &lt;input pInputText type="text" style="text-align: center" [ngModel]="getColumnValue(rowData, columns, i)" (ngModelChange)="setColumnValue(rowData, columns, i, $event)" [ngStyle]="{'width':'100%'}"&gt;
                        &lt;/ng-template&gt;
                        &lt;ng-template pTemplate="output"&gt;{{getColumnValue(rowData, columns, i)}}&lt;/ng-template&gt;
                    &lt;/p-treeTableCellEditor&gt;
                  &lt;/td&gt;
            &lt;/ng-template&gt;
            &lt;ng-template #blockedCell&gt;
              &lt;td style="text-align: center; height: 40px" [ngStyle]="{'background-color' : (col.field=='diff') ? ((getColumnValue(rowData, columns, i) &gt; 0) ? 
                  '#e2fee2' : ((getColumnValue(rowData, columns, i) &lt; 0) ? '#ffa695' : 'white') ) : 'white'}"&gt; 
                {{getColumnValue(rowData, columns, i)}}
              &lt;/td&gt;
            &lt;/ng-template&gt;
          &lt;/ng-template&gt;
        &lt;/ng-template&gt;
      &lt;/tr&gt;
    &lt;/ng-template&gt;
  </code></pre>
  
  <p>The getColumnValue:</p>
  
  <pre><code>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 =&gt; entry.year === col.year &amp;&amp; entry.month === col.month)[col.field];
        col = columns[i-1];
        val = val - rowData['hours'].find(entry =&gt; entry.year === col.year &amp;&amp; entry.month === col.month)[col.field];
      } else {
        val = rowData['hours'].find(entry =&gt; entry.year === col.year &amp;&amp; entry.month === col.month)[col.field];
      }
      return val;
    }
  </code></pre>