How to Export Data from Retool to CSV

1// JS Query: exportToCSV
2// Triggered by a Button component
3
4// Get the data to export
5const rows = query1.data || [];
6
7// Define custom columns for export
8const columns = [
9  { key: 'id', header: 'ID' },
10  { key: 'first_name', header: 'First Name' },
11  { key: 'last_name', header: 'Last Name' },
12  { key: 'email', header: 'Email' },
13  { key: 'status', header: 'Status' },
14  { key: 'created_at', header: 'Created Date' },
15  { key: 'revenue', header: 'Revenue (USD)' }
16];
17
18// Build CSV header row
19const headerRow = columns.map(col => col.header).join(',');
20
21// Build CSV data rows
22const dataRows = rows.map(row =>
23  columns.map(col => {
24    let value = row[col.key];
25
26    // Format dates
27    if (col.key === 'created_at' && value) {
28      value = moment(value).format('YYYY-MM-DD');
29    }
30    // Format revenue
31    if (col.key === 'revenue') {
32      value = Number(value || 0).toFixed(2);
33    }
34
35    // Escape CSV: wrap in quotes if contains comma, quote, or newline
36    const str = String(value ?? '');
37    return str.includes(',') || str.includes('"') || str.includes('\n')
38      ? '"' + str.replace(/"/g, '""') + '"'
39      : str;
40  }).join(',')
41);
42
43// Combine header and data rows
44const csvContent = [headerRow, ...dataRows].join('\n');
45
46// Generate filename with today's date
47const today = moment().format('YYYY-MM-DD');
48const filename = `users-export-${today}.csv`;
49
50// Trigger browser download
51utils.downloadFile(csvContent, filename, 'text/csv');
52
53return { exported: rows.length };

1// SQL Query: getAllForExport
2// Same WHERE as main paginated query but no LIMIT/OFFSET
3SELECT id, first_name, last_name, email, status, created_at, revenue
4FROM users
5WHERE
6  ({{ searchInput.value || '' }} = ''
7   OR first_name ILIKE {{ '%' + (searchInput.value || '') + '%' }}
8   OR email      ILIKE {{ '%' + (searchInput.value || '') + '%' }})
9  AND ({{ statusFilter.value || '' }} = '' OR status = {{ statusFilter.value }})
10ORDER BY created_at DESC;
11
12// JS Query: exportAllToCSV
13utils.showNotification({
14  title: 'Preparing export...',
15  description: 'Fetching all matching rows',
16  notificationType: 'info',
17  duration: 2
18});
19
20// Fetch all rows
21const result = await getAllForExport.trigger();
22const rows = result.data;
23
24// Build CSV (same logic as previous step)
25// ... (insert CSV building code here)
26
27utils.showNotification({
28  title: 'Export ready',
29  description: rows.length + ' rows exported',
30  notificationType: 'success',
31  duration: 3
32});

1// JS Query: exportSelectedRows
2// Uses table1.selectedRows (multi-select array)
3
4const rows = table1.selectedRows;
5
6if (!rows || rows.length === 0) {
7  utils.showNotification({
8    title: 'No rows selected',
9    description: 'Please select at least one row to export.',
10    notificationType: 'warning',
11    duration: 3
12  });
13  return { exported: 0 };
14}
15
16// Build CSV from selected rows only
17const headers = Object.keys(rows[0]).join(',');
18const dataRows = rows.map(row =>
19  Object.values(row).map(v => {
20    const str = String(v ?? '');
21    return str.includes(',') ? `"${str}"` : str;
22  }).join(',')
23);
24
25const csv = [headers, ...dataRows].join('\n');
26utils.downloadFile(csv, 'selected-rows.csv', 'text/csv');
27
28return { exported: rows.length };

1// Add UTF-8 BOM for Excel compatibility:
2const BOM = '\uFEFF';
3const csvWithBOM = BOM + csvContent;
4
5utils.downloadFile(csvWithBOM, 'export.csv', 'text/csv;charset=utf-8;');

1// Button label expression:
2{{ exportToCSV.isFetching ? 'Exporting...' : 'Export CSV (' + (query1.data?.length || 0) + ' rows)' }}
3
4// Button disabled expression:
5{{ exportToCSV.isFetching }}
6
7// Button tooltip:
8'Download current view as CSV'