### 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.6.11. < rich:subTable > available since 3.0.0

expand all

#### 6.6.11.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.62. <rich:subTable> element

#### 6.6.11.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.99. 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.100. 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.6.11.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.6.11.4. Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlSubTable;

    ...

    HtmlSubTable mySubTable = new HtmlSubTable();

    ...

#### 6.6.11.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.6.11.6. Facets

Table 6.101. Facets

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

#### 6.6.11.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.6.11.8. Skin Parameters Redefinition

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

#### 6.6.11.9. Definition of Custom Style Classes

Table 6.102. 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.103. 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.104. 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.63. 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.64. 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.65. 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.6.10. < rich:dataTable > ...
- Top of page
- Front page
- Next6.6.12. < rich:extendedDataTable > ...