Responsive - is it possible to tell if there are overflowing columns?

tharglet

Is it possible to tell if there are overflowing columns when the table is set to responsive? I'd want this for table initialisation and the column-visibility event, so that I can turn off the "+" column when it isn't needed.

Currently in the app I'm working on the "+" buttons are visible all the time, which is a bit annoying and confusing when there's nothing to expand, and I'd like to fix that.

colin

Hi @tharglet ,

You can call responsive.hasHidden(), or you can use the Responsive event responsive-display perhaps.

Hope that helps,

Cheers,

Colin

tharglet

This is the function I thought would do it, but even with one column shown, it seems to return true...

I called table.columns().responsiveHidden and got this mess:

true, true, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false

The two that are returning true are shown on the screen, not sure what's going on.

colin

Those functions are working for me, if could link to a test case, we can take a look. One thing I should've said, is if you have a control column, as in this example here, it will behave as you want - the '+' is only shown when columns have been hidden.

Cheers,

Colin

tharglet

Ah, I've found the issue replicates itself if you change the control column class.

Needed to decouple it (think it was to apply some of the needed CSS changes for our app), and that's decoupled the autohide behaviour. I'll dig around in the internals of DataTables to see what piece of code is now erroneously missing from the control column.

tharglet

Hm, looks like this could be the oopsie:

Responsive allows you to set the control column using responsive.details.target, but this code seems to be doggedly looking for .control, even though that can be overridden

This is https://github.com/DataTables/Responsive/blob/master/js/dataTables.responsive.js @ 536

colin

Yep, that's how it behaves - as it says on responsive.details.target :

Please note that the column defined here should have the class control added to it. This allows the Responsive CSS to display a control icon to the end user.

But yep, modify the code to suit your needs - the perks of open source.

tharglet

So it was intentional. Hm. Might see if I can make a version where it is possible to attach the behaviours without having the "free" css in the way.