fix(Table): mobile version + scroll issue (#869)

tillersystems · Nov 7, 2019 · 579860d · 579860d
1 parent 3e6a4db
commit 579860d
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 16 deletions.
diff --git a/src/Table/elements.js b/src/Table/elements.js
@@ -20,9 +20,23 @@ const borderRight = height => css`
 
 // Table
 export const TableElement = styled.table`
-  width: 100%;
+  min-width: 100%;
   border-spacing: 0;
   position: relative;
+  ${breakpoint('xs', 'sm')`
+    ${({ colsDef }) =>
+      colsDef &&
+      css`
+        width: ${Math.max(
+          100,
+          colsDef.reduce(
+            (calculatedWidth, col) => calculatedWidth + (col.isRowHeader ? 67 : 33),
+            0,
+          ),
+        )}%;
+        table-layout: fixed;
+      `};
+  `};
 `;
 
 export const Row = styled.tr`
@@ -67,14 +81,6 @@ export const TableHeaderCell = styled.th`
   white-space: nowrap;
   text-align: ${({ align }) => align || 'left'};
 
-  &:first-child {
-    padding-left: 2rem;
-    padding-right: 1.2rem;
-    z-index: 2;
-    left: 0;
-    ${({ isScrollable }) => isScrollable && borderRight('4.4rem')}
-  }
-
   &:last-child {
     padding-right: 2rem;
     padding-left: 1.2rem;
@@ -93,6 +99,29 @@ export const TableHeaderCell = styled.th`
     css`
       cursor: pointer;
     `}
+
+  ${({ isRowHeader }) =>
+    isRowHeader &&
+    css`
+      padding-left: 2rem;
+      padding-right: 1.2rem;
+      z-index: 2;
+      left: 0;
+      ${({ isScrollable }) => isScrollable && borderRight('4.4rem')}
+    `}
+
+
+  ${breakpoint('xs', 'sm')`
+    width: 33%;
+    overflow:hidden;
+    text-overflow: ellipsis;
+    
+    ${({ isRowHeader }) =>
+      isRowHeader &&
+      css`
+        width: 67%;
+      `}
+  `};
 `;
 
 export const HeaderLabel = styled.span`
@@ -125,6 +154,12 @@ export const Body = styled.tbody`
       `};
     box-sizing: border-box;
 
+    ${breakpoint('xs', 'sm')`
+      width: 33%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `};
+
     &:first-child {
       padding-left: 2rem;
     }
@@ -185,8 +220,10 @@ export const RowHeader = styled.th`
   max-width: 30rem;
   min-width: 20rem;
   ${breakpoint('xs', 'sm')`
-    max-width: 50vw;
+    width: 67%;
     min-width: 0;
+    max-width: none;
+    overflow:hidden;
   `};
   white-space: nowrap;
   box-sizing: border-box;
@@ -293,12 +330,14 @@ export const Footer = styled.tfoot`
 
 // Table Container
 export const Container = styled.div`
-  height: ${({ height }) => height};
+  height: ${({ containerHeight }) => containerHeight};
   ${({ isScrollable }) =>
     isScrollable &&
     css`
       overflow: scroll;
     `}
+
+  width: 100%;
   position: relative;
 `;
 
@@ -329,4 +368,5 @@ export const ShadowContainer = styled.div`
 // Shadow Container
 export const ShadowWrapped = styled.div`
   position: relative;
+  height: ${({ containerHeight }) => containerHeight};
 `;
diff --git a/src/Table/index.js b/src/Table/index.js
@@ -166,10 +166,11 @@ class Table extends PureComponent {
     return (
       <TableHeader>
         <Row>
-          {colsDef.map(({ title, isSortable, align }, columnIndex) => (
+          {colsDef.map(({ title, isSortable, align, isRowHeader }, columnIndex) => (
             <TableHeaderCell
               isScrollable={isScrollable}
               isSortable={isSortable}
+              isRowHeader={isRowHeader}
               scope="col"
               key={`${title}-${columnIndex}`}
               align={align}
@@ -378,18 +379,18 @@ class Table extends PureComponent {
    * @return {jsx}
    */
   render() {
-    const { dataTotal, height, isScrollable, width } = this.props;
+    const { dataTotal, height, isScrollable, width, colsDef } = this.props;
 
     return (
-      <ShadowWrapped>
+      <ShadowWrapped containerHeight={height}>
         {this.renderShadow()}
         <Container
           ref={this.containerRef}
           data-testid="table-container"
-          height={height}
+          containerHeight={height}
           isScrollable={isScrollable}
         >
-          <TableElement width={isScrollable ? 'initial' : width}>
+          <TableElement width={isScrollable ? 'initial' : width} colsDef={colsDef}>
             {this.renderHeader()}
             {this.renderBody()}
             {dataTotal && this.renderFooter()}