[Tables] fix scroll in table with virtualizer

MTES-MCT · Dec 20, 2024 · 245684a · 245684a
1 parent 4464bfb
commit 245684a
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 100 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -26,7 +26,7 @@
     "test:unit:watch": "npm run test:unit -- --watch"
   },
   "dependencies": {
-    "@mtes-mct/monitor-ui": "24.11.0",
+    "@mtes-mct/monitor-ui": "24.11.3",
     "@react-pdf/renderer": "4.1.5",
     "@reduxjs/toolkit": "2.4.0",
     "@sentry/browser": "8.41.0",
@@ -35,7 +35,7 @@
     "@sentry/vite-plugin": "2.22.6",
     "@svgr/webpack": "8.1.0",
     "@tanstack/react-table": "8.20.5",
-    "@tanstack/react-virtual": "3.10.9",
+    "@tanstack/react-virtual": "3.11.2",
     "classnames": "2.5.1",
     "compressorjs": "1.2.1",
     "dayjs": "1.11.13",

diff --git a/frontend/src/components/Table/index.tsx b/frontend/src/components/Table/index.tsx
@@ -1,18 +1,29 @@
 import { ChevronIcon } from '@features/commonStyles/icons/ChevronIcon.style'
 import { Icon, SimpleTable } from '@mtes-mct/monitor-ui'
 import { flexRender } from '@tanstack/react-table'
+import { notUndefined } from '@tanstack/react-virtual'
 import { forwardRef } from 'react'
 import styled from 'styled-components'
 
-export function TableWithRef({ rows, table, virtualRows }, ref) {
+import { TableContainer } from './style'
+
+export function TableWithRef({ columnsLength, rows, rowVirtualizer, table, virtualRows }, ref) {
+  const [before, after] =
+    virtualRows.length > 0
+      ? [
+          notUndefined(virtualRows[0]).start - rowVirtualizer.options.scrollMargin,
+          rowVirtualizer.getTotalSize() - notUndefined(virtualRows[virtualRows.length - 1]).end
+        ]
+      : [0, 0]
+
   return (
-    <StyledDashboardsContainer ref={ref}>
+    <TableContainer ref={ref}>
       <SimpleTable.Table>
         <SimpleTable.Head>
           {table.getHeaderGroups().map(headerGroup => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map(header => (
-                <SimpleTable.Th key={header.id} $width={header.column.getSize()}>
+                <SimpleTable.Th key={header.id} $width={header.getSize()}>
                   {header.isPlaceholder ? undefined : (
                     <SimpleTable.SortContainer
                       className={header.column.getCanSort() ? 'cursor-pointer select-none' : ''}
@@ -32,20 +43,28 @@ export function TableWithRef({ rows, table, virtualRows }, ref) {
             </tr>
           ))}
         </SimpleTable.Head>
+        {before > 0 && (
+          <tr>
+            <td aria-label="padding before" colSpan={columnsLength} style={{ height: before }} />
+          </tr>
+        )}
         <tbody>
           {virtualRows?.map(virtualRow => {
             const row = rows[virtualRow?.index]
 
             return (
-              <SimpleTable.BodyTr key={virtualRow.key}>
+              <SimpleTable.BodyTr
+                key={row?.id}
+                ref={rowVirtualizer.measureElement} // measure dynamic row height
+                data-index={virtualRow.index} // needed for dynamic row height measurement
+              >
                 {row?.getVisibleCells().map(cell => (
                   <SimpleTable.Td
                     key={cell.id}
                     $isCenter={cell.column.id === 'geom' || cell.column.id === 'edit'}
                     style={{
                       maxWidth: cell.column.getSize(),
                       minWidth: cell.column.getSize(),
-                      padding: cell.column.id === 'geom' || cell.column.id === 'edit' ? '0px' : '10px 12px',
                       width: cell.column.getSize()
                     }}
                   >
@@ -56,19 +75,18 @@ export function TableWithRef({ rows, table, virtualRows }, ref) {
             )
           })}
         </tbody>
+        {after > 0 && (
+          <tr>
+            <td aria-label="padding after" colSpan={columnsLength} style={{ height: after }} />
+          </tr>
+        )}
       </SimpleTable.Table>
-    </StyledDashboardsContainer>
+    </TableContainer>
   )
 }
 
 export const Table = forwardRef(TableWithRef)
 
-const StyledDashboardsContainer = styled.div`
-  overflow: auto;
-  width: fit-content;
-  // scroll width (~15px) + 4px
-  padding-right: 19px;
-`
 const StyledChevronIcon = styled(ChevronIcon)`
   margin-top: 0px;
   margin-right: 0px;

diff --git a/frontend/src/components/Table/style.ts b/frontend/src/components/Table/style.ts
@@ -1,5 +1,11 @@
 import styled from 'styled-components'
 
+export const TableContainer = styled.div`
+  overflow: auto;
+  width: fit-content;
+  // scroll width (~15px) + 4px
+  padding-right: 19px;
+`
 export const TotalResults = styled.h2`
   font-size: 13px;
   margin-top: 32px;

diff --git a/frontend/src/features/Dashboard/components/DashboardsList/DashboardsTable.tsx b/frontend/src/features/Dashboard/components/DashboardsList/DashboardsTable.tsx
@@ -58,5 +58,14 @@ export function DashboardsTable({ dashboards, isFetching, isLoading }: Dashboard
 
   const virtualRows = rowVirtualizer.getVirtualItems()
 
-  return <Table ref={tableContainerRef} rows={rows} table={table} virtualRows={virtualRows} />
+  return (
+    <Table
+      ref={tableContainerRef}
+      columnsLength={columns.length}
+      rows={rows}
+      rowVirtualizer={rowVirtualizer}
+      table={table}
+      virtualRows={virtualRows}
+    />
+  )
 }