How to implement collapsible subtable in 3.3.x

Version 1

    Simple ajax sample(richfaces-demo main data table page used originally):

     

     <h:form> 
     <rich:dataTable 
     onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
     onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
     cellpadding="0" cellspacing="0" id="table"
     width="700" border="0" var="record" value="#{report.expReport.records}">
     
     <f:facet name="header">
    //header there
     </f:facet>
     
     <rich:column  colspan="5">
     <a4j:commandLink value="+/-" reRender="table">
     <a4j:actionparam name="shown" value="#{not record.showDetails}" assignTo="#{record.showDetails}"/>
     </a4j:commandLink>
     <h:outputText value="#{record.city}" />
     </rich:column>
     
     <rich:subTable rendered="#{record.showDetails}"
     onRowMouseOver="this.style.backgroundColor='#F8F8F8'"
     onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
     var="expense" value="#{record.items}">
     <rich:column>
     <h:outputText value="#{expense.day}"></h:outputText>
     <f:facet name="footer">
     <rich:spacer />
     </f:facet>
     </rich:column>
    //more columns there 
    
     </rich:subTable>
     
     <f:facet name="footer">
    //footer there
     </f:facet>
     
     </rich:dataTable>
    </h:form>
    

     

    and showDetails variable added to Record object additionally.

     

    Could be also done just at client side. In that case - need just iterate tr siblings of the row with link which has subtable classes and revert display style. But I believe ajax way more convenient as it in sync with server side state.