Apply a style to a specific ice:column

Question

My question is pretty basic but cannot find an answer on Google. I do wonder if I missed something about the ice:column component.

I do use code like :

<ice:panelGrid columns="3">
  <ice:column style="background-color: yellow;">
    <ice:outputText value="..." />
  </ice:column>
  <ice:column>
    // row content
  </ice:column>
  <ice:column>
    // row content
  </ice:column>

  // other rows
</ice:panelGrid>

It seems that the column component has a style and styleClass attribute, however nothing is ever rendered in the HTML.

How do you apply a style to a perticular cell of a table with IceFaces ?

Thanks in advance for the answer.

Answer 1

Like as standard JSF <h:panelGrid> the <ice:panelGrid> has a columnClasses attribute which allows you to specify a comma-separated list of column classes which are to be applied subsequently on the columns. Also, in standard JSF <h:panelGrid>, the <h:column> is not supported. This is only suppored in <h:dataTable>. Instead, every direct child of <h:panelGrid> is treated as a single column, which can be just <h:outputText> or <h:panelGroup> if you have multiple components which need to go in a single column.

So, this should do:

<ice:panelGrid columns="3" columnClasses="col1,col2,col3">
    <ice:panelGroup>row 1 col 1</ice:panelGroup>
    <ice:panelGroup>row 1 col 2</ice:panelGroup>
    <ice:panelGroup>row 1 col 3</ice:panelGroup>

    <ice:panelGroup>row 2 col 1</ice:panelGroup>
    <ice:panelGroup>row 2 col 2</ice:panelGroup>
    <ice:panelGroup>row 2 col 3</ice:panelGroup>

    ...
</ice:panelGrid>

which will generate

<table>
  <tbody>
     <tr>
       <td class="col1">row 1 col 1</td>
       <td class="col2">row 1 col 2</td>
       <td class="col3">row 1 col 3</td>
     </tr>
     <tr>
       <td class="col1">row 2 col 1</td>
       <td class="col2">row 2 col 2</td>
       <td class="col3">row 2 col 3</td>
     </tr>
     ...
   </tbody>
</table>

You can specify the style in the .col1, .col2 and .col3 classes the usual way.

.col1 {
    background: yellow;
}