Responsive: Mix automatic and manual

bablaza

I am using Responsive for a table. Above a certain breakpoint, I want the automatic Responsive behavior - columns get hidden, and can be shown by revealing the child row.

However, below that breakpoint, I am using a different mechanism to stack the table cells so they all appear on a mobile display. So below that point, I want all the columns to show.

I can't use the Responsive breakpoint system, because that only allows you to define which columns do not get moved to the child row when the window is resized, not which columns are moved/not moved to the child row on resize.

What I'm looking for is a way to say, above this breakpoint, all columns should be handled automatically. Below it, all columns should be handled manually.

I could destroy and re-initialize the table without responsiveness on some event, but that seems like overkill. Besides, I don't want to have to constantly monitor the viewport width. I'd like to handle it with a style sheet, but the Responsive javascript code seems to add a "display: hidden;" style directly to the <td> when it hides columns, and I don't think that level of specificity can be overridden by an external stylesheet. It would be nice if a class was added/removed instead, but I can't change that.

At this point, I'm looking at watching the resize event, checking the viewport width, then removing hidden attribute if the width falls below my breakpoint, but how would I reapply the correct hidden status if the viewport expands above my breakpoint?

Any ideas are welcome.

allan

I don't think there is a way to do what you are looking for I'm afraid - it wasn't designed with that in mind. Perhaps adding enabled and disable methods would work - then when the window goes to your given width, it would enable/disable Responsive as required.

Allan

bablaza

Appreciate the response. Adding those methods where?

allan

Into Responsive - it would require some development in there. If that sounds like it would do what you need, I'll add it to my list of things to do.

Allan

bablaza

I have a working solution, which you can see here:

https://education.delaware.gov/digital-de/family-resources/summer-programs/

Note that above 640px, the table responds like a normal responsive Datatable. Below 640px, it stacks the cells vertically.

in the _setColumnVis function, I found that removing .css( 'display', display ) and setting dtr-hidden with display: none in CSS allowed me to control the display of the cells using a breakpoint. So I monitor the 'responsive-resize' event, and remove the display attribute from all dtr-hidden elements (since CSS is controlling visibility) when a resize is detected. This isn't very efficient, but it works.

One additional headache was that I use :before to display the cell label, and DTR uses that for the 'show child row' control. I had to undo a lot of the attributes at my breakpoint. Not a big deal, just tedious.

If you wanted to support something like this, all you would have to do is remove the jQuery().css() calls that set 'display' to 'none', then add a style for dtr-hidden to the DTR stylesheet. I assumed you were adding that CSS to the element because there was no other way to accomplish what you wanted. Indeed, there's even a comment in the code that says 'the control of the display attribute works well'. I understand that there may be other cases where setting that style on the element is required and I'm just unaware of them, but you know better than I. I'm just happy I have a solution.

allan

That's a clever workaround - thanks for sharing it!

Allan