Remove pagination from the user table

src/components/users/Table.tsx

@@ -4,7 +4,6 @@ import {
   useReactTable,
   getCoreRowModel,
   type ColumnDef,
-  type PaginationState,
   flexRender,
 } from '@tanstack/react-table'
 import { useMemo, useState } from 'react'
@@ -145,21 +144,9 @@ const TableBody = ({ table }: { table: ReactTable<User> }) => {
 
 export default function DataTable() {
   const columns = useColumns()
-  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  })
-  const fetchDataOption = { pageIndex, pageSize }
-  const pagination = useMemo(
-    () => ({
-      pageIndex,
-      pageSize,
-    }),
-    [pageIndex, pageSize]
-  )
 
   const { isLoading, data } = trpc.user.getAllUsersForTable.useQuery(
-    fetchDataOption,
+    undefined,
     {
       keepPreviousData: true,
       staleTime: 5000,
@@ -168,24 +155,15 @@ export default function DataTable() {
 
   const table = useReactTable<User>({
     columns,
-    data: data?.users || [],
-    debugTable: true,
+    data: data ?? [],
     getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-    onPaginationChange: setPagination,
-    pageCount: data?.pageCount || -1,
-    state: { pagination },
   })
 
   return isLoading ? (
     <LoadingScreen />
   ) : (
     <div className="mx-auto w-3/4">
-      <h1 className="mb-12 flex w-full justify-center text-4xl font-normal">
-        Manage Users
-      </h1>
-
-      <div className="mb-9 block h-14 w-14 rounded-[50%] bg-[#97AEFF]">
+      <div className="my-9 block h-14 w-14 rounded-[50%] bg-[#97AEFF]">
         <Link href="/users/create">
           <div className="flex h-full w-full items-center justify-center text-2xl font-bold text-[#231F20]">
             +
@@ -197,39 +175,6 @@ export default function DataTable() {
         <TableHeader table={table} />
         <TableBody table={table} />
       </table>
-      <div className="mt-5 flex flex-row items-center justify-between">
-        <div className="flex items-center gap-2">
-          <button
-            className="rounded border p-1"
-            onClick={() => table.setPageIndex(0)}
-            disabled={!table.getCanPreviousPage()}
-          >
-            {'<<'}
-          </button>
-          <button
-            className="rounded border p-1"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            {'<'}
-          </button>
-
-          <button
-            className="rounded border p-1"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            {'>'}
-          </button>
-          <button
-            className="rounded border p-1"
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-            disabled={!table.getCanNextPage()}
-          >
-            {'>>'}
-          </button>
-        </div>
-      </div>
     </div>
   )
 }

src/server/trpc/router/users/getAllUsersForTable.ts

@@ -1,36 +1,25 @@
 import { protectedProcedure } from '~/server/trpc/trpc'
 import { TRPCError } from '@trpc/server'
-import { z } from 'zod'
 import userCollection from '~/server/db/collections/UserCollection'
 
-export const getAllUsersForTable = protectedProcedure
-  .input(
-    z.object({
-      pageIndex: z.number(),
-      pageSize: z.number(),
+export const getAllUsersForTable = protectedProcedure.query(async () => {
+  // TODO: Fix up the pagination logic
+  try {
+    const users = (await userCollection.queries([])).map((user) => {
+      return {
+        department: user.department,
+        email: user.email,
+        id: user.id as string,
+        name: user.name,
+        role: user.role,
+      }
     })
-  )
-  .query(async ({ input }) => {
-    // TODO: Fix up the pagination logic
-    try {
-      const users = (await userCollection.queries([])).map((user) => {
-        return {
-          department: user.department,
-          email: user.email,
-          id: user.id as string,
-          name: user.name,
-          role: user.role,
-        }
-      })
 
-      const total = await userCollection.count()
-      const pageCount = Math.ceil(total.data().count / input.pageSize)
-
-      return { users, pageCount }
-    } catch (e) {
-      throw new TRPCError({
-        code: 'INTERNAL_SERVER_ERROR',
-        message: (e as Error).message,
-      })
-    }
-  })
+    return users
+  } catch (e) {
+    throw new TRPCError({
+      code: 'INTERNAL_SERVER_ERROR',
+      message: (e as Error).message,
+    })
+  }
+})