Create new RichFaces Documentation Jira issue
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.
JBoss.orgCommunity Documentation
The component is used for inserting subtables into tables with opportunity to choose data from a model and built-in Ajax updates support.
Completely skinned table rows and child elements
Possibility to insert complex columnGroup subcomponents
Possibility to combine rows and columns inside
Possibility to update a limited set of rows with Ajax
Table 6.100. rich : subTable attributes
| Attribute Name |
Description
|
|---|---|
| ajaxKeys | This attribute defines row keys that are updated after an AJAX request |
| binding | JSF: The attribute takes a value-binding expression for a component property of a backing bean |
| columnClasses | JSF: Assigns one or more space-separated CSS class names to the columns of the table. If the CSS class names are comma-separated, each class will be assigned to a particular column in the order they follow in the attribute. If you have less class names than columns, the class will be applied to every n-fold column where n is the order in which the class is listed in the attribute. If there are more class names than columns, the overflow ones are ignored. |
| componentState | It defines EL-binding for a component state for saving or redefinition |
| first | A zero-relative row number of the first row to display |
| footerClass | Assigns one or more space-separated CSS class names to any footer generated for this component |
| headerClass | Assigns one or more space-separated CSS class names to any header generated for this component |
| id | JSF: Every component may have a unique id that is automatically created if omitted |
| onclick | DHTML: The client-side script method to be called when the element is clicked |
| ondblclick | DHTML: The client-side script method to be called when the element is double-clicked |
| onkeydown | DHTML: The client-side script method to be called when a key is pressed down over the element |
| onkeypress | DHTML: The client-side script method to be called when a key is pressed over the element and released |
| onkeyup | DHTML: The client-side script method to be called when a key is released |
| onmousedown | DHTML: The client-side script method to be called when a mouse button is pressed down over the element |
| onmousemove | DHTML: The client-side script method to be called when a pointer is moved within the element |
| onmouseout | DHTML: The client-side script method to be called when a pointer is moved away from the element |
| onmouseover | DHTML: The client-side script method to be called when a pointer is moved onto the element |
| onmouseup | DHTML: The client-side script method to be called when a mouse button is released |
| onRowClick | The client-side script method to be called when the row is clicked |
| onRowDblClick | The client-side script method to be called when the row is double-clicked |
| onRowMouseDown | The client-side script method to be called when a mouse button is pressed down over the row |
| onRowMouseMove | The client-side script method to be called when a pointer is moved within the row |
| onRowMouseOut | The client-side script method to be called when a pointer is moved away from the row |
| onRowMouseOver | The client-side script method to be called when a pointer is moved onto the row |
| onRowMouseUp | The client-side script method to be called when a mouse button is released over the row |
| rendered | JSF: If "false", this component is not rendered |
| rowClasses | JSF: Assigns one or more space-separated CSS class names to the rows of the table. If the CSS class names are comma-separated, each class will be assigned to a particular row in the order they follow in the attribute. If you have less class names than rows, the class will be applied to every n-fold row where n is the order in which the class is listed in the attribute. If there are more class names than rows, the overflow ones are ignored. |
| rowKeyConverter | Converter for a row key object |
| rowKeyVar | The attribute provides access to a row key in a Request scope |
| rows | HTML: A number of rows to display, or zero for all remaining rows in the table |
| stateVar | The attribute provides access to a component state on the client side |
| value | JSF: The current value for this component |
| var | A request-scope attribute via which the data object for the current row will be used when iterating |
Table 6.101. Component identification parameters
| Name | Value |
|---|---|
| component-type | org.richfaces.SubTable |
| component-class | org.richfaces.component.html.HtmlSubTable |
| component-family | org.richfaces.SubTable |
| renderer-type | org.richfaces.SubTableRenderer |
| tag-class | org.richfaces.taglib.SubTableTag |
Here is a simple example as it could be used on a page:
Example:
...
<rich:dataTable value="#{capitalsBean.capitals}" var="capitals">
<rich:column>
...
</rich:column>
<rich:subTable value=#{capitals.details} var="detail">
<rich:column>
...
</rich:column>
</rich:subTable>
</rich:dataTable>
...
Example:
import org.richfaces.component.html.HtmlSubTable;
...
HtmlSubTable mySubTable = new HtmlSubTable();
...
The <rich:subTable> component is similar to the <h:dataTable> one, except Ajax support and skinnability. One more difference is that the component doesn't add the wrapping <table> and <tbody> tags. Ajax support is possible, because the component was created basing on the <a4j:repeat> component and as a result it could be partially updated with Ajax. "ajaxKeys" attribute allows to define row keys that is updated after an Ajax request.
Here is an example:
Example:
...
<rich:dataTable value="#{capitalsBean.capitals}" var="capitals">
<rich:column>
...
</rich:column>
<rich:subTable value="#{capitals.details}" var="detail" ajaxKeys="#{bean.ajaxSet}" binding="#{bean.subtable}" id="subtable">
<rich:column>
...
</rich:column>
</rich:subTable>
</rich:dataTable>
...
<a4j:commandButton action="#{tableBean.action}" reRender="subtable"/>
...
In the example "reRender" attribute contains value of "id" attribute for <rich:subTable> component. As a result the component is updated after an Ajax request.
The component allows to use "header" and "footer" facets for output. See an example for <rich:dataTable> component.
Table 6.102. Facets
| Facet name | Description |
|---|---|
| header | Defines the header content |
| footer | Defines the footer content |
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:subTable> components at once:
Redefine the corresponding skin parameters
Add to your style sheets style classes used by a <rich:subTable> component
Skin parameters redefinition for <rich:subTable> are the same as for the <rich:dataTable> component.
Table 6.103. Classes names that define a component appearance
| Class name | Description |
|---|---|
| rich-subtable | Defines styles for all subtable |
| rich-subtable-caption | Defines styles for a "caption" facet element |
Table 6.104. Classes names that define header and footer elements
| Class name | Description |
|---|---|
| rich-subtable-header | Defines styles for a subtable header row |
| rich-subtable-header-continue | Defines styles for all subtable header lines after the first |
| rich-subtable-subheader | Defines styles for a column header of subtable |
| rich-subtable-subfooter | Defines styles for a column footer of subtable |
| rich-subtable-footer | Defines styles for a subtable footer row |
| rich-subtable-footer-continue | Defines styles for all subtable footer lines after the first |
Table 6.105. Classes names that define rows and cells
| Class name | Description |
|---|---|
| rich-subtable-headercell | Defines styles for a subtable header cell |
| rich-subtable-subheadercell | Defines styles for a column header cell of subtable |
| rich-subtable-cell | Defines styles for a subtable cell |
| rich-subtable-row | Defines styles for a subtable row |
| rich-subtable-firstrow | Defines styles for a subtable start row |
| rich-subtable-subfootercell | Defines styles for a column footer cell of subtable |
| rich-subtable-footercell | Defines styles for a subtable footer cell |
In order to redefine styles for all <rich:subTable> components on a page using CSS, it's enough to create classes with the same names (possible classes could be found in the tables above) and define necessary properties in them.
Example:
...
.rich-subtable-footer{
font-weight: bold;
}
...
This is a result:
In the example a footer font weight was changed.
Also it's possible to change styles of particular <rich:subTable> component. In this case you should create own style classes and use them in corresponding <rich:subTable> styleClass attributes. An example is placed below:
Example:
...
.myClass{
background-color: #fff5ec;
}
...
The "columnClasses" attribute for <rich:subTable> is defined as it's shown in the example below:
Example:
<rich:subTable ... columnClasses="myClass"/>
This is a result:
As it could be seen on the picture above, the background color for columns was changed.
