Pretty Example by "npm start" then browse "localhost:8008"

sample-site/csvlink.example.md

@@ -1,3 +1,4 @@
+
 Basic example
 
 ```

sample-site/src/Table.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+class Table extends React.Component {
+  state= {};
+  renderHeaders() {
+   return (<thead><tr>
+             {this.props.headers.map((header, i) => <th key={"th"+i}>{header}</th>)}
+         </tr></thead>);
+  }
+
+   renderRow(row, key) {
+     return (<tr key={'tbody-tr'+key}>
+               {row.map((cell, i) => <td key={'td-'+key+'-'+i}>{cell}</td>)}
+           </tr>);
+   }
+
+  renderData() {
+   return (
+    <tbody>
+      {this.props.data.map((row, k) => this.renderRow(row, k) )}
+   </tbody>
+   );
+  }
+  render(){
+    return (
+     <table >
+      {this.renderHeaders()}
+      {this.renderData()}
+     </table>
+    );
+  }
+}
+
+export default Table;

sample-site/src/app.jsx

@@ -1,30 +1,53 @@
 import React from 'react';
 import {CSVLink, CSVDownload} from 'react-csv';
+import Table from './Table.jsx';
 
+const csvHeaders = [
+"Company","Contact","Country"
+]
 const csvData =[
-  ['firstname', 'lastname', 'email'] ,
+  ['Alfreds Futterkiste'	,'Maria Anders',	'Germany'] ,
-  ['Ahmed', 'Tomi' , 'ah@smthing.co.com'] ,
+  ['Rathath IT', 'Abdennour TM' , 'Tunisia'] ,
-  ['Raed', 'Labes' , 'rl@smthing.co.com'] ,
+  ['Laughing Bacchus Winecellars', 'Yoshi Tannamuri' , 'Canada'],
-  ['Yezzi','Min l3b', 'ymin@cocococo.com']
+  ['Auto1', 'Petter' , 'Germany'] ,
+  ['Estifeda', 'Yousri K' , 'Tunisia'] ,
+  ['Nine 10ᵗʰ', 'Amjed Idris' , 'Saudi Arabia'] ,
+  ['Tamkeen', 'Mohamed Alshibi' , 'Saudi Arabia'] ,
+  ['Packet Publishing', 'David Become' , 'UK'] ,
+  ['Software hourse', 'Soro' , 'Poland']
 ];
 
 class App extends React.Component {
 
+  state= {};
+  getFileName() {
+    if (!this.state.filename) return undefined;
+    if (!this.state.filename.endsWith('.csv')) return this.state.filename + '.csv';
+    return this.state.filename;
+  }
   render() {
     return (
-      <div style={{padding: 10}}>
+      <div>
-        <h3><code>react-csv/sample-site/src/app.jsx</code></h3>
+          <div ><h1>Pretty Example "React-csv"</h1></div>
-        <hr />
+          <div>
-        <div>
+              <Table headers={csvHeaders} data={csvData} />
+          </div>
+          <div className="row">
+              <div className="large-6 columns"></div>
+              <div className="large-4 columns">
+                  <input
+                    onKeyUp={(e) => this.setState({filename: e.target.value})}
+                    type="text" placeholder="File name"/>
+              </div>
+              <div className="large-2 columns">
+                  <CSVLink
+                    headers={csvHeaders}
+                    data={csvData}
+                    filename={this.getFileName()}
+                    className="btn">Export to CSV ⬇</CSVLink>
+              </div>
+          </div>
 
-          Download CSV <CSVLink data={csvData}> here </CSVLink>.
-        </div>
-        <hr />
-
-        <div>
-
-          Download CSV  with <code>;</code> as separator : <CSVLink data={csvData} separator=";"> here </CSVLink>.
-        </div>
       </div>
     );
   }