JBoss.org Community Documentation

- Prev
- Next

## 6.34. < rich:columnGroup >

### 6.34.1. Description

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

Figure 6.42. <rich:columnGroup> component

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

Table 6.125. rich : columnGroup attributes

Attribute Name | Description
--- | ---
binding | The attribute takes a value-binding expression for a component property of a backing bean
columnClasses | Comma-delimited list of CSS style classes that are be applied to the columns of this table. A space separated list of classes may also be specified for any individual column. If the number of elements in this list is less than the number of columns specified in the "columns" attribute, no "class" attribute is output for each column greater than the number of elements in the list. If the number of elements in the list is greater than the number of columns specified in the "columns" attribute, the elements at the position in the list after the value of the "columns" attribute are ignored
dir | Direction indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left)
filterMethod | This attribute is defined with method binding. This method accepts on Object parameter and return boolean value
filterValue | Defines current filtering value
id | Every component may have a unique id that is automatically created if omitted
lang | Code describing the language used in the generated markup for this component
rendered | If "false", this component is not rendered
rowClasses | A comma-delimited list of CSS style classes that is applied to popup table rows. A space separated list of classes may also be specified for any individual row. The styles are applied, in turn, to each row in the table. For example, if the list has two elements, the first style class in the list is applied to the first row, the second to the second row, the first to the third row, the second to the fourth row, etc. In other words, we keep iterating through the list until we reach the end, and then we start at the beginning again
selfSorted | Manages if the header of the column is clickable, icons rendered and sorting is fired after click on the header. You need to define this attribute inside <rich:dataTable> component
sortOrder | SortOrder is an enumeration of the possible sort orderings.
style | CSS style(s) is/are to be applied when this component is rendered
styleClass | Corresponds to the HTML class attribute
title | Advisory title information about markup elements generated for this component

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

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

    ...

### 6.34.4. Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlColumnGroup;

    ...

    HtmlColumnGroup myRow = new HtmlColumnGroup();

    ...

### 6.34.5. 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:

Figure 6.43. 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:

    ...

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

Figure 6.44. <rich:columnGroup> with complex headers

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

### 6.34.7. Skin Parameters Redefinition

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

### 6.34.8. 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 (possible classes could be found in the tables above) and define necessary properties in them.

Example:

    ...

    .rich-table-cell{

            color:  #316ac5;

    }

    ...

This is a result:

Figure 6.45. Redefinition styles with predefined classes

In the example cells color was changed.

Also it's possible to change styles of particular <rich:columnGroup> component. In this case you should create own style classes and use them in corresponding <rich:columnGroup> styleClass attributes. An example is placed below:

Example:

    ...

    .myClass{

            background-color: #c0c0c0;

    }

    ...

The "columnClasses" attribute for <rich:columnGroup> is defined as it's shown in the example below:

Example:

    <rich:columnGroup  columnClasses="myClass">

This is a result:

Figure 6.46. Redefinition styles with own classes and styleClass attributes

As it could be seen on the picture above, the background color for columns was changed.

### 6.34.9. Relevant Resources Links

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

- Prev6.33. < rich:columns >
- Top of page
- Front page
- Next6.35. < rich:column >