Airtable collection pagination not working

Ask us anything How do I?
1

Hi there,
I’m kind of going crazy trying to figure out what/if I’m doing something wrong setting up Airtable front-end pagination.

I’ve seen @Joyce tutorial but it doesn’t work for me.

The data:

  • An Airtable view with 100+ records (books)

Desired outcome in weweb:

  • A paginated Collection List with 20 books per page

What I’ve done

  1. Created the Books collection (as dynamic) and added a pagination limit of 20 elements
  2. Bound the to the Books data array to the collection list and the text element to the collection item (all good till here)
  3. Add the paginator element and bound it to the Books collection

The problem is that it keeps rendering all the elements in the collection as if the setting in the collection and the paginator didn’t exist. The paginator even reflects the right number of pages but the list is completely unaffected by it.

I’ve tried making sure the paginator was inside the same container as the list but nothing changes. Same results refreshing data or the page. Also tried making the collection static (not good for my use case but I just wanted to try) but no difference.

I’ve also tried fetching the Airtable data via the API plugin rather than the Airtable one. Same result.

I understand that it would just be a frontend “fake-ish” pagination but for me it doesn’t seem to work at all.

Here are some pics:

  1. Collection Settings
  2. Collection List binding
  3. Paginator settings

Collections pagination
Collections pagination2000×1415 233 KB

Thanks!

2

Hi,

The pagination is not working, because you need to bind the all collection with the metada and not only collection[data] with the list of data. So in your case, you need to bind Books

2 Likes
3

Got it! It seemed more intuitive for me to link it to the array in the collection but I guess WeWeb is already looking fo the records array by itself.

Thanks a lot @Mael !

4

Good to know! Thx