Dynamically generate a table within a row of a table - jsf

Question

I have a SEAM 2, JSF 1.2 web application with a Java back end. Currently I have table that displays books (see below). What I need to add to this is a collapse-able table to each of these rows that would show previous versions of this book (#{_item.relatedVersions}). Each of these version are a book themselves (but don't have an expandable sub-version table, i.e only 1 level deep on a nested table). So what I am wondering is what is the cleanest way to display a list of books (#{bean.items}) in "Table A", and then foreach book dynamically generate another Table within a row in "Table A"?
...
<a:form id="bookList_results_form">
<rich:dataTable id="bookList_dt"
rendered="#{bean.itemCount gt 0}"
var="_item"
width="100%"
value="#{bean.items}">
<rich:column>
<f:facet name="header">ID</f:facet>
<h:outputText value="#{_item.bookId}"/>
</rich:column>
<rich:column>
<a:commandButton image="#{plusIcon}" size="15"
title="Expand version info."
action="#{bean. ???}"
ajaxSingle="true" bypassUpdates="true" immediate="true"/>
<f:facet name="header">Book Name</f:facet>
<h:outputText value="#{_item.bookName}" escape="true"/>
</rich:column>
<rich:column>
<f:facet name="header">Comments</f:facet>
<h:outputText value="#{_item.comments}"/>
</rich:column>
<rich:column>
<f:facet name="header">Actions</f:facet>
<a:commandLink
value="Edit"
title="View or Edit metadata for this book"
action="#{bean.edit(_item.bookId)}"/>
</rich:column>
</rich:dataTable>
</a:form>
...

Answer 1

Check out the
http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=subTableToggleControl&skin=blueSky
<h:form>
<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>
</h:form>

Answer 2

Have you already tried to use the <rich:subTable>?
Edit: I've updated main parts of my answer to show a more detailed example:
<rich:dataTable id="bookList_dt" [...] var="_item" value="#{bean.items}" >
<f:facet name="header">
<rich:column>
Header1
</rich:column>
<rich:column>
Header2
</rich:column>
</f:facet>
<rich:column>
<a4j:commandLink id="toggleIcon" action="#{bean.toggleRelatedVisible(_item)}" reRender="bookList_dt">
<h:graphicImage value="/img/plusIcon.gif" rendered="#{not bean.isRelatedVisible(_item)}" style="margin-right:4px;" />
<h:graphicImage value="/img/minusIcon.gif" rendered="#{bean.isRelatedVisible(_item)}" style="margin-right:4px;" />
</a4j:commandLink>
<h:outputText value="#{_item.bookId}"/>
</rich:column>
[...]
<rich:subTable value="#{_item.relatedVersions}"
var="_relatedItem"
rendered="#{bean.isRelatedVisible(_item)}">
<rich:column>
<h:outputText value="#{_relatedItem.bookId}"/>
</rich:column>
[...]
</rich:subTable>
</rich:dataTable>
In this solution I'm rerendering the whole table on collapse/expand of the subtable. Maybe you can find a more effective way.
Of course, the bean must have some collection of boolean-values containing the state (collapsed/expended) of the subtables.