fix: fix table content scrolling below sticky header

Closes #1317
flanksource · Nov 27, 2023 · 64343e9 · 64343e9
1 parent aff1fac
commit 64343e9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 16 deletions.
diff --git a/pages/global.css b/pages/global.css
@@ -35,18 +35,17 @@
 }
 
 @layer components {
-
   .form-label {
     @apply block text-sm font-semibold text-gray-700 mb-2;
   }
 
   .table-auto {
-    @apply shadow-lg   bg-white  rounded-md  py-2 px-4;
+    @apply shadow-lg   bg-white  rounded-md;
   }
 
   .table-auto tbody tr {
     @apply hover:bg-slate-50;
-    }
+  }
 
   .table-auto thead tr {
     border-bottom-width: 1px;
@@ -71,25 +70,24 @@
     @apply px-1 text-sm;
   }
 
-
   .btn-primary {
-    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none ;
+    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none;
   }
 
   .btn-white {
-    @apply inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-100 focus:outline-none ;
+    @apply inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-100 focus:outline-none;
   }
 
   .btn-danger {
-    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none ;
+    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none;
   }
 
   .btn-disabled {
     @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gray-300;
   }
 
   .btn-secondary {
-    @apply inline-flex items-center justify-center border-none shadow-sm font-medium rounded-md text-blue-500 bg-blue-100 hover:bg-blue-200 focus:ring-offset-white focus:ring-blue-500 focus:outline-none ;
+    @apply inline-flex items-center justify-center border-none shadow-sm font-medium rounded-md text-blue-500 bg-blue-100 hover:bg-blue-200 focus:ring-offset-white focus:ring-blue-500 focus:outline-none;
   }
 
   .btn-secondary-disabled {
@@ -247,8 +245,6 @@
   }
 
   .menu-item {
-  @apply block w-full py-2 px-4  text-sm text-gray-700  hover:bg-gray-50 hover:text-gray-900 divide-gray-300 text-left;
+    @apply block w-full py-2 px-4  text-sm text-gray-700  hover:bg-gray-50 hover:text-gray-900 divide-gray-300 text-left;
   }
-
-
 }
diff --git a/src/components/DataTable/index.tsx b/src/components/DataTable/index.tsx
@@ -268,19 +268,19 @@ export function DataTable<TableColumns, Data extends TableColumns>({
         <table
           className={clsx(
             className,
-            `w-full border border-gray-200 rounded-md`,
+            `w-full border border-t-0 border-gray-200 rounded-md border-separate`,
             stickyHead && "relative"
           )}
           style={tableStyle}
         >
           <thead
-            className={`bg-white rounded-md ${
-              stickyHead ? "sticky top-0 z-01" : ""
+            className={`bg-white border-gray-200 rounded-md ${
+              stickyHead ? "sticky top-[-0.5px] z-01" : ""
             }`}
           >
             {table.getHeaderGroups().map((headerGroup) => (
               <tr
-                className="border-b border-gray-200 uppercase bg-column-background rounded-t-md items-center"
+                className="uppercase bg-column-background rounded-t-md items-center border border-gray-200"
                 key={headerGroup.id}
               >
                 {headerGroup.headers.map((header, colIndex) =>
@@ -291,7 +291,7 @@ export function DataTable<TableColumns, Data extends TableColumns>({
                   colIndex === 1 ? null : (
                     <th
                       key={header.id}
-                      className={`${theadHeaderClass}${
+                      className={`border-t border-b border-gray-200 ${theadHeaderClass}${
                         header.column.getCanSort() ? " cursor-pointer" : ""
                       }`}
                       onClick={header.column.getToggleSortingHandler()}