Ability for the Responsive extension toggle arrow to be on a different column than the first one

Emberfire

As far as I know, currently the Responsive extension places the arrow toggle on the first column. You can modify that via these settings (in this case to appear on the 2nd column):

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

However, the toggle arrow still remains on the first one. The 2nd column is now used to toggle between opened and closed state, but the CSS doesn't reflect that.
You can manually set the arrow like so, where dtr-control-custom is a class added to each column:

table.dataTable.dtr-column.collapsed > tbody > tr {
    > td.dtr-control-custom,
    > th.dtr-control-custom {
        cursor: pointer;
        
        &:before {
            display: inline-block;
            box-sizing: border-box;
            content: "";
            border-top: 5px solid transparent;
            border-left: 10px solid rgba(0, 0, 0, 0.5);
            border-bottom: 5px solid transparent;
            border-right: 0;
            margin-right: 1rem;
        }

        .dtr-expanded &:before {
            border-top: 10px solid rgba(0, 0, 0, 0.5);
            border-left: 5px solid transparent;
            border-bottom: 0;
            border-right: 5px solid transparent;
        }
    }
}

A common use case for this might be if you have a selector column as the first, using DataTable.render.select() as a render function.

Is it some setting I'm missing, or does DataTables add the dtr-control class to the 1st column unnecessarily, when another should have it?

kthorngren

Looks like you might be missing part of the config to place the dtr-control class in the appropriate column. See this example.

Kevin

Emberfire

You are correct, however if the dtr-control is appended, the affected column mysteriously disappears and cannot be brought back in any way other than removing the class.

Edit: Upon inspection, the column seems to have a dtr-hidden class applied by DataTables. I didn't see any styles associated with dtr-hidden, but the column has display: none set as an inline style.

kthorngren

I suspect you will need to apply the classname all to that column, as shown in this example, to always display that column. See the HTML tab of that example or use columns.className to apply the class.

Kevin

kthorngren

I built a simple example:
https://live.datatables.net/kezobuga/1/edit

Note the test case does not rely on the all classname.

The column with dtr-control applied doesn't become hidden nor is the dtr-hidden class applied. Seems like this is something specific to your implementation. Can you update the test case or provide a link to a test case that has the dtr-hidden class assigned to the column with dtr-control applied.

Kevin

kthorngren

however if the dtr-control is appended

Are you saying you are using Javascript or jQuery to add the classname to the column?

Kevin

Emberfire

Sorry for the late answer.

Yes, even after adding the all class the column remains hidden.

Are you saying you are using Javascript or jQuery to add the classname to the column?

I was adding it via the columns.className option.

I've updated the example you've provided to reproduce the issue. Namely I've added the Select extension, added checkboxes as the first column and moved the Responsive toggle to the 2nd one, instead of the last.

Note that when expanding/collapsing the output pane of the JS Bin, the Name column pops into existence and subsequently disappears once you expand the pane fully, to allow space for all columns.

Please let me know if I'm misunderstanding the feature or missing a key part of the proper initialization.

Peter

allan

That's because it is marked as dtr-control - i.e. it is the control column, which is only needed when there are hidden cells. If you expand it wide enough, then there will be no hidden cells, therefore the show / hide (control) column isn't needed and it is removed!

I totally get the confusion here - however, the behaviour of dtr-control overrides the all.

I'd suggest having the responsive control column on its own without data in such a case.

Allan

Emberfire

I understand.

The only thing I would still mention, though, is that if dtr-control isn't applied manually (but the controlling column is still set to the 2nd one after the checkbox column), the expand/collapse icon isn't visible under any circumstance.

The functionality works, clicking on the 2nd column toggles the Responsive behavior when the table is in a small container, but the icon itself is gone.

I'd consider this a bug, but obviously you'd be the better judge of that

allan

Yes, the icon will only appear for a column which has the dtr-control class. It is a good point that this should perhaps be applied automatically based on the target specified. I will look into the implications of that - many thanks!

Allan

Emberfire

Thank you again, 2nd issue you've helped me with these couple of weeks