rendering table from data

i am going insane i love lists i love lists i love react i love lists i am oisdjghiuergihbenrjhloguehwirub

compass/app/admin/page.tsx

@@ -1,8 +1,28 @@
+"use client";
 import Table from "@/components/Table";
+import { useState } from "react";
+
+// TODO: Example data. Remove later.
+const headersExample = ["username", "email", "role", "password"];
+const dataExample = [
+  {id: 1, username: "example", email: "example@gmail.com", role: "role"},
+  {id: 3, username: "erhgoejnrgexample", email: "example@gmail.com", role: "role"},
+  {id: 2, username: "another one", email: "example@gmail.com", role: "role"},
+  {id: 4, username: "examgoiadnfgople", email: "example@gmail.com", role: "role"},
+  {id: 5, username: "edfhgiebroxample", email: "example@gmail.com", role: "role"},
+  {id: 6, username: "examlsdfkjg", email: "example@gmail.com", role: "role"},
+  {id: 7, username: "exkkkample", email: "example@gmail.com", role: "role"},
+]
 
 export default function Page() {
-    return (<>
+  const [data, setData] = useState({
-    <Table/>
+    headers: [...headersExample],
+    data: [...dataExample],
+  });
+
+  return (
+    <>
+      <Table headersData={data.headers} data={data.data} />
     </>)
-    
+
-}
+}

compass/components/Table.tsx

@@ -1,47 +1,45 @@
 import { Component } from "react"
 
+// interface TableHeader {
+//   title: string,
+//   type: string
+// }
+
+// interface TableRow {
+//   [key: string]: any,
+// }
 interface TableProps {
-    headers: object;
+  headersData: string[];
-    rows: object;
+  data: { [key: string]: any }[];
-  }
+}
 
-const Table: React.FC<TableProps> = ({headers, rows}) => {
+const Table: React.FC<TableProps> = ({ headersData, data }) => {
+  const headers = headersData.map((header, i) => {
+    return <th key={"header-" + i} >{header}</th>
+  })
 
-<table>
+  console.log(data);
-<caption>
+
-    Front-end web developer course 2021
+  const rows = data.map((item) => {
-  </caption>
+    const row = headersData.map(key => {
-  <thead>
+      return <td key={"item-" + item.id + key}>{item[key]}</td>
-    <tr>
+    });
-      <th scope="col">Person</th>
+    return <tr key={"item-" + item.id}>{row}</tr>
-      <th scope="col">Most interest in</th>
+  })
-      <th scope="col">Age</th>
+
-    </tr>
+  return (<>
-  </thead>
+    <table>
-  <tbody>
+      <thead>
-    <tr>
+        <tr>
-      <th scope="row">Chris</th>
+          {headers}
-      <td>HTML tables</td>
+        </tr>
-      <td>22</td>
+      </thead>
-    </tr>
+      <tbody>
-    <tr>
+        {rows}
-      <th scope="row">Dennis</th>
+      </tbody>
-      <td>Web accessibility</td>
+    </table>
-      <td>45</td>
+  </>);
-    </tr>
-    <tr>
-      <th scope="row">Sarah</th>
-      <td>JavaScript frameworks</td>
-      <td>29</td>
-    </tr>
-    <tr>
-      <th scope="row">Karen</th>
-      <td>Web performance</td>
-      <td>36</td>
-    </tr>
-  </tbody>
-</table>
 
 }
 
-export default Table
+export default Table