collapse mode: make the entire row clickable

Hi,

thanks for your question, and sorry for the trouble.

To achieve that, please add this to the “Custom Commands” text field on the “Edit” screen of the table:

"responsive": {
    "details": {
        "type": "column",
        "target": "tr"
    }
},
"columnDefs": [ {
    "className": "control",
    "orderable": false,
    "targets": [ 0 ]
} ]

Regards,
Tobias

thank you very much for the quick reply.

I tried.
From mobile it works correctly and has the expected behavior.
On the desktop, it does not load the first column of the table.
In particular, it loads the first column of the table for a fraction of a second and then disappears immediately afterwards.

thank you so much again for your precious help
Marco

Hi,

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

Sure,

https://rebrand.ly/kq5kzs5

thank you so much.

Hi,

thanks for the link.

To me, everything looks good here. You don’t see this on a desktop, because nothing needs to be hidden here. Only on small screens, like smartphones, are columns actually collapsed.
Or am I missing something?

Regards,
Tobias

In the desktop version the first column is missing.
There are 5 columns.
In the mobile version all 5 are displayed with collapse mode, while in the desktop version only 4 are displayed.
In particular in the desktop version the column called “STAND” is missing.

I believe that:
When the display is large enough, and therefore when it is not necessary to activate the collapse mode, the green button with the + disappears, and it is an expected behavior, but the first column also disappears, which is the column where the button is shown

if I delete: "targets": [ 0 ]
it works correctly, but the green button is no longer displayed also in mobile version

thank you very much for your time and your precious help.
Marco

Hi,

ah, ok. Now I understand!
Can you then please try with that second part of the “Custom Command”, i.e. only use

"responsive": {
    "details": {
        "type": "column",
        "target": "tr"
    }
}

Regards,
Tobias

ok, now all columns are displayed correctly, but the green button with + is never shown, not even in the mobile version.

I uploaded the changes to the link provided: https://rebrand.ly/kq5kzs5

I really appreciate it, thank you

• This reply was modified 4 years, 1 month ago by fivemarcus.

Hi,

ah, ok! I think I know what we need to do:
Please use the full code

"responsive": {
    "details": {
        "type": "column",
        "target": "tr"
    }
},
"columnDefs": [ {
    "className": "control",
    "orderable": false,
    "targets": [ 0 ]
} ]

again.
In addition, please add new (empty) first column to the table. After that, everything should be ok.

Regards,
Tobias

Perfect!
It works perfectly.
The whole row is clickable.
All columns are displayed correctly.
And in addition with the initial empty column trick, the green + button is only shown when needed.

Thank you very much, I really appreciate it.

have a nice day

Hi,

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

Best wishes,
Tobias

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