Defining Columns To Collapse

Hi,

thanks for your question, and sorry for the trouble.

The responsive_breakpoint=phone parameter is only valid for the flip mode, but not the collapse mode.
The configuration for which columns to collapse/show will therefore have to be done with a special “Custom Command” on the table’s “Edit” screen. This command uses the syntax of the DataTables JS library and you can read more about it at https://datatables.net/extensions/responsive/classes and in the example at https://datatables.net/extensions/responsive/examples/display-control/init-classes.html
Such a “Custom Command” could for example look like

"columnDefs": [ { "className": "all", "targets": [ 0 ] }, { "className": "min-phone-l", "targets": [ 1 ] }, { "className": "min-tablet", "targets": [ 2 ] }, { "className": "never", "targets": [ 3 ] }, { "className": "desktop", "targets": [ 4 ] }, { "className": "none", "targets": [ 5 ] } ]

then.

Regards,
Tobias

Sent you Donation for Great Work Tobias

Ok so in Custom Command I would do the following and change my targets for min-phone-1 in this case only as such:

“columnDefs”: [ { “className”: “all”, “targets”: [ 0 ] }, { “className”: “min-phone-l”, “targets”: [ 1, 2, 5 ] }, { “className”: “min-tablet”, “targets”: [ 2 ] }, { “className”: “never”, “targets”: [ 3 ] }, { “className”: “desktop”, “targets”: [ 4 ] }, { “className”: “none”, “targets”: [ 5 ] } ]

Are these predefined classNames for DataTables?

Do I have to change anything in the shortcode of table to get this to work?

Hi,

I answer your questions in reversed order ??

For the Shortcode: No, you’ll only need to that responsive=collapse parameter.

Yes, the class names are predefined by DataTables, according to the list in the link that I posted.

Now, for your command: Yes, you added this in the correct way, but now some columns (those with the index 2 and 5) have two classNames attached to them. That will most likely not work. Thus, you’ll have to clean up/remove the other parts of the command.
(Also, keep in mind that counting columns starts with 0, so that you your 1, 2, 5 refers to the second, third, and sixth columns of your table.

Regards,
Tobias

Not sure this is working Tobias

I have this checked as well:
Use the following features of the DataTables JavaScript library with this table:

I tried to make it very simple to test with something like this:
"columnDefs": [ { "className": "all", "targets": [ 0, 1, 5 ] } ]

Just to show three columns always, and thats not working ??

I’m not sure what i’m doing wrong, anyway to debug this?

Hi,

that code looks correct. Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Hi,

I put it up on a live server at:
https://www.solidsurvival.com

In this example I have added the following code just to test a basic example of a custom command, but its not being applied.

"columnDefs": [ { "className": "all", "targets": [ 0, 1, 5 ] } ]

Let me know if you figure out why, then I can try different configs.

But basically in this table I want to show columns 0, 1 and 5 in mobile.

Hi,

thanks for the link!

I see what’s happening here. Unfortunately, we are running into a small issue when TablePress converts the DataTables JS library’s old syntax in to the new one.
Let me think about a solution for a moment, please.

Regards,
Tobias

No problem Tobias.

Thanks for looking at this. I hoped I helped by revealing this issue ??

Hi,

ok, I looked at this a bit, but could not yet find an easy fix. The cause for this basically is that TablePress converts the string “sName” to “name” (the first one is the old and the second one is the new DataTables syntax). Unfortunately, this also affects the word “className”, which contains “sName” and therefore is (wrongly) changed to “clasname”. And that leads to our problem here.

As a temporary fix, please try adding this code to the end of the tablepress-responsive-tables.php PHP file of the Extension:

add_filter( 'tablepress_datatables_parameters', 'tp_fix_sname_replacement', 10, 4 );
function tp_fix_sname_replacement( $parameters, $table_id, $html_id, $js_options ) {
  if ( ! empty( $parameters['custom_commands'] ) ) {
    $parameters['custom_commands'] = str_replace( 'clasname', 'className', $parameters['custom_commands'] );
  }
  return $parameters;
}

Regards,
Tobias

I put the code that you added and I’m definitely seeing that the custom commands are being applied.

Now its about just coming up with the right custom command that I’m looking for.

Let me know if you solve this problem, so that I can remove workaround at some point.

Thanks Tobias!

Hi,

great! Good to hear that the commands are working now! Yes, finding the correct one should now just be a matter of trial and error ??

I’ll probably add a solution to the next plugin release. Regardless, the workaround does not do harm, so you shouldn’t have to worry about it.

Best wishes,
Tobias

Hi Tobias. Thank you for the wonderful plugin!
I followed the instructions here (including editing the php file), but didn’t manage to display only specific columns.

Any suggestions?

Thanks in advance ??

Hi Yaara,

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Here’s it: focusing.urinka.com/?p=1518

Hi Yaara,

sorry for the long wait on a reply. As the Support Forums were in Maintenance Mode, I could not reply earlier.

For your question: I’m not sure that I see the problem. You set a “Custom Command” to force columns 1 through 6 to be always visible (i.e. they will not be collapsed). That’s working fine for me. Or am I missing something?

Regards,
Tobias