fix: some refinements

Author: astandrik

src/components/PaginatedTable/PaginatedTable.tsx

@@ -19,9 +19,13 @@ import type {
     SortParams,
 } from './types';
 import {useScrollBasedChunks} from './useScrollBasedChunks';
+import {calculateElementOffsetTop} from './utils';
 
 import './PaginatedTable.scss';
 
+const HEADER_HEIGHT = 40;
+const CONTROLS_HEIGHT = 50;
+
 export interface PaginatedTableProps<T, F> {
     limit: number;
     initialEntitiesCount?: number;
@@ -57,7 +61,7 @@ export const PaginatedTable = <T, F>({
     renderEmptyDataMessage,
     containerClassName,
 }: PaginatedTableProps<T, F>) => {
-    const initialTotal = initialEntitiesCount || 1;
+    const initialTotal = initialEntitiesCount || 0;
     const initialFound = initialEntitiesCount || 1;
 
     const [sortParams, setSortParams] = React.useState<SortParams | undefined>(initialSortParams);
@@ -75,25 +79,19 @@ export const PaginatedTable = <T, F>({
         chunkSize,
     });
 
-    const handleDataFetched = React.useCallback(
-        (total: number, found: number) => {
-            if (total !== totalEntities) {
-                setTotalEntities(total);
-            }
-
-            if (found !== foundEntities) {
-                setFoundEntities(found);
-            }
-
-            setIsInitialLoad(false);
-        },
-        [foundEntities, totalEntities],
-    );
+    const handleDataFetched = React.useCallback((total: number, found: number) => {
+        setTotalEntities(total);
+        setFoundEntities(found);
+        setIsInitialLoad(false);
+    }, []);
 
     // reset table on filters change
     React.useLayoutEffect(() => {
         if (parentRef?.current && tableRef.current && !initialTotal) {
-            parentRef.current.scrollTo(0, tableRef.current.offsetTop);
+            parentRef.current.scrollTo({
+                left: 0,
+                top: calculateElementOffsetTop(tableRef.current) - HEADER_HEIGHT - CONTROLS_HEIGHT,
+            });
         }
         setTotalEntities(initialTotal);
         setFoundEntities(initialFound);

src/components/PaginatedTable/useScrollBasedChunks.ts

@@ -2,6 +2,8 @@ import React from 'react';
 
 import {throttle} from 'lodash';
 
+import {calculateElementOffsetTop} from './utils';
+
 interface UseScrollBasedChunksProps {
     parentRef: React.RefObject<HTMLElement> | null;
     tableRef: React.RefObject<HTMLElement>;
@@ -44,7 +46,7 @@ export const useScrollBasedChunks = ({
             return null;
         }
 
-        const tableOffset = table.offsetTop;
+        const tableOffset = calculateElementOffsetTop(table, container);
         const containerScroll = container.scrollTop;
         const visibleStart = Math.max(containerScroll - tableOffset, 0);
         const visibleEnd = visibleStart + container.clientHeight;

src/components/PaginatedTable/utils.tsx

@@ -27,3 +27,15 @@ export function calculateColumnWidth(newWidth: number, minWidth = 40, maxWidth =
 }
 
 export const typedMemo: <T>(Component: T) => T = React.memo;
+
+export function calculateElementOffsetTop(element: HTMLElement, container?: HTMLElement): number {
+    let currentElement = element;
+    let offsetTop = 0;
+
+    while (currentElement && currentElement !== container) {
+        offsetTop += currentElement.offsetTop;
+        currentElement = currentElement.offsetParent as HTMLElement;
+    }
+
+    return offsetTop;
+}