Get Dynatables to modify thead headers after a JSON call

I have an ajax backed dynatable. At the moment, it works perfectly for tables with known headers prior.

Example:

var tableHeaders = '';

// Generate table headers from some list
$scope.Model.computed.selection_list.map(
    function(selection){
    column_name = selection.table + "." + selection.column;
    tableHeaders += "<th>" + column_name + "</th>";
});

//wipe div hosting the dynatable and reinitialise a table
var table_div = $('#TableDiv');
table_div.empty();
table_div.append('<table id="previewTable" class="table table-condensed table-responsive table-striped table-hover"><thead><tr>' + tableHeaders + '</tr></thead></table>');
var preview_table = $('#previewTable');
console.log("Table wiped");

//initialise the dynatable
preview_table.dynatable({
    features: {
        perPageSelect: true,
        search: false
    },
    table: {
        defaultColumnIdStyle: 'underscore',
        headRowSelector:'thead tr',
        headRowClass: ''
    },
    dataset: {
        ajax: true,
        ajaxUrl: data_url,
        ajaxOnLoad: false,
        ajaxMethod: 'POST',
        records: []
    }
    });

However, I'd like to have the table headers generated after fetching the records but prior to filling out the rows.

Is this possible?

// Changing via an ajax success event hook doesn't work. 
// The table headers change but the records don't bind to the correct column leaving every row as null
preview_table.bind('dynatable:ajax:success', function(e, response){
 console.log("Ajax response: " + response) ;
    tableHeaders = '';
    first_record = response.records[0];
    Object.keys(first_record).map(function(column_name){
        tableHeaders += "<th>" + column_name + "</th>";
        }
    )
    preview_table.html('<thead><tr>' + tableHeaders + '</tr></thead>')
    console.log("headers: " + tableHeaders);
})

I had exactly the same problem and after hours of struggling I came up with this solution:

First, your initial TABLE should look like this:

<table id="my-table">
  <thead>
    <tr><th></th></tr>
  </thead>
  <tbody>
  </tbody>
</table>

We need the empty TH to prevent the plugin from throwing an error (Couldn't find any columns headers in...), it will be removed later.

Then we use the dynatable:ajax:success to edit the columns as follow:

$("#my-table").one('dynatable:ajax:success', function(e, response){ 
    //Get dynatable 
    var dynatable = $(this).data('dynatable');
    //Remove the empty column
    dynatable.domColumns.remove(0);
    //Add new columns
    var pos = 0;
    for(var column in response.records[0]) {
        dynatable.domColumns.add($('<th>'+column+'</th>'), pos++);
    }
});

Finally, you can initiate the plugin:

$("#my-table").dynatable({
  features: {
    perPageSelect: true,
    search: false
  },
  table: {
    defaultColumnIdStyle: 'underscore',
    headRowClass: ''
  },
  dataset: {
    ajax: true,
    ajaxUrl: data_url,
    ajaxOnLoad: false,
    records: []
  }
});

Check the following demo, please note that the snippet is not fully functional it throws (SecurityError). Here is a fully working jsfiddle:

var data_url = "https://gist.githubusercontent.com/iRbouh/47a9fb7e5f6a79e0f4b0e7e8a837a825/raw/6adbba47bfbf9453c50f9710f77c71e69f683139/sample-data.json";

var preview_table = $('#my-table');

preview_table.one('dynatable:ajax:success', function(e, response){ 
  //Get dynatable 
  var dynatable = $(this).data('dynatable');
  //Remove init column
  dynatable.domColumns.remove(0);
  //Add new columns
  var pos = 0;
  for(var column in response.records[0]) {
    dynatable.domColumns.add($('<th>'+column+'</th>'), pos++);
  }
});

preview_table.dynatable({
  features: {
    perPageSelect: true,
    search: false
  },
  table: {
    defaultColumnIdStyle: 'underscore',
    headRowClass: ''
  },
  dataset: {
    ajax: true,
    ajaxUrl: data_url,
    ajaxOnLoad: false,
    records: []
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/alfajango/jquery-dynatable/master/jquery.dynatable.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/alfajango/jquery-dynatable/master/jquery.dynatable.js"></script>
<table id="my-table">
  <thead>
    <tr><th></th></tr>
  </thead>
  <tbody>
  </tbody>
</table>