make可折叠到JSF中的父dataTable

Question

我的JSF页面中有两个数据表，我想让它可折叠，其中内部表将是外部数据表的内容。单击父表的标题后，它应该是一个像可折叠的切换。

                                <h:dataTable id="myDataTable"
                                value="#{dataEntryFormController.sampleList}" var="o"
                                binding="#{table}" varStatus="record">

                                <h:column>

                                    <h:dataTable id="myDataTable2" value="#{o}" var="sample"
                                         binding="#{table2}">
                                        <h:column>
                                            <h:inputText value="#{sample.sampleKey}" rendered="#{sample.editable}" />
                                            <h:outputText value="#{sample.sampleKey}" rendered="#{not sample.editable}" />
                                            <h:outputText value="&lt;br/&gt;" escape="false" />
                                            <h:outputText value="&lt;br/&gt;" escape="false" />
                                        </h:column>


                                        <h:column>
                                            <h:inputText value="#{sample.sampleValue}" rendered="#{sample.editable}" />
                                            <h:outputText value="#{sample.sampleValue}" rendered="#{not sample.editable}" />
                                            <h:outputText value="&lt;br/&gt;" escape="false" />
                                            <h:outputText value="&lt;br/&gt;" escape="false" />
                                        </h:column>


                                        <h:column>
                                            <h:commandButton value="Remove"
                                                action="#{dataEntryFormController.deleteRecord(sample,table.rowIndex,table2.rowIndex)}"
                                                > 
                                            </h:commandButton>
                                            <h:commandButton value="Edit"
                                                action="#{dataEntryFormController.editAction(sample,table.rowIndex,table2.rowIndex)}" 
                                                rendered="#{not sample.editable}">
                                            </h:commandButton>
                                            <h:outputText value="&lt;br/&gt;" escape="false" />
                                        </h:column>
                                    </h:dataTable>
                                </h:column>

                            </h:dataTable>