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

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;
-      localstate.setState({
+      const local = this;
+      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
-        .replace(/([A-Z])/g, ' $1')
-        .replace(/^./, (str: string) => str.toUpperCase());
+      // const title = headerName
+      //   .replace(/([A-Z])/g, ' $1')
+      //   .replace(/^./, (str: string) => str.toUpperCase());
       return {
-        Header: title,
-        accessor: headerName
+        Header: 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"
         }}