jQuery datatable headers are not taking full width

Question

I am rendering a jQuery datatable via ng-repeat in Angular JS. The table is inside a bootstrap tab(which is primarily hidden) and also inside a bootstrap accordion. Now my table body is taking full width but the table headers are not taking full width and are gathered in left side. I have called the column.adjust() function on tab change but no result. Is it a bug in jQuery Datatable? Or can you please help me where am I doing wrong.

On tab change;

$('#toptab').on('click', function (e) {

    for(var i=0;i<$scope.grids.length;i++)
        $scope.grids[i].columns.adjust().draw();

});

Filling the datatable with data

setTimeout(function() {
    table = $("#xl_" + key).DataTable({
        "aaData": tableBody,
        dom: 'Blfrtip',
        buttons: ['copy', 'csv', 'excel', 'print'],
        //"scrollX": true,
        "scrollY": true,
        "lengthMenu": [
            [100, 250, 500, -1],
            [100, 250, 500, "All"]
        ],
    })
    $scope.grids.push(table);
}, 1000)

Answer 1

CAUSE

Your table is hidden initially which prevents jQuery DataTables from adjusting column widths.

SOLUTION

If table is in the collapsible element, you need to adjust headers when collapsible element becomes visible.

$('#myCollapsible').on('shown.bs.collapse', function () {
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});

If table is in the tab, you need to adjust headers when tab becomes visible.

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});

Code above adjusts column widths for all tables on the page.

See columns().adjust() API methods for more information.

LINKS

See jQuery DataTables – Column width issues with Bootstrap tabs for solutions to the most common problems with columns in jQuery DataTables when table is initially hidden.