⁠12.5. <rich:collapsibleSubTable>

The <rich:collapsibleSubTable> component acts as a child element to a <rich:dataTable> component. The <rich:collapsibleSubTable> component iterates through the child collections in the currently iterated object to create master-detail tables.
Additionally, the detail part of the table can be collapsed or expanded through different modes. The <rich:collapsibleSubTable> component works with the <rich:collapsibleSubTableToggler> component, which expands and collapses the sub-tables.

⁠12.5.1. Basic usage

The <rich:collapsibleSubTable> component requires the same basic attributes as the <rich:dataTable> component. The value attribute points to the collection, and the var attribute specifies a variable to use when iterating through the collection.
In addition, the <rich:collapsibleSubTable> component typically needs a corresponding <rich:collapsibleSubTableToggler> component to allow expanding and collapsing. Declare the id identifier on the <rich:collapsibleSubTable> element so that the <rich:collapsibleSubTableToggler> component can reference it. Refer to Section 12.5.5, “<rich:collapsibleSubTableToggler>” for details on the <rich:collapsibleSubTableToggler> component.
⁠

Example 12.9. Basic usage

​<rich:dataTable value="#{carsBean.inventoryVendorLists}" var="list">
​   <f:facet name="header">
​      <rich:columnGroup>
​         <rich:column colspan="6">
​            <h:outputText value="Cars marketplace" />
​         </rich:column>
​         <rich:column breakRowBefore="true">
​            <h:outputText value="Model" />
​         </rich:column>
​         <rich:column>
​            <h:outputText value="Price" />
​         </rich:column>
​         <rich:column>
​            <h:outputText value="Mileage" />
​         </rich:column>
​         <rich:column>
​            <h:outputText value="VIN Code" />
​         </rich:column>
​         <rich:column>
​            <h:outputText value="Items stock" />
​         </rich:column>
​         <rich:column>
​            <h:outputText value="Days Live" />
​         </rich:column>
​      </rich:columnGroup>
​   </f:facet>
​   <rich:column colspan="6">
​      <rich:collapsibleSubTableToggler for="sbtbl" />
​      <h:outputText value="#{list.vendor}" />
​   </rich:column>
​   <rich:collapsibleSubTable value="#{list.vendorItems}" var="item" id="sbtbl"
​      expandMode="client">
​      <rich:column>
​         <h:outputText value="#{item.model}" />
​      </rich:column>
​      <rich:column>
​         <h:outputText value="#{item.price}" />
​      </rich:column>
​      <rich:column>
​         <h:outputText value="#{item.mileage}" />
​      </rich:column>
​      <rich:column>
​         <h:outputText value="#{item.vin}" />
​      </rich:column>
​      <rich:column>
​         <h:outputText value="#{item.stock}" />
​      </rich:column>
​      <rich:column>
​         <h:outputText value="#{item.daysLive}" />
​      </rich:column>
​      <f:facet name="footer">
​         <h:outputText value="Total of #{list.vendor} Cars: #{list.count}" />
​      </f:facet>
​   </rich:collapsibleSubTable>
​</rich:dataTable>
The resulting tables contains multiple sub-tables, grouping the list of cars by vendor. Each sub-table can be expanded or collapsed using the toggle with the vendor's name. The screenshot shows all sub-tables collapsed except for the sub-table for Ford cars.

⁠12.5.2. Expanding and collapsing the sub-table

Use the boolean expanded attribute to control the current state of the sub-table.
The switching mode for performing submissions is determined by the expandMode attribute, which can have one of the following three values:
server
The default setting. Expansion of the <rich:collapsibleSubTable> component performs a common submission, completely re-rendering the page.
ajax
Expansion of the <rich:collapsibleSubTable> component performs an Ajax form submission, and the content of the data table is rendered.
client
Expansion of the <rich:collapsibleSubTable> component updates the data table on the client side.

