fix: review fixes

Author: astandrik

src/components/PaginatedTable/PaginatedTable.tsx

@@ -67,14 +67,19 @@ export const PaginatedTable = <T, F>({
 
     const tableRef = React.useRef<HTMLDivElement>(null);
 
-    const chunks = useScrollBasedChunks({
+    const activeChunks = useScrollBasedChunks({
         parentRef,
         tableRef,
         totalItems: foundEntities,
         rowHeight,
         chunkSize,
     });
 
+    const lastChunkSize = React.useMemo(
+        () => foundEntities % chunkSize || chunkSize,
+        [foundEntities, chunkSize],
+    );
+
     const handleDataFetched = React.useCallback((total: number, found: number) => {
         setTotalEntities(total);
         setFoundEntities(found);
@@ -102,11 +107,11 @@ export const PaginatedTable = <T, F>({
             );
         }
 
-        return chunks.map((itemsCount, index) => (
+        return activeChunks.map((isActive, index) => (
             <TableChunk<T, F>
                 key={index}
                 id={index}
-                itemsCount={itemsCount}
+                calculatedCount={index === activeChunks.length - 1 ? lastChunkSize : chunkSize}
                 chunkSize={chunkSize}
                 rowHeight={rowHeight}
                 columns={columns}
@@ -117,7 +122,7 @@ export const PaginatedTable = <T, F>({
                 getRowClassName={getRowClassName}
                 renderErrorMessage={renderErrorMessage}
                 onDataFetched={handleDataFetched}
-                isActive={Boolean(itemsCount)}
+                isActive={isActive}
             />
         ));
     };

src/components/PaginatedTable/TableChunk.tsx

@@ -16,7 +16,7 @@ interface TableChunkProps<T, F> {
     id: number;
     chunkSize: number;
     rowHeight: number;
-    itemsCount: number;
+    calculatedCount: number;
     columns: Column<T>[];
     filters?: F;
     sortParams?: SortParams;
@@ -33,7 +33,7 @@ interface TableChunkProps<T, F> {
 export const TableChunk = typedMemo(function TableChunk<T, F>({
     id,
     chunkSize,
-    itemsCount,
+    calculatedCount,
     rowHeight,
     columns,
     fetchData,
@@ -88,7 +88,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
         }
     }, [currentData, isActive, onDataFetched]);
 
-    const dataLength = currentData?.data?.length || itemsCount || chunkSize;
+    const dataLength = currentData?.data?.length || calculatedCount;
 
     const renderContent = () => {
         if (!isActive) {

src/components/PaginatedTable/useScrollBasedChunks.ts

@@ -23,7 +23,7 @@ export const useScrollBasedChunks = ({
     rowHeight,
     chunkSize,
     overscanCount = DEFAULT_OVERSCAN_COUNT,
-}: UseScrollBasedChunksProps): number[] => {
+}: UseScrollBasedChunksProps): boolean[] => {
     const chunksCount = React.useMemo(
         () => Math.ceil(totalItems / chunkSize),
         [chunkSize, totalItems],
@@ -82,15 +82,11 @@ export const useScrollBasedChunks = ({
     }, [handleScroll, parentRef]);
 
     return React.useMemo(() => {
-        // 0 items represent inactive chunk
-        const chunks = Array(chunksCount).fill(0);
-        for (let i = startChunk; i < endChunk; i++) {
-            chunks[i] = chunkSize;
+        // boolean array that represents active chunks
+        const activeChunks = Array(chunksCount).fill(false);
+        for (let i = startChunk; i <= endChunk; i++) {
+            activeChunks[i] = true;
         }
-
-        const lastChunkSize = totalItems % chunkSize || chunkSize;
-        chunks[endChunk] = endChunk === chunksCount - 1 ? lastChunkSize : chunkSize;
-
-        return chunks;
-    }, [chunksCount, startChunk, endChunk, totalItems, chunkSize]);
+        return activeChunks;
+    }, [chunksCount, startChunk, endChunk]);
 };

src/components/PaginatedTable/utils.tsx

@@ -28,6 +28,22 @@ export function calculateColumnWidth(newWidth: number, minWidth = 40, maxWidth =
 
 export const typedMemo: <T>(Component: T) => T = React.memo;
 
+/**
+ * Calculates the total vertical offset (distance from top) of an element relative to its container
+ * or the document body if no container is specified.
+ *
+ * This function traverses up through the DOM tree, accumulating offsetTop values
+ * from each parent element until it reaches either the specified container or
+ * the top of the document.
+ *
+ * @param element - The HTML element to calculate the offset for
+ * @param container - Optional container element to stop the calculation at
+ * @returns The total vertical offset in pixels
+ *
+ * Example:
+ * const offset = calculateElementOffsetTop(myElement, myContainer);
+ * // Returns the distance in pixels from myElement to the top of myContainer
+ */
 export function calculateElementOffsetTop(element: HTMLElement, container?: HTMLElement): number {
     let currentElement = element;
     let offsetTop = 0;