From d8a4387d7fdf5a217f050feedf6d5e16aa6c2b91 Mon Sep 17 00:00:00 2001 From: Advik Arora Date: Fri, 22 Mar 2024 16:48:31 -0400 Subject: [PATCH 1/4] table component created --- compass/app/admin/page.tsx | 8 ++++++ compass/components/Table.tsx | 47 ++++++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 compass/app/admin/page.tsx create mode 100644 compass/components/Table.tsx diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx new file mode 100644 index 0000000..f0d9d07 --- /dev/null +++ b/compass/app/admin/page.tsx @@ -0,0 +1,8 @@ +import Table from "@/components/Table"; + +export default function Page() { + return (<> + + ) + +} \ No newline at end of file diff --git a/compass/components/Table.tsx b/compass/components/Table.tsx new file mode 100644 index 0000000..2b8cb28 --- /dev/null +++ b/compass/components/Table.tsx @@ -0,0 +1,47 @@ +import { Component } from "react" + +interface TableProps { + headers: object; + rows: object; + } + +const Table: React.FC = ({headers, rows}) => { + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Front-end web developer course 2021 +
PersonMost interest inAge
ChrisHTML tables22
DennisWeb accessibility45
SarahJavaScript frameworks29
KarenWeb performance36
+ +} + +export default Table \ No newline at end of file From 14ae6efa46f8eac20e2d5f6fcff3fa1ed6d5f678 Mon Sep 17 00:00:00 2001 From: "Andy Chan (12beesinatrenchcoat)" Date: Sat, 23 Mar 2024 15:16:25 -0400 Subject: [PATCH 2/4] rendering table from data i am going insane i love lists i love lists i love react i love lists i am oisdjghiuergihbenrjhloguehwirub --- .DS_Store => backend/.DS_Store | Bin 6148 -> 6148 bytes compass/app/admin/page.tsx | 28 ++++++++++-- compass/components/Table.tsx | 76 ++++++++++++++++----------------- 3 files changed, 61 insertions(+), 43 deletions(-) rename .DS_Store => backend/.DS_Store (73%) diff --git a/.DS_Store b/backend/.DS_Store similarity index 73% rename from .DS_Store rename to backend/.DS_Store index 2a70607eb952be7bf408f0ef6db8429721f9cb2a..059e395073932ab8c149300ed4aeb43c4ad87fed 100644 GIT binary patch literal 6148 zcmeHKy-ve05I)mTMKI8TfeB?}r4N7<6z|6qNz+*7*1iT0< zKi}DIY?BlrAt8kBB>PKzcfK#5YP%*P)w>vVi8@3SqcKKn=o*au+-kOBM>c^<&oQS{ z8q;iY-0jz*Wk3`V1^$`>ymn)(*)!s`>#g5mkxvcT)=g7PUS!!|QViI)_w>5cd4Ak) zjvIX|ZhF$~yPCUPx=lG1Gy=Pc*;AaK-J##-bNy2B3FgQP$7NYe$ivo|(U8ue&y?o8 zw>ciGx0;9N_jznwy)ATUQxM~LEQ<+wXgy-gF$RxIFc~iPS;s|lt;P6!w(lxF4RMas zS8*XPT{FV(2D|=eZQ^@)E1%Ef@Zo)-i|2RsoBUzjL>HFsM+)G~W{cMiN-qkC0-`{r z0Phb88e?j)G^n=@bovSaj4-SX&wQ8QoWx>ku`~z|Oqo=mNmcfWp-ei)6C0OWEDf4; zQugwpY-MF{C`wny{D}@Hl^T>@6c7bM1zP5{!{`6O^80_7ByXaCDDbZoP*K*;diW%J zw$?t5&)Nj-2#t;7N`pEDojs2A10Tg(XxiXQ_yL$&EDd4=CVvF94AO}LzpB6ohyAR< delta 355 zcmZoMXfc=|#>B)qu~2NHo}wr-0|Nsi1A_nqLn1>lLvd1haY0hf#=_-{^&lB`hGd3( zhFpdMWZC>Apv;b>f}G6a5(9&4j7-cdtZeKY>>S)2vB4Sn<-sM1C8fnqiAB*MUPyj^ zP7;irm=ucQXE~6B*VeU!5J?g zQC)3rsiRzY^I}NZe&nf%gG_CtZy9@pPiGNm)`|+91t)9Jp~55P#Q*c z0~u)EN-0jxNdh_(qy#P{1o3iNa8X`PeqK6IigB|bhZxJmhHIPIIruq%K?vl3XP(S2 R;>ZEg3AB)9bA-qmW&nPrSPuXI diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx index f0d9d07..8ed0bd3 100644 --- a/compass/app/admin/page.tsx +++ b/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({ + headers: [...headersExample], + data: [...dataExample], + }); + + return ( + <> +
) - -} \ No newline at end of file + +} diff --git a/compass/components/Table.tsx b/compass/components/Table.tsx index 2b8cb28..ac55a42 100644 --- a/compass/components/Table.tsx +++ b/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; - rows: object; - } + headersData: string[]; + data: { [key: string]: any }[]; +} -const Table: React.FC = ({headers, rows}) => { +const Table: React.FC = ({ headersData, data }) => { + const headers = headersData.map((header, i) => { + return + }) -
{header}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Front-end web developer course 2021 -
PersonMost interest inAge
ChrisHTML tables22
DennisWeb accessibility45
SarahJavaScript frameworks29
KarenWeb performance36
+ console.log(data); + + const rows = data.map((item) => { + const row = headersData.map(key => { + return {item[key]} + }); + return {row} + }) + + return (<> + + + + {headers} + + + + {rows} + +
+ ); } -export default Table \ No newline at end of file +export default Table From b7e7046a88d10b84b59e616ffff85869491cc61d Mon Sep 17 00:00:00 2001 From: "Andy Chan (12beesinatrenchcoat)" Date: Sat, 23 Mar 2024 15:16:44 -0400 Subject: [PATCH 3/4] oops i forgot the page --- compass/app/admin/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx index 8ed0bd3..18dda95 100644 --- a/compass/app/admin/page.tsx +++ b/compass/app/admin/page.tsx @@ -23,6 +23,6 @@ export default function Page() { return ( <> - ) + ); } From eb8c7e8f2cb187631bb09de936106f2749954926 Mon Sep 17 00:00:00 2001 From: "Andy Chan (12beesinatrenchcoat)" Date: Tue, 26 Mar 2024 15:55:29 -0400 Subject: [PATCH 4/4] Rewrite table with TanStack Table Not sure if this is the direction we want to go in, but... --- compass/app/admin/page.tsx | 85 +++++++++++++++++++++++++++++------- compass/app/admin/users.json | 1 + compass/package-lock.json | 32 ++++++++++++++ compass/package.json | 1 + 4 files changed, 104 insertions(+), 15 deletions(-) create mode 100644 compass/app/admin/users.json diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx index 18dda95..ed6babe 100644 --- a/compass/app/admin/page.tsx +++ b/compass/app/admin/page.tsx @@ -1,28 +1,83 @@ "use client"; -import Table from "@/components/Table"; +// import Table from "@/components/Table"; +import { ColumnDef, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; import { useState } from "react"; +import usersImport from "./users.json"; + +const usersExample = usersImport as unknown as User[]; + +type User = { + id: number; + created_at: any; + username: string; + role: "ADMIN" | "EMPLOYEE" | "VOLUNTEER"; + email: string; + program: "DOMESTIC" | "ECONOMIC" | "COMMUNITY"; + experience: number; + group?: string; +} // 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() { - const [data, setData] = useState({ - headers: [...headersExample], - data: [...dataExample], + const columnHelper = createColumnHelper(); + + const columns = [ + columnHelper.accessor("username", { + cell: info => info.getValue(), + }), + columnHelper.accessor("role", { + cell: info => info.renderValue(), + }), + columnHelper.accessor("email", { + cell: info => info.renderValue(), + }), + columnHelper.accessor("program", { + cell: info => info.renderValue(), + }) + ]; + + const [data, setData] = useState([...usersExample]); + + const table = useReactTable({ + columns, + data, + getCoreRowModel: getCoreRowModel(), }); return ( <> -
+

