[Mission] fix columns size and bug when there is a lot of data to dis…

…play
MTES-MCT · Nov 29, 2024 · 9a28c9e · 9a28c9e
1 parent 1c9cad4
commit 9a28c9e
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 8 deletions.
diff --git a/frontend/src/features/Dashboard/components/DashboardsList/DashboardsTable.tsx b/frontend/src/features/Dashboard/components/DashboardsList/DashboardsTable.tsx
@@ -54,7 +54,7 @@ export function DashboardsTable({ dashboards, isFetching, isLoading }: Dashboard
   })
 
   const { rows } = table.getRowModel()
-  const rowVirtualizer = useTableVirtualizer({ estimateSize: 45, ref: tableContainerRef, rows })
+  const rowVirtualizer = useTableVirtualizer({ estimateSize: 30, ref: tableContainerRef, rows })
 
   const virtualRows = rowVirtualizer.getVirtualItems()
 

diff --git a/frontend/src/features/Reportings/components/ReportingsList/ReportingsTable.tsx b/frontend/src/features/Reportings/components/ReportingsList/ReportingsTable.tsx
@@ -58,7 +58,7 @@ export function ReportingsTable({
   const tableContainerRef = useRef<HTMLDivElement>(null)
 
   const { rows } = table.getRowModel()
-  const rowVirtualizer = useTableVirtualizer({ estimateSize: 48, ref: tableContainerRef, rows })
+  const rowVirtualizer = useTableVirtualizer({ estimateSize: 30, ref: tableContainerRef, rows })
 
   const virtualRows = rowVirtualizer.getVirtualItems()
   const paddingTop = virtualRows.length > 0 ? Math.max(0, virtualRows[0]?.start ?? 0) : 0

diff --git a/frontend/src/features/VigilanceArea/components/VigilanceAreasList/VigilanceAreasTable.tsx b/frontend/src/features/VigilanceArea/components/VigilanceAreasList/VigilanceAreasTable.tsx
@@ -50,7 +50,7 @@ export function VigilanceAreasTable({
   const tableContainerRef = useRef<HTMLDivElement>(null)
 
   const { rows } = table.getRowModel()
-  const rowVirtualizer = useTableVirtualizer({ estimateSize: 42, ref: tableContainerRef, rows })
+  const rowVirtualizer = useTableVirtualizer({ estimateSize: 30, ref: tableContainerRef, rows })
 
   const virtualRows = rowVirtualizer.getVirtualItems()
 

diff --git a/frontend/src/features/missions/MissionsList/Columns/index.tsx b/frontend/src/features/missions/MissionsList/Columns/index.tsx
@@ -20,7 +20,7 @@ export const Columns = (legacyFirefoxOffset: number = 0, isFetching = false) =>
     enableSorting: true,
     header: () => 'N°',
     id: 'id',
-    size: 62 + legacyFirefoxOffset
+    size: 66 + legacyFirefoxOffset
   },
   {
     accessorFn: row => row.startDateTimeUtc,
@@ -69,7 +69,7 @@ export const Columns = (legacyFirefoxOffset: number = 0, isFetching = false) =>
     enableSorting: false,
     header: () => 'Thématiques',
     id: 'themes',
-    size: 372 + legacyFirefoxOffset
+    size: 368 + legacyFirefoxOffset
   },
   {
     accessorFn: row => row.envActions,

diff --git a/frontend/src/features/missions/MissionsList/MissionsTable.tsx b/frontend/src/features/missions/MissionsList/MissionsTable.tsx
@@ -46,7 +46,7 @@ export function MissionsTable({ isFetching, isLoading, missions }: MissionsTable
 
   const { rows } = table.getRowModel()
 
-  const rowVirtualizer = useTableVirtualizer({ estimateSize: 45, ref: tableContainerRef, rows })
+  const rowVirtualizer = useTableVirtualizer({ estimateSize: 30, ref: tableContainerRef, rows })
 
   const virtualRows = rowVirtualizer.getVirtualItems()
 

diff --git a/frontend/src/hooks/useTableVirtualizer.ts b/frontend/src/hooks/useTableVirtualizer.ts
@@ -1,13 +1,19 @@
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { useCallback } from 'react'
 
-export function useTableVirtualizer({ estimateSize, ref, rows }) {
+type UseTableVirtualizerProps = {
+  estimateSize: number
+  overscan?: number
+  ref: React.RefObject<HTMLDivElement>
+  rows: any[]
+}
+export function useTableVirtualizer({ estimateSize, overscan = 50, ref, rows }: UseTableVirtualizerProps) {
   return useVirtualizer({
     count: rows.length,
     estimateSize: () => estimateSize,
     getItemKey: useCallback((index: number) => `${rows[index]?.id}`, [rows]),
     getScrollElement: () => ref.current,
-    overscan: 1000,
+    overscan: rows.length > 500 ? rows.length / 10 : overscan,
     scrollPaddingEnd: 40,
     scrollPaddingStart: 40
   })