How to display icon instead of data in Primefaces datatable?

Question

I have a Primefaces Datatable containing some dataset which values are 0 or 1 in one of the columns - such values are used to calculate a summary row.

What I want to do is:

when the value is 1, a Font Awesome car icon should be displayed and the number 1 gets hidden;
the same for value 0, but displaying an airplane icon.

So far, what I achieved was using a conditional css:

<p:dataTable id="datalist"
             filteredValue="#taxiTripsController.filteredTaxiTrips}"
             value="#{taxiTripsController.items}"
             var="item"
             rowKey="#{item.id}"
             paginator="true"
             selectionMode="single"
             selection="#{taxiTripsController.selected}"
             widgetVar="txcwv" >

<!--some columns ommited -->

<p:column sortBy="#{item.cr1}" filterBy="#{item.cr1}" >
    <f:facet name="header">
        <h:outputText value="cr1"/>
    </f:facet>
    <h:outputText id="cr1" value="#{item.cr1}" styleClass="#{item.cr1 == 1 ? 'realizado' : null}" title="cr1" />
</p:column>

</p:dataTable>

The css excerpt:

.realizado {
font: bold 2em/1.35 Arial;
text-shadow: 4px 4px 10px red;
icon:url("car.png"); <!-- or some way to use fa fa-car
}

But no icon or image is displayed, just the text shadow:

Does anyone knows how can I do it ? Thanks in advance.

Melloware Melloware · Accepted Answer · 2019-06-17T18:42:47

This is pretty easy I do this all the time in my code. The below example shows either a grey "X" or a green "Check" based on a boolean value.

<p:column headerText="Boolean" sortBy="#{row.myYn}">
    <i class="fa #{row.myYn ? 'fa-check-circle' : 'fa-times'}" 
       style="color: #{row.myYn ? 'green': 'lightgray'}" />
</p:column>

So in your case instead of that you could do a rendered flag on the component if you are using JSF 2.2 you can add a rendered element to the <i> like...

<p:column headerText="Cars">
    <i class="fa fa-car" jsf:rendered="#{item.cr1 == 1}" />
</p:column>

How to display icon instead of data in Primefaces datatable?

1 Answers