Problem with header facet on scrollable data table
Hi,
I'm having trouble with a scrollable data table, trying to get a header facet that has headers for a set of columns.
I started out with a simple data table. Here's the code I use to generate the table:
<rich:dataTable value="${form.reportDataModel.goalOwners}" var="goalOwner">
<f:facet name="header">
<rich:columnGroup>
<rich:column rowspan="2">
Region
</rich:column>
<rich:column colspan="2">Names</rich:column>
<rich:column breakBefore="true">First Name</rich:column>
<rich:column>Last Name</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column>
Olympia
</rich:column>
<rich:column>
Bob
</rich:column>
<rich:column>
Smith
</rich:column>
</rich:dataTable>
And here's a screenshot of what that looks like when it renders:
The problem is that I really want this to be a scrollable data table. If I change the code so that it's using a rich:scrollableDataTable instead (changing nothing else):
<rich:scrollableDataTable value="${form.reportDataModel.goalOwners}" var="goalOwner">
<f:facet name="header">
<rich:columnGroup>
<rich:column rowspan="2">
Region
</rich:column>
<rich:column colspan="2">Names</rich:column>
<rich:column breakBefore="true">First Name</rich:column>
<rich:column>Last Name</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column>
Olympia
</rich:column>
<rich:column>
Bob
</rich:column>
<rich:column>
Smith
</rich:column>
</rich:scrollableDataTable>
Then I get two problems, both visible in this screenshot:
1) The headers are not picking up the right style. They do lay out appropriately, with the two-column header appearing in the right place. However, they've lost the font, the text alignment, the background color, etc.
2) More importantly, the table data is not displaying properly. It puts in a scroller, but it wedges everything into the first column. The scrollbar visible at the bottom is functional, and can be used to scroll across the various columns of data, but it clearly should not all be appearing under just the first column header.
I have been able to duplicate this behavior on Firefox 2, Firefox 3, IE 6, and IE 7.
If anyone has any suggestions for how to make this work, or some other way to get the kind of headers we're looking for, that would be greatly appreciated.
-Joe
