ColVis extension hide columns on mobile

Hi,

thanks for your post, and sorry for the trouble.

I’m afraid that that’s not directly possible. ?? The DataTables Colvis library does not support a feature like that, from what I know.

Regards,
Tobias

Hi Tobias,

Thanks for your replied, is there anyway I can call this command from the custom css @media (max-width: 979px) {}

"aoColumnDefs": [ { "bVisible": false, "aTargets": [ 2,3 ] } ]

Is it possible to be done with css without using ColVis? I just want to hide few columns in the mobile and user can click something to show the columns again.

Hi,

no, those commands can not be combined, I’m afraid. The @media query is CSS, while the other command is JavaScript code.

The only solution that I can think of here is that you basically add your own buttons that show/hide columns.

Regards,
Tobias

Hi Tobias,

Sorry for trouble you, lets say my custom css code as below:

@media (max-width: 979px) {

	.tablepress-id-1 .column-2,
	.tablepress-id-1 .column-3 {
		display: none;
	}

}

Can I have a Javascript button code to show the hidden column back, I am not good in programming, thanks

Hi,

yes, that should work. You could e.g. use jQuery to create JS that listens for a button click and then adds/removes a special CSS class from a column (and you use that CSS class in your CSS code). Unfortunately, I don’t have the time to develop this for you, at the moment. Sorry.

Regards,
Tobias

Hi Tobias,

I will try, if worked i will post the code here, thanks

Hi,

that would be great! Maybe it’s useful for others as well!

Regards,
Tobias