The component for row rendering for a UIData component.
Table 6.121. rich : column attributes
Attribute Name | Description |
---|---|
binding | The attribute takes a value-binding expression for a component property of a backing bean |
breakBefore | if "true" next column begins from the first row |
colspan | Corresponds to the HTML colspan attribute |
comparator | |
dir | Direction indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left) |
filterBy | |
filterDefaultLabel | filterDefaultLabel |
filterEvent | Event for filter input that forces the filtration (default = onchange) |
filterExpression | Attribute defines a bean property which is used for filtering of a column |
filterMethod | |
filterValue | |
footerClass | Space-separated list of CSS style class(es) that are be applied to any footer generated for this table |
headerClass | Space-separated list of CSS style class(es) that are be applied to any header generated for this table |
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 |
rowspan | Corresponds to the HTML rowspan attribute |
selfSorted | |
sortable | Boolean attribute. If "true" it's possible to sort the column content after click on the header. Default value is "true" |
sortBy | Attribute defines a bean property which is used for sorting of a column |
sortExpression | DEPRECATED(use sortBy)Attribute defines a bean property which is used for sorting of a column |
sortIcon | |
sortIconAscending | |
sortIconDescending | |
sortMode | sortMode |
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 |
width | Attribute defines width of column. |
Table 6.122. Component identification parameters
Name | Value |
---|---|
component-type | org.richfaces.Column |
component-class | org.richfaces.component.html.HtmlColumn |
component-family | org.richfaces.Column |
renderer-type | org.richfaces.ColumnRenderer |
tag-class | org.richfaces.taglib.ColumnTag |
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>
...
Example:
import org.richfaces.component.html.HtmlColumn;
...
HtmlColumn myColumn = new HtmlColumn();
...
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:
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:
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:
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.
In order to sort the columns you could use "sortBy" attribute which defines a bean property which is used for sorting of a column. See the following example.
Example:
...
<h:form>
<rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="300px">
<f:facet name="header">
<h:outputText value="Sorting Example"/>
</f:facet>
<rich:column sortBy="#{cap.state}">
<f:facet name="header">
<h:outputText value="State Name"/>
</f:facet>
<h:outputText value="#{cap.state}"/>
</rich:column>
<rich:column sortBy="#{cap.name}">
<f:facet name="header">
<h:outputText value="State Capital"/>
</f:facet>
<h:outputText value="#{cap.name}"/>
</rich:column>
</rich:dataTable>
</h:form>
...
This is result:
In order to change sort order you could use "sortOrder" attribute.
Possible values are:
If you don't use "sortOrder" attribute then the first column is sorted in ascending.
In order to change the sort order, you could double-click on the header of column, which you want to sort.
Example:
...
<h:form>
<rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="300px">
<f:facet name="header">
<h:outputText value="Sorting Example"/>
</f:facet>
<rich:column sortBy="#{cap.state}" sortOrder="ASCENDING">
<f:facet name="header">
<h:outputText value="State Name"></h:outputText>
</f:facet>
<h:outputText value="#{cap.state}"></h:outputText>
</rich:column>
<rich:column sortBy="#{cap.name}" sortOrder="DESCENDING">
<f:facet name="header">
<h:outputText value="State Capital"></h:outputText>
</f:facet>
<h:outputText value="#{cap.name}"/>
</rich:column>
</rich:dataTable>
</h:form>
...
Below you can see the result:
In the example above the first column is sorted in descending order. But if recurring rows appear in the table the relative second column are sorted in ascending order.
The "sortPriority" attribute defines a set of column ids in the order the columns could be set.
If the columns sort order changed externally sort priorities could be used to define which columns will be sorted first.
Example:
...
<h:form>
<rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="300px" sortPriority="#{bean.sortPriority}">
<f:facet name="header">
<h:outputText value="Sorting Example"/>
</f:facet>
<rich:column sortBy="#{cap.state}">
<f:facet name="header">
<h:outputText value="State Name"></h:outputText>
</f:facet>
<h:outputText value="#{cap.state}"></h:outputText>
</rich:column>
<rich:column sortBy="#{cap.name}" >
<f:facet name="header">
<h:outputText value="State Capital"></h:outputText>
</f:facet>
<h:outputText value="#{cap.name}"/>
</rich:column>
</rich:dataTable>
</h:form>
...
You could manage if the header of the column is clickable, icons rendered and sorting is fired after click on the header with the help of the following attributes:
The "selfSorted" attribute which is defined in <rich:dataTable> component. Default value is "true". In the example below the second column is unavailable for sorting.
Example:
...
<rich:dataTable value="#{capitalsBean.capitals}" var="cap">
<rich:column>
<f:facet name="header">
<h:outputText value="State Flag"/>
</f:facet>
<h:graphicImage value="#{cap.stateFlag}"/>
</rich:column>
<rich:column sortBy="#{cap.state}" selfSorted="false">
<f:facet name="header">
<h:outputText value="State Name"/>
</f:facet>
<h:outputText value="#{cap.state}"/>
</rich:column>
</rich:dataTable>
...
The "sortable" attribute which is used with <rich:scrollableDataTable> component. In the following example only the first column could be sorted.
Example:
...
<rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1"
id="carList" columnClasses="col" value="#{dataTableScrollerBean.allCars}" var="category"
sortMode="single" binding="#{dataTableScrollerBean.table}"
selection="#{dataTableScrollerBean.selection}">
<rich:column id="make" sortable="true">
<f:facet name="header">
<h:outputText styleClass="headerText" value="Make" />
</f:facet>
<h:outputText value="#{category.make}" />
</rich:column>
<rich:column id="model">
<f:facet name="header">
<h:outputText styleClass="headerText" value="Model" />
</f:facet>
<h:outputText value="#{category.model}" />
</rich:column>
<rich:column id="price">
<f:facet name="header">
<h:outputText styleClass="headerText" value="Price" />
</f:facet>
<h:outputText value="#{category.price}" />
</rich:column>
</rich:scrollableDataTable>
...
The "sortExpression" attribute that defines sorting property is deprecated! You could use the "sortBy" attribute for the same purpose.
Sorting could not be used together with pagination. Only row that currently on the client could be sorted.
In order to filter the column value, in accordance with the entered value, it is necessary to use a "filterBy" attribute.
If "filterValue" attribute isn't empty from the beginning – table should be filtered on first rendering.
Below you can see example code and the result of its use:
Example:
...
<h:form>
<rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="500px">
<f:facet name="header">
<h:outputText value="Filtering Example"/>
</f:facet>
<rich:column>
<f:facet name="header">
<h:graphicImage value="/images/ico_DataTable.gif"></h:graphicImage>
</f:facet>
<h:graphicImage value="#{cap.stateFlag}"/>
</rich:column>
<rich:column filterBy="#{cap.state}" filterDefaultLabel="click to filter" filterValue="#{filterName.filterBean}">
<h:outputText value="#{cap.state}"></h:outputText>
</rich:column>
<rich:column filterBy="#{cap.name}" filterDefaultLabel="click to filter">
<h:outputText value="#{cap.name}"/>
</rich:column>
</rich:dataTable>
</h:form>
...
"filterExpression" attribute is used to check if the row should be present in result. Any expression could be used inside and should return boolean value.
Below you can find example code:
Example:
...
<h:form id="form">
<h:inputText value="#{capitalsBean.filter}">
<a4j:support event="onblur" reRender="dataTable" />
</h:inputText>
<rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="500px">
<f:facet name="header">
<h:outputText value="Filtering Example" />
</f:facet>
<rich:column>
<f:facet name="header">
<h:graphicImage value="/images/ico_DataTable.gif"/>
</f:facet>
<h:graphicImage value="#{cap.stateFlag}" />
</rich:column>
<rich:column filterBy="#{cap.state}" filterDefaultLabel="click to filter" filterExpression="#{form:startWith(cap.name,cap.state)}">
<h:outputText value="#{cap.state}"></h:outputText>
</rich:column>
<rich:column filterBy="#{cap.name}" filterDefaultLabel="click to filter">
<h:outputText value="#{cap.name}" />
</rich:column>
</rich:dataTable>
</h:form>
...
"filterEvent" attribute is used for customization.
"filterMethod" should be called for every object of the table. It should get current object and return boolean value.
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
Skin parameters redefinition for <rich:column> are the same as for the <rich:dataTable> component.
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.
Here you can see the example of <rich:column> usage and sources for the given example.