Bubble.io Repeating Groups: Mastering Lists, Pagination & Performance
Repeating Groups are the most powerful and most misused element in Bubble. Master these eight patterns and your lists will be fast, correct, and professional at any scale.
Why Repeating Groups Make or Break Every Bubble App
The Repeating Group (RG) is the most used and most misused element in Bubble. It is how you display any list of data — records, options, search results, nested structures. Get it right and your app feels fast, smooth, and professional. Get it wrong and your app is slow, broken at scale, and full of subtle data display bugs. This guide covers every RG pattern you need to know.
The Eight Repeating Group Patterns Every Builder Must Know
Pattern 1: Always Constrain, Never Filter
Search for Projects
:filtered by status = Active
// Loads ALL projects, filters in browser
Search for Projects [
workspace = current_workspace,
status = Active,
is_deleted = no]
// DB runs WHERE clause, returns only matches
Pattern 2: Paginate Every Production List
Data source: Search for Projects [constraints] :items until #(page * 20) :items from #((page-1)*20 + 1)
// OR use built-in RG pagination
RG setting: Fixed number of rows: 20
Load More button: Show next page of Repeating Group’s list
Total count text: Search for Projects [same constraints] :count
// Store the :count in a custom state on page load — not in the RG cell
Pattern 3: Nested RGs — The Kanban Column Pattern
Outer RG: Project_Status option set — horizontal layout
// Inner RG: projects in this status column
Inner RG data source:
Search for Projects [
workspace = current_workspace,
status = Outer Cell’s Project_Status,
is_deleted = no
]
// One search per column — efficient and real-time
Pattern 4: Search Input with RG — Live Search
RG data source:
Search for Projects [
workspace = current_workspace,
name contains Search Input’s value,
is_deleted = no
]
// “contains” runs as DB ILIKE — case-insensitive, server-side
// RG refreshes as user types — no button needed
Pattern 5: Empty State Handling
Empty state group visible when:
Repeating Group Projects’s list:count = 0
AND Page is loaded
// Empty state contains: icon + message + CTA button
// This is your activation surface — make it compelling
Pattern 6: Sorting with a Dropdown
RG data source:
Search for Projects [constraints]
:sorted by [
When Sort = Newest → Created Date descending
When Sort = Oldest → Created Date ascending
When Sort = A-Z → name ascending
]
// Use conditional sort expressions on the RG data source
Repeating Group Audit Before Launch
-
✓
Every RG uses search constraints — zero :filtered by expressions anywhere
-
✓
Every production list RG is paginated to 15–25 items maximum
-
✓
Every RG has a visible empty state with a clear call to action
-
✓
Nested RGs (Kanban) each use their own constrained search — not :filtered by on parent data
-
✓
Count queries stored in custom states at page load — not computed inside RG cells
-
✗
Never display more than 50 records in a single RG without pagination
Ready to Build on Bubble?
Architecture, data model design, Stripe billing, and full SaaS builds — done right from day one.
