Separate responsive controls from first column contents

[pxpm]

WHY

BEFORE - What was wrong? What was happening before this PR?

It was not possible to have a link (<a href="...">) on the first column while having responsive table enabled.

I was always bugged by that, but didn't find the "motivation" to work on a solution for it.

Today while working on https://github.com/Laravel-Backpack/editable-columns/pull/79 I found out that editable columns had an "hacky" solution to address the before mentioned problem with responsive tables, introduced here: https://github.com/Laravel-Backpack/editable-columns/pull/14

This hacky solution had undesired side effects, like while trying to set the input to type=date for example, it wouldn't trigger the default input calendar for date selection as the click handler was hijacked.

Upon further investigation to datatables api I found out that it's possible to make the column "trigger the responsive modal" without displaying the "three dots" by using type: none in responsive table details configuration.

Also found that's possible for responsive table to configure the target that triggers the responsive functionality.

Connecting all the dots I came up with this solution, that only triggers the responsive modal when clicking in the target (three dots), and leaves the rest of the column free to have other behaviors, such an anchor 👍

AFTER - What is happening after this PR?

We can now have other triggers (clicks etc) in the first column content without interference from datatables responsive plugin.

It will allow me to remove the click hijack in the editable columns.

HOW

How did you achieve that, in technical terms?

Configured datatables to don't display the "controls" (three dots) for the responsive functionality.
Configured datatables to seek for a dtr-control class in the row to trigger the responsive functionality.
Manually added the "controls" similar to how we add the details row/bulk actions.

Is it a breaking change?

I don't think so.

How can we test the before & after?

Add a link in the first column and enable details row.

[pxpm]

I've tested this on all themes, we are golden 👍

[falterkofler]

I'm not sure but I think this caused the 3 dots in the first column to disappear in all my list views on mobile, even if the first column is no custom column at all.

[dilneiss]

I'm not sure but I think this caused the 3 dots in the first column to disappear in all my list views on mobile, even if the first column is no custom column at all.

same issue here

[pxpm]

Hey @dilneiss thanks for the report. Sorry I've missed @falterkofler comment earlier, that's why I always advice to open a new issue instead of commenting on closed ones.

Can you open a new issue and give me some more details about your problem ?

What version of backpack are you using ? You can get it with php artisan backpack:version.

Is the issue present on all mobile browsers or are you seeing the problem in a specific one ?

At least on web mobile view I can't reproduce the issue as you can see in the following images:

Thanks