How do I set pagination for a Collection with JS Formula?

[ThomasB]

I am trying to display a collection from Airtable with various search and filter.

One filter I wanted was the ability to filter by one or more “Tags” - These are defined in a second table in my Airtable base and linked in the main table.

That was a first challenge as the NoCode filters did not allow me to do a filter that would be "Where every element of -ArrayVariable- is in the -AirtableTagsArray-. I eventualy managed to to that by changing the Items binding to JS and seting the filter there :

But now, I am adding a pagination to the collection… which seems to be ignored by my JS.

It work if I set back the items binding to formula - So it seems that it’s the JS binding for the Collection Items that causes the pagination to be ignored.

How do I add pagination ?

I’d suppose it can be defined in the JS binding as well, but how ?

[flo]

Hello Thomas,

Congratulations with this JS function! It’s a nice and elegant way to do it.

Let me help you with the Pagination. The paginator element needs a collection to work because it uses collection metadata. You can see all this data when you bind items with the collection tag, or when you return the collection in javascript. If you look closely you will see, limit, total & offset fields. Example:

That is what is missing in your return function. You are returning the list but not the metadata the paginator element needs. To fix this, you need to return an object that looks like a collection. An object with these fields:

• data
• limit
• total
• offset

here is how you can do it:

limit, offset & total can be found in the collection. You just need to return them and it will do the trick. Make sure to have something like this in your Current value:

Here the code:

const collection = SELECT_A_COLLECTION_IN_THE_TREE_BELOW
const limit = collection.limit
const offset = collection.offset
const total = collection.total

const filteredData = HERE_YOUR_FILTERED_LIST

const collectionObjectToReturn = {
  data:filteredData,
  limit: limit,
  total: total,
  offset: offset
  }
return collectionObjectToReturn

Tell me if that worked for you

[ThomasB]

Looks awesome. I’ll try that solution.

But since I am filtering the data, and thus reducing the number of items in the collection, should I change the total accordingly ?

[flo]

You are absolutely right, you can use filteredData.length. Like this:

const collection = SELECT_A_COLLECTION_IN_THE_TREE_BELOW
const limit = collection.limit
const offset = collection.offset
const total = collection.total

const filteredData = HERE_YOUR_FILTERED_LIST

const collectionObjectToReturn = {
  data: filteredData,
  limit: limit,
  total: filteredData.length,
  offset: offset
  }
return collectionObjectToReturn