Merge pull request #26 from cssgunc/andy-admin-GEN-56-table-with-tanstack

Andy admin gen 56 table with tanstack

compass/app/admin/page.tsx

@@ -1,4 +1,87 @@
-"use client"
+
+"use client";
+// 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.
+
+export default function Page() {
+  const columnHelper = createColumnHelper<User>();
+
+  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<User[]>([...usersExample]);
+
+  const table = useReactTable({
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <>
+      <h1>This is example data!!</h1>
+
+      <table>
+        <thead>
+        {table.getHeaderGroups().map(headerGroup => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map(header => (
+                <th key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map(row => (
+            <tr key={row.id}>
+              {row.getVisibleCells().map(cell => (
+                <td key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>);
+
+
 
 import { PageLayout } from "@/components/admin/PageLayout"
 

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":""}]

compass/components/Table.tsx

@@ -0,0 +1,45 @@
+import { Component } from "react"
+
+// interface TableHeader {
+//   title: string,
+//   type: string
+// }
+
+// interface TableRow {
+//   [key: string]: any,
+// }
+interface TableProps {
+  headersData: string[];
+  data: { [key: string]: any }[];
+}
+
+const Table: React.FC<TableProps> = ({ headersData, data }) => {
+  const headers = headersData.map((header, i) => {
+    return <th key={"header-" + i} >{header}</th>
+  })
+
+  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

compass/package.json

@@ -1,29 +1,30 @@
-{
+
-  "name": "compass",
+{
-  "version": "0.1.0",
+  "name": "compass",
-  "private": true,
+  "version": "0.1.0",
-  "scripts": {
+  "private": true,
-    "dev": "next dev",
+  "scripts": {
-    "build": "next build",
+    "dev": "next dev",
-    "start": "next start",
+    "build": "next build",
-    "lint": "next lint"
+    "start": "next start",
-  },
+    "lint": "next lint"
-  "dependencies": {
+  },
-    "@heroicons/react": "^2.1.1",
+  "dependencies": {
-    "@tanstack/react-table": "^8.15.0",
+    "@heroicons/react": "^2.1.1",
-    "next": "13.5.6",
+    "@tanstack/react-table": "^8.15.0",
-    "react": "^18",
+    "next": "13.5.6",
-    "react-dom": "^18"
+    "react": "^18",
-  },
+    "react-dom": "^18"
-  "devDependencies": {
+  },
-    "@types/node": "^20",
+  "devDependencies": {
-    "@types/react": "^18",
+    "@types/node": "^20",
-    "@types/react-dom": "^18",
+    "@types/react": "^18",
-    "autoprefixer": "^10",
+    "@types/react-dom": "^18",
-    "eslint": "^8",
+    "autoprefixer": "^10",
-    "eslint-config-next": "13.5.6",
+    "eslint": "^8",
-    "postcss": "^8",
+    "eslint-config-next": "13.5.6",
-    "tailwindcss": "^3",
+    "postcss": "^8",
-    "typescript": "^5"
+    "tailwindcss": "^3",
-  }
+    "typescript": "^5"
-}
+  }
+}