Export data to CSV in React

by Clue Mediator · August 6, 2020

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.

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: "sokyt@mailinator.com", age: "36" },
  { firstName: "Gwendolyn", lastName: "Galloway", email: "weciz@mailinator.com", age: "76" },
  { firstName: "Astra", lastName: "Wyatt", email: "quvyn@mailinator.com", age: "57" },
  { firstName: "Jasmine", lastName: "Wong", email: "toxazoc@mailinator.com", age: "42" },
  { firstName: "Brooke", lastName: "Mcconnell", email: "vyry@mailinator.com", age: "56" },
  { firstName: "Christen", lastName: "Haney", email: "pagevolal@mailinator.com", age: "23" },
  { firstName: "Tate", lastName: "Vega", email: "dycubo@mailinator.com", age: "87" },
  { firstName: "Amber", lastName: "Brady", email: "vyconixy@mailinator.com", age: "78" },
  { firstName: "Philip", lastName: "Whitfield", email: "velyfi@mailinator.com", age: "22" },
  { firstName: "Kitra", lastName: "Hammond", email: "fiwiloqu@mailinator.com", age: "35" },
  { firstName: "Charity", lastName: "Mathews", email: "fubigonero@mailinator.com", age: "63" }
]

[

{ 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" }

]

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

1	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

1	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: "sokyt@mailinator.com", age: "36" },
  { firstName: "Gwendolyn", lastName: "Galloway", email: "weciz@mailinator.com", age: "76" },
  { firstName: "Astra", lastName: "Wyatt", email: "quvyn@mailinator.com", age: "57" },
  { firstName: "Jasmine", lastName: "Wong", email: "toxazoc@mailinator.com", age: "42" },
  { firstName: "Brooke", lastName: "Mcconnell", email: "vyry@mailinator.com", age: "56" },
  { firstName: "Christen", lastName: "Haney", email: "pagevolal@mailinator.com", age: "23" },
  { firstName: "Tate", lastName: "Vega", email: "dycubo@mailinator.com", age: "87" },
  { firstName: "Amber", lastName: "Brady", email: "vyconixy@mailinator.com", age: "78" },
  { firstName: "Philip", lastName: "Whitfield", email: "velyfi@mailinator.com", age: "22" },
  { firstName: "Kitra", lastName: "Hammond", email: "fiwiloqu@mailinator.com", age: "35" },
  { firstName: "Charity", lastName: "Mathews", email: "fubigonero@mailinator.com", age: "63" }
];

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

function App() {
  return (
    <div classname="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;

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 = [