How to make datatable headers span a number of columns

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.

1. This is the data table before I've changed anything.
   

2. This is the data table after I've added three columns. I was able to do this easily.
   

3. 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.
   

Answer 1

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.

Answer 2

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>