data table

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