Reputation: 97
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>
</>
);
}
Upvotes: 0
Views: 3969
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