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,
0is the first column,1is the second,2is 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.
Related Support Threads Support
-
Collapsible rows option not working in Premiumhttps://wordpress.org/support/topic/collapsible-rows-option-not-working-in-premium/
-
Designate Columns to Collapsehttps://wordpress.org/support/topic/designate-columns-to-collapse/
-
Collapse mode: number of columns showinghttps://wordpress.org/support/topic/collapse-mode-number-of-columns-showing/
-
Table cells are collapsed when in edit modehttps://wordpress.org/support/topic/table-cells-are-collapsed-when-in-edit-mode/
-
Designate rows in collapse mode in Responsive tableshttps://wordpress.org/support/topic/designate-rows-in-collapse-mode-in-responsive-tables/
-
“collapse” feature with by default all columns expandedhttps://wordpress.org/support/topic/collapse-feature-with-by-default-all-columns-expanded/
-
Option to hide/reopen columns?https://wordpress.org/support/topic/option-to-hide-reopen-columns/
-
Request for full-screen display feature.https://wordpress.org/support/topic/request-for-full-screen-display-feature/
-
Show specific columns only in Collapse responsive modehttps://wordpress.org/support/topic/show-specific-columns-only-in-collapse-responsive-mode/