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.145. rich : subTable attributes
Attribute Name | Description |
---|---|
ajaxKeys | This attribute defines row keys that are updated after an AJAX request |
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 |
componentState | It defines EL-binding for a component state for saving or redefinition |
filterMethod | This attribute is defined with method binding. This method accepts on Object parameter and return boolean value |
filterValue | Defines current filtering value |
first | A zero-relative row number of the first row to display |
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 |
onclick | HTML: a script expression; a pointer button is clicked |
ondblclick | HTML: a script expression; a pointer button is double-clicked |
onkeydown | HTML: a script expression; a key is pressed down |
onkeypress | HTML: a script expression; a key is pressed and released |
onkeyup | HTML: a script expression; a key is released |
onmousedown | HTML: script expression; a pointer button is pressed down |
onmousemove | HTML: a script expression; a pointer is moved within |
onmouseout | HTML: a script expression; a pointer is moved away |
onmouseover | HTML: a script expression; a pointer is moved onto |
onmouseup | HTML: script expression; a pointer button is released |
onRowClick | HTML: a script expression; a pointer button is clicked on row |
onRowDblClick | HTML: a script expression; a pointer button is double-clicked on row |
onRowMouseDown | HTML: script expression; a pointer button is pressed down on row |
onRowMouseMove | HTML: a script expression; a pointer is moved within of row |
onRowMouseOut | HTML: a script expression; a pointer is moved away of row |
onRowMouseOver | HTML: a script expression; a pointer is moved onto of row |
onRowMouseUp | HTML: script expression; a pointer button is released on row |
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 |
rowKeyConverter | Converter for a row key object |
rowKeyVar | The attribute provides access to a row key in a Request scope |
rows | A number of rows to display, or zero for all remaining rows in the table |
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 |
sortExpression | DEPRECATED(use sortBy)Attribute defines a bean property which is used for sorting of a column |
sortMode | Defines mode of sorting. Possible values are 'single' for sorting of one column and 'multi' for some. |
sortOrder | SortOrder is an enumeration of the possible sort orderings. |
sortPriority | Defines a set of column ids in the order the columns could be set |
stateVar | The attribute provides access to a component state on the client side |
value | 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.146. 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.
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.147. 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.148. 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.149. 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 and define necessary properties in them.
To change styles of particular <rich:subTable> components, define your own style classes in the corresponding <rich:subTable> attributes.