Skip to main content

Pagination on Data Table Using External API

You can easily fetch and display data on Data Table directly from any External API or REST API without storing the data in DrapCode's database. And then apply the pagination to such data so that the end user gets a seamless experience of building web apps on DrapCode where it is being used as a 100% front-end builder and no data persists in the DrapCode.

Make an API Call​

1. Create a REST API for GET Call​

Go to External API page and create a REST API. Name the API, add the External API URL and select GET as call action.

DrapCode Builder Pagination on Data Table Using External API

2. Send Request & Receive Data​

Scroll down and click the Send Request button. As you click the button, data will get recieved.

DrapCode Builder Pagination on Data Table Using External API

3. Response Data Mapping​

Scroll down and fill required field to map the data. Then, click the Save Setting button.

DrapCode Builder Pagination on Data Table Using External API

Add & Configure Data Table​

4. Select Get Content From​

After dropping a data table in a page, open its settings and select the option, "Get Data from External API Response".

DrapCode Builder Pagination on Data Table Using External API

5. Select External API​

After selecting the option of getting data from External API Response, select the external API that you have created previously.

DrapCode Builder Pagination on Data Table Using External API

6. Preview or Publish​

Save the changes and open the page in the preview or publish mode. You will see all the records in the same page as 10 is the default record per page.

DrapCode Builder Pagination on Data Table Using External API

Edit Pagination​

7. Edit the External API URL​

Open the REST API which you had created previously and edit the following part of the external API URL: limit=10&page=0 >>>>> limit=2&page=0

DrapCode Builder Pagination on Data Table Using External API

8. Preview or Publish​

Save Settings and open the page containing the data table in the preview or publish mode. As you can see below, only records are getting displayed.

DrapCode Builder Pagination on Data Table Using External API

Set Pagination without Editing Expertal API URL​

1. Edit the External API URL​

Open the REST API which you had created previously and delete the following part of the external API URL: limit=2&page=0

Don't forget to scroll down and click the Save Setting button.

DrapCode Builder Pagination on Data Table Using External API

2. Add the Offset Key of Pagination Component​

Go to the page that contains the data table and open the setting of the pagination component. Then, add "page" as the offset key as shown below.

DrapCode Builder Pagination on Data Table Using External API

3. Edit Records Per Page​

Now open the setting of the data table and enter the number of how many records you want to display as records per page.

In the example below, 2 is added as records per page.

DrapCode Builder Pagination on Data Table Using External API

4. Preview or Publish​

Save the changes and open the page in the preview or publish mode. As you can see below, only two records getting displayed.

DrapCode Builder Pagination on Data Table Using External API