fix: small refactor

Author: astandrik

src/components/PaginatedTable/PaginatedTable.tsx

@@ -71,7 +71,7 @@ export const PaginatedTable = <T, F>({
 
     const tableRef = React.useRef<HTMLDivElement>(null);
 
-    const activeChunks = useScrollBasedChunks({
+    const chunks = useScrollBasedChunks({
         parentRef,
         tableRef,
         totalItems: foundEntities,
@@ -109,12 +109,11 @@ export const PaginatedTable = <T, F>({
             );
         }
 
-        const totalItemsCount = foundEntities || chunkSize;
-        return activeChunks.map((isActive, index) => (
+        return chunks.map((itemsCount, index) => (
             <TableChunk<T, F>
                 key={index}
                 id={index}
-                totalItemsCount={totalItemsCount}
+                itemsCount={itemsCount}
                 chunkSize={chunkSize}
                 rowHeight={rowHeight}
                 columns={columns}
@@ -125,7 +124,7 @@ export const PaginatedTable = <T, F>({
                 getRowClassName={getRowClassName}
                 renderErrorMessage={renderErrorMessage}
                 onDataFetched={handleDataFetched}
-                isActive={isActive}
+                isActive={Boolean(itemsCount)}
             />
         ));
     };

src/components/PaginatedTable/TableChunk.tsx

@@ -16,7 +16,7 @@ interface TableChunkProps<T, F> {
     id: number;
     chunkSize: number;
     rowHeight: number;
-    totalItemsCount: number;
+    itemsCount: 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,
-    totalItemsCount,
+    itemsCount,
     rowHeight,
     columns,
     fetchData,
@@ -88,12 +88,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
         }
     }, [currentData, isActive, onDataFetched]);
 
-    const chunkOffset = id * chunkSize;
-    const remainingLength = totalItemsCount - chunkOffset;
-    const calculatedChunkLength =
-        remainingLength < chunkSize && remainingLength > 0 ? remainingLength : chunkSize;
-
-    const dataLength = currentData?.data?.length || calculatedChunkLength;
+    const dataLength = currentData?.data?.length || itemsCount || chunkSize;
 
     const renderContent = () => {
         if (!isActive) {
@@ -136,13 +131,11 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
         ));
     };
 
-    const chunkHeight = dataLength ? dataLength * rowHeight : chunkSize * rowHeight;
-
     return (
         <tbody
             id={id.toString()}
             style={{
-                height: `${chunkHeight}px`,
+                height: `${dataLength * rowHeight}px`,
                 // Default display: table-row-group doesn't work in Safari and breaks the table
                 // display: block works in Safari, but disconnects thead and tbody cell grids
                 // Hack to make it work in all cases

src/components/PaginatedTable/constants.ts

@@ -13,6 +13,6 @@ export const DEFAULT_SORT_ORDER = DESCENDING;
 // Time in ms after which request will be sent
 export const DEFAULT_REQUEST_TIMEOUT = 200;
 
-export const DEFAULT_TABLE_ROW_HEIGHT = 40;
+export const DEFAULT_TABLE_ROW_HEIGHT = 41;
 
 export const DEFAULT_INTERSECTION_OBSERVER_MARGIN = '100%';

src/components/PaginatedTable/useScrollBasedChunks.ts

@@ -2,6 +2,8 @@ import React from 'react';
 
 import {throttle} from 'lodash';
 
+import {getArray} from '../../utils';
+
 import {calculateElementOffsetTop} from './utils';
 
 interface UseScrollBasedChunksProps {
@@ -23,12 +25,20 @@ export const useScrollBasedChunks = ({
     rowHeight,
     chunkSize,
     overscanCount = DEFAULT_OVERSCAN_COUNT,
-}: UseScrollBasedChunksProps): boolean[] => {
+}: UseScrollBasedChunksProps): number[] => {
     const chunksCount = React.useMemo(
         () => Math.ceil(totalItems / chunkSize),
         [chunkSize, totalItems],
     );
 
+    const chunkLengths = React.useMemo(
+        () =>
+            getArray(chunksCount).map((value) =>
+                Math.min(chunkSize, totalItems - value * chunkSize),
+            ),
+        [chunkSize, chunksCount, totalItems],
+    );
+
     const [startChunk, setStartChunk] = React.useState(0);
     const [endChunk, setEndChunk] = React.useState(
         Math.min(overscanCount, Math.max(chunksCount - 1, 0)),
@@ -82,12 +92,12 @@ export const useScrollBasedChunks = ({
     }, [handleScroll, parentRef]);
 
     return React.useMemo(() => {
-        // Create boolean array where true represents active chunks
-        const activeChunks = Array(chunksCount).fill(false);
+        // 0 items represent inactive chunk
+        const chunks = Array(chunksCount).fill(0);
         for (let i = startChunk; i <= endChunk; i++) {
-            activeChunks[i] = true;
+            chunks[i] = chunkLengths[i];
         }
 
-        return activeChunks;
-    }, [endChunk, startChunk, chunksCount]);
+        return chunks;
+    }, [chunksCount, startChunk, endChunk, chunkLengths]);
 };