diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index e873e5147..d5606972f 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { useEffect, useRef } from 'react' +import { useEffect, useRef, useState } from 'react' import { useRouter } from 'next/router' import { flexRender, RowData, Table } from '@tanstack/react-table' import { useWindowVirtualizer } from '@tanstack/react-virtual' @@ -76,7 +76,7 @@ export function VirtualTable({ window.addEventListener('keydown', focusSearchBar) return () => window.removeEventListener('keydown', focusSearchBar) }, []) - + const [showScrollToTop, setShowScrollToTop] = useState(false) const onScrollOrResize = React.useCallback(() => { if (!useStickyHeader) return @@ -96,6 +96,8 @@ export function VirtualTable({ tableHeaderRef.current.style['overflow-x'] = 'overlay' tableHeaderDuplicate.style.height = `${instance.getHeaderGroups().length * 45}px` tableHeaderRef.current.scrollLeft = tableWrapperEl.scrollLeft + if (window.scrollY > 2500) { setShowScrollToTop(true) } + else { setShowScrollToTop(false) } } else if (tableHeaderRef.current) { tableHeaderRef.current.style.position = 'relative' tableHeaderRef.current.style.width = `${tableWrapperEl.offsetWidth}px` @@ -265,6 +267,10 @@ export function VirtualTable({ ) })} + {showScrollToTop && + } )