enables class properties, updates eslint

.eslintrc.js

@@ -3,7 +3,11 @@ const OFF = 0,
   ERROR = 2;
 
 module.exports = exports = {
+  parser: "babel-eslint",
   extends: ["eslint:recommended", "plugin:react/recommended"],
+  plugins: [
+    "babel"
+  ],
   env: {
     browser: true,
     commonjs: true,
@@ -216,6 +220,7 @@ module.exports = exports = {
   //
   //   // React-specific overridesf
   //   "react/display-name": OFF,
-    "react/prop-types": OFF
+    "react/prop-types": OFF,
+    "babel/semi": OFF
   }
 };

package-lock.json

@@ -1891,6 +1891,137 @@
       "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==",
       "dev": true
     },
+    "babel-eslint": {
+      "version": "8.2.6",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-8.2.6.tgz",
+      "integrity": "sha512-aCdHjhzcILdP8c9lej7hvXKvQieyRt20SF102SIGyY4cUIiw6UaAtK4j2o3dXX74jEmy0TJ0CEhv4fTIM3SzcA==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.0.0-beta.44",
+        "@babel/traverse": "7.0.0-beta.44",
+        "@babel/types": "7.0.0-beta.44",
+        "babylon": "7.0.0-beta.44",
+        "eslint-scope": "3.7.1",
+        "eslint-visitor-keys": "^1.0.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.0.0-beta.44",
+          "resolved": "http://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz",
+          "integrity": "sha512-cuAuTTIQ9RqcFRJ/Y8PvTh+paepNcaGxwQwjIDRWPXmzzyAeCO4KqS9ikMvq0MCbRk6GlYKwfzStrcP3/jSL8g==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "7.0.0-beta.44"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.0.0-beta.44",
+          "resolved": "http://registry.npmjs.org/@babel/generator/-/generator-7.0.0-beta.44.tgz",
+          "integrity": "sha512-5xVb7hlhjGcdkKpMXgicAVgx8syK5VJz193k0i/0sLP6DzE6lRrU1K3B/rFefgdo9LPGMAOOOAWW4jycj07ShQ==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "7.0.0-beta.44",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.2.0",
+            "source-map": "^0.5.0",
+            "trim-right": "^1.0.1"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.0.0-beta.44",
+          "resolved": "http://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.44.tgz",
+          "integrity": "sha512-MHRG2qZMKMFaBavX0LWpfZ2e+hLloT++N7rfM3DYOMUOGCD8cVjqZpwiL8a0bOX3IYcQev1ruciT0gdFFRTxzg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "7.0.0-beta.44",
+            "@babel/template": "7.0.0-beta.44",
+            "@babel/types": "7.0.0-beta.44"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.0.0-beta.44",
+          "resolved": "http://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.44.tgz",
+          "integrity": "sha512-w0YjWVwrM2HwP6/H3sEgrSQdkCaxppqFeJtAnB23pRiJB5E/O9Yp7JAAeWBl+gGEgmBFinnTyOv2RN7rcSmMiw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "7.0.0-beta.44"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.0.0-beta.44",
+          "resolved": "http://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.44.tgz",
+          "integrity": "sha512-aQ7QowtkgKKzPGf0j6u77kBMdUFVBKNHw2p/3HX/POt5/oz8ec5cs0GwlgM8Hz7ui5EwJnzyfRmkNF1Nx1N7aA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "7.0.0-beta.44"
+          }
+        },
+        "@babel/highlight": {
+          "version": "7.0.0-beta.44",
+          "resolved": "http://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.44.tgz",
+          "integrity": "sha512-Il19yJvy7vMFm8AVAh6OZzaFoAd0hbkeMZiX3P5HGD+z7dyI7RzndHB0dg6Urh/VAFfHtpOIzDUSxmY6coyZWQ==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.0",
+            "esutils": "^2.0.2",
+            "js-tokens": "^3.0.0"
+          }
+        },
+        "@babel/template": {
+          "version": "7.0.0-beta.44",
+          "resolved": "http://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.44.tgz",
+          "integrity": "sha512-w750Sloq0UNifLx1rUqwfbnC6uSUk0mfwwgGRfdLiaUzfAOiH0tHJE6ILQIUi3KYkjiCDTskoIsnfqZvWLBDng==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "7.0.0-beta.44",
+            "@babel/types": "7.0.0-beta.44",
+            "babylon": "7.0.0-beta.44",
+            "lodash": "^4.2.0"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.0.0-beta.44",
+          "resolved": "http://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0-beta.44.tgz",
+          "integrity": "sha512-UHuDz8ukQkJCDASKHf+oDt3FVUzFd+QYfuBIsiNu/4+/ix6pP/C+uQZJ6K1oEfbCMv/IKWbgDEh7fcsnIE5AtA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "7.0.0-beta.44",
+            "@babel/generator": "7.0.0-beta.44",
+            "@babel/helper-function-name": "7.0.0-beta.44",
+            "@babel/helper-split-export-declaration": "7.0.0-beta.44",
+            "@babel/types": "7.0.0-beta.44",
+            "babylon": "7.0.0-beta.44",
+            "debug": "^3.1.0",
+            "globals": "^11.1.0",
+            "invariant": "^2.2.0",
+            "lodash": "^4.2.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.0.0-beta.44",
+          "resolved": "http://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.44.tgz",
+          "integrity": "sha512-5eTV4WRmqbaFM3v9gHAIljEQJU4Ssc6fxL61JN+Oe2ga/BwyjzjamwkCVVAQjHGuAX8i0BWo42dshL8eO5KfLQ==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.2.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "babylon": {
+          "version": "7.0.0-beta.44",
+          "resolved": "http://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.44.tgz",
+          "integrity": "sha512-5Hlm13BJVAioCHpImtFqNOF2H3ieTOHd0fmFGMxOJ9jgeFqeAwsv3u5P5cR7CSeFrkgHsT19DgFJkHV0/Mcd8g==",
+          "dev": true
+        },
+        "js-tokens": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
+          "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
+          "dev": true
+        }
+      }
+    },
     "babel-generator": {
       "version": "6.26.1",
       "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.1.tgz",
@@ -3904,29 +4035,6 @@
         }
       }
     },
