6.31.  < rich:columnGroup >

6.31.1. Description

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

<rich:columnGroup> component

Figure 6.36.  <rich:columnGroup> component


6.31.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.119. rich : columnGroup attributes

Attribute NameDescription
bindingThe attribute takes a value-binding expression for a component property of a backing bean
columnClassesComma-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
dirDirection indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left)
filterMethodThis attribute is defined with method binding. This method accepts on Object parameter and return boolean value
filterValueDefines current filtering value
idEvery component may have a unique id that is automatically created if omitted
langCode describing the language used in the generated markup for this component
renderedIf "false", this component is not rendered
rowClassesA 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
selfSortedManages 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
sortOrderSortOrder is an enumeration of the possible sort orderings.
styleCSS style(s) is/are to be applied when this component is rendered
styleClassCorresponds to the HTML class attribute
titleAdvisory title information about markup elements generated for this component

Table 6.120. Component identification parameters

NameValue
component-typeorg.richfaces.ColumnGroup
component-classorg.richfaces.component.html.HtmlColumnGroup
component-familyorg.richfaces.ColumnGroup
renderer-typeorg.richfaces.ColumnGroupRenderer
tag-classorg.richfaces.taglib.ColumnGroupTag

6.31.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.31.4. Creating the Component Dynamically Using Java

Example:


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

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

Generated <rich:columnGroup> component with "breakBefore" attribute

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

<rich:columnGroup> with complex headers

Figure 6.38.  <rich:columnGroup> with complex headers


6.31.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.31.7. Skin Parameters Redefinition

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

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

6.31.9. Relevant Resources Links

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