Viewing 13 replies - 1 through 13 (of 13 total)
  • I agree, how do you add all columns under the collapse css mode?

    Thank you

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    For that, please add this to the “Custom Commands” text field on the table’s “Edit” screen:

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

    This follows the class definitions from https://datatables.net/extensions/responsive/classes

    Regards,
    Tobias

    Perfect,

    Thank you for the additional code. That works very well!!!!

    Whoops, I spoke too soon. Is there a way to only make this visible on mobile? Right now it is visible on all, desktop, tablet, and mobile.

    I am reading the content you provided, but having some difficulty of how it actually works.

    This is what I have but it is not working.

    "columnDefs": [ { "className": "mobile-1", "targets": [ 1, 2, 3, 4 ] } ]

    Thank you

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    from what I understand, this should work:

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

    Regards,
    Tobias

    Thread Starter ahm3d samir

    (@ahm3dsamir)

    I have 4 columns and I want to show only the first column in the mobile.
    I also want to show 4 columns on the desktop

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi ahm3dsamir,

    then, a very similar “Custom Command” should work:

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

    Regards,
    Tobias

    Okay, I have one more to ask, please.

    Let’s say I want one code for desktop and tablet.
    "columnDefs": [ { "className": "?", "targets": [ 1, 2, 3, 4 ] } ]

    And one for mobile where I need all the columns to be collapsed.
    "columnDefs": [ { "className": "?", "targets": [ 1, 2, 3, 4, 5 ] } ]

    What overall code would I use for both scenarios?

    Also, I tried the desktop class and tablet class together, and it doesn’t work. It collapses them on mobile. It should be the complete opposite, correct?

    https://livinghisword.org/wp-content/uploads/tablepress-code.jpg

    Thank you 🙂

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    that’s not how this command works, from what I understand — you would only define one for all devices and the assigned classes will then determine the logic for which columns to show where.
    However, the classes are not the only influencing factors here. Things like CSS and the columns’ widths also play a role (the default feature of the collapse mode). Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Hi Tobias,

    Here is the link
    https://livinghisword.org/daily-biblical-news/

    Thank you

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for the link. When I now view the table, I get the “Article” and “Date” column on Desktop and Mobile (as the “Custom Command” is configured to that). Can you please explain again, what you want to achieve? And can you temporarily remove the “Custom Command” again, so that I can see the behavior with it?

    Regards,
    Tobias

    You know what, I like how it looks.

    Thank you for all your help.
    ————————————————————

    However, the question was is to have all columns hidden under the collapse except for the first column and the last column on desktop and tablet view.

    And then on mobile view, have all the columns collapse and hidden except of course for the first column is visible.

    Does this make sense? Wasn’t sure how to place the command code for multiple view options.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    great to hear that this helped now 🙂

    Best wishes,
    Tobias

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘How to show a single column in the interface’ is closed to new replies.