diff --git a/README.md b/README.md index 440ca5e..d6c9648 100644 --- a/README.md +++ b/README.md @@ -316,13 +316,16 @@ const WindowVirtualizationExample = () => { getRowId: (item) => item.id, }); + const bodyRef = React.useRef(null); + const rowVirtualizer = useWindowRowVirtualizer({ count: table.getRowModel().rows.length, estimateSize: () => 20, overscan: 5, + scrollMargin: bodyRef.current?.offsetTop ?? 0, }); - return ; + return
; }; ``` diff --git a/src/components/BaseRow/BaseRow.tsx b/src/components/BaseRow/BaseRow.tsx index 822f22a..6180fc0 100644 --- a/src/components/BaseRow/BaseRow.tsx +++ b/src/components/BaseRow/BaseRow.tsx @@ -146,7 +146,10 @@ export const BaseRow = React.forwardRef( {...restProps} {...attributes} style={{ - top: virtualItem?.start, + top: + rowVirtualizer && virtualItem + ? virtualItem.start - rowVirtualizer.options.scrollMargin + : undefined, ...style, ...attributes?.style, }} diff --git a/src/components/BaseTable/BaseTable.tsx b/src/components/BaseTable/BaseTable.tsx index 48b7966..f82f49f 100644 --- a/src/components/BaseTable/BaseTable.tsx +++ b/src/components/BaseTable/BaseTable.tsx @@ -31,6 +31,8 @@ export interface BaseTableProps; /** CSS classes for the `` element */ bodyClassName?: string; + /** Ref for the `` element */ + bodyRef?: React.Ref; /** HTML attributes for the `` */ cellAttributes?: BaseRowProps['cellAttributes']; /** CSS classes for the `` */ @@ -110,6 +112,7 @@ export const BaseTable = React.forwardRef( attributes, bodyAttributes, bodyClassName, + bodyRef, cellAttributes, cellClassName, className, @@ -252,6 +255,7 @@ export const BaseTable = React.forwardRef( )} { }, }); + const bodyRef = React.useRef(null); + const rowVirtualizer = useWindowRowVirtualizer({ count: table.getRowModel().rows.length, estimateSize: () => 20, overscan: 5, + scrollMargin: bodyRef.current?.offsetTop ?? 0, }); return ( @@ -49,6 +52,7 @@ export const GroupingWithVirtualizationStory = () => { className={cnVirtualizationStory()} headerClassName={cnVirtualizationStory('header')} stickyHeader + bodyRef={bodyRef} /> ); }; diff --git a/src/components/BaseTable/__stories__/stories/ReorderingWithVirtualizationStory.tsx b/src/components/BaseTable/__stories__/stories/ReorderingWithVirtualizationStory.tsx index 49205e9..4df5db9 100644 --- a/src/components/BaseTable/__stories__/stories/ReorderingWithVirtualizationStory.tsx +++ b/src/components/BaseTable/__stories__/stories/ReorderingWithVirtualizationStory.tsx @@ -28,11 +28,14 @@ export const ReorderingWithVirtualizationStory = () => { getRowId: (item) => item.id, }); + const bodyRef = React.useRef(null); + const rowVirtualizer = useWindowRowVirtualizer({ count: table.getRowModel().rows.length, estimateSize: () => 20, overscan: 5, rangeExtractor: getVirtualRowRangeExtractor(tableRef.current), + scrollMargin: bodyRef.current?.offsetTop ?? 0, }); const handleReorder = React.useCallback< @@ -62,6 +65,7 @@ export const ReorderingWithVirtualizationStory = () => { { getRowId: (item) => item.id, }); + const bodyRef = React.useRef(null); + const rowVirtualizer = useWindowRowVirtualizer({ count: table.getRowModel().rows.length, estimateSize: () => 20, overscan: 5, + scrollMargin: bodyRef.current?.offsetTop ?? 0, }); return ( @@ -31,6 +34,7 @@ export const WindowVirtualizationStory = () => { className={cnVirtualizationStory()} headerClassName={cnVirtualizationStory('header')} stickyHeader + bodyRef={bodyRef} /> ); }; diff --git a/src/components/Table/__stories__/stories/ReorderingWithVirtualizationStory.tsx b/src/components/Table/__stories__/stories/ReorderingWithVirtualizationStory.tsx index 913929f..dea0829 100644 --- a/src/components/Table/__stories__/stories/ReorderingWithVirtualizationStory.tsx +++ b/src/components/Table/__stories__/stories/ReorderingWithVirtualizationStory.tsx @@ -24,11 +24,14 @@ export const ReorderingWithVirtualizationStory = () => { getRowId: (item) => item.id, }); + const bodyRef = React.useRef(null); + const rowVirtualizer = useWindowRowVirtualizer({ count: table.getRowModel().rows.length, estimateSize: () => 20, overscan: 5, rangeExtractor: getVirtualRowRangeExtractor(tableRef.current), + scrollMargin: bodyRef.current?.offsetTop ?? 0, }); const handleReorder = React.useCallback< @@ -56,7 +59,13 @@ export const ReorderingWithVirtualizationStory = () => { return ( -
` elements inside `
` elements inside `
+
); }; diff --git a/src/components/Table/__stories__/stories/WindowVirtualizationStory.tsx b/src/components/Table/__stories__/stories/WindowVirtualizationStory.tsx index 4caa538..04f6c52 100644 --- a/src/components/Table/__stories__/stories/WindowVirtualizationStory.tsx +++ b/src/components/Table/__stories__/stories/WindowVirtualizationStory.tsx @@ -14,11 +14,14 @@ export const WindowVirtualizationStory = () => { getRowId: (item) => item.id, }); + const bodyRef = React.useRef(null); + const rowVirtualizer = useWindowRowVirtualizer({ count: table.getRowModel().rows.length, estimateSize: () => 40, overscan: 5, + scrollMargin: bodyRef.current?.offsetTop ?? 0, }); - return
; + return
; };