How to set colspan and rowspan in JSF panelGrid?

How can I set colspan and rowspan in JSF <h:panelGrid>?


None of both is possible with the standard JSF implementation. There are 3 ways to fix this:

  1. Write plain HTML yourself. A <h:panelGrid> basically renders a HTML <table>. Do the same.
  2. Create a custom HTML renderer which supports this. It'll however be a lot of sweat and pain.
  3. Use a 3rd party component library which supports this.
    • Tomahawk has a <t:panelGroup> component which supports colspan in <h:panelGrid>.
    • RichFaces (3.x only) has a <rich:column> component which supports both colspan and rowspan in <rich:dataTable>.
    • PrimeFaces has a <p:row> next to <p:column> which is supported in both <p:panelGrid> and <p:dataTable> (also with <p:columnGroup>).

Since 24 januari 2012 Primefaces also has the possibility to use colspan and rowspan in the panelGrid component of Primefaces. See:

http://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml


Use: rich:column colspan="2" of RichFaces

<rich:column colspan="2">                        
<h:outputText  value="Ingrese el texto de la imagen" /> 
</rich:column>  

Assume

  1. a message resource file with two entries:

    key.row=</td></tr><tr><td
    key.gt=>

  2. row.xhtml

    <ui:composition 
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:c="http://java.sun.com/jsp/jstl/core" >
    
        <c:forEach begin="0" end="#{colspan-2}">
            <h:panelGroup />
        </c:forEach>
    
        <h:panelGroup>
          <h:outputText value="#{i18n['key.row']}" escape="false" />
          <h:outputText value=" colspan='#{colspan}' #{cellAttributes}" />
          <h:outputText value="#{i18n['key.gt']}" escape="false" />
    
          <ui:insert />
        </h:panelGroup>
    
    </ui:composition>
    

    then, for example

    <h:panelGrid columns="3">
      <h:outputText value="r1-c1" />
      <h:outputText value="r1-c2" />
      <h:outputText value="r1-c3" />
    
      <ui:decorate template="/row.xhtml">
        <ui:param name="colspan" value="3" />
        <ui:param name="cellAttributes" value=" align='center'" />
    
        <div>Hello!!!!!</div>
      </ui:decorate>
    

Prints a table with 3 rows:

  1. r1-c1, r1-c2 , r1-c3

  2. 3 blank cells

  3. a cell aligned center, having colspan 3 and containing a hello div.


I agree with BalusC's answer and want to add, that the Primefaces JSF2 component library also offers this functionality if you use its p:dataTable component. It is called grouping there.