TCH-Dynamic Column Plugin
I made a plugin last time to support the tables I created in my apps since Bubble’s table element sucked, still sucks and will most likely stay sucky (please give it love Bubble). I made some updates to it to optimize how it works and add some new features.
UPDATE: Tested and does work with Bubble’s Table Element. Add required IDs/Classes to the “Cell” elements in a Table.
In a nutshell it manipulates CSS classes for better performance. The old elements searched for elements and manipulated inline styles. Which was pretty buggy and just not a good way of doing things in the first place. There are 2 versions, one depends on plugins like Classify to inject CSS classes first, another that does it by itself by matching element ID prefixes.
Most other similar plugins in the marketplace also prefer to modify inline styles instead of CSS classes.
For the weirdos that use this and are upgrading from old versions:
Note that the latest version removes the old elements. Fortunately, the new versions require the same values: Header Group Element ID & CSS Class Name. No other updates required.
Plugin Page: TCH - Dynamic Columns Plugin | Bubble
AI Generated Readme
A Bubble plugin for creating resizable table headers with synchronized column widths. This plugin allows users to dynamically adjust column widths by dragging resize handles, with real-time synchronization across all elements in the same column.
Overview
This plugin provides two implementations of a resizable header system:
- TCH - Resizable Header- Basic version that just simply adjusts a class in a stylesheet (supports existing styles but will override all width values). Dependent on a plugin like Classify.
- TCH - Dynamic Column - Advanced version that dynamically add the Class to matching element ID prefixes. Now supports Local Storage Recommended version
Both versions use CSS variables for optimal performance and provide a smooth resizing experience with visual feedback.
Tested releases will be minified to reduce plugin size. You can switch to prior versions if you want to review the code.
Features
Core Features (Both Versions)
- Resizable: Makes the Bubble element resizable. Adds drag handles.
- Real-time Synchronization: All elements with the same CSS class resize together. Duh
- Visual Feedback: A very nice looking vertical line when dragging.
- CSS Variable Architecture: High-performance updates using CSS Variables. Can still “lag” if you have complex, nested rows or hundreds of visible rows. That’s HTML baby.
- State Management: Exposes current width and ready state
- Action System: Programmatic width control via workflow actions. Bunch of actions you can use to manually do shit.
Advanced Features (“Dynamic Column” Element Only)
- Enable Dynamic Mode: Automatically applies CSS class to elements with matching ID prefixes
- Mutation Observer: Detects new elements and applies sync classes automatically
- Performance Mode: Option to update synchronized elements only after resize completion
- Force Sync Action: Manually trigger synchronization for all matching elements
Plugin Properties
Basic Properties
| Property | Type | Default | Description |
|---|---|---|---|
| [Header ID*] | Text | - | ID of the header element to make resizable |
| [CSS Class*] | Text | - | CSS class for elements that should sync widths |
| [Min Width] | Number | 50 | Minimum width constraint (pixels) |
| [Max Width] | Number | 500 | Maximum width constraint (pixels) |
| [Show Handle] | Boolean | true | Whether to show the resize handle |
| [Handle Color] | Text | #ccc | Color of the resize handle |
| [Handle Width] | Number | 4 | Width of the resize handle (pixels) |
| [Starting Width] | Number | - | Initial width (applied once on first load) |
| [Use Local Storage] | Boolean | True | Saves and updates browser local storage automatically |
| [Debug Mode] | Boolean | false | Enable console debug logging |
Advanced Properties (“Dynamic Column” Element Only)
| Property | Type | Default | Description |
|---|---|---|---|
| [ID Prefix] | Text | - | String prefix to match element IDs for auto-sync |
| [Enable Dynamic Mode] | Boolean | true | Enable automatic Class application |
| [Performance Mode] | Boolean | false | Update synced elements only after resize complete |
Plugin States
| State | Type | Description |
|---|---|---|
Current Width |
Number | Current width of the header element |
isReady |
Boolean | Whether the plugin is ready and header element found |
Plugin Events
| Event | Description |
|---|---|
onResizeComplete |
Fired when user completes a resize operation |
onWidthSet |
Fired when width is set programmatically |
onWidthReset |
Fired when width is reset to natural size |
onForceSyncComplete |
Fired when force sync action completes (“Dynamic Column” element only) |
Plugin Actions
Set Width
Programmatically sets the width of the header and all synchronized elements.
Reset Width
Resets the width to the element’s natural/original width.
Force Sync Elements (“Dynamic Column” Element Only)
Manually triggers synchronization for all elements matching the ID prefix.
Clear Local Storage (“Dynamic Column” Element Only)
Clear settings stored in local storage.
Implementation Notes
Performance Considerations
- Uses CSS variables instead of direct style manipulation for better performance
- Mutation observer (ID version) is throttled to prevent excessive DOM queries
- Performance mode available for RG/Tables with many rows or complex cells
CSS Class Validation
The plugin automatically detects existing CSS classes and:
- Creates new classes if they don’t exist
- Updates existing classes that lack proper width properties
- Preserves existing classes with complete width properties
Troubleshooting
Common Issues
- Element not found: Ensure the header ID exists and is unique
- Sync not working: Verify the sync class name doesn’t conflict with existing CSS
- Handle not visible: Check that showHandle is enabled and handle color contrasts with background
- Dynamic Mode not working: Ensure ID prefix is set correctly and elements exist with matching IDs
Debug Mode
Enable debug mode to see detailed console logging of:
- Element discovery and validation
- CSS class injection and updates
- Width changes and synchronization
- Auto-sync element detection
