bad markup in programmatic data-table column headers

[rjmorris]

PR #668 introduced a way to specify the columns of a dataTable programmatically, so that you don't have to place them in your HTML. However, the markup it creates isn't correct as far as I can tell. You can see this in the example at http://dc-js.github.io/dc.js. The generated markup looks something like:

<table>
    <th>Date</th>
    <th>Open</th>
    ...
    <tbody>
        ...
    </tbody>
</table>

According to the HTML spec, the only permitted parent of th is tr; it shouldn't be a direct child of table. It's also good practice to put the tr inside a thead. Therefore, I think the generated markup should look like this instead:

<table>
    <thead>
        <tr>
            <th>Date</th>
            <th>Open</th>
            ...
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

I've worked around this by adding the following to my postRender and postRedraw hooks:

var headerGroup = $('<thead>').prependTo('#staff-table');
var headerRow = $('<tr>').appendTo(headerGroup);
$('#staff-table th').detach().appendTo(headerRow);

Without the workaround, things don't work right when I try to pass the DC dataTable into the jquery DataTable plugin, because the plugin can't detect the header row.

[gordonwoodhull]

Thanks for the report @rjmorris. Ah HTML and its implicit tags! (Or is it the browsers and their too-helpful guessing? I'm never sure.)

I agree with your analysis. This should be an easy and safe fix.

[rjmorris]

Ah HTML and its implicit tags! (Or is it the browsers and their too-helpful guessing? I'm never sure.)

Ha, well I'm OK with blaming both.