Overview
Table 04 is a structured data table component featuring selectable rows via checkbox icons, displaying columns for Name, Status, Balance, Email, and Location. It supports row hover states, multi-row selection tracking via custom states, and sticky header functionality. Designed for web applications requiring tabular data display with interactive row selection.
How to use
Open the Brikl panel
Navigate to the Elements category in the Brikl panel.
Copy the component
Find Table 04 and click Copy.
Paste into your editor
Paste it into your Bubble canvas with Cmd + V (Mac) or Ctrl + V (Windows),
or right-click on the canvas and select Paste.
States
This component includes conditional states that automatically change its appearance.
| State | Trigger | Visual effect |
|---|
| Row Hovered | User hovers over a table row (TableCrossAxis) | Row background changes to a light gray (rgba(245,244,244,0.5)) |
| Row Selected | The row’s data item is contained in the Table’s custom state ‘items_‘ | Row background changes to light gray and the checkbox icon changes from an empty square to a filled check icon with black background |
These states are handled natively by Bubble and require no additional setup.
They will work automatically once the component is pasted into your editor.
Responsive
This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble’s built-in mobile breakpoint.
Workflows
This component includes pre-built workflows.
| Trigger | Action |
|---|
| Icon - Checkbox (Table 04) is clicked (when row IS already selected) | Removes the current row’s data item from the Table’s custom state ‘items_’ list (deselects the row) |
| Icon - Checkbox (Table 04) is clicked (when row is NOT selected) | Adds the current row’s data item to the Table’s custom state ‘items_’ list (selects the row) |
These workflows are included when you use the Copy with Workflows option in the Brikl panel.
Requirements
| |
|---|
| License | Starter plan required |
| Plugins | None |
| Custom code | Not required |
| Platform | Supported |
|---|
| Web | ✅ |
| Mobile | ❌ |
License
This component requires a Starter plan.