⁠12.5.3. Reference data

  • component-type: org.richfaces.CollapsibleSubTable
  • component-class: org.richfaces.component.UICollapsibleSubTable
  • component-family: org.richfaces.Data
  • renderer-type: org.richfaces.CollapsibleSubTableRenderer
  • handler-class: org.richfaces.taglib.CollapsibleSubTableHandler

⁠12.5.4. Style classes

⁠

Table 12.2. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-cst
This class defines styles for the table.
No skin parameters.
.rf-cst-r
This class defines styles for a table row.
No skin parameters.
.rf-cst-fst-r
This class defines styles for the first row in a table.
No skin parameters.
.rf-cst-c
This class defines styles for a table cell.
tableBackgroundColor
background-color
tableBorderWidth
border-bottom-width, border-right-width
tableBorderColor
border-bottom-color, border-right-color
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-cst-hdr
This class defines styles for a table header.
No skin parameters.
.rf-cst-hdr-fst
This class defines styles for the first header.
No skin parameters.
.rf-cst-hdr-fst-r
This class defines styles for the first row in the header.
No skin parameters.
.rf-cst-hdr-c
This class defines styles for a header cell.
tableSubHeaderBackgroundColor
background-color
tableBorderWidth
border-bottom-width, border-right-width
tableBorderColor
border-bottom-color, border-right-color
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-cst-shdr
This class defines styles for a table sub-header.
No skin parameters.
.rf-cst-shdr-fst
This class defines styles for the first sub-header.
No skin parameters.
.rf-cst-shdr-c
This class defines styles for a sub-header cell.
tableSubHeaderBackgroundColor
background-color
tableBorderWidth
border-bottom-width, border-right-width
tableBorderColor
border-bottom-color, border-right-color
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-cst-ftr
This class defines styles for a table footer.
No skin parameters.
.rf-cst-ftr-fst
This class defines styles for the first footer.
No skin parameters.
.rf-cst-ftr-c
This class defines styles for a footer cell.
tableSubFooterBackgroundColor
background-color
tableBorderWidth
border-bottom-width, border-right-width
tableBorderColor
border-bottom-color, border-right-color
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-cst-sftr
This class defines styles for a table sub-footer.
No skin parameters.
.rf-cst-sftr-fst
This class defines styles for the first sub-footer.
No skin parameters.
.rf-cst-sftr-c
This class defines styles for a sub-footer cell.
tableSubFooterBackgroundColor
background-color
tableBorderWidth
border-bottom-width, border-right-width
tableBorderColor
border-bottom-color, border-right-color
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size

⁠12.5.5. <rich:collapsibleSubTableToggler>

The <rich:collapsibleSubTableToggler> component provides a toggle control for the user to expand and collapse sub-tables.

⁠12.5.5.1. Basic usage

The <rich:collapsibleSubTableToggler> component requires the for attribute. The for attribute references the id identifier of the <rich:collapsibleSubTable> component to control.
Refer to Example 12.9, “Basic usage” for an example using the <rich:collapsibleSubTable> component. In the example, the toggle control is placed in a column that spans the width of the table. Output text next to the toggle control displays the car vendor's name for that sub-table.

⁠12.5.5.2. Appearance

The icons and labels of the <rich:collapsibleSubTableToggler> component can be customized. Use the collapsedIcon and expandedIcon attributes to specify icons for the toggler when it is collapsed and expanded respectively. Use the collapsedLabel and expandedLabel attributes to specify labels for the toggler when it is collapsed and expanded respectively.

⁠12.5.5.3. Reference data

  • component-type: org.richfaces.CollapsibleSubTableToggler
  • component-class: org.richfaces.component.UICollapsibleSubTableToggleControl
  • component-family: org.richfaces.CollapsibleSubTableToggler
  • renderer-type: org.richfaces.CollapsibleSubTableTogglerRenderer

⁠12.5.5.4. Style classes and skin parameters

⁠

Style classes (selectors)

.rf-csttg
This class defines styles for a toggle control.
.rf-csttg-exp
This class defines styles for a toggle control which expands the sub-table.
.rf-csttg-colps
This class defines styles for a toggle control which collapses the sub-table.