CSV export best practice advice

Greetings, fella Retoolers.
Hope Y'all are having a great day.

Task: Allow users to offload graph data as a CSV file.

Description: I wanted to check with our wonderful community before coming up with my own way. I have a graph of metric over time that some filtering and metric selection. Some users insist on a take away option in a form of a CSV file. ...guess they don't like my interfaces =( But anyway before I jump reinventing the wheel I wanted to check if the is a best practice approach/function/library/integration I should look in to for starters. Or maybe someone solved a similar issue and would not mind sharing some smarts on it.



If you just need the raw data from the graph as a CSV file, I think you can use the Export Data event handler on your button and supply the data source as the displayed graph data:


You can also use the utils.exportData() or utils.downloadFile() functions as part of another script/transformer if you need to transform or clean up any of the data per user feedback:


Hope this helps!

1 Like

And this is exactly the reason I wrote this.
Easier than I thought.

Much appreciated, Scott.

1 Like

Now you got me thinking, why is my Event Handler is missing Export Data altogether...?

Is your component a button?

I found data export button in web version.
Mobile version doesn't seem to this option.
I guess i'm stuck with figuring out how utils.exportData() or utils.downloadFile() works.

Don't mean to keep bugging. But I have this "Task failed successfully" vibe with it.

Web instances does have a very convenient Event handler for it.
But utils.exportData() or utils.downloadFile() don't seem to do a thing in web instance.
Anything I'm doing wrong?

async function downloadFullGraphMetricsAsCSV() {
    try {
        // Ensure getGraphMetricsWithRange is defined with correct parameters or adjust as needed.
        // This assumes the function returns all necessary data without further parameters.
        const data = await getGraphMetricsWithRange();

        // Check if data is present
        if (data && Array.isArray(data) && data.length > 0) {
            // Use utils.exportData to download the data as a CSV file
                data: data, // Use the data as is, assuming it's already in the correct format for CSV export
                fileName: 'GraphMetrics.csv', // Name the file as needed
                type: 'csv' // Specify the CSV file type

            console.log('CSV download initiated.');
        } else {
            console.error('No data available to export.');
    } catch (error) {
        console.error('Error fetching graph metrics:', error);
        alert('Failed to download graph metrics: ' + error.message);

Hi @Scottsky, I was able to reproduce this issue. Our engineers are currently working on fixing utils.exportData() and utils.downloadFile() on Mobile. We'll let you know here as soon as this is fixed.


Hi, @Paulo hate to bug you.

I understand that it's totally on me and I should be checking for something actually working before promising my users new features. But since they keep bugging me I can't help myself but ask if you might know of a workaround I can use while utils.exportData() is down?

Hi @Scottsky, you don't bug me at all! :slightly_smiling_face:
I checked internally and the bug is fixed. I just tested urtils.exportData() by running it on a script and it worked like a charm.

I added it as an event handler to a button:

Here is the view from my iPhone:

Are you on Retool Cloud or Self-hosted?

1 Like

You are the best!!!!
It does work for me now.
Thanks for looking in to it.

1 Like

you are welcome! :slightly_smiling_face: