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

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

CarluccioCarluccio Posts: 8Questions: 3Answers: 0

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

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

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

    Colin

  • CarluccioCarluccio Posts: 8Questions: 3Answers: 0

    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 :p , what class should I use if I want to hide <td> only for smartphone ?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

Sign In or Register to comment.