Implementing pagination in table with data coming from workflow

App Building
1

Hello,

So, here's the thing:

  1. I have a workflow which receives 2 parameters as input: zip code and page number. The workflow executes an API call to a website to output 2 things at the end: a list of records (properties) from that page and the total number of records. Example: one zip code may have a 350 total records, but in query for page 1 I get only 40 records.
  2. I have an app with a very simple UI which consists of a text input for zip code, a button to trigger the workflow and a table to show the records coming from the workflow.
  3. I need to implement pagination on the table so that I can provide a way for the user to check for all records of all pages.
  4. I don't know how to implement the pagination with the addon feature of the table.
  5. I implemented a separate pagination component with a fixed total count of pages and an on change event which triggers the workflow and that updates the table automatically. That works, but the only issue would be the fixed total count of pages. I need a way to set the total count based on the value coming from the workflow, but I dont know how to do that.

Any ideas on what's the best way to implement this?

Thank you!

1 Like
2

lol I think I just figured it out.

  1. My workflow output has 2 values:
  • totalProperties
  • properties
  1. I set the table source to be: {{ fetchListings.data.properties }}
  2. I set the pagination component page count to be: {{fetchListings.data.totalProperties/42}} (42 is the number of rows I want to display per page)

Now when I click Search, the workflow is executed and immediately the pagination shows the right number of pages and when I click in one page, the workflow is triggered and the table reloads with the corresponding data for that specific page.

Please let me know if there's a better practice for this.

The only issue I can find right now is that when I click in the last page, the component doesn't highlight the number:

image
(in this case 6 should be highlighted, but the table does show me the respective results for page 6)

3

Hi @Juan_Guerrero It sounds like the solution you went with is likely the best solution :+1:. Pagination is pretty tricky to document, since it's a bit dependent on your data source, but this guide might be helpful.

Sounds like you've sorted it out for your data source already, but total count usually comes from a separate query. Sometimes apis will return the total count as part of the paginated response.

4

I think the highlight issue happens if your page count isn't a whole number. Does rounding up the page count with Math.ceil help?