GS Easy Show and Hide Table Columns The lightweight utility for dynamic data views by GS™


1. Enable HTML IDs (Crucial Step)
Before the plugin can find your table, you must tell Bubble to allow ID attributes:

Go to Settings > General.

Scroll down to Expose the option to add an ID attribute to HTML elements and check the box.




2. Tag Your Table

Go to your Design tab.

Click on your Table element.

In the property editor, scroll to the very bottom to the ID Attribute field.

Type a unique name (e.g., my_data_table).




3. Setting Up the Workflows
You can now use the GS actions in your workflows to control your UI:

To Hide a Column:
Choose the action "Hide col with index".
• Table ID: Enter the exact ID you typed in Step 2.
• Col Index: Enter the number of the column (e.g., 1 for the first column).

To Show a Column:
Choose the action "Show col with index".
• Table ID: Use the same ID as above.
• Col Index: The number of the column you want to bring back.

To Reset the Table:
Choose the action "Show all col".
• Table ID: Use your table's ID. This will clear all hidden states.

To Show/Hide Multiple Columns (Bulk):[/size] Choose the action "Show/Hide with List". This is the most efficient way to manage complex views.
[] Table ID: Use your table's unique ID. [] Action List: Pass a list of texts (e.g., "show, hide, show").
How to build the list: Use Arbitrary Text (e.g., show, hide, show) followed by :split by (comma).


⚠️ Important Tips for Success

Index Counts: The plugin uses 1-based indexing. The leftmost column is 1, the next is 2, and so on.

Responsive Tables: When a column is hidden, Bubble’s div-based table will automatically shift the remaining columns to fill the space if your table width is set to "Stretch" or a percentage.

Case Sensitivity: Ensure the Table ID in your workflow matches the ID Attribute exactly (capitalization matters!).