We often export data from tables to excel tables in web applications. There are two ways to implement export functionality in React: one is to use any third party library and the other is to create your own component. In this post, we will see how to implement the export function to excel in React applications in both ways.
Here are the topics we will cover in this article:
- Example Project
- Prerequisites
- Implement the export function
- Export function with third party or NPM lib
- In brief
- Conclude
1. Example project
This is a simple application with table data and output buttons in the top right corner. When you click the button, data from the table is downloaded in an excel table. You can import projects from here and run directly.
1 2 3 4 5 6 | <span class="token comment">// clone the project</span> git clone https <span class="token punctuation">:</span> <span class="token operator">/</span> <span class="token operator">/</span> github <span class="token punctuation">.</span> com <span class="token operator">/</span> bbachi <span class="token operator">/</span> react <span class="token operator">-</span> exportexcel <span class="token operator">-</span> example <span class="token punctuation">.</span> git <span class="token comment">// install and start the project</span> npm install npm start |
2. Prerequisite
There are several prerequisites for this tutorial. You need to create a React project with the create-react-app and need to install npm xslx packages, bootstrapand file-saver.
1 2 3 4 5 6 7 | <span class="token comment">// generate react project</span> create <span class="token operator">-</span> react <span class="token operator">-</span> app react <span class="token operator">-</span> exportexcel <span class="token operator">-</span> example <span class="token comment">// install bootstrap</span> npm install react <span class="token operator">-</span> bootstrap bootstrap <span class="token operator">--</span> save <span class="token comment">// install xsls and file-saver</span> npm install xlsx file <span class="token operator">-</span> saver <span class="token operator">--</span> save |
You need to add stylesheets from the React Bootstrap library in index.html
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <span class="token operator"><</span> <span class="token operator">!</span> <span class="token constant">DOCTYPE</span> html <span class="token operator">></span> <span class="token operator"><</span> html lang <span class="token operator">=</span> <span class="token string">"en"</span> <span class="token operator">></span> <span class="token operator"><</span> head <span class="token operator">></span> <span class="token operator"><</span> meta charset <span class="token operator">=</span> <span class="token string">"utf-8"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> link rel <span class="token operator">=</span> <span class="token string">"shortcut icon"</span> href <span class="token operator">=</span> <span class="token string">"%PUBLIC_URL%/favicon.ico"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">!</span> <span class="token operator">--</span> Bootstrap stylesheet link <span class="token operator">--</span> <span class="token operator">></span> <span class="token operator"><</span> link rel <span class="token operator">=</span> <span class="token string">"stylesheet"</span> href <span class="token operator">=</span> <span class="token string">"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"</span> integrity <span class="token operator">=</span> <span class="token string">"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"</span> crossorigin <span class="token operator">=</span> <span class="token string">"anonymous"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> meta name <span class="token operator">=</span> <span class="token string">"viewport"</span> content <span class="token operator">=</span> <span class="token string">"width=device-width, initial-scale=1"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> meta name <span class="token operator">=</span> <span class="token string">"theme-color"</span> content <span class="token operator">=</span> <span class="token string">"#000000"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> title <span class="token operator">></span> React App <span class="token operator"><</span> <span class="token operator">/</span> title <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> head <span class="token operator">></span> <span class="token operator"><</span> body <span class="token operator">></span> <span class="token operator"><</span> noscript <span class="token operator">></span> You need to enable JavaScript to run <span class="token keyword">this</span> app <span class="token punctuation">.</span> <span class="token operator"><</span> <span class="token operator">/</span> noscript <span class="token operator">></span> <span class="token operator"><</span> div id <span class="token operator">=</span> <span class="token string">"root"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> body <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> html <span class="token operator">></span> |
Create a title for the Header
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">Header</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"header"</span> <span class="token operator">></span> <span class="token operator"><</span> h1 <span class="token operator">></span> React Export To Excel Example <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Create the Customers table
Let’s create a Customer table component. This is a presentation component which takes the customers array as props and renders as tables.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token keyword">import</span> Table <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Table'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">Customers</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> customers <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token function-variable function">CustomerRow</span> <span class="token operator">=</span> <span class="token punctuation">(</span> customer <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> tr key <span class="token operator">=</span> <span class="token punctuation">{</span> index <span class="token punctuation">}</span> className <span class="token operator">=</span> <span class="token string">'even'</span> <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> index <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> customer <span class="token punctuation">.</span> firstName <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> customer <span class="token punctuation">.</span> lastName <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> customer <span class="token punctuation">.</span> email <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> customer <span class="token punctuation">.</span> address <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> td <span class="token operator">></span> <span class="token punctuation">{</span> customer <span class="token punctuation">.</span> zipcode <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> td <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> tr <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> CustomerTable <span class="token operator">=</span> customers <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> cust <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">CustomerRow</span> <span class="token punctuation">(</span> cust <span class="token punctuation">,</span> index <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token keyword">const</span> tableHeader <span class="token operator">=</span> <span class="token operator"><</span> thead className <span class="token operator">=</span> <span class="token string">'bgvi'</span> <span class="token operator">></span> <span class="token operator"><</span> tr <span class="token operator">></span> <span class="token operator"><</span> th <span class="token operator">></span> # <span class="token operator"><</span> <span class="token operator">/</span> th <span class="token operator">></span> <span class="token operator"><</span> th <span class="token operator">></span> First Name <span class="token operator"><</span> <span class="token operator">/</span> th <span class="token operator">></span> <span class="token operator"><</span> th <span class="token operator">></span> Last Name <span class="token operator"><</span> <span class="token operator">/</span> th <span class="token operator">></span> <span class="token operator"><</span> th <span class="token operator">></span> Email <span class="token operator"><</span> <span class="token operator">/</span> th <span class="token operator">></span> <span class="token operator"><</span> th <span class="token operator">></span> Address <span class="token operator"><</span> <span class="token operator">/</span> th <span class="token operator">></span> <span class="token operator"><</span> th <span class="token operator">></span> Zipcode <span class="token operator"><</span> <span class="token operator">/</span> th <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> tr <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> thead <span class="token operator">></span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> Table striped bordered hover <span class="token operator">></span> <span class="token punctuation">{</span> tableHeader <span class="token punctuation">}</span> <span class="token operator"><</span> tbody <span class="token operator">></span> <span class="token punctuation">{</span> CustomerTable <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> tbody <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Table <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Transfer data from the App component
We should move the data shown in the table from the App component as shown below and we also need to enter the Customers and Header components to use the data in the render function.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'./App.css'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Customers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./Customers'</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Header <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./Header'</span> <span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function-variable function">customers</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> custs <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> i <span class="token operator"><=</span> <span class="token number">25</span> <span class="token punctuation">;</span> i <span class="token operator">++</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> custs <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> firstName <span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`first</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> i <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">,</span> lastName <span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`last</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> i <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">,</span> email <span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`abc</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> i <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">@gmail.com`</span></span> <span class="token punctuation">,</span> address <span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`000</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> i <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> street city, ST`</span></span> <span class="token punctuation">,</span> zipcode <span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`0000</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> i <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> custs <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"App"</span> <span class="token operator">></span> <span class="token operator"><</span> Header <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> Customers customers <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">customers</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> App <span class="token punctuation">;</span> |
Your application will look like this.
3. Execute the Export function
Let’s create a component called ExportCSVwhich that takes the data as props and takes care of the rest of the export function. This is the component with the exportToCSV method to handle all the Excel download functions with xlxs and file-saver.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Button'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> FileSaver <span class="token keyword">from</span> <span class="token string">'file-saver'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> <span class="token constant">XLSX</span> <span class="token keyword">from</span> <span class="token string">'xlsx'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">ExportCSV</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> csvData <span class="token punctuation">,</span> fileName <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> fileType <span class="token operator">=</span> <span class="token string">'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> fileExtension <span class="token operator">=</span> <span class="token string">'.xlsx'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">exportToCSV</span> <span class="token operator">=</span> <span class="token punctuation">(</span> csvData <span class="token punctuation">,</span> fileName <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> ws <span class="token operator">=</span> <span class="token constant">XLSX</span> <span class="token punctuation">.</span> utils <span class="token punctuation">.</span> <span class="token function">json_to_sheet</span> <span class="token punctuation">(</span> csvData <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> wb <span class="token operator">=</span> <span class="token punctuation">{</span> Sheets <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token string">'data'</span> <span class="token punctuation">:</span> ws <span class="token punctuation">}</span> <span class="token punctuation">,</span> SheetNames <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'data'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> excelBuffer <span class="token operator">=</span> <span class="token constant">XLSX</span> <span class="token punctuation">.</span> <span class="token function">write</span> <span class="token punctuation">(</span> wb <span class="token punctuation">,</span> <span class="token punctuation">{</span> bookType <span class="token punctuation">:</span> <span class="token string">'xlsx'</span> <span class="token punctuation">,</span> type <span class="token punctuation">:</span> <span class="token string">'array'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span> <span class="token punctuation">(</span> <span class="token punctuation">[</span> excelBuffer <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> type <span class="token punctuation">:</span> fileType <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> FileSaver <span class="token punctuation">.</span> <span class="token function">saveAs</span> <span class="token punctuation">(</span> data <span class="token punctuation">,</span> fileName <span class="token operator">+</span> fileExtension <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> Button variant <span class="token operator">=</span> <span class="token string">"warning"</span> onClick <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> e <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">exportToCSV</span> <span class="token punctuation">(</span> csvData <span class="token punctuation">,</span> fileName <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">></span> Export <span class="token operator"><</span> <span class="token operator">/</span> Button <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
This component is a presentation component that takes data to download and file names as props. The exportToCSV method is called when the export button is clicked.
You need to enter this component in the App component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token comment">// removed for brevity</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"App"</span> <span class="token operator">></span> <span class="token operator"><</span> Header <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"row"</span> <span class="token operator">></span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"col-md-8"</span> <span class="token operator">></span> <span class="token operator"><</span> h2 <span class="token operator">></span> Customers <span class="token operator"><</span> <span class="token operator">/</span> h2 <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"col-md-4 center"</span> <span class="token operator">></span> <span class="token operator"><</span> ExportCSV csvData <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> customers <span class="token punctuation">}</span> fileName <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> fileName <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> Customers customers <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">customers</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
The following screen is the final screen after we add all the above functions and get ready to work !!
4. Export function with a third party or NPM lib
Reac-csv
is the third-party library we can use. All we need to do is pass the data and fileName and this library will take care of the rest for us.
We need to install Reac-csv
first and then import it in the ExportCSV component.
1 2 | npm install react-csv --save |
Import CSVLink from react-csv and transfer the required data and file name to the link as shown below.
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> CSVLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-csv'</span> <span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'react-bootstrap/Button'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">ExportReactCSV</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> csvData <span class="token punctuation">,</span> fileName <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> Button variant <span class="token operator">=</span> <span class="token string">"warning"</span> <span class="token operator">></span> <span class="token operator"><</span> CSVLink data <span class="token operator">=</span> <span class="token punctuation">{</span> csvData <span class="token punctuation">}</span> filename <span class="token operator">=</span> <span class="token punctuation">{</span> fileName <span class="token punctuation">}</span> <span class="token operator">></span> Export <span class="token operator"><</span> <span class="token operator">/</span> CSVLink <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Button <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
In the App component, all you need to do is enter ExportReactCSV
instead of ExportCSV
.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">import</span> <span class="token punctuation">{</span> ExportReactCSV <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./ExportReactCSV'</span> <span class="token comment">// removed code for the brevity</span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"col-md-4 center"</span> <span class="token operator">></span> <span class="token operator"><</span> ExportReactCSV csvData <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> customers <span class="token punctuation">}</span> fileName <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> fileName <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> App <span class="token punctuation">;</span> |
5. Summary
- We need xsls and file-saver libs to perform export functionality in React.
- There are several ways you can implement your export logic in React: one is to use your own logic, the other is to use any third party lib.
- Implement the export logic with a separate component for reuse and can also be imported into any component to use it.
6. Conclusion section
There are some third party libs or npm to use right away. But, sometimes we have to create separate components for export functionality to be more flexible and for other purposes such as security reasons. Thank you for watching. In the article there is a reference at https://blog.bitsrc.io/exporting-data-to-excel-with-react-6943d7775a92