Hi,
thanks for your post, and sorry for the trouble.
Indeed, if a column should remain searchable (but not shown), hiding it from within the “Edit” screen or via the hide_columns Shortcode parameter will not work.
Instead, the column needs to be hidden with that CSS approach, or via JavaScript.
Can you clarify why the CSS approach is conflicting with the Collapse mode for responsiveness? I’m not sure what you mean there.
Regards,
Tobias
Thread Starter
andynz
(@andynz)
I have done a further test where the short code is:
[table id=57 responsive=collapse/]
As the table-width exceeds the width of the display, the table is displayed in collapse mode (green cross symbol in the first column).
If I add CSS:
.tablepress-id-57 .column-1 {display: none;}
and leave the short code as it is, the table is displayed in normal mode. Just the first few columns are displayed (no green cross symbol in column 1).
If I change the CSS:
.tablepress-id-57 .column-3 {display: none;}
and leave the short code as it is, the table is displayed in collapse mode (green cross symbol in the first column) with column 3 omitted.
It seems that the CSS method only works if the column to be hidden is not column 1. On reflection this seems quite reasonable. I will just need to move column 1 to a new position.
Andy
Hi,
thanks for the explanation! You are totally right! Column 1 is a bit special with the Collapse mode, as the green/red collapse button is indeed added to that column. Thus, if that column is hidden, the buttons will not be usable.
Indeed, moving the hidden column to a different column will solve this! Nice find!
Best wishes,
Tobias
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!
Thread Starter
andynz
(@andynz)
All seemed Ok, but I then found a snag with using CSS to hide a column. If I use datatables_buttons to export the table to Excel, the hidden column is included in the sheet.
This does not happen if I use hide_columns.
Andy
Hi Andy,
indeed, the “Custom CSS” will not be applied when exporting a table via the Buttons.
You could therefore hide it with a “Custom Command” for the DataTables JS library. So, please remove the “Custom CSS” again and instead add this to the “Custom Commands” text field on the table’s “Edit” screen:
"columnDefs": [ { "visible": false, "targets": [ 3, 5 ] } ]
This example would hide the fourth and sixth column (counting starts from 0, as this is JS code!).
Regards,
Tobias
Thread Starter
andynz
(@andynz)
Thanks Tobias, should have guessed that you would come up with a solution!
I have made a design change which avoids the need to search on a hidden column, but your idea is preferable so I will probably implement it later.
Thanks again
(10am here in NZ, so must be late at night with you!)
Hi,
great to hear that this helps! 🙂
(Yes, it’s almost midnight over herenow, so off to bed 🙂 )
Best wishes,
Tobias
