Display data in JSF dataTableColumn by a condition

Question

I'm using bootsFaces in JSF and I want to display in a column things like:

1. if type value = 0 -> pending
2. if type value = 1 -> accepted
3. if type value = 2 -> rejected
4. if type value = 3 -> completed

Each result (pending, accepted, rejected, completed) will be colored or printed like a button with different colors, not just a text.

<h:form>
    <b:dataTable value="#{appointmentBean.yoursAppointments}" var="uapp">   
        <f:facet name="header">
           <tr>
            <th>#ID</th>
            <th>Center name</th>
            <th>Creation date</th>
            <th>Appointment date</th>
            <th>Last update</th>
            <th>Type</th>           
            <th>Status</th>           
           </tr>
            </f:facet>                  
                <b:dataTableColumn value="#{uapp.idappointment}" order="asc"/>
                <b:dataTableColumn value="#{uapp.idcenter}" />
                <b:dataTableColumn value="#{uapp.creationDate}" />
                <b:dataTableColumn value="#{uapp.appointmentDate}" />
                <b:dataTableColumn value="#{uapp.lastUpdate}" />                
                <b:dataTableColumn value="#{uapp.type}" />      
                <b:dataTableColumn value="#{uapp.status}" />                        
            </b:dataTable>
</h:form>

So, depending by <b:dataTableColumn value="#{uapp.type}" /> value I want to show some things, how can I do this in JSF using bootsFaces? Thanks!

Answer 1

I would use the b:dataTable row-style-class attribute for this. You can use EL in the value, as well as the var attribute. So you could do something like:

<b:dataTable value="#{appointmentBean.yoursAppointments}" var="uapp"
             row-style-class="type#{uapp.type}">
  <b:dataTableColumn>
    <span class="type">#{uapp.type}</span>
  </b:dataTableColumn>
</b:dataTable>

This allows you to style anything in rows, depending on the type. For example:

tr.type1 td { font-weight: bold; }
tr.type1 .type { background: red; }
tr.type2 .type { background: green; }

If you just need to style your type cell, you could simply do:

<b:dataTableColumn>
  <span class="type#{uapp.type}">#{uapp.type}</span>
</b:dataTableColumn>

.type1 { background: red; }
.type2 { background: green; }