Paginated table over an API that supports pagination

We are doing a POC whether retool can support all our business use cases.
How do we display records on a table from an API that support pagination.
Let say the API returns 100 records but we display only 10 on the single page upon clicking next we display next 10 records from the last API call results only but when we reach 10th Page we’ll have last 10 records displayed from results of the first API call only now when we press next the results are fetched using another API call with offset 100 and limit 100.

Constraint are API always returns 100 rows, we are fine displaying 100 rows in a single page but we still didn’t get any solution do display 100 rows in a single page.

We’d like to prefer the first approach. Can anyone guide us with some examples ?

Hi @jainendra-chg! Which API are you connecting to, or what kind of pagination does it support? We have some options for limit/offset based, cursor based, or graphql relay cursors and a few examples here but I’m happy to help put together a more specific example for your use cae

Hello @alex-w

We did try this out, We are bit confused. The API that we are trying to integrated returns 3 things

  • startAt - start index of the total result, example - 0 for first request
  • resultCount - number of results returned, example - 100 results returned
  • totalResults - total number of results, example - 1570 results are present
{
  "results": [
    {
      ...100 results
    }
  ],
  "resultCount": 100,
  "startAt": 0,
  "totalResults": 1570
}

Can you tell how do we use this setup in a table ?

Requirements are

  • Table should be able to display all these 100 records and fetch more if users goes to last page
  • Table should be able to display previous page as well