# How do i correctly use the paginator element AND can i use custom elements to achieve the same effect **URL:** \ **Category:** Ask us anything\ **Created:** [June 16, 2023, 6:33pm UTC](https://community.weweb.io/t/how-do-i-correctly-use-the-paginator-element-and-can-i-use-custom-elements-to-achieve-the-same-effect/3089 "2023-06-16T18:33:21Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![jaredgibb](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jaredgibb](https://community.weweb.io/u/jaredgibb)\ **Post date:** [June 16, 2023, 6:33pm UTC](https://community.weweb.io/t/how-do-i-correctly-use-the-paginator-element-and-can-i-use-custom-elements-to-achieve-the-same-effect/3089/1 "2023-06-16T18:33:21Z")
I have set up a collection from supabse i have set the pagination to 100 to keep query times lower BUT i have over 100 records. i dont see a place to enter a page or offset. am i missing something? in the network traffic, i so see the offset parameter BUT dont see where to set it in the calls. ![Screen Shot 2023-06-16 at 2.35.15 PM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d4187acf0553134eb4070e5be630cbbdd881f89f.png) there’s nowhere to set the offset in the setup ![Screen Shot 2023-06-16 at 2.38.09 PM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/dc5dc7e453af63e204ccf65c4063c170117026fb.png) ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [June 17, 2023, 8:24am UTC](https://community.weweb.io/t/how-do-i-correctly-use-the-paginator-element-and-can-i-use-custom-elements-to-achieve-the-same-effect/3089/2 "2023-06-17T08:24:24Z")
Hi @jaredgibb 👋 If you’re paginating in the frontend (like it seems you’re doing here), all you have to do is [add the Paginator element](https://docs.weweb.io/add-elements/elements/paginator.html#frontend-pagination) to your page and bind it to your collection. If you want to paginate in the backend, you can toggle the “Custom pagination” setting to `On` and work with the Paginator event to send the offset to Supabase when refetching the collection. Does that help? ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [June 17, 2023, 8:57am UTC](https://community.weweb.io/t/how-do-i-correctly-use-the-paginator-element-and-can-i-use-custom-elements-to-achieve-the-same-effect/3089/3 "2023-06-17T08:57:07Z")
That’s all great, but would it be possible to make offset a feature? 🙂 Maybe somebody wants to go fully custom, or just wants to do something else with an offset, other than pagination. Shouldn’t be a biggie to implement it, as it is one field and some code to incorporate it in the requests, but correct me if I’m wrong 🙂 ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [June 17, 2023, 12:17pm UTC](https://community.weweb.io/t/how-do-i-correctly-use-the-paginator-element-and-can-i-use-custom-elements-to-achieve-the-same-effect/3089/4 "2023-06-17T12:17:34Z")
Hi @Broberto 👋 Not sure what you mean. Can you share one or two use cases that come to mind? ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [June 17, 2023, 12:22pm UTC](https://community.weweb.io/t/how-do-i-correctly-use-the-paginator-element-and-can-i-use-custom-elements-to-achieve-the-same-effect/3089/5 "2023-06-17T12:22:22Z")
I meant more like, if I wanted to make my own logic for pagination, or maybe do something crazy like, first load the next 50, then load the next 200, then load the next 300. Doesn’t seem like somebody would use it anyway 😃 But that offset feature wouldn’t hurt imo. ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [June 17, 2023, 12:32pm UTC](https://community.weweb.io/t/how-do-i-correctly-use-the-paginator-element-and-can-i-use-custom-elements-to-achieve-the-same-effect/3089/6 "2023-06-17T12:32:41Z")
Mmmm I think you could already do that with a button that updates a number variable on click. Or if you wanted to do something random like that but with the Paginator element, you could do it with “Custom pagination” enabled and bind something crazy to the “Offset” 😀 ![CleanShot 2023-06-17 at 14.30.48@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/e/e0e01cb6b7b44985972208488f94754b9a85e093.png) ---
**Author:** ![jaredgibb](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jaredgibb](https://community.weweb.io/u/jaredgibb)\ **Post date:** [June 17, 2023, 12:57pm UTC](https://community.weweb.io/t/how-do-i-correctly-use-the-paginator-element-and-can-i-use-custom-elements-to-achieve-the-same-effect/3089/7 "2023-06-17T12:57:09Z")
> [@Joyce](#): > > work with the Paginator event to send the offset to Supab Can you tell me more about how this works with a collection from supabase. It’s not like xano where you can simply send a pagination variable. what you are suggesting only mimics pagination. instead what you are suggesting actually simply increases the limit and brings in more records which only slows down my query. that would be handy if i wanted a ‘see more’ feature but that’s not what i’m going for. instead i want to only get the first 25 records, then the next 25 and so on. @Joyce hopefully this video can explain better what i am asking here https://www.loom.com/embed/4f122d3a6b40455ea6c1b4b8c34e2915 ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [June 17, 2023, 3:28pm UTC](https://community.weweb.io/t/how-do-i-correctly-use-the-paginator-element-and-can-i-use-custom-elements-to-achieve-the-same-effect/3089/8 "2023-06-17T15:28:23Z")
Ah ok, here’s a short video showing how I’m [using the paginator element with a Supabase collection](https://tella.video/pagination-with-supabase-6o1g). Does that approach work for your use case? ---
**Author:** ![jaredgibb](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jaredgibb](https://community.weweb.io/u/jaredgibb)\ **Post date:** [June 17, 2023, 3:48pm UTC](https://community.weweb.io/t/how-do-i-correctly-use-the-paginator-element-and-can-i-use-custom-elements-to-achieve-the-same-effect/3089/9 "2023-06-17T15:48:40Z")
the answer to Q1 ^^^ thank you @Joyce the issue was binding to the array and not the object. that’s great! is there a way to do the same without using the weweb paginator? ---
**Author:** ![jaredgibb](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jaredgibb](https://community.weweb.io/u/jaredgibb)\ **Post date:** [June 19, 2023, 7:45pm UTC](https://community.weweb.io/t/how-do-i-correctly-use-the-paginator-element-and-can-i-use-custom-elements-to-achieve-the-same-effect/3089/10 "2023-06-19T19:45:07Z")
wanted to bump this q @Joyce is there a way to paginate collections without using the weweb paginator element? like, can we build our own and swap it out somehow? i ask as i dont see any variable the collection is tied to. it’s just bound to the element. SO, can we have collection pages, from supabse, bound to some other variable? ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [June 22, 2023, 3:50pm UTC](https://community.weweb.io/t/how-do-i-correctly-use-the-paginator-element-and-can-i-use-custom-elements-to-achieve-the-same-effect/3089/11 "2023-06-22T15:50:13Z")
> [@jaredgibb](#): > > is there a way to paginate collections without using the weweb paginator element? like, can we build our own and swap it out somehow? I think this should be possible, yes. First though is you would need to be able to send and receive the info you need to and from your backend like the offset, total number of items, etc. Here’s an example from Xano: ![CleanShot 2023-06-22 at 17.36.41@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9c2727fdd8fd5957f84d92c1d9ad7b092db8f27f.png) Not sure what you’d need to do in Supabase to get that info and not just the items from the table though 😕 They have a [`range` parameter](https://supabase.com/docs/reference/javascript/range) that would do the trick but don’t think it works with our current “Advanced mode” because that works with their `select` parameter. My second thought, instead of using the Pagination setting that is not satisfactory for your use case because you can’t make it dynamic, you _could_ bind a filter to a pagination variable you would have created to get only the items you want: ![CleanShot 2023-06-22 at 17.45.15@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/15081ebd4f8271bd3982b58f351483d6418a1503.png) What do you think? Could that work for you? ---
**Author:** ![jaredgibb](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jaredgibb](https://community.weweb.io/u/jaredgibb)\ **Post date:** [June 22, 2023, 4:31pm UTC](https://community.weweb.io/t/how-do-i-correctly-use-the-paginator-element-and-can-i-use-custom-elements-to-achieve-the-same-effect/3089/12 "2023-06-22T16:31:36Z")
not really as my end user. can sort data different ways so slicing records by id doesnt work. 1 method i tried, was to construct the call using the api connector by copying the call being made in my network traffic by the plugin. and while it wasnt pretty, I was able to paginate by binding the offset parameter of the postgrest call to a variable that i controlled. In the end, our product team is fine using the built in pagination to keep things moving quicker on the front end. would love to see the ability to override the offset in the collection somehow since it’s just a paramater on the postgrest api call.