[#23] - [TableFlow] Add horizontal scrolling to "Select Header" preview table

	resolves #23

Author: civan

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);

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 };

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",
+    },
+];

src/Table/style/Default.module.scss

@@ -165,6 +165,11 @@ $radius: var(--border-radius-2);
             }
         }
     }
+
+    .tVerticalScroll {
+        display: table-cell;
+        overflow-x: auto;
+    }
 }
 
 .emptyMsg {

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;
 };