making data table responsive

ui/src/components/table-data-table/table-head.js

@@ -2,27 +2,40 @@ const React = require('react');
 const Styled = require('styled-components');
 
 const fns = require('../../shared/functions');
+const constants = require('../../shared/constants');
 
 const {
   remcalc
 } = fns;
 
+
+const {
+  breakpoints
+} = constants;
+
 const {
   default: styled
 } = Styled;
 
 const StyledTableHeadItem = styled.td`
-  ${props => `width: ${props.width}`}
   border-bottom: none;
   padding: ${remcalc(24)};
+  
+  ${breakpoints.medium`
+    ${props => `width: ${props.mdWidth}`}
+  `}
 `;
 
+
 const StyledTableHead = styled.thead`
   background: #fafafa;
   box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
   border: solid ${remcalc(1)} #d8d8d8;
+  
+  ${breakpoints.smallOnly`
+    display: none;
+  `}
 `;
-
 const TableHeader = ({
   columns
 }) => {
@@ -34,7 +47,7 @@ const TableHeader = ({
     return (
       <StyledTableHeadItem
         key={i}
-        width={column.width || fallBackWidth}
+        mdWidth={column.width || fallBackWidth}
       >
         {column.title}
       </StyledTableHeadItem>

ui/src/components/table-data-table/table-row.js

@@ -2,6 +2,7 @@ const React = require('react');
 const Styled = require('styled-components');
 
 const fns = require('../../shared/functions');
+const constants = require('../../shared/constants');
 
 const {
   remcalc
@@ -11,12 +12,24 @@ const {
   default: styled
 } = Styled;
 
+const {
+  breakpoints
+} = constants;
+
 const StyledRow = styled.tr`
   border: solid ${remcalc(1)} #d8d8d8;
+  
+  ${breakpoints.smallOnly`
+    display: block;
+  `}
 `;
 
 const StyledTableItem = styled.td`
   padding: ${remcalc(24)};
+  
+  ${breakpoints.smallOnly`
+    display: block;
+  `}
 `;
 
 const Row = ({

ui/src/shared/constants/breakpoints.js

@@ -26,19 +26,19 @@ const screens = {
   'smallOnly': `${screen} and (max-width: ${small.upper})`,
   'small': `${screen} and (min-width: ${small.upper}})`,
   // >= 1024px
-  'medium-only': `${screen} and (min-width: ${medium.lower}) 
+  'mediumOnly': `${screen} and (min-width: ${medium.lower}) 
                   and (max-width: ${medium.upper})`,
-  'medium-down': `${screen} and (max-width: ${medium.upper})`,
+  'mediumDown': `${screen} and (max-width: ${medium.upper})`,
   'medium': `${screen} and (min-width: ${medium.lower})`,
   // >= 1200px
-  'large-only': `${screen} and (min-width: ${large.lower}) 
+  'largeOnly': `${screen} and (min-width: ${large.lower}) 
                  and (max-width: ${large.upper})`,
-  'larg-down': `${screen} and (max-width: ${large.upper})`,
+  'largeDown': `${screen} and (max-width: ${large.upper})`,
   'large': `${screen} and (min-width: 75rem)`,
 
   'xlarge': `${screen} and (min-width: ${xlarge.lower}) 
              and (max-width: ${xlarge.upper})`,
-  'xlarge-up': `${screen} and (min-width: ${xlarge.lower})`,
+  'xlargeUp': `${screen} and (min-width: ${xlarge.lower})`,
 };
 
 const breakpoints = Object.keys(screens).reduce((acc, label) => {