⁠12.3. <rich:column>

The <rich:column> component facilitates columns in a table. It supports merging columns and rows, sorting, filtering, and customized skinning.

⁠12.3.1. Basic usage

In general usage, the <rich:column> component is used in the same was as the JavaServer Faces (JSF) <h:column> component. It requires no extra attributes for basic usage, as shown in Example 12.5, “Basic column example”.
⁠

Example 12.5. Basic column 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>
⁠
Basic column example

Figure 12.2. Basic column example

⁠12.3.2. Spanning columns

Columns can be merged by using the colspan attribute to specify how many normal columns to span. The colspan attribute is used in conjunction with the breakRowBefore attribute on the next column to determine how the merged columns are laid out. Example 12.6, “Column spanning example”.
⁠

Example 12.6. Column spanning 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>
⁠
Column spanning example

Figure 12.3. Column spanning example

⁠12.3.3. Spanning rows

Similarly, the rowspan attribute can be used to merge and span rows. Again the breakRowBefore attribute needs to be used on related <rich:column> components to define the layout. Example 12.7, “Row spanning example” and the resulting Figure 12.5, “Complex headers using column groups” show the first column of the table spanning three rows.
⁠

Example 12.7. Row spanning 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>
⁠
Row spanning example

Figure 12.4. Row spanning example

For details on filtering and sorting columns, refer to Section 12.10, “Table filtering” and Section 12.11, “Table sorting”.

⁠12.3.4. Reference data

  • component-type: org.richfaces.Column
  • component-class: org.richfaces.component.UIColumn
  • component-family: org.richfaces.Column