Table width expanding to container with columns.adjust() / tabs example
Table width expanding to container with columns.adjust() / tabs example
I'm using DT in tabs (https://github.com/jellekralt/Responsive-Tabs), and so I was following this to get the widths reset: https://datatables.net/examples/api/tabs_and_scrolling.html
The column resizing is working (widths on columns are no longer 0px when switching tabs), but width on the actual table
is shrink wrapped to the width of the columns, instead of expanding to the width of the container.
Furthermore, if there are no results, my "No matching records found" content is forced into the first column (no colspan).
So, to fix both issues I had to:
- reset the width on the table
- also call `.draw()
// https://datatables.net/examples/api/tabs_and_scrolling.html
$('.Tabs').on('tabs-activate', function() {
// Need to reset width on table, not sure why.
$.fn.dataTable.tables({visible: true, api: true}).table().node().style.width = '';
// .draw() is necessary for "no results" message to be properly positioned
$.fn.dataTable.tables({visible: true, api: true}).columns.adjust().draw();
});
Any idea why I have to reset the table width?
Seems like perhaps the "no results" colspan business should be part of columns.adjust?