Show/Hide columns from a link/button?

Hi,

you could maybe use this Extension: https://tablepress.org/extensions/datatables-colvis/
That will add the feature from this site to the table: https://datatables.net/extras/colvis/
(Notice the “Show/Hide Columns” button above the table.)

To hide columns 6 and 7 initially, you can add this to the “Custom Commands” textfield on the “Edit” screen of the table:

"aoColumnDefs": [ { "bVisible": false, "aTargets": [ 5,6 ] } ]

Regards,
Tobias

Wov, this is just what I have been looking for ??
However, if I show as default columns 1-5 and hide initially columns 6-7. Is it possible to allow the user only to show/hide the initially hidden columns 6 and 7? I would not like to allow the user to hide for example columns 1-5.

Hi,

yes, that’s possible with another parameter in the “Custom Commands”. Please try this:

"aoColumnDefs": [ { "bVisible": false, "aTargets": [ 5,6 ] } ], "oColVis": { "aiExclude": [ 0,1,2,3,4 ] }

Regards,
Tobias

Nice! I thank you again ??
Some styling is still to be done to the “button”, but that I can handle with the plugins CSS.

One more question, can I move columns in the Tablepress Edit Table-view? For example, if I have added data to fifth column and now I would like to move the whole column after the second column. Or do I have to manually copy the values to a new column that I have created after the second column?

Hi,

good to hear that this will work! ?? Yes, just style this as necessary via CSS.

And yes, moving columns is easily possible: You can drag and drop them via the column name letter at the top. Just click and hold the mouse on that and move the column to the desired place.

Regards,
Tobias

And how didn’t I notice that it was so easy ??

Hi,

I don’t know ?? But good to hear that everything is working now!

Best wishes,
Tobias

Hmmm… I’m having some problems with CSS. The plugin’s default CSS is not putting my column-names on one row, in the dropdown-list where the checkboxes are. The initially hidden column-names that I’m using are “+” and “-“.
I have tried to give more length to the “checkbox rows” but it will not work. The checkbox and the column-name are on different rows. According to HTML they are both inside of spans, so they should be on the same row… Any ideas?

Hi,

I have never tried to work directly with that CSS, but if you post the link to the table, I’ll take a look.

Regards,
Tobias

Hi,

great, the table is here
and the Hide/Show-button is the “[+]” in the upper right corner of the first table. There should be the “+” and “-” beside the checkboxes, but I haven’t got it to work ??

Thanks for taking a look!

Hi,

thanks for the link. I’m not sure what exactly causes this, but here’s some “Custom CSS” that at least shows the text next to the checkboxes, although it’s still not perfect:

.ColVis_Button {
    padding: 0px;
}
.ColVis_Button div {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 8px;
}
.ColVis_MasterButton {
    padding: 0 5px;
}

Regards,
Tobias

Hi,

thank you for your solution, but could you explain in a bit detail, in which file should that be added? I’ve tried in the tablepress-datatables-colvis/css/ColVis.css but nothing changes on the webpage.

Hi,

just put that into the “Custom CSS” of TablePress. That would be the easiest.
If you want to put it into a file, you’ll have to put it at the end of ColVis.css and ColVis.min.css.

Regards,
Tobias

Ah, of course, so stupid of me ??
Thanks, I’ll try to manage from here now! The checkbox-row only needs a bit more width and then it’s perfect.

Hi,

no problem ?? Good to see that this worked!

Best wishes,
Tobias