fix(table): initial responsive table work

Author: QuintonJason

docs/app/views/examples/components/table/_preview.html.erb

@@ -112,6 +112,78 @@ sample_table = {
 }
 %>
 
+<%= sage_component SageTable, {
+  caption: %(
+    Block cells can be used with anchor tags to link the entire cell, or <code>&lt;div&gt;</code> and <code>&lt;span&gt;</code> elements for content
+  ),
+  headers: [
+    "Name",
+    "Email",
+    "Revenue",
+    "Status"
+  ],
+  rows: [
+    [
+      %(
+        #{link_to "Frank Dux", "#", class: "sage-table-cell__link"}
+      ),
+      "fd@email.com",
+      "$275.43",
+      %(
+        #{sage_component(SageButton, {
+          value: "Icon only",
+          small: true,
+          style: "secondary",
+          subtle: true,
+          icon: {
+            style: "only",
+            name: "dot-menu-horizontal"
+          },
+          small: true
+        })})
+    ],
+    [
+      %(
+        #{link_to "Stinkmeaner", "#", class: "sage-table-cell__link"}
+      ),
+      "st@email.com",
+      "$775.43",
+      %(
+        #{sage_component(SageButton, {
+          value: "Icon only",
+          small: true,
+          style: "secondary",
+          subtle: true,
+          icon: {
+            style: "only",
+            name: "dot-menu-horizontal"
+          },
+          small: true
+        })})
+    ],
+    [
+      %(
+        #{link_to "Huey Freeman", "#", class: "sage-table-cell__link"}
+      ),
+      "hf@email.com",
+      "$1275.43",
+      %(
+        #{sage_component(SageButton, {
+          value: "Icon only",
+          small: true,
+          style: "secondary",
+          subtle: true,
+          icon: {
+            style: "only",
+            name: "dot-menu-horizontal"
+          },
+          small: true
+        })})
+    ],
+  ]
+} %>
+
+
 <h3 class="t-sage-heading-6">Responsive table with borders</h3>
 <%= sage_component SageTable, {
   has_borders: true,

docs/lib/sage_rails/app/views/sage_components/_sage_table.html.erb

@@ -17,6 +17,7 @@ is_responsive = component.responsive.present? ? component.responsive : true
       <%= "sage-table--selectable" if component.selectable %>
       <%= "sage-table--condensed" if component.condensed %>
     "
+    data-js-table
     <%= component.generated_html_attributes.html_safe %>
   >
     <% if component.caption.present? %>

packages/sage-assets/lib/stylesheets/components/_table.scss

@@ -18,10 +18,10 @@ $-table-caption-font-size: "%t-sage-body-small";
 $-table-caption-alignment: center;
 $-table-cell-font-color: sage-color(charcoal, 200);
 $-table-cell-font-color-strong: sage-color(charcoal, 400);
-$-table-cell-type-spec: "%t-sage-body-small-med";
-$-table-cell-type-spec-strong: "%t-sage-body-small-semi";
+$-table-cell-type-spec: "%t-sage-body-small";
+$-table-cell-type-spec-strong: "%t-sage-body-small-med";
 $-table-heading-font-color: sage-color(charcoal, 500);
-$-table-heading-type-spec: "%t-sage-body-small-semi";
+$-table-heading-type-spec: "%t-sage-body-small-med";
 
 // Overflow gradient
 $-table-overflow-indicator-width: sage-spacing(sm);
@@ -311,7 +311,9 @@ $-table-avatar-width: rem(32px);
 }
 
 .sage-table-cell__link {
-  color: $-table-cell-font-color;
+  @extend #{$-table-cell-type-spec-strong};
+
+  color: $-table-cell-font-color-strong;
   text-decoration: none;
 
   &:focus,
@@ -344,3 +346,100 @@ $-table-avatar-width: rem(32px);
     margin-left: 0.5em;
   }
 }
+
+@media screen and (max-width: sage-breakpoint(sm-max)) {
+  .sage-table {
+    thead {
+      tr,
+      &::after {
+        display: none;
+      }
+    }
+
+    tbody tr {
+      position: relative;
+
+      td:last-of-type {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+      }
+    }
+
+    td {
+      padding: rem(6px) 0;
+    }
+  }
+
+  table,
+  thead,
+  tbody,
+  th,
+  td,
+  tr,
+  caption {
+    display: block;
+  }
+
+  tr {
+    padding: rem(16px) rem(18px);
+    border: sage-border(default);
+    border-radius: sage-border(radius);
+
+    & + & {
+      margin-top: sage-spacing(sm);
+    }
+  }
+
+  td {
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-gap: 1em 0.5em;
+    justify-content: space-between;
+  }
+
+  td:nth-of-type(4)::before,
+  td:nth-of-type(5)::before {
+    text-align: left;
+  }
+
+  // TODO UXD - QUINTON - find scalable solution
+  td:nth-child(1)::before {
+    content: "Name: ";
+    display: none;
+  }
+
+  td:nth-child(2)::before {
+    content: "Email: ";
+  }
+
+  td:nth-child(3)::before {
+    content: "Labels: ";
+  }
+
+  td:nth-child(4)::before {
+    content: "Status: ";
+  }
+
+  td:nth-child(5)::before {
+    content: "Status: ";
+  }
+
+  td:nth-child(6)::before {
+    content: "Status: ";
+  }
+
+  td:nth-child(7)::before {
+    content: "Status: ";
+  }
+
+  td:last-child::before {
+    display: none;
+  }
+}
+
+@media screen and (min-width: sage-breakpoint(md-min)) {
+  .sage-table td::before {
+    display: none;
+  }
+}

packages/sage-system/lib/table.js

@@ -1,4 +1,10 @@
 Sage.table = (function() {
+  // ==================================================
+  // Variables
+  // ==================================================
+
+  // const SELECTOR_TABLE = "[data-js-table]";
+  const SELECTOR_TABLE = ".sage-table";
 
   // ==================================================
   // Functions
@@ -24,6 +30,32 @@ Sage.table = (function() {
     });
   }
 
+  function ResponsiveCellHeaders(elem) {
+    var THarray = [];
+    var table = document.querySelector(SELECTOR_TABLE);
+    var ths = table.getElementsByTagName("th");
+    for (var i = 0; i < ths.length; i++) {
+      var headingText = ths[i].innerHTML;
+      THarray.push(headingText);
+    }
+    var styleElm = document.createElement("style"),
+      styleSheet;
+    document.head.appendChild(styleElm);
+    styleSheet = styleElm.sheet;
+    for (var i = 0; i < THarray.length; i++) {
+      styleSheet.insertRule(
+        "" +
+          elem +
+          " td:nth-child(" +
+          (i + 1) +
+          ')::before {content:"' +
+          THarray[i] +
+          ': ";}',
+        styleSheet.cssRules.length
+      );
+    }
+  }
+
 
   // reset classes on elements
   function removeActiveStyle(arr, className) {
@@ -37,6 +69,9 @@ Sage.table = (function() {
     if (document.querySelector('.sage-table--sortable') !== null) {
       sortEvents();
     }
+    if (document.querySelector('.sage-table--sortable') !== null) {
+      // ResponsiveCellHeaders(SELECTOR_TABLE);
+    }
   }