Datatable Responsive Plugin is not supporting aoColumn setting bVisible:false option.

pansathish

Hi Allan,

In my datatable I have configuration with bVisible:false option for some of the columns.It is working good only for normal datatable. But it is not supporting with Datatable Responsive plugin. While applying responsive plugin it is showing all columns even the table has bVisible:false column.

Please let me know if any fixes need to do..

allan

That is how Responsive is designed to operate. If you don't want the hidden data to be visible at all you would need to create your own rendering function: responsive.details.renderer.

Allan

pansathish

Hi Allan,

Using responsive.details.renderer function, I can able to change the hidden column data rendering html. But how to set visible false for particular column permanently.

i.e.

"columns": [
{ "visible": false },
null,
null,
null,
null
] } );

How to implement above feature in responsive render method. Because it is not working with responsive plugin.

Here is jsfiddle test url:

http://jsfiddle.net/Uu997/9/

Sathish

allan

Can you link me to a test case showing the problem please. That should work.

Allan

pansathish

Sure Allan,

Here is the link

http://jsfiddle.net/Uu997/9/

Thanks,
Sathish

pansathish

Hi Allan,

Could please check above issue.

allan

Excellent - thanks. I think that is indeed an error, but unfortunately the fix might be a little complicated... As a work around, add className: 'none' to the column definition to have Responsive always exclude that column: http://jsfiddle.net/Uu997/10/ .

Allan

allan

Actually, I think I've got a nice way of putting in the required change for this - but I'm not certain that it is the right thing to do. i need to think about it for a bit! For the moment, the workaround is the way to do it!

Allan

pansathish

Hi Allan,

Thanks for your quick response.

But still "visible:false" feature is not working in your jsfiddel link also. You have added first column with visible:false option. but that column is showing in table. why ?.. any issue fix or update need ?

My requirement is:
1. If any column has "visible:false" option that column should not be in normal table and also in responsive table.

Thanks,
Sathishbabu

pansathish

Hi Allan,

any fixes I need to do for above one ?

Thanks

allan

But still "visible:false" feature is not working in your jsfiddel link also. You have added first column with visible:false option. but that column is showing in table

Seems to work just fine for me. I added the className: 'none' option I mentioned in my comment above.

Allan

pansathish

Hi Allan,

While clicking + button in that table, its showing visible:false cloumn under the row.

I donot want to hide that column under the row.I want totally remove the column from table and also in under the table row.

Please check your link

http://jsfiddle.net/Uu997/10/

Thanks for your great support

Sathish

allan

While clicking + button in that table, its showing visible:false cloumn under the row.

Yes - as I mentioned above, you would need to modify the rendering function to exclude the information you don't want.

Allan

cbtdev

I recently came across this same issue which has brought me to this thread. Was curious if any further progress has been made to support this aside from the className workaround?

I am especially interested in this working with the ColVis plugin. We have cases where we have defined default column visibility, but the user can override this through custom state saving. Naturally, we would like to load the state into the responsive layout without the hidden columns showing up.

Thanks!

tsakal

Hi cbtdev.

I Think this Is solved here : https://datatables.net/forums/discussion/24145/datatables-responsive-special-class-logic-never-not-working-as-expected#Comment_67248

Regards

Evangelos

allan

The problem with using ColVis with Responsive is that they are both operating with the table's column visibility. So if you were to set a state with ColVis, Responsive could override that.

A partial fix might be possible to do is to modify ColVis so that it will add the class never when a column is hidden using its control buttons so Responsive can't show it. But going the other way around is more difficult - is Responsive were to hide a column, and ColVis then show it, Responsive would hide it again on its next update, unless an "always" class were added, which isn't ideal as it removes any automated hiding.

Perhaps a long term if is to have ColVis let the use toggle between three possible states: Visible (always), Hidden (never) and Auto.

What do you all think?

Regards,
Allan

cbtdev

Thanks tsakal, I can see how that will work when the ColVis plugin is not being used. Allan is correct though that responsive overrides that on its next update so it doesn't really work for our use case.

I like the idea of having three possible states. In your mind, how would Auto function? For that state, it seems to me that responsive should respect column visibility set by ColVis and not the other way around. What about the possibility of adding an additional column property that keeps track of the responsive visibility?

For example, if the column has visible: true then responsive behaves according to the responsiveVisible flag. If the column has visible: false then responsive for that column is disabled (it won't show in the table or child row).

Let me know what you think.

Thanks!

allan

For that state, it seems to me that responsive should respect column visibility set by ColVis and not the other way around

Yes:

• ColVis sets column to visible - column always visible - responsive cannot override, even if it causes the table to overflow
• ColVis set column to hidden - column never shown
• ColVis set column to auto - Responsive decides if the column should be shown or not.

Unfortunately columns.visible is a boolean option so it is going to take a little though about how exactly this should be done...

Allan

cbtdev

That makes sense. Thanks again for all your effort and look forward to seeing the integration between these two plugins!

cbtdev

How would you go about adding/removing the class never to a column after using the ColVis control?

allan

Currently you wouldn't without hacking the library - there is no option to do that. I'm actually not sure that would be the best way of approaching the issue anyway. A better option would probably to have individual buttons for each column that will toggle the class and then have Responsive recalculate what columns should be displayed.

I'm working on a replacement to TableTools and ColVis that should make that kind of interaction a lot easier.

The best option would actually be for column visibility and Responsive to be somewhat more separated as I suggested above - adding an intermediate state of "let Responsive decide", but I suspect that won't be trivial to implement unfortunately.

Allan