*Not hide the columns but instead collapse
Hi,
thanks for your post, and sorry for the trouble.
Do you mean the collapse mode of the TablePress Responsive Tables Extension from https://tablepress.org/extensions/responsive-tables/ here?
That will start collapsing the columns from right to left, by default. But that’s not what you want, right?
The collapsing columns are however configured in the “Custom Commands” text field on the table’s “Edit” screen, but that is not CSS code. Therefore using the “Custom CSS” text field on the “Plugin Options” screen will not help here, unfortunately.
The best solution without having to add a “Custom Command” to each table’s “Edit” screen would then be to use a small piece of custom PHP code and to inject that “Custom Command” via the tablepress_datatables_parameters filter hook, defined at https://github.com/TablePress/TablePress/blob/1.14/controllers/controller-frontend.php#L332-L342
Regards,
Tobias
Hi Tobias,
Thank you for your quick response. I’m going to have 100+ tables (that will be changing quite often via csv bulk import) with seven columns and want to collapse the third, fourth, and fifth columns if on mobile so the table fits on the screen and shows the most important data.
I just took a look at the responsive extension you attached above and the collapse feature would work except for the default method of collapsing from right to left.
Thanks for the tip about the PHP code. I’ll have to explore that a bit more. Thanks for your help!
Hi,
thanks for the clarification!
Yes, the collapse mode should work best here then.
As for the PHP code, you could use something like
// Change the priority of being hidden on mobile for the 3rd, 4th, and 5th column.
add_filter( 'tablepress_datatables_parameters', 'ryanjohn1617_tablepress_collapse_config', 10, 4 );
function ryanjohn1617_tablepress_collapse_config( $parameters, $table_id, $html_id, $js_options ) {
$parameters['custom_commands'] = '"columDefs": [ { "responsivePriority": 7, "targets": [ 2 ] }, { "responsivePriority": 8, "targets": [ 3 ] }, { "responsivePriority": 9, "targets": [ 4 ] } ]';
return $parameters;
}
// Turn on the responsive "collapse" mode by default, for all tables.
add_filter( 'tablepress_table_render_options', 'ryanjohn1617_tablepress_render_options', 10, 2 );
function ryanjohn1617_tablepress_render_options( $render_options, $table ) {
$render_options['responsive'] = 'collapse';
return $render_options;
}
This will turn on the collapse mode for all tables, and change the priority of the 3rd, 4th, and 5th columns so that they are hidden first (if needed) on small screens (before the right-most columns are hidden). This follows the docs at https://datatables.net/extensions/responsive/classes and https://datatables.net/reference/option/columns.responsivePriority
Regards,
Tobias
