Rewrite table with TanStack Table

Not sure if this is the direction we want to go in, but...

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({
+  const columnHelper = createColumnHelper<User>();
-    headers: [...headersExample],
+
-    data: [...dataExample],
+  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 (
     <>
-      <Table headersData={data.headers} data={data.data} />
+      <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>
     </>);
 
 }

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/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",

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"