From 9a28c9e2d427384dae02d9cac3763bed14ca2cc4 Mon Sep 17 00:00:00 2001 From: Claire Dagan Date: Fri, 29 Nov 2024 14:34:46 +0100 Subject: [PATCH] [Mission] fix columns size and bug when there is a lot of data to display --- .../components/DashboardsList/DashboardsTable.tsx | 2 +- .../components/ReportingsList/ReportingsTable.tsx | 2 +- .../VigilanceAreasList/VigilanceAreasTable.tsx | 2 +- .../features/missions/MissionsList/Columns/index.tsx | 4 ++-- .../features/missions/MissionsList/MissionsTable.tsx | 2 +- frontend/src/hooks/useTableVirtualizer.ts | 10 ++++++++-- 6 files changed, 14 insertions(+), 8 deletions(-) diff --git a/frontend/src/features/Dashboard/components/DashboardsList/DashboardsTable.tsx b/frontend/src/features/Dashboard/components/DashboardsList/DashboardsTable.tsx index f1ffcb071..80e4cba91 100644 --- 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 index 72b593666..3a67458a5 100644 --- 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(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 index 20d587788..27592ac83 100644 --- 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(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 index 18ad83df5..71aa934b4 100644 --- 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 index a6af5f115..8fcfb9e9a 100644 --- 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 index 21c4f30d0..623efea8e 100644 --- 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 + 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 })