Show specific columns only in Collapse responsive mode

  • Resolved btetrault

    (@btetrault)


    3 weeks, 4 days ago

    Hello!

    I have a table where, specifically on mobile, I’d like only the first two columns to display “uncollapsed” and the rest are collapsed. Datatables seems to always minimally want to show the first 3 columns no matter what I do or try.

    Been trying to play around with something like this but can’t get it to quite work right:

    "columnDefs": [ { "className": "all", "targets": [ 0, 1 ] } ]

    Is there a way within this Custom Commands area I can have it say something like “on mobile, only display the first two columns”?

    Thanks for any help you can provide!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi!

    Thanks for your post and sorry for the trouble!

    You are very close! You will need to assign the none class to all columns that should be collapsed initially, i.e. please try

    "columnDefs": [ { "className": "none", "targets": [ 2, 3, 4 ] } ]

    and adjust that list to all column indices (counting starts with 0) that should be hidden.

    Best wishes,
    Tobias

    Thread Starter btetrault

    (@btetrault)

    Thanks Tobias!

    That works perfectly on mobile, but on desktop and others it’s also hiding those same columns and my intent is to have all columns display on larger screens and what you’ve outlined here to only occur on mobile.

    Possible?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    Ah, now I see what you mean. For that, you would then need to use the CSS classes like min-tablet and similar, see https://datatables.net/extensions/responsive/classes, instead of all or none.

    So, something like

    "columnDefs": [ { "className": "min-tablet", "targets": [ 2, 3, 4 ] } ]

    should work here.

    Best wishes,
    Tobias

    Thread Starter btetrault

    (@btetrault)

    Bingo, thanks so much—makes a ton of sense now and that worked great.

    On the off chance I wanted to play around with different targets for different classnames, what would be the proper syntax for that?

    Would this be correct?

    "columnDefs": [ { "className": "min-tablet", "targets": [ 2, 3, 4 ] } , { "className": "mobile", "targets": [ 5, 6, 7 ] } ]

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    No problem, you are very welcome! ?? Good to hear that this helped!

    Yes, the syntax of that code snippet looks correct to me. I’m not sure right now what you are trying to achieve with that, though?

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress in the plugin directory. Thanks!

    Thread Starter btetrault

    (@btetrault)

    Perfect!

    That’s just an example—I may try to play around a bit to show/hide different columns for different sized screens instead of just the one option.

    Thanks again so much for all the help!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    alright, got it! Then you are using the correct syntax ??

    Best wishes,
    Tobias

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.