moved csv loading to a separate component where the state is to be maintained

src/App.tsx

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

src/ServerAnalytics.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import 'react-tabs/style/react-tabs.css';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import { ServerTable } from './ServerTable';
+import { Chart } from './Chart';
+
+export default class ServerAnalytics extends React.Component {
+  public render() {
+    return (
+      <div className="App">
+        <Tabs>
+          <TabList>
+            <Tab>
+              Server Table
+            </Tab>
+            <Tab>Charts</Tab>
+          </TabList>
+          <TabPanel>
+            <ServerTable csvPath='/data.csv'/>
+          </TabPanel>
+          <TabPanel>
+            <Chart />
+          </TabPanel>
+        </Tabs>
+      </div>
+    );
+  }
+}

src/ServerTable.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Tips, Logo } from "./Utils";
+import { Tips } from "./Utils";
 import * as Papa from 'papaparse';
 const reactcsv = require('react-csv');
 const CSVLink = reactcsv.CSVLink;
@@ -15,12 +15,18 @@ export class ServerTable extends React.Component<any, any> {
       headers: [],
       data: []
     };
-    this.loaded = this.loaded.bind(this);
+    const loaded = (results: any) => {
-    Papa.parse('/data.csv', {
+      const localstate = this;
+      localstate.setState({
+        headers: results.meta.fields,
+        data: results.data
+      });
+    }
+    Papa.parse(this.props.csvPath, {
       header: true,
       download: true,
       skipEmptyLines: true,
-      complete: this.loaded
+      complete: loaded
     });
   }
 
@@ -46,11 +52,13 @@ export class ServerTable extends React.Component<any, any> {
           columns={headerCols}
           defaultPageSize={20}
           className="-striped -highlight"
+          style={{
+            height: "450px"
+          }}
         />
         <br />
         <CSVLink data={data} filename={"data.csv"}>Click here to download CSV file</CSVLink>
         <Tips />
-        <Logo />
       </div>
     );
   }