This is example data!!

+ +
+ + {table.getHeaderGroups().map(headerGroup => ( + + {headerGroup.headers.map(header => ( + + ))} + + ))} + + + {table.getRowModel().rows.map(row => ( + + {row.getVisibleCells().map(cell => ( + + ))} + + ))} + +
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
); } diff --git a/compass/app/admin/users.json b/compass/app/admin/users.json new file mode 100644 index 0000000..20caf99 --- /dev/null +++ b/compass/app/admin/users.json @@ -0,0 +1 @@ +[{"id":0,"created_at":1711482132230,"username":"Bo_Pfeffer","role":"ADMIN","email":"Bo.Pfeffer@gmail.com","program":"DOMESTIC","experience":2,"group":""},{"id":1,"created_at":1711482132231,"username":"Marianna_Heathcote76","role":"ADMIN","email":"Marianna_Heathcote14@yahoo.com","program":"DOMESTIC","experience":1,"group":""},{"id":2,"created_at":1711482132231,"username":"Queenie_Schroeder","role":"VOLUNTEER","email":"Queenie_Schroeder@yahoo.com","program":"COMMUNITY","experience":5,"group":""},{"id":3,"created_at":1711482132231,"username":"Arne.Bode","role":"VOLUNTEER","email":"Arne.Bode@hotmail.com","program":"DOMESTIC","experience":3,"group":""},{"id":4,"created_at":1711482132231,"username":"Maia.Zulauf9","role":"ADMIN","email":"Maia_Zulauf@gmail.com","program":"DOMESTIC","experience":5,"group":""},{"id":5,"created_at":1711482132231,"username":"River_Bauch","role":"EMPLOYEE","email":"River.Bauch@yahoo.com","program":"ECONOMIC","experience":2,"group":""},{"id":6,"created_at":1711482132231,"username":"Virgil.Hilll","role":"VOLUNTEER","email":"Virgil.Hilll@yahoo.com","program":"ECONOMIC","experience":3,"group":""},{"id":7,"created_at":1711482132231,"username":"Bridget_Cartwright","role":"ADMIN","email":"Bridget_Cartwright@yahoo.com","program":"ECONOMIC","experience":3,"group":""},{"id":8,"created_at":1711482132231,"username":"Glennie_Keebler64","role":"EMPLOYEE","email":"Glennie_Keebler60@yahoo.com","program":"DOMESTIC","experience":2,"group":""},{"id":9,"created_at":1711482132232,"username":"Orin.Jenkins53","role":"EMPLOYEE","email":"Orin.Jenkins@gmail.com","program":"ECONOMIC","experience":1,"group":""},{"id":10,"created_at":1711482132232,"username":"Zachery.Rosenbaum","role":"ADMIN","email":"Zachery.Rosenbaum@hotmail.com","program":"COMMUNITY","experience":3,"group":""},{"id":11,"created_at":1711482132232,"username":"Phoebe.Ziemann","role":"EMPLOYEE","email":"Phoebe_Ziemann92@gmail.com","program":"COMMUNITY","experience":2,"group":""},{"id":12,"created_at":1711482132232,"username":"Bradford_Conroy53","role":"VOLUNTEER","email":"Bradford_Conroy94@hotmail.com","program":"COMMUNITY","experience":2,"group":""},{"id":13,"created_at":1711482132232,"username":"Florine_Strosin55","role":"VOLUNTEER","email":"Florine.Strosin29@hotmail.com","program":"ECONOMIC","experience":1,"group":""},{"id":14,"created_at":1711482132232,"username":"Constance.Doyle59","role":"EMPLOYEE","email":"Constance_Doyle@hotmail.com","program":"DOMESTIC","experience":3,"group":""},{"id":15,"created_at":1711482132232,"username":"Chauncey_Lockman","role":"ADMIN","email":"Chauncey_Lockman@yahoo.com","program":"DOMESTIC","experience":5,"group":""},{"id":16,"created_at":1711482132232,"username":"Esther_Wuckert-Larson26","role":"EMPLOYEE","email":"Esther_Wuckert-Larson@gmail.com","program":"ECONOMIC","experience":0,"group":""},{"id":17,"created_at":1711482132232,"username":"Jewel.Kunde","role":"VOLUNTEER","email":"Jewel_Kunde29@gmail.com","program":"ECONOMIC","experience":5,"group":""},{"id":18,"created_at":1711482132232,"username":"Hildegard_Parker92","role":"ADMIN","email":"Hildegard_Parker74@yahoo.com","program":"ECONOMIC","experience":2,"group":""},{"id":19,"created_at":1711482132232,"username":"Jordane.Lakin2","role":"ADMIN","email":"Jordane_Lakin@hotmail.com","program":"COMMUNITY","experience":1,"group":""}] \ No newline at end of file diff --git a/compass/package-lock.json b/compass/package-lock.json index aa9dab8..fd7ab14 100644 --- a/compass/package-lock.json +++ b/compass/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@heroicons/react": "^2.1.1", + "@tanstack/react-table": "^8.15.0", "next": "13.5.6", "react": "^18", "react-dom": "^18" @@ -401,6 +402,37 @@ "tslib": "^2.4.0" } }, + "node_modules/@tanstack/react-table": { + "version": "8.15.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.15.0.tgz", + "integrity": "sha512-8K4RSROUtXUtfiezV6Ehl8z99axFrkQnxXi0vjWBJv3Tsm5x4EyrgXI7d2tOOMoANykKZLB6S1sGZGemoMRt7Q==", + "dependencies": { + "@tanstack/table-core": "8.14.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/@tanstack/table-core": { + "version": "8.14.0", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.14.0.tgz", + "integrity": "sha512-wDhpKJahGHWhmRt4RxtV3pES63CoeadljGWS/xeS9OJr1HBl2NB+OO44ht3sxDH5j5TRDAbQzC0NvSlsUfn7lQ==", + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", diff --git a/compass/package.json b/compass/package.json index a748bbe..2fee5d7 100644 --- a/compass/package.json +++ b/compass/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@heroicons/react": "^2.1.1", + "@tanstack/react-table": "^8.15.0", "next": "13.5.6", "react": "^18", "react-dom": "^18"