6.32.  < rich:column >

6.32.1. Description

The component for row rendering for a UIData component.

<rich:column> component

Figure 6.36.  <rich:column> component


6.32.2. Key Features

  • Completely skinned table rows and child elements
  • Possibility to combine columns with the help of "colspan"
  • Possibility to combine rows with the help of "rowspan" and "breakBefore"

Table 6.122. rich : column attributes

Attribute NameDescription
bindingThe attribute takes a value-binding expression for a component property of a backing bean
breakBeforeif "true" next column begins from the first row
colspanCorresponds to the HTML colspan attribute
comparator 
dirDirection indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left)
filterBy 
filterDefaultLabel 
filterEventEvent for filter input that forces the filtration (default = onchange)
filterExpressionAttribute defines a bean property which is used for filtering of a column
filterMethod 
filterValue 
footerClassSpace-separated list of CSS style class(es) that are be applied to any footer generated for this table
headerClassSpace-separated list of CSS style class(es) that are be applied to any header generated for this table
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
rowspanCorresponds to the HTML rowspan attribute
selfSorted 
sortableBoolean attribute. If "true" it's possible to sort the column content after click on the header. Default value is "true"
sortByAttribute defines a bean property which is used for sorting of a column
sortExpressionDEPRECATED(use sortBy)Attribute defines a bean property which is used for sorting of a column
sortModesortMode
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
widthAttribute defines width of column.

Table 6.123. Component identification parameters

NameValue
component-typeorg.richfaces.Column
component-classorg.richfaces.component.html.HtmlColumn
component-familyorg.richfaces.Column
renderer-typeorg.richfaces.ColumnRenderer
tag-classorg.richfaces.taglib.ColumnTag

6.32.3. Creating the Component with a Page Tag

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

Example:


...
    <rich:dataTable var="set">
        <rich:column>
            <h:outputText value="#{set.property1}"/>
        </rich:column>
        <!--Set of another columns and header/footer facets-->
    </rich:dataTable>
...

6.32.4. Creating the Component Dynamically Using Java

Example:


import org.richfaces.component.html.HtmlColumn;
...
HtmlColumn myColumn = new HtmlColumn();
...

6.32.5. Details of Usage

To output a simple table, the <rich:column> component is used the same way as the standard <h:column> , i.e. the following code on a page is used:

Example:


...
    <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> 
        <rich:column>
            <f:facet name="header">State Flag</f:facet>
            <h:graphicImage value="#{cap.stateFlag}"/>
        </rich:column>
        <rich:column>
            <f:facet name="header">State Name</f:facet>
            <h:outputText value="#{cap.state}"/>
        </rich:column>
        <rich:column >
            <f:facet name="header">State Capital</f:facet>
            <h:outputText value="#{cap.name}"/>
        </rich:column>
        <rich:column>
        <f:facet name="header">Time Zone</f:facet>
            <h:outputText value="#{cap.timeZone}"/>
        </rich:column>
    </rich:dataTable>
...

The result is:

Generated <rich:column> component

Figure 6.37. Generated <rich:column> component


Now, in order to group columns with text information into one row in one column with a flag, use the "colspan" attribute, which is similar to an HTML one, specifying that the first column contains 3 columns. In addition, it's necessary to specify that the next column begins from the first row with the help of the "breakBefore" attribute = true.

Example:


...
     <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> 
        <rich:column colspan="3">
            <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>
...

As a result the following structure is rendered:

<rich:column> modified with colspan and breakbefore attributes

Figure 6.38.  <rich:column> modified with colspan and breakbefore attributes


The same way is used for columns grouping with the "rowspan" attribute that is similar to an HTML one responsible for rows quantity definition occupied with the current one. The only thing to add in the example is an instruction to move onto the next row for each next after the second column.

Example:


...
    <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> 
        <rich:column rowspan="3">
            <f:facet name="header">State Flag</f:facet>
            <h:graphicImage value="#{cap.stateFlag}"/>
        </rich:column>
        <rich:column> 
            <f:facet name="header">State Info</f:facet>
            <h:outputText value="#{cap.state}"/>
        </rich:column>
        <rich:column breakBefore="true">
            <h:outputText value="#{cap.name}"/>
        </rich:column>
        <rich:column breakBefore="true">
            <h:outputText value="#{cap.timeZone}"/>
        </rich:column>
    </rich:dataTable>
...

As a result:

<rich:column> generated with rowspan attribute

Figure 6.39.  <rich:column> generated with rowspan attribute


Hence, additionally to a standard output of a particular row provided with the <h:column> component, it becomes possible to group easily the rows with special HTML attribute.

The columns also could be grouped in a particular way with the help of the <h:columnGroup> component that is described in the following chapter.

6.32.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:column> components at once:

  • Redefine the corresponding skin parameters

  • Add to your style sheets style classes used by a <rich:column> component

6.32.7. Skin Parameters Redefinition

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

6.32.8. Definition of Custom Style Classes

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

In order to redefine styles for all <rich:column> 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:column> components, define your own style classes in the corresponding <rich:column> attributes.

6.32.9. Relevant Resources Links

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