rich:subTable HtmlSubTable

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

## 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>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlSubTable;
    ...
    HtmlSubTable mySubTable = new HtmlSubTable();
    ...

## 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.

## Facets

Facets

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

## 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

## Skin Parameters Redefinition

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

## Definition of Custom Style Classes

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

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

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

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:

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:

Redefinition styles with own classes and styleClass attributes

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