Export to CSV button in react table

javascript reactjs frontend react-table
Zinngg picture Zinngg · Feb 13, 2018 · Viewed 59.6k times · Source

Looking for a way to add an "Export to CSV" button to a react-table which is an npmjs package (https://www.npmjs.com/package/react-table).

I need to add a custom button for exporting the table data to an excel sheet in the csv or xls format?

Answer

Rishikesh Dhokare picture Rishikesh Dhokare · Feb 13, 2018

Take a look at this npm library - https://www.npmjs.com/package/react-csv

For example - 

import {CSVLink, CSVDownload} from 'react-csv';

const csvData =[
  ['firstname', 'lastname', 'email'] ,
  ['John', 'Doe' , '[email protected]'] ,
  ['Jane', 'Doe' , '[email protected]']
];
<CSVLink data={csvData} >Download me</CSVLink>
// or
<CSVDownload data={csvData} target="_blank" />

Related questions

Get form data in ReactJS

I have a simple form in my render function, like so: render : function() { return ( <form> <input type="text" name="email" placeholder="Email" /> <input type="password" name="password" placeholder="Password" /> <button type="button" onClick={…

Read More
Insert HTML with React Variable Statements (JSX)

I am building something with React where I need to insert HTML with React Variables in JSX. Is there a way to have a variable like so: var thisIsMyCopy = '<p>copy copy copy <strong>strong …

Read More
What is {this.props.children} and when you should use it?

Being a beginner to React world, I want to understand in depth what happens when I use {this.props.children} and what are the situations to use the same. What is the relevance of it in below code snippet? render() { …

Read More