Hi!

One thing in JSF which constantly worries me is, that it is not easily possible to create a more complicated table layout with group/group/detail style.

What I mean is somthing like this:

Name Column1 Column2
Data1HeaderInformation1
Sub1HeaderInformation1
Name1 10 20
Sub1HeaderInformation2
Name2 20 30
Data2HeaderInformation1
Sub2HeaderInformation1
Name3 40 50
Name5 60 70

This reflects a list in a list in a list.

Currently, with JSF there is no chance to nest tables in such a way without rendering completely unrelated tables. The problem is, that the sub tables then have their own column width and it is hard to make them look as just one table.

I thought about a new attribute on the dataTable (embedded="true") which avoids rendering the <table></table> attributes so that the rendered table nicely nest into the parent table. For sure, the user has to take care that the numer of columns are the same among all tables, probably by using stuff like "t:column colspan=".

Secondly, to make this fully usable, we need another way to define the header of a table as the "master" table has to render a very special header where one would like to mix in the header of the detail row. For this, I thought we could use a facet directly on the datatable. In the end, it might look like the following:

<t:datable var="group1" value="#{bean.data}">
   <f:facet name="columnHeader1">
       <t:column colspan="2">
           <t:outputText value="header" />
       </t:column>
   </f:facet>
   <f:facet name="columnHeader2">
       <t:column>
           <t:outputText value="detailA" />
       </t:column>
   </f:facet>
   <f:facet name="columnHeader3">
       <t:column>
           <t:outputText value="detailB" />
       </t:column>
   </f:facet>
...
   <t:column colspan="10">
       <t:outputText value="#{group1.headerValue}" />
   </t:column>
   </t:datable var="group2" value="#{group1.groupData}" embedded="true">
       <t:column colspan="2">
           <t:outputText value="#{group2.headerValue2}" />
       </t:column>
       <t:column colspan="8">
           <t:outputText value="#{group2.headerValue2}" />
       </t:column>
</t:datable var="detail" value="#{group2.detailData}" embedded="true">
           <t:column>
               <t:outputText value="#{detail.value1}" />
           </t:column>
....
           <t:column>
               <t:outputText value="#{detail.value10}" />
           </t:column>
       </t:datable>
   </t:datable>
</t:datable>

I know, with facelets I can achive the same using plain html tags and dataLists, but I STRONGLY prefer NOT to use such an approach, I'd like to use ONLY components.

What do you think?

Ciao,
Mario

Reply via email to