Create new RichFaces Documentation Jira issue

This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.orgCommunity Documentation

6.6.2.  < rich:columnGroup > available since 3.0.0

The component combines columns in one row to organize complex subparts of a table.


The <rich:columnGroup> component combines columns set wrapping them into the <tr> element and outputting them into one row. Columns are combined in a group the same way as when the "breakBefore" attribute is used for columns to add a moving to the next rows, but the first variant is clearer from a source code. Hence, the following simple examples are very same.

Example:


...
<rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5" id="sublist"> 
        <rich:column colspan="3">
                <f:facet name="header">State Flag</f:facet>
                <h:graphicImage value="#{cap.stateFlag}"/>
        </rich:column>
       <rich:columnGroup>
                <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:columnGroup> 
</rich:dataTable>
...

And here is a representation without a grouping:

Example:


...
<rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5" id="sublist"> 
        <rich:column colspan="3">
                <f:facet name="header">State Flag</f:facet>
                <h:graphicImage value="#{cap.stateFlag}"/>
        </rich:column>
        <rich:column breakBefore="true">
                <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>
....

The result is:


It's also possible to use the component for output of complex headers in a table. For example, adding of a complex header to a facet for the whole table looks the following way:

Example:


...
<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>
...

The generated table on a page looks as follows:


Table of <rich:columnGroup> attributes.


Custom style classes as well as skin parameters for <rich:columnGroup> are the same as for the <rich:dataTable> component.

You can find all necessary information about style classes redefinition in Definition of Custom Style Classes section.

On the component LiveDemo page you can find the example of the <rich:columnGroup> usage and sources as well.