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

expand all
6.6.2.1. Description
6.6.2.2. Key Features
6.6.2.3. Details of Usage
6.6.2.4. Reference Data
6.6.2.5. Relevant Resources Links

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.