Add story for Table with grouped headers

buildo · Sep 14, 2023 · f1945bf · f1945bf
1 parent 11a2f8b
commit f1945bf
Showing 1 changed file with 86 additions and 1 deletion.
diff --git a/packages/bento-design-system/stories/Components/Table.stories.tsx b/packages/bento-design-system/stories/Components/Table.stories.tsx
@@ -78,6 +78,83 @@ const exampleColumns = [
   }),
 ] as const;
 
+const exampleGroupedColumns = [
+  {
+    Header: "Group 1",
+    sticky: "left" as const,
+    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 +367,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 +550,11 @@ export const InteractiveRow = {
     onRowPress: action("onRowPress"),
   },
 } satisfies Story;
+
+export const GroupedHeaders = {
+  args: {
+    columns: exampleGroupedColumns,
+    stickyHeaders: true,
+    height: { custom: 320 },
+  },
+} satisfies Story;