chore: consistent height with empty rows

GaloyMoney · Dec 4, 2024 · c09958c · c09958c
1 parent cd96f2f
commit c09958c
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 23 deletions.
diff --git a/apps/admin-panel/app/customers/[customer-id]/transactions/list.tsx b/apps/admin-panel/app/customers/[customer-id]/transactions/list.tsx
@@ -27,7 +27,13 @@ export const CustomerTransactionsTable: React.FC<CustomerTransactionsTableProps>
         <CardDescription>Transactions for this Customer</CardDescription>
       </CardHeader>
       {transactions.length === 0 ? (
-        <CardContent className="text-sm">No data to display</CardContent>
+        <CardContent className="text-sm">
+          <div className="overflow-x-auto border rounded-md">
+            <div className="w-full h-[calc(21px*20)] grid place-items-center">
+              <div className="text-sm">No data to display</div>
+            </div>
+          </div>
+        </CardContent>
       ) : (
         <CardContent>
           <div className="overflow-x-auto border  rounded-md">

diff --git a/apps/admin-panel/components/data-table/index.tsx b/apps/admin-panel/components/data-table/index.tsx
@@ -28,6 +28,8 @@ interface DataTableProps<T> {
   loading?: boolean
 }
 
+const DEFAULT_ROWS = 10
+
 const DataTable = <T,>({
   data,
   columns,
@@ -36,12 +38,14 @@ const DataTable = <T,>({
   rowClassName,
   cellClassName,
   onRowClick,
-  emptyMessage = "No data to display",
+  emptyMessage,
   loading = false,
 }: DataTableProps<T>) => {
+  const emptyRowsToFill = DEFAULT_ROWS - (data?.length || 0)
+
   if (loading) {
     return (
-      <div className="w-full overflow-x-auto">
+      <div className="w-full overflow-x-auto border rounded-md">
         <Table className={className}>
           <TableHeader>
             <TableRow className={headerClassName}>
@@ -60,11 +64,11 @@ const DataTable = <T,>({
             </TableRow>
           </TableHeader>
           <TableBody>
-            {Array.from({ length: 5 }).map((_, rowIndex) => (
+            {Array.from({ length: DEFAULT_ROWS }).map((_, rowIndex) => (
               <TableRow key={rowIndex}>
                 {columns.map((_, colIndex) => (
                   <TableCell key={colIndex}>
-                    <Skeleton className="h-4 w-full" />
+                    <Skeleton className="h-5 w-full" />
                   </TableCell>
                 ))}
               </TableRow>
@@ -75,8 +79,18 @@ const DataTable = <T,>({
     )
   }
 
+  if (!data.length && emptyMessage) {
+    return emptyMessage
+  }
+
   if (!data.length) {
-    return <div className="text-sm">{emptyMessage}</div>
+    return (
+      <div className="overflow-x-auto border rounded-md">
+        <div className="w-full h-[calc(21px*20)] grid place-items-center">
+          <div className="text-sm">No data to display</div>
+        </div>
+      </div>
+    )
   }
 
   return (
@@ -128,6 +142,14 @@ const DataTable = <T,>({
               ))}
             </TableRow>
           ))}
+          {emptyRowsToFill > 0 &&
+            Array.from({ length: emptyRowsToFill }).map((_, idx) => (
+              <TableRow key={`empty-${idx}`} className="border-none hover:bg-transparent">
+                {columns.map((_, colIndex) => (
+                  <TableCell key={colIndex}>&nbsp;</TableCell>
+                ))}
+              </TableRow>
+            ))}
         </TableBody>
       </Table>
     </div>

diff --git a/apps/admin-panel/components/paginated-table/index.tsx b/apps/admin-panel/components/paginated-table/index.tsx
@@ -61,7 +61,7 @@ const PaginatedTable = <T,>({
   columns,
   loading,
   data,
-  pageSize,
+  pageSize = DEFAULT_PAGESIZE,
   fetchMore,
   onSort,
   onFilter,
@@ -113,13 +113,21 @@ const PaginatedTable = <T,>({
     }
   }
 
+  const emptyRowsToFill = pageSize - (displayData?.length || 0)
+
   if (data?.edges.length === 0 && Object.keys(filterState).length === 0) {
-    return <div className="text-sm">No data to display</div>
+    return (
+      <div className="overflow-x-auto border rounded-md">
+        <div className="w-full h-[calc(21px*20)] grid place-items-center">
+          <div className="text-sm">No data to display</div>
+        </div>
+      </div>
+    )
   }
 
   return (
     <>
-      <div className="overflow-x-auto border  rounded-md">
+      <div className="overflow-x-auto border rounded-md">
         <Table className="table-fixed w-full">
           {showHeader && (
             <TableHeader className="bg-secondary [&_tr:hover]:!bg-secondary">
@@ -184,20 +192,19 @@ const PaginatedTable = <T,>({
             </TableHeader>
           )}
           <TableBody>
-            {loading
-              ? // Render loading skeleton rows while keeping headers visible
-                Array.from({ length: displayData.length || pageSize }).map(
-                  (_, rowIndex) => (
-                    <TableRow key={rowIndex}>
-                      {columns.map((_, colIndex) => (
-                        <TableCell key={colIndex}>
-                          <Skeleton className="h-4 w-full" />
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ),
-                )
-              : displayData.map(({ node }, idx) => (
+            {loading ? (
+              Array.from({ length: pageSize }).map((_, rowIndex) => (
+                <TableRow key={rowIndex}>
+                  {columns.map((_, colIndex) => (
+                    <TableCell key={colIndex}>
+                      <Skeleton className="h-5 w-full" />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <>
+                {displayData.map(({ node }, idx) => (
                   <TableRow
                     key={idx}
                     onClick={() => onClick?.(node)}
@@ -215,6 +222,16 @@ const PaginatedTable = <T,>({
                     ))}
                   </TableRow>
                 ))}
+                {emptyRowsToFill > 0 &&
+                  Array.from({ length: emptyRowsToFill }).map((_, idx) => (
+                    <TableRow key={`empty-${idx}`} className="border-none hover:bg-transparent">
+                      {columns.map((_, colIndex) => (
+                        <TableCell key={colIndex}>&nbsp;</TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+              </>
+            )}
           </TableBody>
         </Table>
         <Separator />