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:
Header row
, + 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 893ffb6..ba12a28 100644 --- a/src/Table/index.tsx +++ b/src/Table/index.tsx @@ -20,6 +20,7 @@ export default function Table({ columnWidths = [], columnAlignments = [], fixHeader = false, + hasScrollX, onRowClick, }: TableProps): React.ReactElement { // THEME @@ -73,7 +74,7 @@ export default function Table({
{headingContent} -
+
{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 fe63108..1d4b7a7 100644 --- a/src/Table/storyData.ts +++ b/src/Table/storyData.ts @@ -1,4 +1,4 @@ -const storyData = [ +export const storyData = [ { id: 1, Name: { @@ -131,4 +131,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 649dbe9..b9db834 100644 --- a/src/Table/style/Default.module.scss +++ b/src/Table/style/Default.module.scss @@ -165,6 +165,11 @@ $radius: var(--border-radius-2); } } } + + .horizontalScroll { + display: table-cell; + overflow-x: auto; + } } .emptyMsg { diff --git a/src/Table/types/index.ts b/src/Table/types/index.ts index 0e3ee43..cf012ed 100644 --- a/src/Table/types/index.ts +++ b/src/Table/types/index.ts @@ -32,6 +32,7 @@ export type TableProps = { columnWidths?: string[]; columnAlignments?: ("left" | "center" | "right" | "")[]; fixHeader?: boolean; + hasScrollX?: boolean; onRowClick?: (row: TableDatum) => void; };