Is it possible to activate responsive functionalities only on small screen ?

Carluccio

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 }
        ]       
    } );
} );

colin

I think this is the same issue as discussed in this thread. I'll see if there's an update,

Colin

Carluccio

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 ?

allan

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