JSF datatable color a row based on condition

Question

I want to color a row of a datatable if the country column's text is 'UK'. Here is my XHTML file:

 <h:dataTable value="#{personBean.persons}" var="p" 
    rowStyleClass="#{p.country eq 'UK' ? 'colored' : null}">
            
       <h:column >
            <f:facet name="header">Country</f:facet>
             "#{p.country}"
      </h:column>
 </h:dataTable>

Here is my CSS file:

.colored {
   background-color: #cceeff;
   color: #FFFFFF;
}

I can't achieve that a row is colored.

Its working for me. Check in the chrome console whether CSS file is linked properly to your page and clear the catch then try again. also remove the double quote from `"#{p.country}"` in your case. — Ahmed Raaj, Jan 03 '18 at 06:48

score 0 · Answer 1 · answered Jan 03 '18 at 07:27

Native JSF h:dataTable will not be evaluate rowStyleClass on per row basis.

It will happen in Primefaces p:dataTable.

One alternative you can do is you have build a String of comma separated style classes at your ManagedBean and supply it to rowStyleClass attribute.

For Example:
ManagedBean:

String rowStyles;
public void getRowStyles(){
    for(Person p: persons){
      rowStyles+=p.getCountry().equals("UK") ? "colored," : ",";
    }

    return rowStyles;
}

XHTML:

<h:dataTable rowStyleClass="#{personBean.rowStyles}" ...>

JSF datatable color a row based on condition

1 Answers1