From 68d8139e49181d800878ab078121e0d9d577b825 Mon Sep 17 00:00:00 2001
From: Carlos Mercado <carlos.mercado.pc@gmail.com>
Date: Mon, 28 Aug 2023 21:59:08 -0400
Subject: [PATCH 1/2] [#23] - [TableFlow] Add horizontal scrolling to "Select
 Header" preview table

	resolves #23
---
 src/Table/Table.stories.tsx         | 13 +++++++++-
 src/Table/index.tsx                 |  3 ++-
 src/Table/storyData.ts              | 37 +++++++++++++++++++++++++++--
 src/Table/style/Default.module.scss |  5 ++++
 src/Table/types/index.ts            |  1 +
 5 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/src/Table/Table.stories.tsx b/src/Table/Table.stories.tsx
index 396234c..2fa90dd 100644
--- a/src/Table/Table.stories.tsx
+++ b/src/Table/Table.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import TableComponent from ".";
 import { TableProps } from "./types";
-import storyData from "./storyData";
+import { storyData, storyDataTwo } from "./storyData";
 
 export default {
     title: "User Interface/Table",
@@ -24,4 +24,15 @@ Table.args = {
     hideColumns: ["id"],
     fixHeader: true,
 };
+
+export const TableVScroll = Template.bind({});
+TableVScroll.args = {
+    data: storyDataTwo,
+    highlightColumns: ["Name"],
+    hideColumns: ["id"],
+    fixHeader: true,
+    heading: <div style={{ textAlign: "center" }}>Header row</div>,
+    hasScrollX: true,
+};
+
 Table.args.onRowClick = (row: any) => console.log("Row clicked", row);
diff --git a/src/Table/index.tsx b/src/Table/index.tsx
index cabf08a..dde9df1 100644
--- a/src/Table/index.tsx
+++ b/src/Table/index.tsx
@@ -18,6 +18,7 @@ export default function Table({
     columnWidths = [],
     columnAlignments = [],
     fixHeader = false,
+    hasScrollX,
     onRowClick,
 }: TableProps): React.ReactElement {
     // THEME
@@ -58,7 +59,7 @@ export default function Table({
             <div className={tableStyle} role="table">
                 {headingContent}
 
-                <div className={style.tbody} role="rowgroup">
+                <div className={classes([style.tbody, hasScrollX && style.tVerticalScroll])} role="rowgroup"> 
                     {data.map((d, i) => {
                         const key = keyAsId && d?.[keyAsId] ? d[keyAsId] : i;
                         const props = { datum: d, onClick: onRowClick };
diff --git a/src/Table/storyData.ts b/src/Table/storyData.ts
index 475c4ba..c3c58b9 100644
--- a/src/Table/storyData.ts
+++ b/src/Table/storyData.ts
@@ -1,4 +1,4 @@
-const storyData = [
+export const storyData = [
     {
         id: 1,
         Name: "John Doe",
@@ -127,4 +127,37 @@ const storyData = [
     },
 ];
 
-export default storyData;
+export const storyDataTwo = [
+    {
+        id: 1,
+        firstName: "First Name First Name",
+        lastName: "Last name Last name",
+        phone: "(555) 555-5555",
+        homePhone: "(+9) 123-12345",
+        postalCode: "12345 own",
+        email: "test@example.com",
+        secondEmail: "testNumberTwo@example.com",
+        address: "123 Main St",
+        city: "Des Moines",
+        country: "Des mones",
+        State: "IA 1234",
+        zipCode: "12355",
+        owner: "Owner Owner",
+    },
+    {
+        id: 1,
+        firstName: "First Name First Name",
+        lastName: "Last name Last name",
+        phone: "(555) 555-5555",
+        homePhone: "(+9) 123-12345",
+        postalCode: "12345 own",
+        email: "test@example.com",
+        secondEmail: "testNumerTwo@example.com",
+        address: "123 Main St",
+        city: "Des Moines",
+        country: "Des mones",
+        State: "IA 1234",
+        zipCode: "12355",
+        owner: "Owner Owner",
+    },
+];
diff --git a/src/Table/style/Default.module.scss b/src/Table/style/Default.module.scss
index 4fcefc3..631acbf 100644
--- a/src/Table/style/Default.module.scss
+++ b/src/Table/style/Default.module.scss
@@ -165,6 +165,11 @@ $radius: var(--border-radius-2);
             }
         }
     }
+
+    .tVerticalScroll {
+        display: table-cell;
+        overflow-x: auto;
+    }
 }
 
 .emptyMsg {
diff --git a/src/Table/types/index.ts b/src/Table/types/index.ts
index 0a177cd..954abfa 100644
--- a/src/Table/types/index.ts
+++ b/src/Table/types/index.ts
@@ -31,6 +31,7 @@ export type TableProps = {
     columnWidths?: string[];
     columnAlignments?: ("left" | "center" | "right" | "")[];
     fixHeader?: boolean;
+    hasScrollX?: boolean;
     onRowClick?: (row: TableDatum) => void;
 };
 

From cc8fd492cc2b0cad947e9f5e16d8463ea4015f57 Mon Sep 17 00:00:00 2001
From: Carlos Mercado <carlos.mercado.pc@gmail.com>
Date: Tue, 5 Sep 2023 16:07:00 -0500
Subject: [PATCH 2/2] Renamed vertical to horizontal

---
 src/Table/index.tsx                 | 2 +-
 src/Table/style/Default.module.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Table/index.tsx b/src/Table/index.tsx
index 60154ec..ba12a28 100644
--- a/src/Table/index.tsx
+++ b/src/Table/index.tsx
@@ -74,7 +74,7 @@ export default function Table({
             <div className={tableStyle} role="table">
                 {headingContent}
 
-                <div className={classes([style.tbody, hasScrollX && style.tVerticalScroll])} role="rowgroup"> 
+                <div className={classes([style.tbody, hasScrollX && style.horizontalScroll])} role="rowgroup">
                     {data.map((d, i) => {
                         const key = keyAsId && d?.[keyAsId] ? d[keyAsId] : i;
                         const props = { datum: d, onClick: onRowClick };
diff --git a/src/Table/style/Default.module.scss b/src/Table/style/Default.module.scss
index 5351b15..b9db834 100644
--- a/src/Table/style/Default.module.scss
+++ b/src/Table/style/Default.module.scss
@@ -166,7 +166,7 @@ $radius: var(--border-radius-2);
     }
   }
 
-    .tVerticalScroll {
+    .horizontalScroll {
         display: table-cell;
         overflow-x: auto;
     }