mirror of
https://github.com/cssgunc/compass.git
synced 2025-04-06 20:50:17 -04:00
Rewrite table with TanStack Table
Not sure if this is the direction we want to go in, but...
This commit is contained in:
Andy Chan (12beesinatrenchcoat)
parent
b7e7046a88
commit
eb8c7e8f2c
|
|
@ -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<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 (
|
||||
<>
|
||||
<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>
|
||||
</>);
|
||||
|
||||
}
|
||||
|
|
|
|||
1
compass/app/admin/users.json
Normal file
1
compass/app/admin/users.json
Normal file
|
|
@ -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":""}]
|
||||
32
compass/package-lock.json
generated
32
compass/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user