Dynamically Change CSS Style of Cell in <H:Datatable> Column

Dynamically change CSS style of cell in h:dataTable column

You can just use the conditional operator ?: in EL.

E.g.

<c:set var="B" value="#{(list.A / list.C) * 100}" />
<h:outputText value="#{B}" style="display: block; background-color: #{B lt 50 ? 'red' : (B lt 90 ? 'blue' : 'green')}" />

If B is also used elsewhere in the model or controller, then you could add a public int getB() method which just contains return (A/C) * 100; and then use #{list.B} instead of #{B}.

Note that proper design is to use a CSS class instead. E.g.

<h:outputText value="#{B}" styleClass="percentage #{B lt 50 ? 'poor' : (B lt 90 ? 'average' : 'good')}" />

with

td .percentage {
    display: block;
}

.percentage.poor {
    background-color: red;
}

.percentage.average {
    background-color: blue;
}

.percentage.good {
    background-color: green;
}

You can of course also perform the determination of CSS style/class in a getter method as suggested by the other answer, but that's a poor separation of concerns.

Changing h:datatable cell color or style dynamically in JSF

In the standard JSF <h:dataTable> component, the rowClasses attribute is unfortunately not evaluated on a per-row basis. It's evaluated on a per-table basis. Component libraries like Tomahawk and PrimeFaces however support the kind of attribute which you're looking for on their <t:dataTable> and <p:dataTable>.

With the standard JSF <h:dataTable> component you need to supply a comma-separated string of all row classes. This can look something like this:

public String getRowClasses() {
    StringBuilder rowClasses = new StringBuilder();

    for (Comment comment : comments) {
        if (rowClasses.length() > 0) rowClasses.append(",");
        rowClasses.append(comment.getCssClass());
    }

    return rowClasses.toString();
}

which is then to be referenced as

<h:dataTable ... rowClasses="#{post.rowClasses}">

See also:

• <h:dataTable> tag documentation - lists all attributes and the accepted values

Color the rows of JSF datatable is not working

This answer works fine

JSF: Changing datatable cell color dynamically

I am not sure why I am unable to use the var attribute value in the rowClasses attribute

Updated code

XHTML code

<h:outputText value="#{datatableBean.rowClass}" />
<h:dataTable 
value="#{datatableBean.emplList}" var="empl" rowClasses="#{datatableBean.rowClass}" >
    <h:column>
        <f:facet name="header">
            <h:outputText value="Id" />
        </f:facet>
        <h:outputText value="#{empl.id}" />
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="Name" />
        </f:facet>
        <h:outputText value="#{empl.name}" />
    </h:column>
    <h:column>
        <f:facet name="header">
            <h:outputText value="Designation" />
        </f:facet>
        <h:outputText value="#{empl.designation}" />
    </h:column>

</h:dataTable>

and this is the Java code (added this method with the above Java code)

public String getRowClass() {
    StringBuilder rowClasses = new StringBuilder();

    for (Employee employee : emplList) {
        if (rowClasses.length() > 0) rowClasses.append(",");
        if(employee.getDesignation().equalsIgnoreCase("Engineer")) {
             rowClasses.append("employee");
        } else if(employee.getDesignation().equalsIgnoreCase("Manager")) {
            rowClasses.append("manager");
        }

    }
    return rowClasses.toString();
}

and the output works as expected.

Thanks!

How do I conditionally color the background in a table cell?

You can add a css class to the row and to the column too, that identifies a cell.
Use the dataTable's rowStyleClass attribute (example).
If you want to color multiple rows:

<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;
}

How do I modify the Datatable header style in PF Dynamic Columns?

I think you can do

th[role=columnheader] {
     background-image: none;
     ....
}

---

Related Topics