Add categories to DataGrid header

Question

Is there a simple way to add categories to the DataGrid header? Basically, instead of just a single row with headers, I want an additional row that sits above that row and describes sections of the grid (rather than individual columns). E.g., in html, I could do something like this:
  <table>
    <tr><th colspan="2">Name</th><th colspan="2">Data</th></tr>
    <tr><th>first</th><th>last</th><th>age</th><th>gender</th></tr>
    <tr><td>john</td><td>doe</td><td>26</td><td>male</td></tr>
  </table>
Is there a reasonable way to do something like that in Flex? I've looked at Alex Harui's DataGrid footer, but after playing around with it a bit, it doesn't seem that it would be easily adapated.

Answer 1

So I'm trying to generalize this to more than two subcolumns. I got the item renderer working fine, but when I include the modified SplitDataGridHeader as a custom header renderer, it fubars the whole grid (even the other columns). I assume something I'm doing is making the Player very unhappy, but I don't see any errors when debugging in FlexBuilder: the entire Grid just shows up as plain white, with no styles applied and no data at all (even for the columns using standard renderers). Any idea what could be causing issues like this?