added OrderBy functionality to Data Table

apps/hub/app/_components/PaginatedTable.tsx

@@ -1,11 +1,5 @@
 "use client";
-import {
-	useEffect,
-	useState,
-	useCallback,
-	Ref,
-	useImperativeHandle,
-} from "react";
+import { useEffect, useState, useCallback, Ref, useImperativeHandle } from "react";
 import SortableTable, { Pagination, SortableTableProps } from "./Table";
 import { PrismaClient } from "@repo/db";
 import { getData } from "./pagiantedTableActions";
@@ -14,8 +8,7 @@ export interface PaginatedTableRef {
 	refresh: () => void;
 }
 
-interface PaginatedTableProps<TData>
-	extends Omit<SortableTableProps<TData>, "data"> {
+interface PaginatedTableProps<TData> extends Omit<SortableTableProps<TData>, "data"> {
 	prismaModel: keyof PrismaClient;
 	filter?: Record<string, any>;
 	rowsPerPage?: number;
@@ -48,6 +41,17 @@ export function PaginatedTable<TData>({
 	const [total, setTotal] = useState(0);
 	const [searchTerm, setSearchTerm] = useState("");
 	const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
+	const [orderBy, setOrderBy] = useState<Record<string, "asc" | "desc">>(
+		restProps.initialOrderBy
+			? restProps.initialOrderBy.reduce(
+					(acc, sort) => {
+						acc[sort.id] = sort.desc ? "desc" : "asc";
+						return acc;
+					},
+					{} as Record<string, "asc" | "desc">,
+				)
+			: {},
+	);
 
 	const RefreshTableData = async () => {
 		getData(
@@ -58,6 +62,7 @@ export function PaginatedTable<TData>({
 			searchFields,
 			filter,
 			include,
+			orderBy,
 		).then((result) => {
 			if (result) {
 				setData(result.data);
@@ -68,7 +73,7 @@ export function PaginatedTable<TData>({
 
 	useEffect(() => {
 		RefreshTableData();
-	}, [filter]);
+	}, [filter, orderBy]);
 
 	useImperativeHandle(ref, () => ({
 		refresh: () => {
@@ -118,17 +123,14 @@ export function PaginatedTable<TData>({
 					data={data}
 					prismaModel={prismaModel}
 					showEditButton={showEditButton}
+					setOrderBy={setOrderBy}
 					{...restProps}
 				/>
 			)}
 			<div className="flex items-between">
 				{leftOfPagination}
 				{!hide && (
-					<Pagination
-						totalPages={Math.ceil(total / rowsPerPage)}
-						page={page}
-						setPage={setPage}
-					/>
+					<Pagination totalPages={Math.ceil(total / rowsPerPage)} page={page} setPage={setPage} />
 				)}
 			</div>
 		</div>