tables done (i think)

src/assets/stylesheets/cabledetail.scss

@@ -196,10 +196,10 @@ $white: #fff;
   width: calc(80% + 50px);
   height: auto;
   background-color: transparent;
-  display:flex;
+  display: flex;
   flex-wrap: wrap;
   flex-direction: row;
-  align-items: center;
+  align-items: stretch;
   justify-content: space-between;
   margin-bottom: 50px;
   margin-top: 5px;

src/components/CableDetailComponent.js

@@ -19,10 +19,22 @@ class Cable {
     this.dynamicProps = {};
     this.horizontal = [];
     this.vertical = [];
-    this.orderedKeys = []
+    this.orderedKeys = [];
 
     Object.keys(cableData).forEach((key) => {
-      if (!["partnum", "id", "brand", "position", "image", "short_description", "description", "application", "category"].includes(key)) {
+      if (
+        ![
+          "partnum",
+          "id",
+          "brand",
+          "position",
+          "image",
+          "short_description",
+          "description",
+          "application",
+          "category",
+        ].includes(key)
+      ) {
         this.dynamicProps[key] = cableData[key];
       }
     });
@@ -38,6 +50,27 @@ class Cable {
     }
     this.orderedKeys = this.orderedKeys.concat(this.vertical);
     this.orderedKeys = this.orderedKeys.concat(this.horizontal);
+
+    for (let i = 0; i < this.orderedKeys.length; i++) {
+      let key = this.orderedKeys[i];
+      if (!isNaN(key)) {
+        this.orderedKeys.splice(i, 1);
+        i--;
+      }
+
+      try {
+        let data = this.dynamicProps[key];
+        let first = Object.keys(data)[0];
+        if (data[first] !== undefined) {
+          if (typeof data[first] === "string") {
+            if (first === "" || data[first] === "") {
+              this.orderedKeys.splice(i, 1);
+              i--;
+            }
+          }
+        }
+      } catch (error) {}
+    }
   }
 }
 
@@ -85,6 +118,7 @@ export default class CableDetailComponent extends Component {
     const maxRows = Math.max(...keys.map((key) => data[key].length));
 
     const rows = Array.from({ length: maxRows }).map((_, rowIndex) => {
+
       return (
         <tr className="row" key={rowIndex}>
           {keys.map((key, index) => (
@@ -228,8 +262,7 @@ export default class CableDetailComponent extends Component {
                     JSON.stringify(cableDetails.dynamicProps[key])
                   );
                 }
-              }
+              })}
-              )}
             </div>
           ) : (
             <div className="cable-tables"></div>