RichFaces <rich:collapsibleSubTable>

This component acts as a child element to the <rich:dataTable>. It iterates through the child collections in the currently iterated object to create detailed tables.

The detailed part of the table can be collapsed or expanded.

The <rich:collapsibleSubTable> requires the same basic attributes as the <rich:dataTable> component. The value attribute holds the collection and the var attribute specifies a variable to use when iterating through the collection.

Style classes

The following table contains Style classes and corresponding skin parameters for the collapsibleSubTable.

Class	Function	Skin Parameters	Mapped CSS properties
.rf-cst	It is used to define styles for the table.	No skin parameters.
.rf-cst-r	It is used to define styles for a table row.	No skin parameters.
.rf-cst-fst-r	It is used to define styles for the first row in a table.	No skin parameters.
.rf-cst-c	It is used to define styles for a table cell.	tableBackgroundColor	background-color
.rf-cst-hdr	It is used to define styles for a table header.	No skin parameters.
.rf-cst-hdr-fst	It is used to define styles for the first header.	No skin parameters.
.rf-cst-hdr-fst-r	It is used to define styles for the first row in the header.	No skin parameters.
.rf-cst-hdr-c	It is used to define styles for a header cell.	tableSubHeaderBackgroundColo	background-color
.rf-cst-shdr	It is used to define styles for a table sub-header.	No skin parameters.
.rf-cst-shdr-fst	It is used to define styles for the first sub-header.	No skin parameters.
.rf-cst-shdr-c	It is used to define styles for a sub-header cell.	tableSubHeaderBackgroundColor	background-color
.rf-cst-ftr	It is used to define styles for a table footer.	No skin parameters.
.rf-cst-ftr-fst	It is used to define styles for the first footer.	No skin parameters.

Example

Here, in the following example, we are implementing <rich:collapsibleSubTable>component. This example contains the following files.

JSF File

// collapsible-data-table.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>Rich Data Table</title>
</h:head>
<h:body>
<h:form>
<rich:dataTable value="#{studentRecord.records}" var="record">
<f:facet name="header">
<rich:columnGroup>
<rich:column colspan="6">
<h:outputText value="Student Records" />
</rich:column>
<rich:column breakRowBefore="true">
<h:outputText value="Student ID" />
</rich:column>
<rich:column>
<h:outputText value="Student Name" />
</rich:column>
<rich:column>
<h:outputText value="Student Email" />
</rich:column>
<rich:column>
<h:outputText value="Student Contact" />
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column colspan="6">
<rich:collapsibleSubTableToggler for="sbtbl" />
<h:outputText value="#{record.id}" />
</rich:column>
<rich:collapsibleSubTable value="#{record.records}" var="item" id="sbtbl" expandMode="client">
<rich:column>
<h:outputText value="#{record.id}" />
</rich:column>
<rich:column>
<h:outputText value="#{record.name}" />
</rich:column>
<rich:column>
<h:outputText value="#{record.email}" />
</rich:column>
<rich:column>
<h:outputText value="#{record.contactNumber}" />
</rich:column>
<f:facet name="footer">
<h:outputText value="Total of Student redcords: #{record.numberOfRecords}" />
</f:facet>
</rich:collapsibleSubTable>
</rich:dataTable>
</h:form>
</h:body>
</f:view>
</ui:composition>

Managed Bean

// StudentRecord.java

import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class StudentRecord {
String id;
String name;
String email;
String contactNumber;
List<StudentRecord> records;
public StudentRecord(){}
public StudentRecord(String id, String name, String email, String contactNumber) {
this.id = id;
this.name = name;
this.email = email;
this.contactNumber = contactNumber;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getContactNumber() {
return contactNumber;
}
public void setContactNumber(String contactNumber) {
this.contactNumber = contactNumber;
}
public List<StudentRecord> getRecords() {
records = new ArrayList<>();
records.add(new StudentRecord("101", "Raju", "raju@abc.com", "52534252"));
records.add(new StudentRecord("102", "Rama", "rama@abc.com", "52235252"));
records.add(new StudentRecord("103", "John", "john@abc.com", "52456252"));
records.add(new StudentRecord("104", "Peter", "peter@abc.com", "55625252"));
return records;
}
public void setRecords(List<StudentRecord> records) {
this.records = records;
}
public int getNumberOfRecords(){
return this.records.size();
}
}

Output: