fix: paginated table in groups scrolled to top on refresh (#2291)

Author: astandrik

src/components/PaginatedTable/PaginatedTable.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import {TableWithControlsLayout} from '../TableWithControlsLayout/TableWithControlsLayout';
-
+import {usePaginatedTableState} from './PaginatedTableContext';
 import {TableChunk} from './TableChunk';
 import {TableHead} from './TableHead';
 import {DEFAULT_TABLE_ROW_HEIGHT} from './constants';
@@ -12,7 +11,6 @@ import type {
     GetRowClassName,
     HandleTableColumnsResize,
     PaginatedTableData,
-    RenderControls,
     RenderEmptyDataMessage,
     RenderErrorMessage,
     SortParams,
@@ -30,10 +28,9 @@ export interface PaginatedTableProps<T, F> {
     columns: Column<T>[];
     getRowClassName?: GetRowClassName<T>;
     rowHeight?: number;
-    parentRef: React.RefObject<HTMLElement>;
+    scrollContainerRef: React.RefObject<HTMLElement>;
     initialSortParams?: SortParams;
     onColumnsResize?: HandleTableColumnsResize;
-    renderControls?: RenderControls;
     renderEmptyDataMessage?: RenderEmptyDataMessage;
     renderErrorMessage?: RenderErrorMessage;
     containerClassName?: string;
@@ -52,28 +49,43 @@ export const PaginatedTable = <T, F>({
     columns,
     getRowClassName,
     rowHeight = DEFAULT_TABLE_ROW_HEIGHT,
-    parentRef,
+    scrollContainerRef,
     initialSortParams,
     onColumnsResize,
-    renderControls,
     renderErrorMessage,
     renderEmptyDataMessage,
     containerClassName,
     onDataFetched,
     keepCache = true,
 }: PaginatedTableProps<T, F>) => {
-    const initialTotal = initialEntitiesCount || 0;
-    const initialFound = initialEntitiesCount || 1;
+    // Get state and setters from context
+    const {tableState, setSortParams, setTotalEntities, setFoundEntities, setIsInitialLoad} =
+        usePaginatedTableState();
+
+    const {sortParams, foundEntities} = tableState;
+
+    // Initialize state with props if available
+    React.useEffect(() => {
+        if (initialSortParams) {
+            setSortParams(initialSortParams);
+        }
 
-    const [sortParams, setSortParams] = React.useState<SortParams | undefined>(initialSortParams);
-    const [totalEntities, setTotalEntities] = React.useState(initialTotal);
-    const [foundEntities, setFoundEntities] = React.useState(initialFound);
-    const [isInitialLoad, setIsInitialLoad] = React.useState(true);
+        if (initialEntitiesCount) {
+            setTotalEntities(initialEntitiesCount);
+            setFoundEntities(initialEntitiesCount);
+        }
+    }, [
+        setSortParams,
+        setTotalEntities,
+        setFoundEntities,
+        initialSortParams,
+        initialEntitiesCount,
+    ]);
 
     const tableRef = React.useRef<HTMLDivElement>(null);
 
     const activeChunks = useScrollBasedChunks({
-        parentRef,
+        scrollContainerRef,
         tableRef,
         totalItems: foundEntities,
         rowHeight,
@@ -105,18 +117,18 @@ export const PaginatedTable = <T, F>({
                 onDataFetched?.(data);
             }
         },
-        [onDataFetched],
+        [onDataFetched, setFoundEntities, setIsInitialLoad, setTotalEntities],
     );
 
-    // reset table on filters change
+    // Reset table on filters change
     React.useLayoutEffect(() => {
-        setTotalEntities(initialTotal);
-        setFoundEntities(initialFound);
+        const defaultTotal = initialEntitiesCount || 0;
+        const defaultFound = initialEntitiesCount || 1;
+
+        setTotalEntities(defaultTotal);
+        setFoundEntities(defaultFound);
         setIsInitialLoad(true);
-        if (parentRef?.current) {
-            parentRef.current.scrollTo(0, 0);
-        }
-    }, [rawFilters, initialFound, initialTotal, parentRef]);
+    }, [initialEntitiesCount, setTotalEntities, setFoundEntities, setIsInitialLoad]);
 
     const renderChunks = () => {
         return activeChunks.map((isActive, index) => (
@@ -148,24 +160,9 @@ export const PaginatedTable = <T, F>({
         </table>
     );
 
-    const renderContent = () => {
-        if (renderControls) {
-            return (
-                <TableWithControlsLayout>
-                    <TableWithControlsLayout.Controls>
-                        {renderControls({inited: !isInitialLoad, totalEntities, foundEntities})}
-                    </TableWithControlsLayout.Controls>
-                    <TableWithControlsLayout.Table>{renderTable()}</TableWithControlsLayout.Table>
-                </TableWithControlsLayout>
-            );
-        }
-
-        return renderTable();
-    };
-
     return (
         <div ref={tableRef} className={b(null, containerClassName)}>
-            {renderContent()}
+            {renderTable()}
         </div>
     );
 };

src/components/PaginatedTable/PaginatedTableContext.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+
+import type {PaginatedTableState} from './types';
+
+// Default state for the table
+const defaultTableState: PaginatedTableState = {
+    sortParams: undefined,
+    totalEntities: 0,
+    foundEntities: 0,
+    isInitialLoad: true,
+};
+
+// Context type definition
+interface PaginatedTableStateContextType {
+    // State
+    tableState: PaginatedTableState;
+
+    // Granular setters
+    setSortParams: (params: PaginatedTableState['sortParams']) => void;
+    setTotalEntities: (total: number) => void;
+    setFoundEntities: (found: number) => void;
+    setIsInitialLoad: (isInitial: boolean) => void;
+}
+
+// Creating the context with default values
+export const PaginatedTableStateContext = React.createContext<PaginatedTableStateContextType>({
+    tableState: defaultTableState,
+    setSortParams: () => undefined,
+    setTotalEntities: () => undefined,
+    setFoundEntities: () => undefined,
+    setIsInitialLoad: () => undefined,
+});
+
+// Provider component props
+interface PaginatedTableStateProviderProps {
+    children: React.ReactNode;
+    initialState?: Partial<PaginatedTableState>;
+}
+
+// Provider component
+export const PaginatedTableProvider = ({
+    children,
+    initialState = {},
+}: PaginatedTableStateProviderProps) => {
+    // Use individual state variables for each field
+    const [sortParams, setSortParams] = React.useState<PaginatedTableState['sortParams']>(
+        initialState.sortParams ?? defaultTableState.sortParams,
+    );
+    const [totalEntities, setTotalEntities] = React.useState<number>(
+        initialState.totalEntities ?? defaultTableState.totalEntities,
+    );
+    const [foundEntities, setFoundEntities] = React.useState<number>(
+        initialState.foundEntities ?? defaultTableState.foundEntities,
+    );
+    const [isInitialLoad, setIsInitialLoad] = React.useState<boolean>(
+        initialState.isInitialLoad ?? defaultTableState.isInitialLoad,
+    );
+
+    // Construct tableState from individual state variables
+    const tableState = React.useMemo(
+        () => ({
+            sortParams,
+            totalEntities,
+            foundEntities,
+            isInitialLoad,
+        }),
+        [sortParams, totalEntities, foundEntities, isInitialLoad],
+    );
+
+    // Create the context value with the constructed tableState and direct setters
+    const contextValue = React.useMemo(
+        () => ({
+            tableState,
+            setSortParams,
+            setTotalEntities,
+            setFoundEntities,
+            setIsInitialLoad,
+        }),
+        [tableState, setSortParams, setTotalEntities, setFoundEntities, setIsInitialLoad],
+    );
+
+    return (
+        <PaginatedTableStateContext.Provider value={contextValue}>
+            {children}
+        </PaginatedTableStateContext.Provider>
+    );
+};
+
+// Custom hook for consuming the context
+export const usePaginatedTableState = () => {
+    const context = React.useContext(PaginatedTableStateContext);
+
+    if (context === undefined) {
+        throw new Error('usePaginatedTableState must be used within a PaginatedTableStateProvider');
+    }
+
+    return context;
+};

src/components/PaginatedTable/PaginatedTableWithLayout.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {TableWithControlsLayout} from '../TableWithControlsLayout/TableWithControlsLayout';
+import type {TableProps} from '../TableWithControlsLayout/TableWithControlsLayout';
+
+import {PaginatedTableProvider} from './PaginatedTableContext';
+import type {PaginatedTableState} from './types';
+
+export interface PaginatedTableWithLayoutProps {
+    controls: React.ReactNode;
+    table: React.ReactNode;
+    tableProps?: TableProps;
+    error?: React.ReactNode;
+    initialState?: Partial<PaginatedTableState>;
+    fullHeight?: boolean;
+}
+
+export const PaginatedTableWithLayout = ({
+    controls,
+    table,
+    tableProps,
+    error,
+    initialState,
+    fullHeight = true,
+}: PaginatedTableWithLayoutProps) => (
+    <PaginatedTableProvider initialState={initialState}>
+        <TableWithControlsLayout fullHeight={fullHeight}>
+            <TableWithControlsLayout.Controls>{controls}</TableWithControlsLayout.Controls>
+            {error}
+            <TableWithControlsLayout.Table {...(tableProps || {})}>
+                {table}
+            </TableWithControlsLayout.Table>
+        </TableWithControlsLayout>
+    </PaginatedTableProvider>
+);

src/components/PaginatedTable/types.ts

@@ -58,13 +58,14 @@ export type FetchData<T, F = undefined, E = {}> = (
 
 export type OnError = (error?: IResponseError) => void;
 
-interface ControlsParams {
+export interface PaginatedTableState {
+    sortParams?: SortParams;
     totalEntities: number;
     foundEntities: number;
-    inited: boolean;
+    isInitialLoad: boolean;
 }
 
-export type RenderControls = (params: ControlsParams) => React.ReactNode;
+export type RenderControls = () => React.ReactNode;
 export type RenderEmptyDataMessage = () => React.ReactNode;
 export type RenderErrorMessage = (error: IResponseError) => React.ReactNode;
 

src/components/PaginatedTable/useScrollBasedChunks.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import {calculateElementOffsetTop, rafThrottle} from './utils';
 
 interface UseScrollBasedChunksProps {
-    parentRef: React.RefObject<HTMLElement>;
+    scrollContainerRef: React.RefObject<HTMLElement>;
     tableRef: React.RefObject<HTMLElement>;
     totalItems: number;
     rowHeight: number;
@@ -14,7 +14,7 @@ interface UseScrollBasedChunksProps {
 const DEFAULT_OVERSCAN_COUNT = 1;
 
 export const useScrollBasedChunks = ({
-    parentRef,
+    scrollContainerRef,
     tableRef,
     totalItems,
     rowHeight,
@@ -32,7 +32,7 @@ export const useScrollBasedChunks = ({
     );
 
     const calculateVisibleRange = React.useCallback(() => {
-        const container = parentRef?.current;
+        const container = scrollContainerRef?.current;
         const table = tableRef.current;
         if (!container || !table) {
             return null;
@@ -49,7 +49,7 @@ export const useScrollBasedChunks = ({
             Math.max(chunksCount - 1, 0),
         );
         return {start, end};
-    }, [parentRef, tableRef, rowHeight, chunkSize, overscanCount, chunksCount]);
+    }, [scrollContainerRef, tableRef, rowHeight, chunkSize, overscanCount, chunksCount]);
 
     const updateVisibleChunks = React.useCallback(() => {
         const newRange = calculateVisibleRange();
@@ -80,7 +80,7 @@ export const useScrollBasedChunks = ({
     }, [updateVisibleChunks]);
 
     React.useEffect(() => {
-        const container = parentRef?.current;
+        const container = scrollContainerRef?.current;
         if (!container) {
             return undefined;
         }
@@ -91,7 +91,7 @@ export const useScrollBasedChunks = ({
         return () => {
             container.removeEventListener('scroll', throttledHandleScroll);
         };
-    }, [handleScroll, parentRef]);
+    }, [handleScroll, scrollContainerRef]);
 
     return React.useMemo(() => {
         // boolean array that represents active chunks

src/components/TableWithControlsLayout/TableWithControlsLayout.scss

@@ -1,13 +1,18 @@
 @use '../../styles/mixins.scss';
 
 .ydb-table-with-controls-layout {
-    --data-table-sticky-top-offset: 62px;
+    // Total height of all fixed elements above table for sticky header positioning
+    --data-table-sticky-header-offset: 62px;
 
     display: inline-block;
 
     box-sizing: border-box;
     min-width: 100%;
 
+    &_full-height {
+        min-height: calc(100% - var(--sticky-tabs-height, 0px));
+    }
+
     &__controls-wrapper {
         z-index: 3;
 
@@ -33,11 +38,11 @@
     }
 
     .ydb-paginated-table__head {
-        top: var(--data-table-sticky-top-offset, 62px);
+        top: var(--data-table-sticky-header-offset, 62px);
     }
 
     .data-table__sticky_moving {
         // Place table head right after controls
-        top: var(--data-table-sticky-top-offset, 62px) !important;
+        top: var(--data-table-sticky-header-offset, 62px) !important;
     }
 }