Playground API
Stop Waiting for the Backend • Part 26 of 122 min read•2026-09-20

How to Test CSV & Excel Export Buttons in React Without Writing Backend Exporters

Generate and test CSV, Excel (.xlsx), and JSON spreadsheet downloads with nested field flattening directly from Playground API endpoints.

NK
Nilesh Kumar
Creator of Playground API
How to Test CSV & Excel Export Buttons in React Without Writing Backend Exporters

How to Test CSV & Excel Export Buttons in React Without Writing Backend Exporters

Almost every dashboard or administrative table interface requires an "Export to CSV" or "Download Excel Spreadsheet" button.

However, during frontend development, testing spreadsheet download buttons is surprisingly tricky:

  • You need realistic tabular data with headers.
  • Nested JSON objects (e.g. user.address.city or tags: ['react', 'api']) need to be cleanly flattened into columns.
  • Correct MIME headers (text/csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet) and Content-Disposition attachment headers must be set so the browser triggers a native file download.

Playground API now provides native CSV and Excel (.xlsx) file exports on all standard REST collections!

1. Export Endpoints

Simply append .csv or .xlsx to any collection route:

  • GET https://playground.nileslabs.com/posts.csv
  • GET https://playground.nileslabs.com/posts.xlsx
  • GET https://playground.nileslabs.com/users.csv
  • GET https://playground.nileslabs.com/todos.xlsx

You can also pass standard filtering, search, and sorting parameters:

Terminal
curl "https://playground.nileslabs.com/posts.csv?_limit=25&_sort=id&_order=desc"

2. Implementing a React Export Button

Here is a clean React component that downloads the spreadsheet directly:

tsx
1
export function ExportButton({ resource = 'posts', format = 'csv' }) {
2
const [downloading, setDownloading] = useState(false);
3
4
const handleDownload = async () => {
5
setDownloading(true);
6
try {
7
const url = https://playground.nileslabs.com/${resource}.${format}`;
8
const response = await fetch(url);
9
const blob = await response.blob();
10
11
const link = document.createElement('a');
12
link.href = window.URL.createObjectURL(blob);
13
link.download = ${resource}_export.${format};
14
document.body.appendChild(link);
15
link.click();
16
link.remove();
17
} catch (err) {
18
console.error('Export failed', err);
19
} finally {
20
setDownloading(false);
21
}
22
};
23
24
return (
25
<button onClick={handleDownload} disabled={downloading}>
26
{downloading ? 'Generating...' : Export to ${format.toUpperCase()}}
27
</button>
28
);
29
}

3. Nested Data Flattening

Playground API automatically transforms complex nested JSON structures into spreadsheet columns:

  • user.company.name -> company_name
  • tags: ["tech", "api"] -> "tech, api"

4. Live Interactive Export Studio

Test spreadsheet downloads and preview raw CSV outputs in the documentation:

👉 https://playground.nileslabs.com/docs/exports

Conclusion

Save hours of backend mocking. Test real spreadsheet export buttons in your React dashboards with Playground API!

Tags:#webdev#react#javascript#frontend
Series: Stop Waiting for the Backend
Part 26 of 12
Previous Article (#25)
Real-Time GraphQL Subscriptions in React & Apollo Client Without a Backend
Next Article (#27)
How to Test 429 Rate Limit Headers & Countdown Timers in React

Try Playground API in Your Own App

Stateful mock REST & GraphQL API with private sandbox overlays.

Quickstart GuideOpen Interactive Studio