### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.6.2. < rich:columnGroup > available since 3.0.0

expand all

#### 6.6.2.1. Description

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

Figure 6.20. <rich:columnGroup> component

#### 6.6.2.2. Key Features

- Completely skinned table columns and child elements

- Possibility to combine columns and rows inside

- Possibility to update a limited set of strings with Ajax

#### 6.6.2.3. Details of Usage

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:

Figure 6.21. Generated <rich:columnGroup> component with "breakBefore" attribute

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:

Figure 6.22. <rich:columnGroup> with complex headers

#### 6.6.2.4. Reference Data

Table of <rich:columnGroup> attributes.

Table 6.32. Component Identification Parameters

Name | Value
--- | ---
component-type | org.richfaces.ColumnGroup
component-class | org.richfaces.component.html.HtmlColumnGroup
component-family | org.richfaces.ColumnGroup
renderer-type | org.richfaces.ColumnGroupRenderer
tag-class | org.richfaces.taglib.ColumnGroupTag

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.

#### 6.6.2.5. Relevant Resources Links

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

- Prev6.6.1. < rich:column > ...
- Top of page
- Front page
- Next6.6.3. < rich:columns > ...