1. added csv download load support

2. added chart tag

src/App.tsx

@@ -2,31 +2,33 @@ import * as React from 'react';
 import './App.css';
 import 'react-tabs/style/react-tabs.css';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
-import {ServerTable} from './ServerTable';
+import { ServerTable } from './ServerTable';
+import { Chart } from './Chart';
 
 // import logo from './logo.svg';
 
 class App extends React.Component {
   public render() {
     return (
-      <Tabs>
-        <TabList>
-          <Tab>
-            Server Table
-          </Tab>
-          <Tab>Charts</Tab>
-        </TabList>
+      <div className="App">
+        <Tabs>
+          <TabList>
+            <Tab>
+              Server Table
+            </Tab>
+            <Tab>Charts</Tab>
+          </TabList>
 
-        <TabPanel>
-          <ServerTable/>
-        </TabPanel>
-        <TabPanel>
-          <div className="App">
-            Hello
-          </div>
-        </TabPanel>
+          <TabPanel>
+            <ServerTable />
+          </TabPanel>
+          <TabPanel>
+            <Chart />
 
-      </Tabs>
+          </TabPanel>
+
+        </Tabs>
+      </div>
     );
   }
 }

src/Chart.tsx

@@ -0,0 +1,34 @@
+import { LineChart, XAxis, Tooltip, CartesianGrid, Line } from 'recharts';
+import * as React from 'react';
+
+
+export class Chart extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+  }
+  public render() {
+    const data = [
+      { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
+      { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
+      { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
+      { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
+      { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
+      { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
+      { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
+    ];
+    return (
+      <LineChart
+        width={400}
+        height={400}
+        data={data}
+        margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
+      >
+        <XAxis dataKey="name" />
+        <Tooltip />
+        <CartesianGrid stroke="#f5f5f5" />
+        <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
+        <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
+      </LineChart>
+    )
+  }
+}

src/ServerTable.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import { makeData, Logo, Tips } from "./Utils";
+import { Tips, Logo } from "./Utils";
+import * as Papa from 'papaparse';
+const readCsv = require('react-csv');
+const CSVLink = readCsv.CSVLink;
 
 // Import React Table
 import ReactTable from 'react-table';
@@ -9,9 +12,18 @@ export class ServerTable extends React.Component<any, any> {
   constructor(props: any) {
     super(props);
     this.state = {
-      data: makeData()
+      data: []
+      // data:makeData()
     };
+    this.loaded = this.loaded.bind(this);
+    Papa.parse('/data.csv', {
+      header: true,
+      download: true,
+      skipEmptyLines: true,
+      complete: this.loaded
+    });
   }
+
   public render() {
     const { data } = this.state;
     const filterExact = (filter: any, row: any) =>
@@ -32,7 +44,7 @@ export class ServerTable extends React.Component<any, any> {
                 {
                   Header: "First Name",
                   accessor: "firstName",
-                  filterMethod:filterPart
+                  filterMethod: filterPart
                 },
                 {
                   Header: "Last Name",
@@ -93,9 +105,16 @@ export class ServerTable extends React.Component<any, any> {
           className="-striped -highlight"
         />
         <br />
+        <CSVLink data={data} filename={"data.csv"}>Click here to download CSV file</CSVLink>
         <Tips />
         <Logo />
       </div>
     );
   }
+
+  public loaded(results: any) {
+    this.setState({
+      data: results.data
+    });
+  }
 }

src/Utils.tsx

@@ -30,7 +30,7 @@ export function makeData(len = 200) {
   return range(len).map((_: any) => {
     return {
       ...newPerson(),
-      children: range(10).map(newPerson)
+      // children: range(10).map(newPerson)
     };
   });
 }