Paginator and supabase collection data

I have a collection that fetches data from Supabase, but when there’s too much data, it starts to crash when fetching. I only fetch it if it hasn’t been fetched yet and on page load.

What I want is a paginator or a “load more” feature that retrieves only 10 items per page. When clicking “load more,” it should fetch the next 10 items (from 10 to 20, then 20 to 30, and so on). I want it to work without crashing, so whats the best choice? Ensuring the best possible performance.

For now using paginator, i’ve applied a filter inside the collection to fetch only 10 items, and in the paginator, I set it up to display the collection with that 10-item filter. However, what’s happening is:

The first page correctly displays 10 items.

The second page shows 20 items instead of just the next 10. So the paginator is working like a load more?

Should it really work like this?

Hi @joaosander I can’t see what you are doing now. Maybe you could share some screenshots? :slight_smile: ) Backend pagination in Supabase is done at the collection level: Supabase data source | WeWeb Documentation

Then you can pass the paginated collection into the Paginator element that can be added from the “Add” panel or set up custom pagination using slice.

so i have a collection with pagination max to 5 item per page, using the paginator element and adding the collection to it. when i go to page 2 from paginator button for example, it just adds more 5 items, not just changing to the next 5 items




Did you bind in the UI the metadata array or the data array?

1 Like

it was on data, thanks!