Fix table pagination

src/components/ui/data-table-pagination.tsx

@@ -1,19 +1,29 @@
-import { type Table } from '@tanstack/react-table';
+import { type Table, PaginationState } from '@tanstack/react-table';
 import { Button } from './button';
 import {
   ArrowLeft,
   ArrowLeftFromLine,
   ArrowRight,
   ArrowRightFromLine,
 } from 'lucide-react';
-
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
   pageSizeOptions?: number[];
+  setPagination: (
+    updater: PaginationState | ((prev: PaginationState) => PaginationState)
+  ) => void;
 }
 function DataTablePagination<TData>({
   table,
   pageSizeOptions = [10, 20, 30, 40, 50],
+  setPagination,
 }: DataTablePaginationProps<TData>) {
   return (
     <div className="flex w-full flex-col items-center justify-between gap-4 px-2 py-1 overflow-auto border-t-2 border-light-gray">
@@ -61,19 +71,30 @@ function DataTablePagination<TData>({
           >
             <ArrowRightFromLine className="h-4 w-4" />
           </Button>
-          <select
-            value={table.getState().pagination.pageSize}
-            onChange={(e) => {
-              console.log('size', e.target.value);
-              table.setPageSize(Number(e.target.value));
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              console.log('size', value);
+              // table.setPageSize(Number(value));
+              const newPageSize = Number(value);
+              setPagination((prev) => ({
+                ...prev,
+                pageSize: newPageSize,
+                pageIndex: 0,
+              }));
             }}
           >
-            {pageSizeOptions.map((size) => (
-              <option key={size} value={size}>
-                {size}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger className="h-8 w-[70px">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {pageSizeOptions.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       </div>
     </div>

src/components/ui/data-table.tsx

@@ -2,7 +2,7 @@ import {
   ColumnDef,
   flexRender,
   getCoreRowModel,
-  getPaginationRowModel,
+  // getPaginationRowModel,
   useReactTable,
   PaginationState,
 } from '@tanstack/react-table';
@@ -18,7 +18,7 @@ import DataTablePagination from './data-table-pagination';
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
-  // pageCount: number;
+  rowCount: number;
   pagination: PaginationState;
   setPagination: (
     updater: PaginationState | ((prev: PaginationState) => PaginationState)
@@ -28,28 +28,26 @@ interface DataTableProps<TData, TValue> {
 function DataTable<TData, TValue>({
   columns,
   data,
-  // pageCount,
+  rowCount,
   pagination,
   setPagination,
 }: DataTableProps<TData, TValue>) {
   const table = useReactTable({
     data,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    // pageCount: -1,
+    rowCount,
     state: { pagination },
-    onPaginationChange: (updater) => {
-      setPagination((prev) => ({ ...prev, ...updater }));
-    },
-    getPaginationRowModel: getPaginationRowModel(),
+    getCoreRowModel: getCoreRowModel(),
+    onPaginationChange: setPagination,
+    // getPaginationRowModel: getPaginationRowModel(),
     manualPagination: true,
   });
   return (
     <div className="h-full flex flex-col justify-between">
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id}>
+            <TableRow key={headerGroup.id} className="border-dark-gray">
               {headerGroup.headers.map((header) => {
                 return (
                   <TableHead key={header.id}>
@@ -70,6 +68,7 @@ function DataTable<TData, TValue>({
             <TableRow
               key={row.id}
               data-state={row.getIsSelected() && 'selected'}
+              className="border-dark-gray"
             >
               {row.getVisibleCells().map((cell) => (
                 <TableCell key={cell.id}>
@@ -80,7 +79,7 @@ function DataTable<TData, TValue>({
           ))}
         </TableBody>
       </Table>
-      <DataTablePagination table={table} />
+      <DataTablePagination table={table} setPagination={setPagination} />
     </div>
   );
 }

src/pages/JobDetail.tsx

@@ -0,0 +1,5 @@
+const JobDetail = () => {
+  return <div>JobDetail</div>;
+};
+
+export default JobDetail;

src/pages/Jobs.tsx

@@ -8,16 +8,29 @@ import { Database } from '@/types/supabase';
 import { Card } from '@/components/ui/card';
 import { ColumnDef } from '@tanstack/react-table';
 import DataTable from '@/components/ui/data-table';
+import { Link } from 'react-router-dom';
 
 const columns: ColumnDef<Database['public']['Tables']['jobs']['Row']>[] = [
   {
     accessorKey: 'title',
     header: 'Title',
+    cell({ row }) {
+      return (
+        <Link
+          to={`/jobs/${row.original.id}`}
+          className="hover:text-primary"
+        >{`${row.original.title}`}</Link>
+      );
+    },
   },
   {
     accessorKey: 'location',
     header: 'Location',
   },
+  {
+    accessorKey: 'closing_date',
+    header: 'Application Deadline',
+  },
 ];
 
 const Jobs = () => {
@@ -30,21 +43,22 @@ const Jobs = () => {
     pageIndex: 0,
     pageSize: 10,
   });
-  // const [pageCount, setPageCount] = useState(0);
+  const [pageCount, setPageCount] = useState(0);
 
   useEffect(() => {
     getJobs(pagination.pageIndex, pagination.pageSize);
   }, [pagination]);
 
   const getJobs = async (pageIndex: number, pageSize: number) => {
+    setLoading(true);
     try {
-      setLoading(true);
-      const { data } = await supabase
+      const { data, count } = await supabase
         .from('jobs')
-        .select()
+        .select('*', { count: 'exact' })
         .range(pageIndex * pageSize, (pageIndex + 1) * pageSize - 1);
-      console.log('jobs', data);
+      console.log('jobs', data, count);
       setJobs(data || []);
+      setPageCount(count || 0);
     } catch (error) {
       if (error instanceof Error) {
         console.log(error);
@@ -67,13 +81,15 @@ const Jobs = () => {
       <div className="w-full flex flex-col mb-10 h-full px-3 sm:px-20">
         <p className="my-4 font-bold">Jobs</p>
         <Card className="border-dark-gray border w-full h-full">
-          <DataTable
-            data={jobs}
-            columns={columns}
-            pagination={pagination}
-            // pageCount={pageCount}
-            setPagination={setPagination}
-          />
+          {!displayUnavailable && !displayLoading && !displayError && (
+            <DataTable
+              data={jobs}
+              columns={columns}
+              pagination={pagination}
+              rowCount={pageCount}
+              setPagination={setPagination}
+            />
+          )}
           {displayUnavailable && <p>Jobs not available</p>}
           {displayLoading && <Skeleton />}
           {displayError && <p>{errorMsg}</p>}

src/routes.tsx

@@ -2,6 +2,7 @@
 import { Suspense, lazy } from 'react';
 import type { RouteObject } from 'react-router-dom';
 import AuthGuard from './components/guards/AuthGuard';
+import { Outlet } from 'react-router-dom';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Loadable = (Component: any) => (props: JSX.IntrinsicAttributes) => (
@@ -15,6 +16,7 @@ const Home = Loadable(lazy(() => import('./pages/Home')));
 const Login = Loadable(lazy(() => import('./pages/Login')));
 const Register = Loadable(lazy(() => import('./pages/Register')));
 const Jobs = Loadable(lazy(() => import('./pages/Jobs')));
+const JobDetail = Loadable(lazy(() => import('./pages/JobDetail')));
 
 const DashboardLayout = Loadable(lazy(() => import('./pages/DashboardLayout')));
 
@@ -26,7 +28,17 @@ const routes: RouteObject[] = [
   },
   {
     path: 'jobs',
-    element: <Jobs />,
+    element: <Outlet />,
+    children: [
+      {
+        index: true,
+        element: <Jobs />,
+      },
+      {
+        path: ':id',
+        element: <JobDetail />,
+      },
+    ],
   },
 
   //TODO: Add Guest Guard