Table component updated

src/components/Table/Table.stories.ts

@@ -9,8 +9,21 @@
 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 = {

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>
 	);
 };
+