React.js Project to Download CSV File in Browser From Array of Objects or JSON Data Using react-csv Library Using Javascript Full Project For Beginners

npm i react-csv

App.js

import { CSVLink } from 'react-csv'

const players = [
  {
    name:"Tom Latham",age:29,team:"New Zealand"
  },
  {
    name:"Devon Conway",age:30,team:"New Zealand"
  },
  {
    name:"Kane Williamson",age:31,team:"New Zealand"
  },
  {
    name:"Will Young",age:29,team:"New Zealand"
  }
]

const headers = [
  {
    label:"Name",key:"name"
  },
  {
    label:"Age",key:"age"
  },
  {
    label:"Team",key:"team"
  }
]

const csvLink = {
  headers: headers,
  data: players,
  filename:"csvfile.csv"
}

function App() {
  return (
    <div>
      <CSVLink {...csvLink}>Export to CSV</CSVLink>
    </div>
  )
}

export default App

import { CSVLink } from 'react-csv'

const players = [

{

name:"Tom Latham",age:29,team:"New Zealand"

{

name:"Devon Conway",age:30,team:"New Zealand"

{

name:"Kane Williamson",age:31,team:"New Zealand"

{

name:"Will Young",age:29,team:"New Zealand"

}

]

const headers = [

{

label:"Name",key:"name"

{

label:"Age",key:"age"

{

label:"Team",key:"team"

}

]

const csvLink = {

headers: headers,

data: players,

filename:"csvfile.csv"

}

function App() {

return (

<div>

<CSVLink {...csvLink}>Export to CSV</CSVLink>

</div>

)

}

export default App

Related posts:

You Might Also Like

Build a React.js Dynamic PDF Invoice or Report Generator in Browser Using TypeScript Full Project For Beginners

React.js Image Upload Preview Animation and Validation Component Using react-images-upload Full Tutorial 2020

Build a WebRTC Video Recorder in React.js Using react-webcam Node Library in Browser Using Javascript Full Project For Beginners

Leave a Reply Cancel reply