How to make datatable headers span a number of columns - jsf

Question

I have a simple JSF datatable, which currently has four columns, one header row and (with current data) three data rows.
I have to add three extra columns; that part's easy.
I also want to add another header row before the existing header row with headers that span a subset of the columns.
The desired result is something like:
Column 1: first row empty; header on second row.
Columns 2-4: first row header spans 3 columns; second row has individual column headers.
Columns 5-7: first row header spans 3 columns; second row has individual column headers.
Is this possible? If so, how do I do it?
Following are images showing what it should look like.
This is the data table before I've changed anything.
Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample1.gif
This is the data table after I've added three columns. I was able to do this easily.
Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample2.gif
This shows the desired end result, which I can't figure out. Note the "Retail Sales" and "Fleet/Gov Sales" headers each span three columns.
Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample3.gif

Answer 1

This would be easy if you were using Richfaces (as Bozho mentions) with the breakBefore attribute.
Here's a quick example:
<rich:dataTable value="#{countryCodeListFactory}" var="c">
<f:facet name="header">
<rich:columnGroup>
<rich:column colspan="2">Main</rich:column>
<rich:column colspan="4">Other Details</rich:column>
<rich:column breakBefore="true">Country ID</rich:column>
<rich:column>Name</rich:column>
<rich:column>Region</rich:column>
<rich:column>Alpha</rich:column>
<rich:column>ISO</rich:column>
<rich:column>Flag Path</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column>#{c.countryId}</rich:column>
<rich:column>#{c.countryName}</rich:column>
<rich:column>#{c.region}</rich:column>
<rich:column>#{c.alpha3}</rich:column>
<rich:column>#{c.isoNum}</rich:column>
<rich:column>#{c.flagImage}</rich:column>
</rich:dataTable>
If you're not then hopefully you're using facelets. Then you can build the table manually using the <ui:repeat>
<table>
<tr>
<th colspan="2">Main</th>
<th colspan="4">Details</th>
</tr>
<tr>
<th>ID</th>
<th>Name</th>
<th>Region</th>
<th>Alpha</th>
<th>ISO</th>
<th>Flag</th>
</tr>
<ui:repeat value="#{countryCodeListFactory}" var="c">
<tr>
<td>#{c.countryId}</td>
<td>#{c.countryName}</td>
<td>#{c.region}</td>
<td>#{c.alpha3}</td>
<td>#{c.isoNum}</td>
<td>#{c.flagImage}</td>
</tr>
</ui:repeat>
</table>

Answer 2

You can't do this with <h:dataTable>. Well, you can with some ugly hacks, like modifying the DOM with javascript and adding the desired columns, but that's not what you should do.
Take a look at RichFaces dataTable - its columns support the colspan attribute.