rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-03 19:40:16 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

rendering table from data

Browse Source 
i am going insane i love lists i love lists i love react i love lists i am oisdjghiuergihbenrjhloguehwirub
This commit is contained in:
Andy Chan (12beesinatrenchcoat) 2024-03-23 15:16:25 -04:00
parent d8a4387d7f
commit 14ae6efa46
3 changed files with 61 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store → backend/.DS_Store vendored
View File

Binary file not shown.

28
compass/app/admin/page.tsx
View File

@ -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 (<>
<Table/>
const [data, setData] = useState({
headers: [...headersExample],
data: [...dataExample],
});
return (
<>
<Table headersData={data.headers} data={data.data} />
</>)
}
}

76
compass/components/Table.tsx
View File

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