add csv export

package.json

@@ -14,6 +14,7 @@
 		"react": "^16.8.6",
 		"react": "^16.8.6",
 		"react-bootstrap": "^1.0.0-beta.10",
 		"react-bootstrap": "^1.0.0-beta.10",
 		"react-bootstrap-daterangepicker": "^4.1.0",
 		"react-bootstrap-daterangepicker": "^4.1.0",
+		"react-csv": "^1.1.1",
 		"react-dom": "^16.8.6",
 		"react-dom": "^16.8.6",
 		"react-icons": "^3.7.0",
 		"react-icons": "^3.7.0",
 		"react-mapbox-gl": "^4.6.0",
 		"react-mapbox-gl": "^4.6.0",

src/components/DataCard.js

 import React from 'react';
 import React from 'react';
-import { Card, Col, Row } from 'react-bootstrap';
+import { Card, Col, Row, Button } from 'react-bootstrap';
 import { FaMoneyBillAlt, FaArrowUp, FaArrowDown } from 'react-icons/fa';
 import { FaMoneyBillAlt, FaArrowUp, FaArrowDown } from 'react-icons/fa';
 import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer } from 'recharts';
 import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer } from 'recharts';
 import withWindowDimensions from '../utils/withWindowDimensions';
 import withWindowDimensions from '../utils/withWindowDimensions';
+import { CSVLink } from 'react-csv';
 
 
 const chartdata = [
 const chartdata = [
 	{
 	{
@@ -38,7 +39,6 @@ const chartdata = [
 const SmCard = props => {
 const SmCard = props => {
 	const smdata = props.smitem;
 	const smdata = props.smitem;
 	const iconStyle = { style: { height: '1.5em', width: '1.5em' } };
 	const iconStyle = { style: { height: '1.5em', width: '1.5em' } };
-	// console.log('test', smdata);
 	return (
 	return (
 		<Card style={{ padding: '.7em', color: 'white', backgroundColor: props.backgroundColor }}>
 		<Card style={{ padding: '.7em', color: 'white', backgroundColor: props.backgroundColor }}>
 			<h6>{smdata.smtitle}</h6>
 			<h6>{smdata.smtitle}</h6>
@@ -112,6 +112,13 @@ const DataCard = props => {
 					)
 					)
 				)}
 				)}
 			</Row>
 			</Row>
+			<Row style={{ justifyContent: 'flex-end', marginRight: 1 }}>
+				<CSVLink data={data.detail} filename={data.title}>
+					<Button variant="light" style={{ marginTop: '.5em' }}>
+						Export to CSV
+					</Button>
+				</CSVLink>
+			</Row>
 		</Col>
 		</Col>
 	);
 	);
 };
 };

src/components/DataTable.js

 import React from 'react';
 import React from 'react';
-import { Col, Table } from 'react-bootstrap';
+import { Col, Table, Row, Button } from 'react-bootstrap';
+import { CSVLink } from 'react-csv';
 const data = [
 const data = [
 	{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
 	{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
 	{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
 	{ site: 'Pichaiyat Building', people: 2670.0, revenue: 17.0, timestamp: '07/31/2019 14:23' },
@@ -21,7 +22,7 @@ const data = [
 const DataTable = () => {
 const DataTable = () => {
 	return (
 	return (
 		<Col>
 		<Col>
-			<Table striped bordered hover size="sm" style={{ margin: '1em 0' }}>
+			<Table striped bordered hover size="sm" style={{ margin: '1em 0 0 0' }}>
 				<thead style={{ backgroundColor: '#49b9ff', color: 'white' }}>
 				<thead style={{ backgroundColor: '#49b9ff', color: 'white' }}>
 					<tr>
 					<tr>
 						<th>Site</th>
 						<th>Site</th>
@@ -41,6 +42,13 @@ const DataTable = () => {
 					))}
 					))}
 				</tbody>
 				</tbody>
 			</Table>
 			</Table>
+			<Row style={{ justifyContent: 'flex-end', marginRight: 1 }}>
+				<CSVLink data={data} filename={'data-table'}>
+					<Button variant="light" style={{ marginTop: '.5em' }}>
+						Export to CSV
+					</Button>
+				</CSVLink>
+			</Row>
 		</Col>
 		</Col>
 	);
 	);
 };
 };