Add dynamic table!

jfeng43 · Mar 24, 2019 · a248b57 · a248b57
1 parent 2cc3b3c
commit a248b57
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 11 deletions.
diff --git a/components/cashFlowTable.js b/components/cashFlowTable.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import '../static/styles/main.scss'
 
 // TODO - pull from API
 const data = [
@@ -54,21 +55,21 @@ const CashFlowTable = (props) => (
         <h2 className='cfTable--title'>
             Cash Flow 
         </h2>
-        <div class="cfTable">
-            <div>
-                <span><strong>type</strong></span>
-                <span><strong>donor/recipient</strong></span>
-                <span><strong>amount</strong></span>
-                <span><strong>date</strong></span>
+        <div className="cfTable--table">
+            <div className="cfTable--row">
+                <span className="cfTable--row--span"><strong>type</strong></span>
+                <span className="cfTable--row--span"><strong>donor/recipient</strong></span>
+                <span className="cfTable--row--span"><strong>amount</strong></span>
+                <span className="cfTable--row--span"><strong>date</strong></span>
             </div>
 
             {
                 data.map(({key, type, name, amount, date}) => (
-                    <div>
-                        <span>{type}</span>
-                        <span>{name}</span>
-                        <span>{amount}</span>
-                        <span>{date}</span>
+                    <div className="cfTable--row">
+                        <span className="cfTable--row--span">{type}</span>
+                        <span className="cfTable--row--span">{name}</span>
+                        <span className="cfTable--row--span">{amount}</span>
+                        <span className="cfTable--row--span">{date}</span>
                     </div>
                 ))
             }

diff --git a/static/styles/main.scss b/static/styles/main.scss
@@ -18,6 +18,7 @@
 @import 'partials/_swiper.scss';
 @import 'partials/_images.scss';
 @import 'partials/_account.scss';
+@import 'partials/_cfTable.scss';
 
 :global(body) {
   margin: 0;

diff --git a/static/styles/partials/_cfTable.scss b/static/styles/partials/_cfTable.scss
@@ -0,0 +1,25 @@
+.cfTable {
+
+  &--container {
+    margin: 100px;
+  }
+
+  &--title {
+    margin-bottom: 30px;
+  }
+
+  &--row {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+
+    &--span {
+      padding: 8px 4px;
+      border-right: 1px solid black;
+      border-left: 1px solid black;
+    }
+  }
+}
+
+