From ea87dbca691d902b056c4057150cd53c49c52528 Mon Sep 17 00:00:00 2001
From: Anand Bhupathi Medarametla <s223684301@deakin.edu.au>
Date: Fri, 6 Sep 2024 15:41:21 +1000
Subject: [PATCH] Table component updated

---
 src/components/Table/Table.stories.ts | 15 +++++++++++-
 src/components/Table/Table.tsx        | 33 +++++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/Table.stories.ts b/src/components/Table/Table.stories.ts
index fa0346f..3224a25 100644
--- a/src/components/Table/Table.stories.ts
+++ b/src/components/Table/Table.stories.ts
@@ -9,8 +9,21 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const defaultProps = {
+const columns = [
+	{ key: 'name', label: 'name' },
+	{ key: 'age', label: 'age' },
+	{ key: 'address', label: 'address' },
+  ];
+  
+  const data = [
+	{ name: 'Anand Medarametla', age: 24, address: '123 Main St' },
+	{ name: 'John', age: 25, address: '456 Elm St' },
+  ];
+
 
+const defaultProps = {
+	columns,
+	data
 };
 
 const disableControls = {
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index cce917f..aa611bb 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,10 +1,39 @@
 import { FC, PropsWithChildren } from 'react';
 import { StyledTable } from './Table.style';
+interface TableColumn {
+	key: string;
+	label: string;
+	render?: (data: any) => React.ReactNode;
+  }
+  
+  interface TableProps extends PropsWithChildren {
+	columns: TableColumn[];
+	data: any[];
+  }
 
-export const Table: FC<PropsWithChildren> = ({ children }) => {
+export const Table: FC<TableProps> = ({ columns,data,children}) => {
 	return (
 		<StyledTable data-testid="Table">
-			{children}
+			<thead>
+        <tr>
+          {columns.map((col) => (
+            <th key={col.key}>{col.label}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((row, rowIndex) => (
+          <tr key={rowIndex}>
+            {columns.map((col) => (
+              <td key={col.key}>
+                {col.render ? col.render(row[col.key]) : row[col.key]}
+              </td>
+            ))}
+          </tr>
+        ))}
+        {children}
+      </tbody>
 		</StyledTable>
 	);
 };
+