ADF Faces – Nested Columns

Lucas Jellema 2

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.

 

2 thoughts on “ADF Faces – Nested Columns

  1. Hi Lucas,

    Great tip, very useful for me as most of my apps are weby like.
    Could you point me to the documentation where you find “af:column tags can be nested to produce groups of columns. The header of a column group spans across all the columns it contains. ”

    thanks,

    Branislav

Comments are closed.

Next Post

ADF Faces - Server Side (partial page rendering) Column Hide and Seek - Expanding/Collapsing Columns in Table

Facebook0TwitterLinkedinTables are probably the most important ADF Faces component to present data to the end user. A table can present a huge amount of data at once, both in terms of rows and columns. This of course can be overwhelming. Frequently, only some of the columns – some of the […]