fix(BaseTable): take offset into account when virtualizing (#65)

gravity-ui · Oct 4, 2024 · af52206 · af52206
1 parent 0f4eaef
commit af52206
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -316,13 +316,16 @@ const WindowVirtualizationExample = () => {
     getRowId: (item) => item.id,
   });
 
+  const bodyRef = React.useRef<HTMLTableSectionElement>(null);
+
   const rowVirtualizer = useWindowRowVirtualizer({
     count: table.getRowModel().rows.length,
     estimateSize: () => 20,
     overscan: 5,
+    scrollMargin: bodyRef.current?.offsetTop ?? 0,
   });
 
-  return <Table table={table} rowVirtualizer={rowVirtualizer} />;
+  return <Table table={table} rowVirtualizer={rowVirtualizer} bodyRef={bodyRef} />;
 };
 ```
 

diff --git 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
@@ -31,6 +31,8 @@ export interface BaseTableProps<TData, TScrollElement extends Element | Window =
     bodyAttributes?: React.HTMLAttributes<HTMLTableSectionElement>;
     /** CSS classes for the `<tbody>` element */
     bodyClassName?: string;
+    /** Ref for the `<tbody>` element */
+    bodyRef?: React.Ref<HTMLTableSectionElement>;
     /** HTML attributes for the `<td>` elements inside `<tbody>` */
     cellAttributes?: BaseRowProps<TData>['cellAttributes'];
     /** CSS classes for the `<td>` elements inside `<tbody>` */
@@ -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(
                     </thead>
                 )}
                 <tbody
+                    ref={bodyRef}
                     className={b('body', bodyClassName)}
                     {...bodyAttributes}
                     style={{

diff --git a/src/components/BaseTable/__stories__/stories/GroupingWithVirtualizationStory.tsx b/src/components/BaseTable/__stories__/stories/GroupingWithVirtualizationStory.tsx
@@ -34,10 +34,13 @@ export const GroupingWithVirtualizationStory = () => {
         },
     });
 
+    const bodyRef = React.useRef<HTMLTableSectionElement>(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
@@ -28,11 +28,14 @@ export const ReorderingWithVirtualizationStory = () => {
         getRowId: (item) => item.id,
     });
 
+    const bodyRef = React.useRef<HTMLTableSectionElement>(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 = () => {
         <ReorderingProvider table={table} onReorder={handleReorder}>
             <BaseTable
                 ref={tableRef}
+                bodyRef={bodyRef}
                 table={table}
                 rowVirtualizer={rowVirtualizer}
                 stickyHeader

diff --git a/src/components/BaseTable/__stories__/stories/WindowVirtualizationStory.tsx b/src/components/BaseTable/__stories__/stories/WindowVirtualizationStory.tsx
@@ -18,10 +18,13 @@ export const WindowVirtualizationStory = () => {
         getRowId: (item) => item.id,
     });
 
+    const bodyRef = React.useRef<HTMLTableSectionElement>(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
@@ -24,11 +24,14 @@ export const ReorderingWithVirtualizationStory = () => {
         getRowId: (item) => item.id,
     });
 
+    const bodyRef = React.useRef<HTMLTableSectionElement>(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 (
         <ReorderingProvider table={table} onReorder={handleReorder}>
-            <Table ref={tableRef} table={table} rowVirtualizer={rowVirtualizer} stickyHeader />
+            <Table
+                ref={tableRef}
+                bodyRef={bodyRef}
+                table={table}
+                rowVirtualizer={rowVirtualizer}
+                stickyHeader
+            />
         </ReorderingProvider>
     );
 };
diff --git 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<HTMLTableSectionElement>(null);
+
     const rowVirtualizer = useWindowRowVirtualizer({
         count: table.getRowModel().rows.length,
         estimateSize: () => 40,
         overscan: 5,
+        scrollMargin: bodyRef.current?.offsetTop ?? 0,
     });
 
-    return <Table table={table} rowVirtualizer={rowVirtualizer} stickyHeader />;
+    return <Table table={table} rowVirtualizer={rowVirtualizer} stickyHeader bodyRef={bodyRef} />;
 };