Back to Community

How to Fix and Configure the Collapse Responsive Mode in TablePress

Content

One of the most powerful features for displaying tables on mobile devices is the Collapse mode. However, users often encounter issues where it doesn't work as expected or need help configuring it to show specific columns. This guide covers the most common problems and their solutions, based on community support threads.

Why the Collapse Mode Might Not Work

A common reason for the Collapse responsive mode not functioning is a conflict with another responsive mode. The most frequent culprit is the "Horizontal Scrolling" option.

Solution: To rule out this conflict, navigate to your table's "Edit" screen in your WordPress admin dashboard. Locate the "Table Options" for the responsive mode and ensure the "Horizontal Scrolling" checkbox is deactivated. Save your changes and check if the Collapse mode now works on the frontend of your site.

How to Designate Specific Columns to Collapse

By default, the Collapse mode may show a set number of columns. You can manually control which columns are visible by default and which are hidden behind the clickable toggle button. This is achieved by adding a "Custom Command" to your table.

Solution: On the table's "Edit" screen, find the "Custom Commands" text field under "Table Features". To hide specific columns, add the following code:

"columnDefs": [ { "className": "none", "targets": [ 2, 3, 4 ] } ]

Explanation:

  • The numbers inside the brackets [ 2, 3, 4 ] are the indices of the columns you want to hide. Remember: counting starts at 0.
  • So, 0 is the first column, 1 is the second, 2 is the third, and so on.
  • The example above will hide the third, fourth, and fifth columns by default, making them collapsible.
  • To only show the first two columns on mobile, you would hide all columns from index 2 onwards: "targets": [ 2, 3, 4, 5 ] (adjust based on your total number of columns).

A Note on Premium Features

It is important to know that the Collapse mode is a feature of the TablePress premium plans. According to the WordPress.org forum guidelines, support for premium features cannot be provided in these forums. The 'TablePress – Tables in WordPress made easy' team can only provide direct support for these advanced configurations through their priority email support system for license holders.

Conclusion

Most issues with the Collapse mode can be resolved by deactivating conflicting responsive modes or by using the correct "columnDefs" custom command to target the right columns. For more complex customization requests, such as designating specific rows to collapse or having all columns expanded by default, you will need to explore the premium features available.