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