random color for row with same value in the column in config

package.json

@@ -6,6 +6,7 @@
     "lodash": "^4.17.10",
     "namor": "^1.0.1",
     "papaparse": "^4.5.0",
+    "randomcolor": "^0.5.3",
     "react": "^16.4.1",
     "react-csv": "^1.0.14",
     "react-dom": "^16.4.1",
@@ -25,6 +26,7 @@
     "@types/lodash": "^4.14.110",
     "@types/node": "^10.3.4",
     "@types/papaparse": "^4.5.0",
+    "@types/randomcolor": "^0.4.3",
     "@types/react": "^16.4.1",
     "@types/react-dom": "^16.0.6",
     "@types/react-table": "^6.7.11",

public/config.json

@@ -1,7 +1,8 @@
 {
   "tabList": [{
       "tabTitle": "Tab 1",
-      "fileName": "data.csv"
+      "fileName": "data.csv",
+      "colorColumn": "status"
     },
     {
       "tabTitle": "Tab 2",

src/ServerTabLoader.tsx

@@ -33,7 +33,7 @@ export default class ServerTabLoader extends React.Component<any, any> {
         </TabList>
         {this.state.tabList.map((o: any, i: number) =>
           (<TabPanel key={i}>
-            <ServerTable csvFile={o.fileName} />
+            <ServerTable csvFile={o.fileName} colorColumn={o.colorColumn} />
           </TabPanel>
           )
         )}

src/ServerTable.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Tips } from "./Utils";
 import * as _ from 'lodash';
 // import { Chart } from './Chart';
+const randomColor = require('randomcolor');
 const reactcsv = require('react-csv');
 const CSVLink = reactcsv.CSVLink;
 import * as Papa from 'papaparse';
@@ -14,13 +15,16 @@ export default class ServerTable extends React.Component<any, any> {
   constructor(props: any) {
     super(props);
     this.state = {
-      headers: [], data: []
+      headers: [], data: [], colColorMap: {}
     }
     const loaded = (results: any) => {
-      const localstate = this;
+      const local = this;
-      localstate.setState({
+      const colsUnique = _.keys(_.groupBy(results.data, (o: any) => _.get<any>(o, this.props.colorColumn)));
+      const colColorMap = _.zipObject(colsUnique, _.map(colsUnique, () => randomColor()));
+      local.setState({
         headers: results.meta.fields,
-        data: results.data
+        data: results.data,
+        colColorMap
       });
     }
     Papa.parse(this.props.csvFile, {
@@ -39,14 +43,31 @@ export default class ServerTable extends React.Component<any, any> {
       String(row[filter.id]).startsWith(filter.value) ||
       String(row[filter.id]).endsWith(filter.value)
     const headerGen = (headerName: string) => {
-      const title = headerName
+      // const title = headerName
-        .replace(/([A-Z])/g, ' $1')
+      //   .replace(/([A-Z])/g, ' $1')
-        .replace(/^./, (str: string) => str.toUpperCase());
+      //   .replace(/^./, (str: string) => str.toUpperCase());
       return {
-        Header: title,
+        Header: headerName,
-        accessor: headerName
+        accessor: headerName,
+        Cell: (row: any) => {
+          return row.value;
+        }
       }
     }
+    const colorCol = this.props.colorColumn;
+    const colColorMap = this.state.colColorMap;
+    const rowStyle = (state: any, rowInfo: any, column: any) => {
+      if (_.isUndefined(rowInfo) || _.isUndefined(colorCol)) {
+        return {};
+      }
+      const colValue = _.get<any>(rowInfo.row, colorCol, '');
+      const colColor = _.get<any>(colColorMap, colValue, 'green');
+      return {
+        style: {
+          background: colColor
+        }
+      };
+    };
     const headerCols = headers.map(headerGen);
     return (
       <ReactTable
@@ -57,6 +78,7 @@ export default class ServerTable extends React.Component<any, any> {
         showPagination={false}
         defaultPageSize={100}
         className="-striped -highlight"
+        getTrProps={rowStyle}
         style={{
           height: "500px"
         }}

yarn.lock

@@ -42,6 +42,10 @@
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/@types/papaparse/-/papaparse-4.5.0.tgz#6a3f1ff2d70fa96945617a12edc4b0490a18ec14"
 
+"@types/randomcolor@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@types/randomcolor/-/randomcolor-0.4.3.tgz#66bf69fdf43ea7b73ae4c378f660442c8e236e93"
+
 "@types/react-dom@^16.0.6":
   version "16.0.6"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.6.tgz#f1a65a4e7be8ed5d123f8b3b9eacc913e35a1a3c"
@@ -5672,6 +5676,10 @@ randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   dependencies:
     safe-buffer "^5.1.0"
 
+randomcolor@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/randomcolor/-/randomcolor-0.5.3.tgz#7f90f2f2a7f6d5a52232161eeaeeaea9ac3b5815"
+
 randomfill@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"