Style a cell of a DataTable in PrimeFaces

Question

Style a cell of a DataTable in PrimeFaces

Navigation

#1 by (0 votes)

0

I have a problem that I can not solve.

A component <p:dataTable> of Primefaces renders a table HTML in the browser, what I need is to put a background color to the element <td> of the table HTML , this for design reasons each cell represents an element that has a state that is identified with a color (green, yellow, brown, red).

The page is the following

<p:dataTable var="categoria" value="#{divisionBean.categorias}" styleClass="tablaP8TPrime">
    <f:facet name="header">
        Alimentos
    </f:facet>
    <p:column headerText="Categoría">
        <h:outputText value="#{categoria.nombre}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna1}">
        <h:panelGroup id="celda" layout="block">
            <h:outputText value="#{categoria.automovil.get(0).getNombre()}" />
        </h:panelGroup>
    </p:column>
    <p:column headerText="#{divisionBean.columna2}">
        <h:outputText value="#{categoria.automovil.get(1).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna3}">
        <h:outputText value="#{categoria.automovil.get(2).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna4}">
        <h:outputText value="#{categoria.automovil.get(3).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna5}">
        <h:outputText value="#{categoria.automovil.get(4).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna6}">
        <h:outputText value="#{categoria.automovil.get(5).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna7}">
        <h:outputText value="#{categoria.automovil.get(6).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna8}">
        <h:outputText value="#{categoria.automovil.get(7).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna9}">
        <h:outputText value="#{categoria.automovil.get(8).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna10}">
        <h:outputText value="#{categoria.automovil.get(9).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna11}">
        <h:outputText value="#{categoria.automovil.get(10).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna12}">
        <h:outputText value="#{categoria.automovil.get(11).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna13}">
        <h:outputText value="#{categoria.automovil.get(12).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna14}">
        <h:outputText value="#{categoria.automovil.get(13).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna15}">
        <h:outputText value="#{categoria.automovil.get(14).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna16}">
        <h:outputText value="#{categoria.automovil.get(15).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna17}">
        <h:outputText value="#{categoria.automovil.get(16).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna18}">
        <h:outputText value="#{categoria.automovil.get(17).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna19}">
        <h:outputText value="#{categoria.automovil.get(18).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna20}">
        <h:outputText value="#{categoria.automovil.get(19).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna21}">
        <h:outputText value="#{categoria.automovil.get(20).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna22}">
        <h:outputText value="#{categoria.automovil.get(21).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna23}">
        <h:outputText value="#{categoria.automovil.get(22).getNombre()}" />
    </p:column>
    <p:column headerText="#{divisionBean.columna24}">
        <h:outputText value="#{categoria.automovil.get(23).getNombre()}" />
    </p:column>
</p:dataTable>

The data is filled correctly, now what I need is to put those colors.

css primefaces jsf

asked by Chris 18.12.2016 в 16:54

source

1 answer

Reading of values written on contactless card in Python

score 0 · Accepted Answer

It is not clear to me if you speak of a cell in any column or only the cells of a column. In any case, you can use an EL expression in the styleClass attribute of each column:

<p:column headerText="#{divisionBean.columna1}" styleClass="#{categoria.automovil.get(0).getNombre() eq 'Blanco' ? 'estiloBlanco' : 'estiloNegro'}">

In your case, with four possible values and with such a long EL, I would suggest that you add a property to the bean (for example, getEstiloColumna ), to put there the logic of what style to use. You can also define a JSTL function, to do that same thing, if it suits you better.