Skip to content

Commit

Permalink
[Mission] fix columns size and bug when there is a lot of data to dis…
Browse files Browse the repository at this point in the history
…play
  • Loading branch information
claire2212 committed Dec 2, 2024
1 parent 226ca53 commit e86a96a
Show file tree
Hide file tree
Showing 6 changed files with 14 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand Down
4 changes: 2 additions & 2 deletions frontend/src/features/missions/MissionsList/Columns/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand Down
10 changes: 8 additions & 2 deletions frontend/src/hooks/useTableVirtualizer.ts
Original file line number Diff line number Diff line change
@@ -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
})
Expand Down

0 comments on commit e86a96a

Please sign in to comment.