ADF Faces – Nested Columns

Recently I ran into a requirement on an ADF project to present columns in an ADF Faces table component in a clustered (nested) fashion. Out of 12 columns, one group of three columns and another group of four columns formed clusters – columns that together had something in common. And this clustering, column grouping or common-ness should be visualized in the table. For example by giving these groups of three and four columns a common header and visual indication using borders, in addition to their individual header and demarcation.

My first reaction was that it could be done or not in a very simple way. Boy, was I wrong! Yesterday I went through the ADF Faces documentation on Tables and Columns, and I quickly ran into a section on nested columns: "af:column  tags can be nested to produce groups of columns. The header of a column group spans across all the columns it contains. " There it was, exactly what I needed in the easiest way one can imagine!

and this table with nested columns was created from:

 

Nesting several columns into one cluster with a joint header – as for example was done with Email and Phone Number inside Contact – is very easily achieved by nesting the af:column element for Email and Phone Number inside a new af:column element Contact. In stripped code that looks like:

   <af:column>
     <f:facet name="header">
         <af:outputText value="Employee"/>
     </f:facet>
     ...
     <af:column >
       <f:facet name="header">
         <af:outputText value="Contact"/>
       </f:facet>
       <af:column >
         <f:facet name="header">
           <af:outputLabel value="Email"/>
         </f:facet>
         ...
       </af:column>
       <af:column >
         <f:facet name="header">
           <af:outputLabel value="PhoneNumber"/>
         </f:facet>
         ...
       </af:column>
     </af:column>
     ... 

The overall nested column structure presented in this page – stripped of the actual column contents – now looks like this:

 <af:table id="AllocationsTable" 
   <af:column ...>
     <f:facet name="header">
       <af:outputLabel value="Id" />
     </f:facet>
     ...
   </af:column>
   <af:column>
     <f:facet name="header">
         <af:outputText value="Employee"/>
     </f:facet>
     <af:column ... >
       <f:facet name="header">
         <af:outputLabel value="EmpId"/>
       </f:facet>
     </af:column>
     <af:column ...>
       <f:facet name="header">
         <af:outputLabel value="FirstName"/>
       </f:facet>
       ...
     </af:column>
     <af:column >
       <f:facet name="header">
         <af:outputLabel value="LastName"/>
       </f:facet>
       ...
     </af:column>
     <af:column >
       <f:facet name="header">
         <af:outputText value="Contact"/>
       </f:facet>
       <af:column >
         <f:facet name="header">
           <af:outputLabel value="Email"/>
         </f:facet>
         ...
       </af:column>
       <af:column >
         <f:facet name="header">
           <af:outputLabel value="PhoneNumber"/>
         </f:facet>
         ...
       </af:column>
     </af:column>
     <af:column ... >
         <f:facet name="header">
           <af:outputLabel value="HireDate"/>
         </f:facet>
         ...
     </af:column>
     <af:column id="EmployeeCurrent">
       <f:facet name="header">
         <af:outputText value="Current Position"/>
       </f:facet>
       <af:column ...><f:facet name="header"><af:outputLabel value="JobId"/></f:facet>...</af:column>
       <af:column ...><f:facet name="header"><af:outputLabel value="Salary" /></f:facet>...</af:column>
       <af:column ...><f:facet name="header"><af:outputLabel value="DepartmentId"/></f:facet>...</af:column>
     </af:column>
   </af:column>
   <af:column id="Allocation">
     <f:facet name="header">
       <af:outputText value="Allocation"/>
     </f:facet>
     ...
   </af:column>
   ...
 </af:table>
 

As you can see, creating clustered, nested columns – down to several levels – is an easy thing to do.

Note that when rendering, ADF Faces does not produce COLGROUP or COL elements, as I had expected and hoped for, but instead creates regular TR, TH and TD elements. Every additional level of column nesting results in an additional TR element – with the non-nested columns getting an increase in their ROWSPAN attribute.