How to conditionally paint a background in a table cell?

Question

I am creating a table with p: dataTable (PrimeFaces), and what I want to do is the background color of the cells depending on the value of their contents. This is different from coloring a row or column - it is a separate cell.

The CSS problem first. If I do this:

<p:column headerText="xyzzy"> <div style="background-color: green"> <h:outputText value="#{rowVar.anumber}" > <f:convertNumber groupingUsed="true" /> </h:outputText> </div> </p:column> 

the background color of only the content is set, not the whole cell. In other words, padding is still the default.

Secondly, I want the style string to be a variable expression. I can add a function to bean support, but how do I access the contents of a table in a method? Will this work?

 <div style="#{bean.computeCSS(rowVar.number}"> 

EDIT:

I figured out a way to make the conditional part, but I still need help with the CSS part. My solution looks like this:

  <p:column headerText="xyzzy"> <div class="#{rowVar.anumber gt 0 ? 'colored' : ''}"> <h:outputText value="#{rowVar.anumber}"> <f:convertNumber groupingUsed="true" /> </h:outputText> </div> </p:column> 

Although I don’t like to be interested in EL, it has the advantage of not needing a bean support method.

However, I still get only the background color, not the whole cell.

Answer 1

You can add the css class to the row and to the column that identifies the cell. Use the dataTable attribute rowStyleClass ( example ). If you want to color multiple lines:

 <p:dataTable value="#{bean.rows}" var="rowVar" rowStyleClass="#{rowVar.firstCol gt 0 ? 'firstColColored' : ''} #{rowVar.secondCol gt 0 ? 'secondColColored' : ''}"> <p:column styleClass="firstCol">... <p:column styleClass="secondCol"> 

CSS

 .firstColColored .firstCol { background: pink; } 

Answer 2

how about adding a complement to your class, with px or percent ...

something like that

 .colored{ background-color:yellow; padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; }