-    "del": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/del/-/del-2.2.2.tgz",
-      "integrity": "sha1-wSyYHQZ4RshLyvhiz/kw2Qf/0ag=",
-      "dev": true,
-      "requires": {
-        "globby": "^5.0.0",
-        "is-path-cwd": "^1.0.0",
-        "is-path-in-cwd": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0",
-        "rimraf": "^2.2.8"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
-        }
-      }
-    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -4385,6 +4493,15 @@
         }
       }
     },
+    "eslint-plugin-babel": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-babel/-/eslint-plugin-babel-5.3.0.tgz",
+      "integrity": "sha512-HPuNzSPE75O+SnxHIafbW5QB45r2w78fxqwK3HmjqIUoPfPzVrq6rD+CINU3yzoDSzEhUkX07VUphbF73Lth/w==",
+      "dev": true,
+      "requires": {
+        "eslint-rule-composer": "^0.3.0"
+      }
+    },
     "eslint-plugin-react": {
       "version": "7.11.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.11.1.tgz",
@@ -4398,10 +4515,16 @@
         "prop-types": "^15.6.2"
       }
     },
+    "eslint-rule-composer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz",
+      "integrity": "sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==",
+      "dev": true
+    },
     "eslint-scope": {
-      "version": "3.7.3",
+      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.3.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
-      "integrity": "sha512-W+B0SvF4gamyCTmUc+uITPY0989iXVfKvhwtmJocTaYoc/3khEHmEmvfY/Gn9HA9VV75jrQECsHizkNw1b68FA==",
+      "integrity": "sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=",
       "dev": true,
       "requires": {
         "esrecurse": "^4.1.0",
@@ -4924,14 +5047,14 @@
       }
     },
     "flat-cache": {
-      "version": "1.3.0",
+      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.4.tgz",
-      "integrity": "sha1-0wMLMrOBVPTjt+nHCfSQ9++XxIE=",
+      "integrity": "sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==",
       "dev": true,
       "requires": {
         "circular-json": "^0.3.1",
-        "del": "^2.0.2",
         "graceful-fs": "^4.1.2",
+        "rimraf": "~2.6.2",
         "write": "^0.2.1"
       }
     },
@@ -5819,28 +5942,6 @@
       "integrity": "sha512-K8BNSPySfeShBQXsahYB/AbbWruVOTyVpgoIDnl8odPpeSfP2J5QO2oLFFdl2j7GfDCtZj2bMKar2T49itTPCg==",
       "dev": true
     },
-    "globby": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-5.0.0.tgz",
-      "integrity": "sha1-69hGZ8oNuzMLmbz8aOrCvFQ3Dg0=",
-      "dev": true,
-      "requires": {
-        "array-union": "^1.0.1",
-        "arrify": "^1.0.0",
-        "glob": "^7.0.3",
-        "object-assign": "^4.0.1",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
-        }
-      }
-    },
     "globule": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
@@ -11394,9 +11495,9 @@
       "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
     },
     "progress": {
-      "version": "2.0.0",
+      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8=",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
       "dev": true
     },
     "promise-inflight": {

package.json

@@ -50,11 +50,13 @@
     "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^9.0.1",
     "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^8.2.6",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.2",
     "circular-dependency-plugin": "^5.0.2",
     "css-loader": "^1.0.0",
     "eslint": "^4.19.1",
+    "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-react": "^7.11.1",
     "express": "^4.16.3",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",

src/components/layout/Table/index.scss

@@ -7,6 +7,7 @@ table {
     @extend %uppercase-label;
     font-weight: normal;
     text-align: left;
+    color: $gray;
   }
 
   td, th {
@@ -15,7 +16,6 @@ table {
 
   tbody {
     @extend %inputShadow;
-    border-radius: $radius-sm;
   }
 
   tr:nth-child(even) {

src/components/modules/SearchableTable/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 import { Filter, Table } from 'payload/components'
 
 class SearchableTable extends Component {
@@ -24,23 +25,31 @@ class SearchableTable extends Component {
   structureRows = () => {
     if (this.props.data) {
       return this.props.data.map(row => {
-         if (columns) {
+          const formattedRow = {...row};
-          const columnKeys = this.state.columns.map(col => col.key);
+
-          return getPropSubset(columnKeys, row);
+          // Link the first column
-        }
+          formattedRow[this.state.columns[0].key] = <Link to={'/'}>{row[this.state.columns[0].key]}</Link>
-         return {};
+          return formattedRow;
       })
     }
 
     return [];
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.data !== this.props.data) {
+      this.setState({
+        rows: this.structureRows(this.props.data)
+      })
+    }
+  }
+
   render() {
 
     return (
       <React.Fragment>
         <Filter />
-        <Table rows={this.props.data} columns={this.state.columns} />
+        <Table rows={this.state.rows} columns={this.state.columns} />
       </React.Fragment>
     )
   }