styling table

src/client/Elements/Table.jsx

@@ -1,40 +1,88 @@
 import { withTableValue } from 'client/hocs/withStore';
+import colors from 'client/UIKit/colors';
+import { Box } from 'client/UIKit/grid';
 import React from 'react';
+import styled from 'styled-components';
+
+const TableWrapper = styled(Box)`
+  table {
+    width: 100%;
+    text-align: left;
+    border-radius: 2px 2px 0 0;
+    border-collapse: separate;
+    border-spacing: 0;
+
+    tr {
+      width: 100%;
+      :last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    th {
+      color: rgba(0, 0, 0, 0.85);
+      font-weight: 500;
+      text-align: left;
+      background: ${colors.white[25]};
+      transition: background 0.3s ease;
+      padding: 16px;
+    }
+
+    th,
+    td {
+      width: 25% !important;
+      position: relative;
+      overflow-wrap: break-word;
+      border-bottom: 1px solid ${colors.white[50]};
+    }
+
+    td {
+      padding: 10px 16px;
+      & :first-child {
+        margin: 0;
+      }
+    }
+  }
+`;
 
 const Table = ({ name: tableName, columns, values }) => {
   return (
-    <table>
-      <thead>
-        <tr>
-          {columns.map(({ name, title }, ci) => {
-            return <th key={ci}>{title}</th>;
+    <TableWrapper>
+      <table className="table">
+        <thead>
+          <tr>
+            {columns.map(({ name, title }, ci) => {
+              return <th key={ci}>{title}</th>;
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {values.map((row, ri) => {
+            const keys = Object.keys(row);
+            return (
+              <tr key={ri}>
+                {keys.map((key, ki) => {
+                  const columnIndex = columns.findIndex(c => c.name === key);
+                  const Component = columns[columnIndex].Component;
+                  const Element = withTableValue(Component)({
+                    tableName,
+                    rowIndex: ri,
+                    propName: key,
+                  });
+                  return (
+                    <td key={ki}>
+                      <Element />
+                    </td>
+                  );
+                })}
+              </tr>
+            );
           })}
-        </tr>
-      </thead>
-      <tbody>
-        {values.map((row, ri) => {
-          const keys = Object.keys(row);
-          return (
-            <tr key={ri}>
-              {keys.map((key, ki) => {
-                const columnIndex = columns.findIndex(c => c.name === key);
-                const Component = columns[columnIndex].Component;
-                const Element = withTableValue(Component)({
-                  tableName,
-                  rowIndex: ri,
-                  propName: key,
-                });
-                return (
-                  <td key={ki}>
-                    <Element />
-                  </td>
-                );
-              })}
-            </tr>
-          );
-        })}
-      </tbody>
-    </table>
+        </tbody>
+      </table>
+    </TableWrapper>
   );
 };
 

src/client/UIKit/colors.js

@@ -17,6 +17,8 @@ module.exports = {
   white: createColorProxy(
     {
       0: '#FFFFFF',
+      25: '#FAFAFA',
+      50: '#F0F0F0',
       100: '#EDEDED',
       200: '#DBDBDB',
       300: '#C8C8C8',