The component combines columns in one row to organize complex subparts of a table.
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 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.120. 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 |
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>
...
Example:
import org.richfaces.component.html.HtmlColumnGroup;
...
HtmlColumnGroup myRow = new HtmlColumnGroup();
...
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:
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:
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 for <rich:columnGroup> are the same as for the <rich:dataTable> component.
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.
Here you can see the example of <rich:columnGroup> usage and sources for the given example.