Using Responsive on small screen and Fixed columns on large screen on the same table ?

Carluccio

Hi there.
I trying to use the responsive feature and fixed columns on the same table depending on the screen size.

I have tried the code below with no luck. Do you think is it possible?

I know I can always create 2 separate tables, and displaying one depending on the screen size, but it’s not ideal.

Thanks for your help.

$(document).ready(function() {


$(window).on('resize', function() {
isSmallWindow = $(this).width() < 768;
if(isSmallWindow) {

$('#example').DataTable( {
  responsive: {
    details: {
        display: $.fn.dataTable.Responsive.display.childRowImmediate,
        type: 'none',
        target: ''
    }
  }
} );



}else {

var table = $('#example').DataTable( {
  scrollY:        "300px",
  scrollX:        true,
  scrollCollapse: true,
  paging:         false,
  fixedColumns:   true
} );


}
});  



} );    

allan

In the approach you've taken there you would need to destroy the DataTable on each resize event. Then you can reinitialise it with the features you want.

I haven't actually tried mixing the two together before - I tend to see them as orthogonal to each other, but I can see that it might be useful. We'll need to dig into this some more.

Allan

Carluccio

Thanks, I’ll try