Aleksandar Jovanovic
Aleksandar Jovanovic

Reputation: 97

React export to csv - No Headers in the csv file

I am using the pacakge "react-csv" to download data as csv file.

I cannot get the exampel running quite right, the created csv file does not have any header, instead each Line is crammed into one column:

Code:

import { CSVLink, CSVDownload } from 'react-csv'
export default function ExportToCSV() {
    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'
      };
    return (
        <>
        <CSVLink {...csvReport}>Download me</CSVLink>
      </>
    );
}

File: Downloaded csv file without headers

Upvotes: 0

Views: 3969

Answers (1)

Aleksandar Jovanovic
Aleksandar Jovanovic

Reputation: 97

Since i am in Germany, Excel uses ";" instead of "," to seperate columns. I fixed my problem by adding

 separator=";"

tot he CSVLink Element

Upvotes: 1

Related Questions