Export data to CSV in React

In this react article, we’ll show you how to export data to CSV in React using the package. When we are working with a table we may need to export the table data to a CSV file using ReactJS.

Here, we will create a react application to export the list of records in CSV file and download CSV file on click of the button. Therefore we’ll use the NPM Package to exporting the data on single click.

https://www.youtube.com/watch?v=D9xiIZAPZUI

For a quick demo, we are going to use the following data which can be considered as a table record.

[
  { firstName: "Warren", lastName: "Morrow", email: "[email protected]", age: "36" },
  { firstName: "Gwendolyn", lastName: "Galloway", email: "[email protected]", age: "76" },
  { firstName: "Astra", lastName: "Wyatt", email: "[email protected]", age: "57" },
  { firstName: "Jasmine", lastName: "Wong", email: "[email protected]", age: "42" },
  { firstName: "Brooke", lastName: "Mcconnell", email: "[email protected]", age: "56" },
  { firstName: "Christen", lastName: "Haney", email: "[email protected]", age: "23" },
  { firstName: "Tate", lastName: "Vega", email: "[email protected]", age: "87" },
  { firstName: "Amber", lastName: "Brady", email: "[email protected]", age: "78" },
  { firstName: "Philip", lastName: "Whitfield", email: "[email protected]", age: "22" },
  { firstName: "Kitra", lastName: "Hammond", email: "[email protected]", age: "35" },
  { firstName: "Charity", lastName: "Mathews", email: "[email protected]", age: "63" }
]

Steps to export data to CSV in React

1. Create a simple react app
2. Install npm package
3. Implement logic to download CSV file
4. Export to CSV with async data
5. Output

1. Create a simple react app

Let’s create a simple react application using `create-react-app`. Run the following command to create a react app.

npx create-react-app export-data-to-csv-react

Refer to the link for Create React Application.

2. Install npm package

To download records in a CSV file, we will use the react-csv npm package. Run the following command to install the `react-csv` package.

npm i react-csv

3. Implement logic to download CSV file

Now we will define two different variables `data` and `headers` where we will store the list of records in the `data` variable and store the header of the CSV file in the `headers` variable.

Let’s import the `CSVLink` from the `react-csv` package and use it as a link to export the CSV file.

App.js

import React from 'react';
import { CSVLink } from "react-csv";

const headers = [
  { label: "First Name", key: "firstName" },
  { label: "Last Name", key: "lastName" },
  { label: "Email", key: "email" },
  { label: "Age", key: "age" }
];

const data = [
  { firstName: "Warren", lastName: "Morrow", email: "[email protected]", age: "36" },
  { firstName: "Gwendolyn", lastName: "Galloway", email: "[email protected]", age: "76" },
  { firstName: "Astra", lastName: "Wyatt", email: "[email protected]", age: "57" },
  { firstName: "Jasmine", lastName: "Wong", email: "[email protected]", age: "42" },
  { firstName: "Brooke", lastName: "Mcconnell", email: "[email protected]", age: "56" },
  { firstName: "Christen", lastName: "Haney", email: "[email protected]", age: "23" },
  { firstName: "Tate", lastName: "Vega", email: "[email protected]", age: "87" },
  { firstName: "Amber", lastName: "Brady", email: "[email protected]", age: "78" },
  { firstName: "Philip", lastName: "Whitfield", email: "[email protected]", age: "22" },
  { firstName: "Kitra", lastName: "Hammond", email: "[email protected]", age: "35" },
  { firstName: "Charity", lastName: "Mathews", email: "[email protected]", age: "63" }
];

const csvReport = {
  data: data,
  headers: headers,
  filename: 'Clue_Mediator_Report.csv'
};

function App() {
  return (
    <div class="App">
      <h3>Export data to CSV in React - <a href="https://cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
      <csvlink {...csvreport}="">Export to CSV</csvlink>
    </div>
  );
}

export default App;

4. Export to CSV with async data

Refer to the following article to export the CSV file by calling an API.

Loading data asynchronously and download CSV using react-csv

5. Output

Run the above code and check the output in the browser.

Output - Export data to CSV in React - Clue Mediator

Demo & Source Code

Github Repository StackBlitz Project

That’s it for today.
Thank you for reading. Happy Coding..!!