rich:columnGroup HtmlColumnGroup

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

## Creating the Component with a Page Tag

To create the simplest variant of columnGroup on a page, use the following syntax:

Example:

    ...
            <rich:columnGroup>
                    <rich:column>
                            <h:outputText value="Column1"/>
                    </rich:column>
                    <rich:column>
                            <h:outputText value="Column2"/>
                    </rich:column>
            </rich:columnGroup>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlColumnGroup;
    ...
    HtmlColumnGroup myRow = new HtmlColumnGroup();
    ...

## 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 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 breakBefore="true">
                    <h:outputText value="#{cap.name}"/>
            </rich:column>
            <rich:column >
                    <h:outputText value="#{cap.timeZone}"/>
            </rich:column>
        </rich:dataTable>
    ....

The result is:

Generated columnGroup component

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:

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

Generated on a page as:

ColumnGroup with complex headers

## Look-and-Feel Customization

For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.

There are two ways to redefine the appearance of all <rich:columnGroup> components at once:

- Redefine the corresponding skin parameters

- Add to your style sheets style classes used by a <rich:columnGroup> component

## Skin Parameters Redefinition

Skin parameters redefinition for <rich:columnGroup> are the same as for the <rich:dataTable> component.

## Definition of Custom Style Classes

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

In order to redefine styles for all <rich:columnGroup> components on a page using CSS, it's enough to create classes with the same names and define necessary properties in them.

To change styles of particular <rich:columnGroup> components, define your own style classes in the corresponding <rich:columnGroup> attributes.

## Relevant Resources Links

Here you can see the example of <rich:columnGroup> usage and sources for the given example.