A function to easily generate csv downloads of your json data. ✨
https://json-to-csv-export.coston.io
- Create a csv download from json data
- Lightweight
- Easy to use
- Optional filename
- Optional header names
Install with npm:
npm i json-to-csv-export
or load from a CDN:
<script src="https://cdn.jsdelivr.net/npm/json-to-csv-export"></script>
// import jsonToCsvExport from "json-to-csv-export";
() => {
const mockData = [
{
ID: 1,
"First Name": "Sarajane",
"Last Name": "Wheatman",
Email: "[email protected]",
Language: "Zulu",
"IP Address": "40.98.252.240",
},
{
ID: 2,
"First Name": "Linell",
"Last Name": "Humpherston",
Email: "[email protected]",
Language: "Czech",
"IP Address": "82.225.151.150",
},
];
return (
<button onClick={() => jsonToCsvExport({ data: mockData })}>
Download Data
</button>
);
};
// import jsonToCsvExport from "json-to-csv-export";
() => {
const mockData = [
{
id: 1,
firstName: "Sarajane",
lastName: "Wheatman",
email: "[email protected]",
language: "Zulu",
ip: "40.98.252.240",
},
{
id: 2,
firstName: "Linell",
lastName: "Humpherston",
email: "[email protected]",
language: "Czech",
ip: "82.225.151.150",
},
];
const headers = [
{ key: "id", label: "Identifier" },
{ key: "firstName", label: "First Name" },
{ key: "lastName", label: "Last Name" },
{ key: "email", label: "Email Address" },
{ key: "language", label: "Language" },
{ key: "ip", label: "IP Address" },
];
return (
<button onClick={() => jsonToCsvExport({ data: mockData, headers })}>
Download Data
</button>
);
};
interface HeaderMapping {
label: string;
key: string;
}
# | Property | Type | Requirement | Default | Description |
---|---|---|---|---|---|
1 | data | Record<string, any>[] |
required | array of objects | |
2 | filename | string |
optional | "export.csv" | The filename. The .csv extention will be added if not included in file name |
3 | delimiter | string |
optional | "," | fields separator |
4 | headers | string[] , HeaderMapping[] |
optional | provided data object keys |
Please help provide good data faster! Submit any issues and/or make a pull request!