data table

apps/dispatch/tsconfig.json

@@ -12,9 +12,9 @@
     "**/*.tsx",
     "next-env.d.ts",
     "next.config.js",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    "../hub/app/_components/PaginatedTable.tsx",
+    "../hub/app/_components/Table.tsx"
   ],
-  "exclude": [
+  "exclude": ["node_modules"]
-    "node_modules"
-  ]
 }

apps/hub/app/_components/PaginatedTable.tsx

@@ -0,0 +1,27 @@
+import SortableTable, { SortableTableProps } from './Table';
+
+interface PaginatedTableProps<TData>
+  extends Omit<SortableTableProps<TData>, 'data'> {
+  prismaGetter: (
+    fnProps: {
+      cursor: number;
+      take: number;
+    } & any
+  ) => Promise<any>;
+}
+
+export async function PaginatedTable<TData>({
+  prismaGetter,
+  ...restProps
+}: PaginatedTableProps<TData>) {
+  const data = await prismaGetter({
+    cursor: 0,
+    take: 10,
+  });
+
+  return (
+    <div>
+      <SortableTable data={data} {...restProps} />
+    </div>
+  );
+}

apps/hub/app/_components/Table.tsx

@@ -0,0 +1,75 @@
+'use client';
+import { useState } from 'react';
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  ColumnDef,
+  SortingState,
+  flexRender,
+} from '@tanstack/react-table';
+import { ChevronDown, ChevronUp } from 'lucide-react'; // Icons for sorting
+
+export interface SortableTableProps<TData> {
+  data: TData[];
+  columns: ColumnDef<TData>[];
+}
+
+export default function SortableTable<TData>({
+  data,
+  columns,
+}: SortableTableProps<TData>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: setSorting,
+    state: { sorting },
+  });
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="table table-zebra w-full">
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th
+                  key={header.id}
+                  onClick={header.column.getToggleSortingHandler()}
+                >
+                  <div className="flex items-center gap-1 cursor-pointer">
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                    {header.column.getIsSorted() === 'asc' && (
+                      <ChevronUp size={16} />
+                    )}
+                    {header.column.getIsSorted() === 'desc' && (
+                      <ChevronDown size={16} />
+                    )}
+                  </div>
+                </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>
+    </div>
+  );
+}

apps/hub/app/page.tsx

@@ -1,22 +1,33 @@
-'use client';
-
-import { useSession } from 'next-auth/react';
 import Link from 'next/link';
-import { useEffect } from 'react';
+import { PrismaClient } from '@repo/db';
+import { PaginatedTable } from '../app/_components/PaginatedTable';
+
+export default async function Home() {
+  const prisma = new PrismaClient();
 
-export default function Home() {
-  const { data: session, update } = useSession();
-  useEffect(() => {
-    update();
-  }, []);
   return (
     <div>
       <h1 className="text-5xl">Hub</h1>
-      {!session && <h2 className="text-error text-xl">Not signed in</h2>}
-      {session?.user?.firstname && <h1>Hi, {session?.user?.firstname}</h1>}
       <Link href="/logout">
         <button className="btn">Logout</button>
       </Link>
+      <PaginatedTable
+        prismaGetter={prisma.user.findMany}
+        columns={[
+          {
+            header: 'ID',
+            accessorKey: 'id',
+          },
+          {
+            header: 'First Name',
+            accessorKey: 'firstname',
+          },
+          {
+            header: 'Last Name',
+            accessorKey: 'lastname',
+          },
+        ]}
+      />
     </div>
   );
 }

apps/hub/package.json

@@ -12,6 +12,7 @@
     "@hookform/resolvers": "^3.10.0",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@repo/ui": "*",
+    "@tanstack/react-table": "^8.20.6",
     "bcryptjs": "^2.4.3",
     "clsx": "^2.1.1",
     "lodash": "^4.17.21",

package-lock.json

@@ -108,6 +108,7 @@
         "@hookform/resolvers": "^3.10.0",
         "@next-auth/prisma-adapter": "^1.0.7",
         "@repo/ui": "*",
+        "@tanstack/react-table": "^8.20.6",
         "bcryptjs": "^2.4.3",
         "clsx": "^2.1.1",
         "lodash": "^4.17.21",
@@ -1474,6 +1475,37 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.3.tgz",
       "integrity": "sha512-ImmZF0Lon5RrQpsEAKGxRvHwCvMgSC4XVlFRqmbzTEDb/3wvin9zfEZrMwgsa3yqBbPqahYcVI6lulM2S7IZAA=="
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.20.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.6.tgz",
+      "integrity": "sha512-w0jluT718MrOKthRcr2xsjqzx+oEM7B7s/XXyfs19ll++hlId3fjTm+B2zrR3ijpANpkzBAr15j1XGVOMxpggQ==",
+      "dependencies": {
+        "@tanstack/table-core": "8.20.5"
+      },
+      "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.20.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz",
+      "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tootallnate/quickjs-emscripten": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",