fix: Added scrollbehaviour on table

equinor · Sep 4, 2023 · b252408 · b252408
1 parent b7476d3
commit b252408
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 50 deletions.
diff --git a/src/components/Table.styled.ts b/src/components/Table.styled.ts
@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+
+export const StyledDiv = styled.div`
+  overflow-x: auto;
+  padding-bottom: 15px;
+`
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -1,61 +1,64 @@
 import { Chip } from '@equinor/eds-core-react'
-import { EdsDataGrid } from '@equinor/eds-data-grid-react'
 import { useGetAnalogueModels } from '../hooks/useGetAnalogueModels'
+import * as Styled from './Table.styled'
+import { EdsDataGrid } from '@equinor/eds-data-grid-react'
 
 export const Table = () => {
   const { data: models } = useGetAnalogueModels()
 
   if (!models) return <p>Loading...</p>
 
   return (
-    <EdsDataGrid
-      enableSorting
-      enablePagination
-      emptyMessage="Empty :("
-      rows={models}
-      columns={[
-        {
-          accessorKey: 'analogueModelId',
-          header: 'Model ID',
-          id: 'analogueModelId',
-        },
-        { accessorKey: 'name', header: 'Name', id: 'name' },
-        {
-          accessorKey: 'description',
-          header: 'Description',
-          id: 'description',
-        },
-        {
-          accessorKey: 'isApproved',
-          header: 'Result',
-          cell: () => <Chip>{'Approved'}</Chip>,
-        },
-        {
-          accessorKey: 'modified',
-          header: 'Last Modified',
-          cell: () => <div>{'<Last Modified>'}</div>,
-        },
-        {
-          accessorKey: 'analogue',
-          header: 'Analogue',
-          cell: () => <div>{'<Analogue>'}</div>,
-        },
-        {
-          accessorKey: 'formation',
-          header: 'Formation',
-          cell: () => <div>{'<Formation>'}</div>,
-        },
-        {
-          accessorKey: 'field',
-          header: 'Field',
-          cell: () => <div>{'<Field>'}</div>,
-        },
-        {
-          accessorKey: 'isProcessed',
-          header: 'Status',
-          id: 'isProcessed',
-        },
-      ]}
-    />
+    <Styled.StyledDiv>
+      <EdsDataGrid
+        enableSorting
+        enablePagination
+        emptyMessage="Empty :("
+        rows={models}
+        columns={[
+          {
+            accessorKey: 'analogueModelId',
+            header: 'Model ID',
+            id: 'analogueModelId',
+          },
+          { accessorKey: 'name', header: 'Name', id: 'name' },
+          {
+            accessorKey: 'description',
+            header: 'Description',
+            id: 'description',
+          },
+          {
+            accessorKey: 'isApproved',
+            header: 'Result',
+            cell: () => <Chip>{'Approved'}</Chip>,
+          },
+          {
+            accessorKey: 'modified',
+            header: 'Last Modified',
+            cell: () => <div>{'<Last Modified>'}</div>,
+          },
+          {
+            accessorKey: 'analogue',
+            header: 'Analogue',
+            cell: () => <div>{'<Analogue>'}</div>,
+          },
+          {
+            accessorKey: 'formation',
+            header: 'Formation',
+            cell: () => <div>{'<Formation>'}</div>,
+          },
+          {
+            accessorKey: 'field',
+            header: 'Field',
+            cell: () => <div>{'<Field>'}</div>,
+          },
+          {
+            accessorKey: 'isProcessed',
+            header: 'Status',
+            id: 'isProcessed',
+          },
+        ]}
+      />
+    </Styled.StyledDiv>
   )
 }