fix: odd white space at the bottom of table pages

fix: minor clean up of redundant css classnames
Chia-Network · Jun 13, 2024 · c640c62 · c640c62
1 parent 238c676
commit c640c62
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 35 deletions.
diff --git a/src/renderer/components/blocks/tables/CompactUnitsTable.tsx b/src/renderer/components/blocks/tables/CompactUnitsTable.tsx
@@ -50,7 +50,6 @@ const CompactUnitsTable: React.FC<TableProps> = ({
         onRowClick={onRowClick}
         primaryKey="warehouseUnitId"
         isLoading={false}
-        compact={true}
         footer={
           <div>
             {shouldRenderPagination ? (

diff --git a/src/renderer/components/blocks/tables/ProjectsListTable.tsx b/src/renderer/components/blocks/tables/ProjectsListTable.tsx
@@ -129,29 +129,27 @@ const ProjectsListTable: React.FC<TableProps> = ({
 
   return (
     <>
-      <div className="relative h-max">
-        <DataTable
-          columns={columns}
-          onChangeOrder={setOrder}
-          onRowClick={onRowClick}
-          order={order}
-          data={data}
-          primaryKey="warehouseProjectId"
-          isLoading={isLoading}
-          footer={
-            <>
-              <PageCounter currentPage={currentPage} totalCount={totalCount} />
-              <Pagination
-                currentPage={currentPage}
-                layout="pagination"
-                onPageChange={onPageChange}
-                showIcons={true}
-                totalPages={totalPages || 1}
-              />
-            </>
-          }
-        />
-      </div>
+      <DataTable
+        columns={columns}
+        onChangeOrder={setOrder}
+        onRowClick={onRowClick}
+        order={order}
+        data={data}
+        primaryKey="warehouseProjectId"
+        isLoading={isLoading}
+        footer={
+          <>
+            <PageCounter currentPage={currentPage} totalCount={totalCount} />
+            <Pagination
+              currentPage={currentPage}
+              layout="pagination"
+              onPageChange={onPageChange}
+              showIcons={true}
+              totalPages={totalPages || 1}
+            />
+          </>
+        }
+      />
       {(createProjectModalActive || editProjectModalActive) && <UpsertProjectModal onClose={handleCloseUpsertModal} />}
     </>
   );

diff --git a/src/renderer/components/layout/DataTable.tsx b/src/renderer/components/layout/DataTable.tsx
@@ -27,7 +27,6 @@ interface DataTableProps {
   onChangeOrder?: (column: string) => void;
   order?: string;
   footer?: JSX.Element | null;
-  compact?: boolean;
 }
 
 const DataTable: React.FC<DataTableProps> = ({
@@ -39,14 +38,13 @@ const DataTable: React.FC<DataTableProps> = ({
   onChangeOrder,
   order,
   footer = null,
-  compact = false,
 }) => {
   if (isLoading) {
     return null;
   }
 
   return (
-    <div className="dark:bg-gray-800">
+    <div className="dark:bg-gray-800 h-full">
       {/* Mobile view */}
       <div className="block md:hidden mx-auto w-full">
         {data?.length > 0 &&
@@ -81,11 +79,12 @@ const DataTable: React.FC<DataTableProps> = ({
       </div>
 
       {/* Desktop view */}
-
-      <div
-        className="hidden md:flex md:flex-col custom-scrollbar"
-        style={compact ? {} : { height: data.length > 0 ? 'calc(100vh - 240px)' : 'unset', width: 'calc(100vw - 260px)' }}
-      >
+      {footer && data.length ? (
+        <div id="footer" className="bg-gray-100 dark:bg-gray-700 w-full p-4 text-left fixed bottom-0 z-50">
+          {footer}
+        </div>
+      ) : null}
+      <div className="flex-grow custom-scrollbar" style={{ height: data.length > 0 ? 'calc(100vh - 240px)' : 'auto' }}>
         <SimpleBar style={{ maxHeight: '100%' }} autoHide={false} forceVisible="x">
           <table
             className="min-w-full divide-y divide-gray-300 dark:divide-gray-700 custom-scrollbar"
@@ -158,9 +157,6 @@ const DataTable: React.FC<DataTableProps> = ({
             </tbody>
           </table>
         </SimpleBar>
-        {footer && data.length ? (
-          <div className="mt-auto bg-gray-50 dark:bg-gray-700 w-full p-4 text-left">{footer}</div>
-        ) : null}
       </div>
 
       {data?.length === 0 && (