From 2f90dc7cb6470fea486d19dce5de9714a0b9c079 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Wed, 6 Sep 2023 08:18:06 +0000
Subject: [PATCH] fix: DataTable storybook file is not rendering (#10984)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
---
 .../__storybook__/datatable.stories.mdx       | 54 +++++++++++++++----
 1 file changed, 44 insertions(+), 10 deletions(-)

diff --git a/packages/ui/components/data-table/__storybook__/datatable.stories.mdx b/packages/ui/components/data-table/__storybook__/datatable.stories.mdx
index 95807bd93a..c491d15f23 100644
--- a/packages/ui/components/data-table/__storybook__/datatable.stories.mdx
+++ b/packages/ui/components/data-table/__storybook__/datatable.stories.mdx
@@ -14,20 +14,54 @@ import { DataTable } from "../";
 import { columns, filterableItems } from "./columns";
 import { dataTableDemousers, dataTableSelectionActions } from "./data";
 
-<Meta title="UI/table/data-table" component={DataTable} />
+<Meta title="UI/table/DataTable" component={DataTable} />
 
-<Title title="Data-table" suffix="Brief" subtitle="Version 2.0 — Last Update: 06 Jan 2023" />
+<Title title="DataTable" suffix="Brief" subtitle="Version 3.0 — Last Update: 28 Aug 2023" />
 
 ## Definition
 
+The `DataTable` component facilitates tabular data display with configurable columns, virtual scrolling, filtering, and interactive features for seamless dynamic table creation.
+
+## Structure
+
+The `DataTable` setup for tabular data, with columns, virtual scroll, sticky headers, and interactive features like filtering and row selection.
+
+<CustomArgsTable of={DataTable} />
+
+## Dialog Story
+
 <Canvas>
-  <Story name="Datatable">
-    <DataTable
-      columns={columns}
-      data={dataTableDemousers}
-      filterableItems={filterableItems}
-      searchKey="username"
-      selectionOptions={dataTableSelectionActions}
-    />
+  <Story
+    name="DataTable"
+    args={{
+      columns: columns,
+      data: dataTableDemousers,
+      isLoading: false,
+      searchKey: "username",
+      filterableItems: filterableItems,
+      tableContainerRef: { current: null },
+      selectionOptions: dataTableSelectionActions,
+    }}
+    argTypes={{
+      tableContainerRef: { table: { disable: true } },
+      searchKey: {
+        control: {
+          type: "select",
+          options: ["username", "email"],
+        },
+      },
+      selectionOptions: { control: { type: "object" } },
+      onScroll: { table: { disable: true } },
+      tableOverlay: { table: { disable: true } },
+      CTA: { table: { disable: true } },
+      tableCTA: { table: { disable: true } },
+    }}>
+    {(args) => (
+      <VariantsTable titles={["Default"]} columnMinWidth={1000}>
+        <VariantRow>
+          <DataTable {...args} />
+        </VariantRow>
+      </VariantsTable>
+    )}
   </Story>
 </Canvas>