fix: better scrolling

Author: astandrik

src/components/PaginatedTable/PaginatedTable.tsx

@@ -16,6 +16,7 @@ import type {
     SortParams,
 } from './types';
 import {useScrollBasedChunks} from './useScrollBasedChunks';
+import {useTableScroll} from './useTableScroll';
 
 import './PaginatedTable.scss';
 
@@ -122,31 +123,23 @@ export const PaginatedTable = <T, F>({
         [onDataFetched, setFoundEntities, setIsInitialLoad, setTotalEntities],
     );
 
-    // reset table on filters change
+    // Use the extracted table scroll hook
+    // The hook handles scrolling internally based on dependencies
+    useTableScroll({
+        tableContainerRef,
+        parentRef,
+        dependencies: [rawFilters], // Add filters as a dependency to trigger scroll when they change
+    });
+
+    // Reset table on filters change
     React.useLayoutEffect(() => {
         const defaultTotal = initialEntitiesCount || 0;
         const defaultFound = initialEntitiesCount || 1;
 
         setTotalEntities(defaultTotal);
         setFoundEntities(defaultFound);
         setIsInitialLoad(true);
-
-        if (tableContainerRef.current && parentRef.current) {
-            // Scroll the parent container to the position of the table container
-            const tableRect = tableContainerRef.current.getBoundingClientRect();
-            const parentRect = parentRef.current.getBoundingClientRect();
-            const scrollTop = tableRect.top - parentRect.top + parentRef.current.scrollTop;
-            parentRef.current.scrollTo(0, scrollTop);
-        }
-    }, [
-        rawFilters,
-        initialEntitiesCount,
-        tableContainerRef,
-        setTotalEntities,
-        setFoundEntities,
-        setIsInitialLoad,
-        parentRef,
-    ]);
+    }, [initialEntitiesCount, setTotalEntities, setFoundEntities, setIsInitialLoad]);
 
     const renderChunks = () => {
         return activeChunks.map((isActive, index) => (

src/components/PaginatedTable/useTableScroll.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+
+interface UseTableScrollProps {
+    tableContainerRef: React.RefObject<HTMLDivElement>;
+    parentRef: React.RefObject<HTMLElement>;
+    dependencies?: any[]; // Optional additional dependencies for the effect
+}
+
+export const useTableScroll = ({
+    tableContainerRef,
+    parentRef,
+    dependencies = [],
+}: UseTableScrollProps) => {
+    // Get the CSS variable value for sticky top offset
+    const getStickyTopOffset = React.useCallback(() => {
+        // Try to get the variable from parent elements
+        if (tableContainerRef.current) {
+            const computedStyle = window.getComputedStyle(tableContainerRef.current);
+            const stickyTopOffset = computedStyle.getPropertyValue(
+                '--data-table-sticky-top-offset',
+            );
+
+            return stickyTopOffset ? parseInt(stickyTopOffset, 10) : 0;
+        }
+        return 0;
+    }, [tableContainerRef]);
+
+    // Handle table scrolling function
+    const handleTableScroll = React.useCallback(() => {
+        if (tableContainerRef.current && parentRef.current) {
+            // Get the sticky top offset value
+            const stickyTopOffset = getStickyTopOffset();
+
+            // Scroll the parent container to the position of the table container
+            const tableRect = tableContainerRef.current.getBoundingClientRect();
+            const parentRect = parentRef.current.getBoundingClientRect();
+            const scrollTop = tableRect.top - parentRect.top + parentRef.current.scrollTop;
+            if (tableRect.top < parentRect.top) {
+                // Adjust scroll position to account for sticky offset
+                parentRef.current.scrollTo(0, scrollTop - stickyTopOffset);
+            }
+        }
+    }, [parentRef, tableContainerRef, getStickyTopOffset]);
+
+    // Trigger scroll adjustment with dependencies
+    React.useLayoutEffect(() => {
+        handleTableScroll();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [handleTableScroll, ...dependencies]);
+
+    return {
+        handleTableScroll,
+    };
+};

src/containers/Cluster/Cluster.scss

@@ -61,8 +61,4 @@
     .ydb-table-with-controls-layout__controls-wrapper {
         top: 40px;
     }
-
-    .ydb-table-with-controls-layout {
-        --data-table-sticky-top-offset: 102px;
-    }
 }

src/containers/Nodes/Nodes.tsx

@@ -250,6 +250,7 @@ interface NodeGroupProps {
     groupByParam?: NodesGroupByField;
     columns: Column<NodesPreparedEntity>[];
     parentRef: React.RefObject<HTMLElement>;
+    tableContainerRef: React.RefObject<HTMLDivElement>;
     onIsExpandedChange: (name: string, isExpanded: boolean) => void;
 }
 
@@ -264,10 +265,9 @@ const NodeGroup = React.memo(function NodeGroup({
     groupByParam,
     columns,
     parentRef,
+    tableContainerRef,
     onIsExpandedChange,
 }: NodeGroupProps) {
-    const tableContainerRef = React.useRef<HTMLDivElement>(null);
-
     return (
         <TableGroup
             key={name}
@@ -276,7 +276,6 @@ const NodeGroup = React.memo(function NodeGroup({
             entityName={i18n('nodes')}
             expanded={isExpanded}
             onIsExpandedChange={onIsExpandedChange}
-            ref={tableContainerRef}
         >
             <NodesTable
                 path={path}
@@ -371,6 +370,7 @@ function GroupedNodesComponent({
                         groupByParam={groupByParam}
                         columns={columnsToShow}
                         parentRef={parentRef}
+                        tableContainerRef={tableContainerRef}
                         onIsExpandedChange={setIsGroupExpanded}
                     />
                 );

src/containers/Storage/PaginatedStorageGroups.tsx

@@ -94,6 +94,7 @@ interface StorageGroupGroupProps {
     visibleEntities: 'all';
     filterGroupBy?: GroupsGroupByField;
     columns: StorageGroupsColumn[];
+    tableContainerRef: React.RefObject<HTMLDivElement>;
     parentRef: React.RefObject<HTMLElement>;
     onIsExpandedChange: (name: string, isExpanded: boolean) => void;
     handleShowAllGroups: VoidFunction;
@@ -111,11 +112,10 @@ const StorageGroupGroup = React.memo(function StorageGroupGroup({
     parentRef,
     filterGroupBy,
     columns,
+    tableContainerRef,
     onIsExpandedChange,
     handleShowAllGroups,
 }: StorageGroupGroupProps) {
-    const tableContainerRef = React.useRef<HTMLDivElement>(null);
-
     return (
         <TableGroup
             key={name}
@@ -124,7 +124,6 @@ const StorageGroupGroup = React.memo(function StorageGroupGroup({
             entityName={i18n('groups')}
             expanded={isExpanded}
             onIsExpandedChange={onIsExpandedChange}
-            ref={tableContainerRef}
         >
             <PaginatedStorageGroupsTable
                 database={database}
@@ -269,6 +268,7 @@ function GroupedStorageGroupsComponent({
                         onIsExpandedChange={setIsGroupExpanded}
                         handleShowAllGroups={handleShowAllGroups}
                         columns={columnsToShow}
+                        tableContainerRef={tableContainerRef}
                     />
                 );
             });