12.4. <rich:columnGroup>

⁠12.4. `<rich:columnGroup>`

The <rich:columnGroup> component combines multiple columns in a single row to organize complex parts of a table. The resulting effect is similar to using the breakRowBefore attribute of the <rich:column> component, but is clearer and easier to follow in the source code.

⁠12.4.1. Complex headers

The <rich:columnGroup> can also be used to create complex headers in a table. Example 12.8, “Complex headers using column groups” and the resulting Figure 12.5, “Complex headers using column groups” demonstrate how complex headers can be achieved.

Example 12.8. Complex headers using column groups

<rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5" id="sublist"> 
    <f:facet name="header">
        <rich:columnGroup>
            <rich:column rowspan="2">
                <h:outputText value="State Flag"/>
            </rich:column>
            <rich:column colspan="3">
                <h:outputText value="State Info"/>
            </rich:column>
            <rich:column breakBefore="true">
                <h:outputText value="State Name"/>
            </rich:column>
            <rich:column>
                <h:outputText value="State Capital"/>
            </rich:column>
            <rich:column>
                <h:outputText value="Time Zone"/>
            </rich:column>
        </rich:columnGroup>
    </f:facet>
    <rich:column>
        <h:graphicImage value="#{cap.stateFlag}"/>
    </rich:column>
    <rich:column>
        <h:outputText value="#{cap.state}"/>
    </rich:column>
    <rich:column>
        <h:outputText value="#{cap.name}"/>
    </rich:column>
    <rich:column>
        <h:outputText value="#{cap.timeZone}"/>
    </rich:column>
</rich:dataTable>

⁠
Figure 12.5. Complex headers using column groups

⁠12.4.2. Reference data

component-type: org.richfaces.ColumnGroup
component-class: org.richfaces.component.UIColumnGroup
component-family: org.richfaces.ColumnGroup
renderer-type: org.richfaces.ColumnGroupRenderer