react-export-json-csv

⌗ react-export-json-csv

A react component to easily Export csv of your json data and rearrange your headers column based on your UI tables order.

Live Demo

Coming Soon

Features

• Create a csv download from json data
• rearrange Headers
• Lightweight
• Easy to use
• optional filename

Install

Install with npm:

npm i react-export-json-csv

Example Usage

import { ExportJsonCsv } from 'react-export-json-csv';
...
const headers = [
  {
    key: 'id',
    name: 'ID',
  },
  {
    key: 'fname',
    name: 'First Name',
  },
]

const data = [
  {
    id: '1',
    fname: 'John',
  },
  {
    id: '2',
    fname: 'Doe',
  },
]

...
<ExportJsonCsv headers={headers} items={data}>Export</ExportJsonCsv>

Props

Prop	Type	Requirement	Default	Description
headers	array	required	null	array of objects
items	array	required	null	array of objects
fileTitle	string	optional	"exported.csv"	The complete filename
style	object	optional	null	use react inline style
className	string	optional	null	use your existing class for button

Contributing

Please help provide good data faster! Submit any issues and/or make a pull request!

Source

Source[1] https://medium.com/@danny.pule/export-json-to-csv-file-using-javascript-a0b7bc5b00d2 Source[2] https://stackoverflow.com/questions/30993149/how-to-rearrange-csv-json-keys-columns-javascript

Note

Arrange your header array to rearrage csv/json keys columns to your expected result. headers array key must be the same wtih your items Object Keys in column.