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"