Responsive, permanent access to the details display

MelodyNelson

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

I have another (strange ?) question about the extension responsive and the modal display...

I have tables with a lot of columns (a lot are hidden too), the users can choose to change visible columns via the button extension.

I'm using the details modal display like a page with a lot of informations, some of them are not in the columns of the tables (long texts, images, links, etc).

I'm wondering how can I have permanently the first column with the icon to access the details, even if the user is seeing all the columns. Also, this column will contain others icons/actions.

If I'm using only a renderer for my column like that, I have my additional content and the dtr-control icon:

columns: [
    { data: null,
    render: function ( data, type, row ) {
      return "<br><img src='images/loupe_safari.png' class='mb2' /><br><img src='images/relancer.png' />" ;
    }
    }, etc
]

If I'm using the a defaultContent, it will show as well as the dtr-control icon.

columns: [
        { data: null,
            defaultContent: "<i>bla bla</i>"
        }, etc
]

In both case, if the user hide a lot of columns, the column 0 for the dtr-control will be hidden and he won't be able to access to the additional icons + the access for the details display. I know it's the standard functionality that I choose to use « out of the box » but maybe you have ideas for « hacking » it.

I thought that targeting the tr will be the solution but the dtr-control is not active when the user choose just a few columns.
https://datatables.net/reference/option/responsive.details.target

I read about the responsive class but I didn't find an « always » class to always show a column.
https://datatables.net/extensions/responsive/classes

In a perfect world, I would like to always have all the icons / actions in the same column, and maybe also targeting the row for the modal display, whatever the content of the table (all columns, just a few).

MelodyNelson

oops, I miss this in the responsive class :
all - Column will always be visible, regardless of the browser width

I had, the class all to my column, she's always here but now I need to always have the action to open the Modal display... I will continue to read and search

allan

I'm wondering how can I have permanently the first column with the icon to access the details, even if the user is seeing all the columns.

This isn't a built in feature of Responsive I'm afraid. It will only show the "details" view button when something is hidden.

Based on what you are looking for, I would actually suggest something slightly different than Responsive (perhaps still use it, if you want to collapse columns - but just not for the info display). Instead, set up your own column that will trigger the modal view and write the data into the modal as needed.

This example is very similar to that, but it uses a child row rather than a modal. It could readily be adapted to use a modal instead though.

Allan

MelodyNelson

Thanks Allan for your feedback.
I will check on your example, also I was thinking about this one too for the detail display :
https://datatables.net/examples/advanced_init/events_live.html

For the moment, I'm in « slow mode » because I need feedback from the future users.
I'm « revisiting » their website and all their web tools and create different example pages to see what could be the better choices for them. I have fun with all the extensions and trying multiple combinaisons but at the end, it must be useful and user friendly to don't be a fail