refactor(Table):add responsive mobile table story and styles

eea · May 4, 2022 · aed69e6 · aed69e6
1 parent fb7c03e
commit aed69e6
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 0 deletions.
diff --git a/src/ui/Table/Table.stories.js b/src/ui/Table/Table.stories.js
@@ -323,3 +323,65 @@ Sortable.args = {
     { col1: 'Cell K', col2: 'Cell L', col3: 'Cell M' },
   ],
 };
+
+//*** Responsive Table ***//
+
+function ResponsiveTable({ headers, tableData }) {
+  return (
+    <Table className="responsive">
+      <Table.Header>
+        <Table.Row textAlign="center">
+          {headers.map((header) => (
+            <Table.HeaderCell key={header.key} textAlign="center">
+              {header.name}
+            </Table.HeaderCell>
+          ))}
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>
+        {tableData.map(({ col1, col2, col3 }, rowIndex) => (
+          <Table.Row key={rowIndex}>
+            <Table.Cell data-label={headers[0].name}>{col1}</Table.Cell>
+            <Table.Cell data-label={headers[1].name}>{col2}</Table.Cell>
+            <Table.Cell data-label={headers[2].name}>{col3}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  );
+}
+
+export const Responsive = (args) => (
+  <ResponsiveTable {...args}></ResponsiveTable>
+);
+
+Responsive.args = {
+  headers: [
+    { name: 'Header 1', key: 'col1' },
+    { name: 'Header 2', key: 'col2' },
+    { name: 'Header 3', key: 'col3' },
+  ],
+  tableData: [
+    { col1: 'Cell 1', col2: 'Cell 2', col3: 'Cell 3' },
+    { col1: 'Cell 4', col2: 'Cell 5', col3: 'Cell 6' },
+    { col1: 'Cell 7', col2: 'Cell 8', col3: 'Cell 9' },
+    { col1: 'Cell 10', col2: 'Cell 11', col3: 'Cell 12' },
+  ],
+};
+
+Responsive.parameters = {
+  controls: {
+    exclude: [
+      'singleLine',
+      'celled',
+      'fixed',
+      'striped',
+      'collapsing',
+      'compact',
+      'textAlign',
+      'verticalAlign',
+    ],
+  },
+  hideNoControlsWarning: true,
+};
diff --git a/theme/themes/eea/collections/table.overrides b/theme/themes/eea/collections/table.overrides
@@ -27,4 +27,44 @@
     text-transform: @headerTextTransform;
     vertical-align: @headerVerticalAlign;
   }
+
+}
+
+@media only screen and (max-width: @tabletBreakpoint) {
+
+  .ui.table.responsive {
+
+    &:not(.unstackable) td:first-child {
+      font-weight: @responsiveMobileCellHeaderFontWeight;
+    }
+
+    thead {
+      border: none;
+      clip: @responsiveMobileCellHeaderClip;
+      height: @responsiveMobileHeaderHeight;
+      margin: @responsiveMobileHeaderMargin;
+      overflow: hidden;
+      padding: @responsiveMobileHeaderPadding;
+      position: absolute;
+      width: @responsiveMobileHeaderWidth;
+    }
+
+    td {
+      display: block;
+      text-align: @responsiveMobileCellTextAlign;
+
+      &::before {
+        /*
+        * aria-label has no advantage, it won't be read inside a table
+        content: attr(aria-label);
+        */
+        content: attr(data-label);
+        float: @responsiveMobileCellDataLabelFloat;
+        font-weight: @responsiveMobileCellDataLabelFontWeigth;
+      }
+
+    }
+
+  }
+
 }
diff --git a/theme/themes/eea/collections/table.variables b/theme/themes/eea/collections/table.variables
@@ -247,3 +247,16 @@
 @small: 0.9em;
 @medium: 1em;
 @large: 1.1em;
+
+/* Responsive Table */
+@responsiveMobileCellHeaderFontWeight: @normal;
+@responsiveMobileCellHeaderClip: rect(0 0 0 0);
+@responsiveMobileHeaderHeight: 1px;
+@responsiveMobileHeaderMargin: -1px;
+@responsiveMobileHeaderPadding: 0;
+@responsiveMobileHeaderWidth: 0;
+
+@responsiveMobileCellTextAlign: right;
+@responsiveMobileCellDataLabelFloat: left;
+@responsiveMobileCellDataLabelFontWeigth: @bold;
+