loading headers from csv

src/ServerTable.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Tips, Logo } from "./Utils";
 import * as Papa from 'papaparse';
-const readCsv = require('react-csv');
-const CSVLink = readCsv.CSVLink;
+const reactcsv = require('react-csv');
+const CSVLink = reactcsv.CSVLink;
 
 // Import React Table
 import ReactTable from 'react-table';
@@ -12,8 +12,8 @@ export class ServerTable extends React.Component<any, any> {
   constructor(props: any) {
     super(props);
     this.state = {
+      headers: [],
       data: []
-      // data:makeData()
     };
     this.loaded = this.loaded.bind(this);
     Papa.parse('/data.csv', {
@@ -25,82 +25,25 @@ export class ServerTable extends React.Component<any, any> {
   }
 
   public render() {
-    const { data } = this.state;
-    const filterExact = (filter: any, row: any) =>
-      String(row[filter.id]) === filter.value;
+    const { data, headers } = this.state;
     const filterPart = (filter: any, row: any) =>
       row[filter.id].startsWith(filter.value) ||
       row[filter.id].endsWith(filter.value)
+    const headerGen = (headerName: string) => {
+      const title = headerName.replace(/([A-Z])/g, ' $1').replace(/^./, (str:string) => str.toUpperCase());
+      return {
+        Header: title,
+        accessor: headerName
+      }
+    }
+    const headerCols = headers.map(headerGen);
     return (
       <div>
         <ReactTable
           data={data}
           filterable={true}
-          defaultFilterMethod={filterExact}
-          columns={[
-            {
-              Header: "Name",
-              columns: [
-                {
-                  Header: "First Name",
-                  accessor: "firstName",
-                  filterMethod: filterPart
-                },
-                {
-                  Header: "Last Name",
-                  id: "lastName",
-                  accessor: (d: any) => d.lastName
-                }
-              ]
-            },
-            {
-              Header: "Info",
-              columns: [{
-                Header: 'Profile Progress',
-                accessor: 'progress',
-                Cell: (row: any) => (
-                  <div
-                    style={{
-                      width: '100%',
-                      height: '100%',
-                      backgroundColor: '#dadada',
-                      borderRadius: '2px'
-                    }}
-                  >
-                    <div
-                      style={{
-                        width: `${row.value}%`,
-                        height: '100%',
-                        backgroundColor: row.value > 66 ? '#85cc00'
-                          : row.value > 33 ? '#ffbf00'
-                            : '#ff2e00',
-                        borderRadius: '2px',
-                        transition: 'all .2s ease-out'
-                      }}
-                    />
-                  </div>
-                )
-              },
-              {
-                Header: "Age",
-                accessor: "age"
-              },
-              {
-                Header: "Status",
-                accessor: "status"
-              }
-              ]
-            },
-            {
-              Header: 'Stats',
-              columns: [
-                {
-                  Header: "Visits",
-                  accessor: "visits"
-                }
-              ]
-            }
-          ]}
+          defaultFilterMethod={filterPart}
+          columns={headerCols}
           defaultPageSize={20}
           className="-striped -highlight"
         />
@@ -114,6 +57,7 @@ export class ServerTable extends React.Component<any, any> {
 
   public loaded(results: any) {
     this.setState({
+      headers: results.meta.fields,
       data: results.data
     });
   }