### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

## 6.43. < rich:subTable >

### 6.43.1. Description

The component is used for inserting subtables into tables with opportunity to choose data from a model and built-in Ajax updates support.

Figure 6.89. <rich:subTable> element

### 6.43.2. Key Features

- 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.172. 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
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 | The clientside script method to be called when the element is clicked
ondblclick | The client side script method to be called when the element is double-clicked
onkeydown | The client side script method to be called when a key is pressed down over the element
onkeypress | The client side script method to be called when a key is pressed over the element and released
onkeyup | The client side script method to be called when a key is released
onmousedown | The client side script method to be called when a mouse button is pressed down over the element
onmousemove | The client side script method to be called when a pointer is moved within the element
onmouseout | The client side script method to be called when a pointer is moved away from the element
onmouseover | The client side script method to be called when a pointer is moved onto the element
onmouseup | The client side script method to be called when a mouse 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
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.173. 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

### 6.43.3. Creating the Component with a Page Tag

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>

    ...

### 6.43.4. Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlSubTable;

    ...

    HtmlSubTable mySubTable = new HtmlSubTable();

    ...

### 6.43.5. Details of Usage

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.

### 6.43.6. Facets

Table 6.174. Facets

Facet name | Description
--- | ---
header | Defines the header content
footer | Defines the footer content

### 6.43.7. 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:subTable> components at once:

- Redefine the corresponding skin parameters

- Add to your style sheets style classes used by a <rich:subTable> component

### 6.43.8. Skin Parameters Redefinition

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

### 6.43.9. Definition of Custom Style Classes

Table 6.175. 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.176. 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.177. 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

Figure 6.90. Style classes

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:

Figure 6.91. Redefinition styles with predefined classes

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:

Figure 6.92. Redefinition styles with own classes and styleClass attributes

As it could be seen on the picture above, the background color for columns was changed.

- Prev6.42. < rich:dataTable >
- Top of page
- Front page
- Next6.44. < rich:editor >