fix: Remove pagination and fix scrolling on models page (#417)

* Fix: remove pagination from models page * Fix: improve flexible table size with scrolling and pinned action column * Fix: make slightly more space for the models table
equinor · Jan 2, 2025 · a4c552e · a4c552e
1 parent 0daea46
commit a4c552e
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 42 deletions.
diff --git a/src/features/ModelTable/ModelTable.styled.ts b/src/features/ModelTable/ModelTable.styled.ts
@@ -1,36 +1,17 @@
 import styled from 'styled-components';
 import { spacings } from '../../tokens/spacings';
+import { theme } from '../../tokens/theme';
 
 export const Table = styled.div`
-  padding-bottom: ${spacings.MEDIUM};
-  max-width: 1750px;
-  > div {
-    height: 100%;
-    overflow-y: hidden;
-    > table {
-      min-width: 90% !important;
-
-      > thead {
-        > tr {
-          > th {
-            vertical-align: middle !important;
-          }
-        }
-      }
-    }
-    > div {
-      margin-top: 2rem;
-      min-width: 90% !important;
-    }
-
-    @media (max-width: 1500px) {
-      > table {
-        min-width: 100% !important;
-      }
-      > div {
-        min-width: 100% !important;
-      }
-    }
+  .table-wrapper {
+    border: 1px solid ${theme.light.ui.background.medium};
+    max-height: calc(
+      100vh - 64px - 48px - 30px - 16px - 36px - 16px - 48px - 64px
+    );
+  }
+  table {
+    table-layout: auto !important;
+    width: 100% !important;
   }
 `;
 

diff --git a/src/features/ModelTable/ModelTable.tsx b/src/features/ModelTable/ModelTable.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable no-empty-pattern */
 /* eslint-disable max-lines-per-function */
+import { CSSProperties } from 'react';
 import { useMsal } from '@azure/msal-react';
 import { Button } from '@equinor/eds-core-react';
 import { EdsDataGrid } from '@equinor/eds-data-grid-react';
@@ -82,19 +83,26 @@ export const ModelTable = () => {
     return status;
   };
 
+  /* Make sure the header row in EdsDataGrid is vertically middle-aligned when filter icons are shown */
+  const headerStyle = (): CSSProperties => ({ verticalAlign: 'middle' });
+
   return (
     <Styled.Table>
       <EdsDataGrid
         enableSorting
-        enablePagination
         enableColumnFiltering
         emptyMessage="Empty :("
         columnResizeMode="onChange"
         rows={data.data}
-        pageSize={10}
+        columnPinState={{
+          right: ['navigate'],
+        }}
         scrollbarHorizontal
+        stickyHeader
+        headerStyle={headerStyle}
+        width="min(calc(100vw - 64px), 1400px)"
         columns={[
-          { accessorKey: 'name', header: 'Model name', id: 'name' },
+          { accessorKey: 'name', header: 'Model name', id: 'name', size: 200 },
           {
             id: 'outcrops',
             header: 'Outcrop',
@@ -171,7 +179,7 @@ export const ModelTable = () => {
             id: 'isProcessed',
             header: 'Status',
             enableColumnFilter: false,
-            size: 100,
+            size: 160,
             cell: ({ row }) => (
               <>{getModelStatus(row.original.analogueModelId)}</>
             ),

diff --git a/src/pages/Browse/Browse.styled.tsx b/src/pages/Browse/Browse.styled.tsx
@@ -3,16 +3,16 @@ import { spacings } from '../../tokens/spacings';
 
 export const BrowseWrapper = styled.div`
   column-gap: ${spacings.X_LARGE};
-  padding: ${spacings.XXX_LARGE} ${spacings.X_LARGE};
+  padding: ${spacings.XXX_LARGE} ${spacings.X_LARGE} ${spacings.X_LARGE};
 
   display: flex;
   flex-direction: column;
-  row-gap: ${spacings.X_LARGE};
+  row-gap: ${spacings.MEDIUM};
 
-  > .btn-div {
-    > button {
-      width: 136px;
-      margin-right: 50px;
-    }
+  .actions {
+    display: flex;
+    column-gap: 16px;
+    align-items: center;
+    margin-block-start: ${spacings.MEDIUM};
   }
 `;
diff --git a/src/pages/Browse/Browse.tsx b/src/pages/Browse/Browse.tsx
@@ -33,12 +33,15 @@ export const Browse = () => {
   return (
     <>
       <Styled.BrowseWrapper>
-        <Typography variant="h1">Browse all models</Typography>
+        <Typography variant="h3" as="h1">
+          Browse all models
+        </Typography>
         {isOwnerOrAdmin ? (
-          <div className="btn-div">
+          <div className="actions">
             <Button disabled={!isOwnerOrAdmin} onClick={navigateAddModel}>
               Add new model
             </Button>
+            {/* TODO Add the export button */}
           </div>
         ) : (
           <></>