Is it possible to activate responsive functionalities only on small screen ?
Is it possible to activate responsive functionalities only on small screen ?
Carluccio
Posts: 8Questions: 3Answers: 0
in Responsive
Hi there, like said in the title, I am trying to activate the responsive feature on smartphones only ( ideally for screens under 576px ).
I have read the docs and made a test with the code below, but it doesn’t work the way intended.
Is it even possible, or does the responsive table get trigged automatically ?
Thanks a lot.
$.fn.dataTable.Responsive.breakpoints = [
{ name: 'desktop', width: Infinity },
{ name: 'tablet', width: 1024 },
{ name: 'fablet', width: 768 },
{ name: 'phone', width: 576 }
];
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.childRowImmediate,
type: 'none',
target: ''
}
},
order: [[1, 'desc']],
columnDefs: [
{ orderable: false, className: "desktop", targets: 0 },
{ orderable: false, className: "phone", targets: -1 },
{ orderable: true, className: "phone", targets: 1 },
{ orderable: true, className: "phone", targets: 2 },
{ orderable: true, className: "phone", targets: 3 },
{ orderable: true, className: "phone", targets: 4 },
{ orderable: false, className: "phone", targets: 5 }
]
} );
} );
Answers
I think this is the same issue as discussed in this thread. I'll see if there's an update,
Colin
Hi @colin , thanks for your help.
Actually I just want to know if there is a way to activate the responsive feature only on small screen ( let’s say under 576px ).
I am a little confused the doc here
, what class should I use if I want to hide
<td>only for smartphone ?Hi,
Not really - the intention with Responsive is that it doesn't matter what size the screen is, it will hide columns if they don't fit into the space available. Would you just have the table scroll if it didn't fit into a 600px wide layout for example?
Allan