From 4c41f944ed011391101068d782ce9af31c1e1d07 Mon Sep 17 00:00:00 2001
From: Federico Ercoles <federico.ercoles@buildo.io>
Date: Thu, 14 Sep 2023 16:59:26 +0200
Subject: [PATCH] Add story for Table with grouped headers

---
 .../stories/Components/Table.stories.tsx      | 88 ++++++++++++++++++-
 1 file changed, 87 insertions(+), 1 deletion(-)

diff --git a/packages/bento-design-system/stories/Components/Table.stories.tsx b/packages/bento-design-system/stories/Components/Table.stories.tsx
index 692a94ed0..5eafc02ec 100644
--- a/packages/bento-design-system/stories/Components/Table.stories.tsx
+++ b/packages/bento-design-system/stories/Components/Table.stories.tsx
@@ -78,6 +78,84 @@ const exampleColumns = [
   }),
 ] as const;
 
+const exampleGroupedColumns = [
+  {
+    Header: "Group 1",
+    sticky: "left" as const,
+    hint: "This is a hint",
+    columns: [
+      tableColumn.button({
+        headerLabel: "Button",
+        accessor: "button",
+        sticky: "left",
+        disableSortBy: true,
+        align: "center",
+      }),
+      tableColumn.text({
+        headerLabel: "Name",
+        accessor: "name",
+      }),
+      tableColumn.text({
+        headerLabel: "Extended address",
+        accessor: "address",
+        width: { custom: 200 },
+      }),
+      tableColumn.textWithIcon({
+        headerLabel: "Country",
+        accessor: "country",
+        iconPosition: "right",
+        hint: "This is a hint",
+      }),
+    ],
+  },
+  {
+    Header: "Group 2",
+    columns: [
+      tableColumn.number({
+        headerLabel: "Applications",
+        accessor: "applications",
+        valueFormatter: (value) => Intl.NumberFormat("en").format(value),
+        align: "right",
+        hint: { onPress: action("hint") },
+      }),
+      tableColumn.numberWithIcon({
+        headerLabel: "Value",
+        accessor: "value",
+        valueFormatter: (value) => Intl.NumberFormat("en").format(value),
+        align: "right",
+      }),
+      tableColumn.label({
+        headerLabel: "Type",
+        accessor: "type",
+      }),
+      tableColumn.link({
+        headerLabel: "Website",
+        accessor: "website",
+      }),
+    ],
+  },
+  {
+    Header: "Group 3",
+    columns: [
+      tableColumn.icon({
+        headerLabel: "Alerts",
+        accessor: "alerts",
+      }),
+      tableColumn.chip({
+        headerLabel: "Status",
+        accessor: "status",
+        align: "center",
+      }),
+      tableColumn.iconButton({
+        headerLabel: "Actions",
+        accessor: "deleteAction",
+        align: "center",
+        disableSortBy: true,
+      }),
+    ],
+  },
+];
+
 const customizedColumns = [
   tableColumn.button({
     headerLabel: "Button",
@@ -290,7 +368,7 @@ const meta = {
     data: exampleData,
   },
   parameters: { actions: { argTypesRegex: "" } },
-} satisfies Meta<TableProps<typeof exampleColumns>>;
+} satisfies Meta<TableProps<typeof exampleColumns, typeof exampleGroupedColumns>>;
 
 export default meta;
 
@@ -473,3 +551,11 @@ export const InteractiveRow = {
     onRowPress: action("onRowPress"),
   },
 } satisfies Story;
+
+export const GroupedHeaders = {
+  args: {
+    columns: exampleGroupedColumns,
+    stickyHeaders: true,
+    height: { custom: 320 },
+  },
+} satisfies Story;