Retool. How to download the CSV of all pages of a paginated table?

Retool is a great tool and the fastest way to build effective business software. I use it as an internal tool for a corporate database.

The case

My application has a paginated table and when I click the export button it only downloads one page.

How I can download/export the whole table?

Solution

This option covers 2 possible cases:

1. Export only selected items
2. Export all items if no items are selected

How it works: Export button

1. Clicking the button runs the exportAllUsersScript() script.
2. Displays the loading process
3. Repeated clicking of the button is blocked

API Request

I used a separate API request getUsersExportQuery just to export the data and passed one parameter which was the page number {{currentPage}}

GET https://api.com/v1/User/all/{{currentPage}}/20/

Then I call this request and pass the current page number there currentPage: i

await getUsersExportQuery.trigger({
    additionalScope: {
      currentPage: i,
    }
  });

The Script

This is a recursive function exportData(i) that calls itself until we reach the end of the data. See comments inside the script for details

let data = [];
const selectedItems = table.selectedSourceRows;

// Main function
async function exportData(i) {
 // Reset counter
  let itemsCounter = 0;
  
  // Execute the request + pass page number
  await getUsersExportQuery.trigger({
    additionalScope: {
      currentPage: i,
    },
    onSuccess: function (response) {
      if (typeof response?.items !== 'undefined') {
      // Set counter
        itemsCounter = response?.items.length;
        if (itemsCounter > 0) {
            response.items.forEach(function(item) {
            data.push(item);
          });
        }
      }
    },
    onFailure: function (error) {
      data = {};
    },
  });

  // if there is data, the function will be called again 
  // and increment page + 1
  if (itemsCounter > 0) {
    await exportData(i + 1);
  }
}

// Export only selected items
if (selectedItems.length > 0) {
  data = selectedItems;
  
  // Export all items
} else {
  await exportData(0);
}

utils.exportData(data, 'all_Items', 'csv')

return data;