chore: refactor paginated tables

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,
@@ -31,9 +29,9 @@ export interface PaginatedTableProps<T, F> {
     getRowClassName?: GetRowClassName<T>;
     rowHeight?: number;
     parentRef: React.RefObject<HTMLElement>;
+    tableContainerRef: React.RefObject<HTMLDivElement>;
     initialSortParams?: SortParams;
     onColumnsResize?: HandleTableColumnsResize;
-    renderControls?: RenderControls;
     renderEmptyDataMessage?: RenderEmptyDataMessage;
     renderErrorMessage?: RenderErrorMessage;
     containerClassName?: string;
@@ -53,22 +51,38 @@ export const PaginatedTable = <T, F>({
     getRowClassName,
     rowHeight = DEFAULT_TABLE_ROW_HEIGHT,
     parentRef,
+    tableContainerRef,
     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;
 
-    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);
+    // Initialize state with props if available
+    React.useEffect(() => {
+        if (initialSortParams) {
+            setSortParams(initialSortParams);
+        }
+
+        if (initialEntitiesCount) {
+            setTotalEntities(initialEntitiesCount);
+            setFoundEntities(initialEntitiesCount);
+        }
+    }, [
+        setSortParams,
+        setTotalEntities,
+        setFoundEntities,
+        initialSortParams,
+        initialEntitiesCount,
+    ]);
 
     const tableRef = React.useRef<HTMLDivElement>(null);
 
@@ -105,18 +119,34 @@ export const PaginatedTable = <T, F>({
                 onDataFetched?.(data);
             }
         },
-        [onDataFetched],
+        [onDataFetched, setFoundEntities, setIsInitialLoad, setTotalEntities],
     );
 
     // 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);
+
+        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, initialFound, initialTotal, parentRef]);
+    }, [
+        rawFilters,
+        initialEntitiesCount,
+        tableContainerRef,
+        setTotalEntities,
+        setFoundEntities,
+        setIsInitialLoad,
+        parentRef,
+    ]);
 
     const renderChunks = () => {
         return activeChunks.map((isActive, index) => (
@@ -148,24 +178,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/ResizeablePaginatedTable.tsx

@@ -5,7 +5,7 @@ import {useTableResize} from '../../utils/hooks/useTableResize';
 import type {PaginatedTableProps} from './PaginatedTable';
 import {PaginatedTable} from './PaginatedTable';
 import {b} from './shared';
-import type {Column} from './types';
+import type {Column, PaginatedTableState} from './types';
 
 function updateColumnsWidth<T>(columns: Column<T>[], columnsWidthSetup: ColumnWidthByName) {
     return columns.map((column) => {
@@ -16,11 +16,13 @@ function updateColumnsWidth<T>(columns: Column<T>[], columnsWidthSetup: ColumnWi
 interface ResizeablePaginatedTableProps<T, F>
     extends Omit<PaginatedTableProps<T, F>, 'onColumnsResize'> {
     columnsWidthLSKey: string;
+    onStateChange?: (state: PaginatedTableState) => void;
 }
 
 export function ResizeablePaginatedTable<T, F>({
     columnsWidthLSKey,
     columns,
+    tableContainerRef,
     ...props
 }: ResizeablePaginatedTableProps<T, F>) {
     const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
@@ -29,6 +31,7 @@ export function ResizeablePaginatedTable<T, F>({
 
     return (
         <PaginatedTable
+            tableContainerRef={tableContainerRef}
             columns={updatedColumns}
             onColumnsResize={setTableColumnsWidth}
             containerClassName={b('resizeable-table-container')}

src/components/PaginatedTable/types.ts

@@ -58,6 +58,13 @@ export type FetchData<T, F = undefined, E = {}> = (
 
 export type OnError = (error?: IResponseError) => void;
 
+export interface PaginatedTableState {
+    sortParams?: SortParams;
+    totalEntities: number;
+    foundEntities: number;
+    isInitialLoad: boolean;
+}
+
 interface ControlsParams {
     totalEntities: number;
     foundEntities: number;

src/components/TableWithControlsLayout/TableWithControlsLayout.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {cn} from '../../utils/cn';
 import {TableSkeleton} from '../TableSkeleton/TableSkeleton';
 
@@ -32,10 +34,17 @@ TableWithControlsLayout.Controls = function TableControls({
     );
 };
 
-TableWithControlsLayout.Table = function Table({children, loading, className}: TableProps) {
+TableWithControlsLayout.Table = React.forwardRef<HTMLDivElement, TableProps>(function Table(
+    {children, loading, className},
+    ref,
+) {
     if (loading) {
         return <TableSkeleton className={b('loader')} />;
     }
 
-    return <div className={b('table', className)}>{children}</div>;
-};
+    return (
+        <div ref={ref} className={b('table', className)}>
+            {children}
+        </div>
+    );
+});