I've noticed that a lot of the issues on jquery data tables have to do with horizontal scrolling and misalignment of headers. My issue is different. I do not have horizontal scrolling, but my header doesn't align on page load. See image below.
It looks like each header varies based off of the length of text in the box. Before adding the fixed header, everything was aligned. Im wondering if anyone hasd experienced this and if so, how did you work around it?
See if calling fixedHeader.adjust() will solve it. For example:
$('#example').DataTable({
'drawCallback': function( settings ) {
var api = this.api();
api.fixedHeader.adjust();
}
});
It looks like you're displaying custom controls in the table and they may be initialized after jQuery DataTables calculates width of headings.
I was able to fix this by downloading the package through NPM and then applying the fixedHeader attribute to true on tale initialization
Write,
$(".dataTables_scrollBody").width($(".dataTables_scrollHead").width());
Note:- I hope you have written "scrollX": true If not then please write this line. It will enable horizontal scrollbar.
