feat: fix datatable storybook

libs/ui/src/organisms/datatable/datatable.stories.tsx

@@ -15,27 +15,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    data: [
-      {
-        id: 1,
-        name: 'John Doe',
-        email: 'john@example.com',
-        phone: '123-456-7890',
-        address: '123 Main St',
-      },
-      {
-        id: 2,
-        name: 'Jane Smith',
-        email: 'jane@example.com',
-        phone: '987-654-3210',
-        address: '456 Elm St',
-      },
-    ],
-    onEdit: (id: number) => console.log('Edit item with id:', id),
-  },
-};
-
-Default.args = {
     data: [
       {
         id: 1,
@@ -59,5 +38,86 @@ Default.args = {
         address: '789 Cedar St',
       },
     ],
-  onEdit: (id: number) => console.log('Edit item with id:', id),
+    headers: [
+      { label: 'ID', key: 'id' },
+      { label: 'Name', key: 'name' },
+      { label: 'Email', key: 'email' },
+      { label: 'Phone', key: 'phone' },
+      { label: 'Address', key: 'address' },
+    ],
+    onRowClick: (item) => console.log('Row clicked:', item),
+  },
+};
+
+export const WithCustomRender: Story = {
+  args: {
+    data: [
+      {
+        id: 1,
+        name: 'John Doe',
+        email: 'john@example.com',
+        phone: '123-456-7890',
+        address: '123 Main St',
+        status: 'active',
+      },
+      {
+        id: 2,
+        name: 'Jane Smith',
+        email: 'jane@example.com',
+        phone: '987-654-3210',
+        address: '456 Elm St',
+        status: 'inactive',
+      },
+      {
+        id: 3,
+        name: 'John Smith',
+        email: 'johns@example.com',
+        phone: '456-789-1230',
+        address: '789 Cedar St',
+        status: 'active',
+      },
+    ],
+    headers: [
+      { label: 'ID', key: 'id' },
+      { label: 'Name', key: 'name' },
+      { label: 'Email', key: 'email' },
+      { label: 'Phone', key: 'phone' },
+      {
+        label: 'Status',
+        render: (item) => (
+          <span
+            className={`px-2 py-1 rounded-md text-xs ${
+              item.status === 'active'
+                ? 'bg-green-100 text-green-800'
+                : 'bg-red-100 text-red-800'
+            }`}
+          >
+            {item.status}
+          </span>
+        ),
+      },
+      {
+        label: 'Actions',
+        render: (item) => (
+          <button
+            className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
+            onClick={(e) => {
+              e.stopPropagation();
+              console.log('Edit item with id:', item.id);
+            }}
+          >
+            Edit
+          </button>
+        ),
+      },
+    ],
+    onRowClick: (item) => console.log('Row clicked:', item),
+  },
+};
+
+export const WithoutCheckbox: Story = {
+  args: {
+    ...Default.args,
+    showCheckbox: false,
+  },
 };

libs/ui/src/organisms/datatable/datatable.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 interface DataTableProps<T> {
   data: T[];