Using Responsive >=2.x & ColVis - Show Hidden Columns In Child Row?

icdeb

I found the following question and relative answer on Stack Overflow: https://stackoverflow.com/a/32993719/2110294

Which points to a previous discussion on these forums: https://datatables.net/forums/discussion/29860/using-colvis-button-with-responsive-table-disables-hidden-columns

In this we find the following example: http://live.datatables.net/poqoyezo/1/edit

In this example, when a column is hidden / shown by ColVis it is added or removed from the child row.

Bumping the dependencies to the latest versions shows that this functionality is no longer the same.

Reverting the Responsive dependency to 1.0.7 shows that it something that changed between this version and version 2 which created these changes.

Is it possible that we can recreate this behavior with version >=2.0.0 of Responsive, could anyone share an updated example of this?

Many thanks.

EDIT: Here is a test case: http://live.datatables.net/femudeda/1/edit

colin

Hi @icdeb ,

I'm not quite following - with that final link, everything seems to be working as expected for me. Could you provide steps on how to reproduce the behaviour, please.

Cheers,

Colin

icdeb

Hi @colin

See this screencast as an example: https://imgur.com/a/7Qqkbac

What used to happen (http://live.datatables.net/poqoyezo/1/edit) is that responsive would move the hidden columns to the child row.

What now happens (http://live.datatables.net/femudeda/1/edit) is that those columns are no longer displayed.

My question is basically, how would we reproduce this type of functionality with the new version of responsive so that when you toggle the visibility of a column it is stored in the responsive child row?

kthorngren

Sounds like Responsive was re-architected to isolate it from Column Visibility. I don't see a way to use the Colvis button and place the hidden columns in the responsive child rows. Instead of using the Colvis Button it should be possible to create your own custom button to display the columns and when clicked toggle them from responsive to not.

I think you will need to use the Responsive Class Logic (maybe use class none) by toggling the class for the column. Then follow the class toggling with responsive.rebuild() and responsive.recalc() API's.

Allan or Colin may have better suggestions.

Kevin

allan

As usual, Kevin is spot on. If you mark a column as hidden, it will not be shown in the responsive view or in the table as a column if there is enough room for it.

Responsive 2+ is designed to simply collapse the currently visible table - not to show information that was hidden (having the two coupled together in 1.x was a real mess!).

If you do need the ability to display visible: false columns you could use a custom renderer for Responsive, or change its code slightly to match the behaviour you want.

Allan

icdeb

That makes sense and agree with the change as it was somewhat of a quirk in the behavior which did not make very much sense.

That being said, it was actually quite useful because it allowed a user to display the information that they wanted to see with the excess being contained within the child row. The way things are now, the user does not really have a choice in this regard and is left with the rows containing columns in a sort of left to right order.

Think in the case where you have say, 50 columns and you want to customize the data that is being viewed? Given that colReorder does not allow you to move the nested columns in the child row this was the only real solution that I had for column customization.

Thank you both for your feedback and suggestions though, i'll take a look at the options that you have provided and see if I can come up with something that works for me.

colin

Hi @icdeb ,

That's true for the default renderer, it won't show those columns that have been hidden, but you can create a custom renderer to get the behaviour that you want - see responsive.details.renderer. The last example on that page shows hidden columns being displayed.

Cheers,

Colin