Columns widths are not adjusted after Responsive restores hidden columns

keleran

Hi,

I've noticed a small issue with table styling when using the Responsive extension.

When you shrink and then enlarge the window, restored columns have smaller widths than before. If you resize the window once again, or trigger $(window).trigger('resize'), or issue $(selector).dataTable().api().columns.adjust() command, the output will be fixed.

Here's an example: https://www.dropbox.com/s/bdfw5qcbel9eoxo/dt-r.gif?dl=0

Code I've used:

https://cdn.datatables.net/s/bs/dt-1.10.10,fh-3.1.0,r-2.0.0,sc-1.4.0/datatables.js

$('.summary').DataTable({
        responsive: true,
        ordering: false,
        lengthChange: false,
        searching: false,
        paging: false,
        info: false,
        columns: [
          {width: '8em', responsivePriority: 1},
          {width: '8em', responsivePriority: 4},
          {width: '8em', responsivePriority: 3},
          {width: '8em', responsivePriority: 2},
          {width: '8em', responsivePriority: 1},
          {width: '8em', responsivePriority: 2},
          {width: '8em', responsivePriority: 3}
        ]
      });

You can notice the same, but much less pronounced, behavior here: https://datatables.net/extensions/responsive/examples/styling/bootstrap.html

Probably something should be fixed in the plugin.

My current workaround is $(window).on('resize.dt', _.throttle($('.dataTable').dataTable().api().columns.adjust, 1000));.