added OrderBy functionality to Data Table

apps/hub/app/_components/Table.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
 	useReactTable,
 	getCoreRowModel,
@@ -17,15 +17,19 @@ export interface SortableTableProps<TData> {
 	columns: ColumnDef<TData>[];
 	showEditButton?: boolean;
 	prismaModel?: keyof PrismaClient;
+	setOrderBy?: (orderBy: Record<string, "asc" | "desc">) => void;
+	initialOrderBy?: SortingState;
 }
 
 export default function SortableTable<TData>({
 	data,
 	columns,
+	initialOrderBy = [],
 	prismaModel,
 	showEditButton,
+	setOrderBy,
 }: SortableTableProps<TData>) {
-	const [sorting, setSorting] = useState<SortingState>([]);
+	const [sorting, setSorting] = useState<SortingState>(initialOrderBy);
 
 	const table = useReactTable({
 		data,
@@ -36,9 +40,7 @@ export default function SortableTable<TData>({
 						header: "Actions",
 						cell: ({ row }) => (
 							<div className="flex items-center gap-1">
-								<Link
-									href={`/admin/${prismaModel as string}/${(row.original as any).id}`}
-								>
+								<Link href={`/admin/${prismaModel as string}/${(row.original as any).id}`}>
 									<button className="btn btn-sm">Edit</button>
 								</Link>
 							</div>
@@ -52,6 +54,16 @@ export default function SortableTable<TData>({
 		state: { sorting },
 	});
 
+	useEffect(() => {
+		if (prismaModel) {
+			const orderBy: Record<string, "asc" | "desc"> = {};
+			sorting.forEach((sort) => {
+				orderBy[sort.id] = sort.desc ? "desc" : "asc";
+			});
+			setOrderBy?.(orderBy);
+		}
+	}, [sorting, prismaModel, setOrderBy]);
+
 	return (
 		<div className="overflow-x-auto">
 			<table className="table table-zebra w-full">
@@ -59,21 +71,11 @@ export default function SortableTable<TData>({
 					{table.getHeaderGroups().map((headerGroup) => (
 						<tr key={headerGroup.id}>
 							{headerGroup.headers.map((header) => (
-								<th
-									key={header.id}
-									onClick={header.column.getToggleSortingHandler()}
-								>
+								<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} />
-										)}
+										{flexRender(header.column.columnDef.header, header.getContext())}
+										{header.column.getIsSorted() === "asc" && <ChevronUp size={16} />}
+										{header.column.getIsSorted() === "desc" && <ChevronDown size={16} />}
 									</div>
 								</th>
 							))}
@@ -84,9 +86,7 @@ export default function SortableTable<TData>({
 					{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>
+								<td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
 							))}
 						</tr>
 					))}
@@ -108,11 +108,7 @@ export const Pagination = ({
 	if (totalPages === 0) return null;
 	return (
 		<div className="join w-full justify-end">
-			<button
-				className="join-item btn"
-				disabled={page === 0}
-				onClick={() => setPage(page - 1)}
-			>
+			<button className="join-item btn" disabled={page === 0} onClick={() => setPage(page - 1)}>
 				<ArrowLeft size={16} />
 			</button>
 			<select