I agree, how do you add all columns under the collapse css mode?
Thank you
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
Hi,
from what I understand, this should work:
"columnDefs": [ { "className": "min-tablet", "targets": [ 1, 2, 3, 4 ] } ]
Regards,
Tobias
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
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 🙂
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,
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.
Hi,
great to hear that this helped now 🙂
Best wishes,
Tobias
