How to adjust table headers in Angular-Datatables

Background

[wp_ad_camp_1]

This highlights how to programmatically adjust table headers after rendering angular-datatables. Note that sometimes before adjusting the headers so that they will aligned with the table body (<tbody>), a delay (via setTimeout()) is needed as the adjustment may be interrupted or prevented by any of the tables’ parent elements.

Software Environment

Any modern web browser
angular-datatables – v0.0.1 (https://github.com/l-lin/angular-datatables)
[wp_ad_camp_2]

JavaScript Codes

MyController.prototype.adjustTableColumns = function() {
    var table;
    for (var dtOptionKey in this.dtOptionsFVS) {
        table = $('#' + dtOptionKey).DataTable();
        if (DEBUG) {
          console.log('MyController:: redrawing datatable - ' + dtOptionKey, table);
        }
        table.columns.adjust().draw(true);
     }
};

Using setTimeout with the defined function above:

MyController.prototype.delayAdjustTableColumns = function() {
    setTimeout(this.adjustTableColumns, 100);
};