Table width expanding to container with columns.adjust() / tabs example

Table width expanding to container with columns.adjust() / tabs example

timkeltytimkelty Posts: 1Questions: 1Answers: 0

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?

This discussion has been closed.