Ability for the Responsive extension toggle arrow to be on a different column than the first one
Ability for the Responsive extension toggle arrow to be on a different column than the first one
Emberfire
Posts: 7Questions: 1Answers: 0
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?
This question has an accepted answers - jump to answer
Answers
Looks like you might be missing part of the config to place the
dtr-controlclass in the appropriate column. See this example.Kevin
You are correct, however if the
dtr-controlis 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-hiddenclass applied by DataTables. I didn't see any styles associated withdtr-hidden, but the column hasdisplay: noneset as an inline style.I suspect you will need to apply the classname
allto that column, as shown in this example, to always display that column. See the HTML tab of that example or usecolumns.classNameto apply the class.Kevin
I built a simple example:
https://live.datatables.net/kezobuga/1/edit
Note the test case does not rely on the
allclassname.The column with
dtr-controlapplied doesn't become hidden nor is thedtr-hiddenclass 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 thedtr-hiddenclass assigned to the column withdtr-controlapplied.Kevin
Are you saying you are using Javascript or jQuery to add the classname to the column?
Kevin
Sorry for the late answer.
Yes, even after adding the
allclass the column remains hidden.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
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-controloverrides theall.I'd suggest having the responsive control column on its own without data in such a case.
Allan
I understand.
The only thing I would still mention, though, is that if
dtr-controlisn'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
Yes, the icon will only appear for a column which has the
dtr-controlclass. 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
Thank you again, 2nd issue you've helped me with these couple of weeks