[SOLVED] Dynatable broke with Dynamic HTML Headers

Dynatable broke with Dynamic HTML Headers

I have created a Dynatable, I have dynamically crafted the Table Headers. Dynatable gives an error when it is run as it cant find the Headers in the HTML.

ERROR:Uncaught Error: Couldn't find any columns headers in 'thead tr th,td'. If your header row is different, specify the selector in the table: headRowSelector option.

SEE FIDDLE: https://jsfiddle.net/0ycqnaxg/6/

It does work somewhat if the HTML contains:

Working FIDDLE: https://jsfiddle.net/0ycqnaxg/9/

<thead>
    <th>FirstName</th>
    <th>LastName</th>
  </thead>

But i have left the thead blank in order to allow the dynamic creation.

Solution

For some reason, Dynatable uses 'thead tr' as the headRowSelector when the headers are created dynamically and it searches for 'th' under that. The easy solution is to explicitely specify 'thead' as the headRowSelector.

$('#my-table').dynatable({
    table: {
        headRowSelector:'thead',
    },
    dataset: {
        records: columns
    }
});