Export data to CSV in React | Download button | React JSON to CSV file

hello friends in this video we will show you how to export data to csv in react when we are working with the table then we may need to export the table data to csv file so here we will create a react applications to export the list of the records in csv file and download the csv file on click of the button so for that first of all we need to install the npm dependency second we will use the static data to export in the csv format and at last we will implement the functionality so let's start it here i have created one react applications with the help of the create react app where we will show you the demo so first of all i will remove all unnecessary code from the app.js file here we will straight forward show you the download links and the click of the download link we will export the data so let me also remove the unnecessary things like logo csv those things are not required yeah i think this is good let me check in the ui side okay in browser it's like blank page this is good so now we need to first we need to install the npm dependency so for that first let's we will here we will use the x csv npm package that one you can easily find in the google so this one is the package that we will use it in our demo first copy this package command and paste it over here i'm just installing this package meanwhile let me use the static data to consider as a table records and try to export the data in csv format so here i have listed all the data let me just copy it and use it in our applications so for that it's nothing but i'm just say this is my data now this package is installing let's wait for few seconds yes it's installed now so we need to use if you want then you can just check it in the packet.json file it says react that's csv it's a 2.0.3 it's a version now we will use the csv link from this package so first of all let me import this one the xcsv here we will use the csv link we have several options also there but for demo purpose right now we will use the cs building so before you adding in the render file i mean render methods first we will collect few informations for our demo first we need headers so in headers headers should be nothing but an array where we need to collect the informations of the label this one will be used for the header column label say let's see in our case it's first as a first name and we also need to define the key as a name of the attribute so you can see this first name is nothing but our record attribute and this one label will be used for the header purpose now we will use the same records for other uh head so just i'm just copy all things same as let me update it it's last name here last name i am also updating email [Music] email and at last we will use the h and here is the edge okay now we have headers and we have data so let's prepare object for csv report so i'm preparing the object for csv record where we need to first define the file name say in our case let me pass file name as a report dot csv second one is we need to pass the headers this is nothing but our header and the last one is data data so now in our case whole object is ready to use in our applications so let's use the csv link sorry not report csv link and i'm just passing the label export to csv [Music] and now we will use the spread operator to use this report i mean csv report object so use spread operator to pass all the informations in this csv links so i think this is good for our demo let's check the output okay we have this link i'm going to click on it and it's downloading yes so here you can see header is coming and all records are also coming in csv format let me download again so it will automatically update the name as a report too in our case i already downloaded that's why it's coming as a report one so this one is also same record so i guess that's it in this video i hope you like this video and yes guys i will definitely come with the second video where we will export the csv records via api so that is nothing but a synchronous call to export the data in csv format so please like share and subscribe thank you

Channel: Clue Mediator

Views: 18,894

Keywords: react, export, csv, jsontocsv, download, reactcsv, cluemediator

Id: D9xiIZAPZUI

Length: 6min 59sec (419 seconds)

Published: Fri Jan 29 2021