fix: table is not scrolled to top on sorting

Author: astandrik

src/components/PaginatedTable/PaginatedTableWithLayout.tsx

@@ -3,18 +3,45 @@ import React from 'react';
 import {TableWithControlsLayout} from '../TableWithControlsLayout/TableWithControlsLayout';
 import type {TableProps} from '../TableWithControlsLayout/TableWithControlsLayout';
 
-import {PaginatedTableProvider} from './PaginatedTableContext';
+import {PaginatedTableProvider, usePaginatedTableState} from './PaginatedTableContext';
 import type {PaginatedTableState} from './types';
 
 export interface PaginatedTableWithLayoutProps {
-    controls: React.ReactNode;
+    controls?: React.ReactNode;
     table: React.ReactNode;
     tableProps?: TableProps;
     error?: React.ReactNode;
     initialState?: Partial<PaginatedTableState>;
     fullHeight?: boolean;
 }
 
+// Internal component that has access to the paginated table context
+const TableWithAutoScrolling = ({
+    table,
+    tableProps,
+}: {
+    table: React.ReactNode;
+    tableProps?: TableProps;
+}) => {
+    const {tableState} = usePaginatedTableState();
+    const {sortParams} = tableState;
+
+    // Enhance tableProps to include sortParams in scrollDependencies
+    const enhancedTableProps = React.useMemo(
+        () => ({
+            ...tableProps,
+            scrollDependencies: [...(tableProps?.scrollDependencies || []), sortParams],
+        }),
+        [tableProps, sortParams],
+    );
+
+    return (
+        <TableWithControlsLayout.Table {...enhancedTableProps}>
+            {table}
+        </TableWithControlsLayout.Table>
+    );
+};
+
 export const PaginatedTableWithLayout = ({
     controls,
     table,
@@ -25,11 +52,11 @@ export const PaginatedTableWithLayout = ({
 }: PaginatedTableWithLayoutProps) => (
     <PaginatedTableProvider initialState={initialState}>
         <TableWithControlsLayout fullHeight={fullHeight}>
-            <TableWithControlsLayout.Controls>{controls}</TableWithControlsLayout.Controls>
+            {controls ? (
+                <TableWithControlsLayout.Controls>{controls}</TableWithControlsLayout.Controls>
+            ) : null}
             {error}
-            <TableWithControlsLayout.Table {...(tableProps || {})}>
-                {table}
-            </TableWithControlsLayout.Table>
+            <TableWithAutoScrolling table={table} tableProps={tableProps} />
         </TableWithControlsLayout>
     </PaginatedTableProvider>
 );

src/components/TableWithControlsLayout/TableWithControlsLayout.tsx

@@ -18,10 +18,12 @@ interface TableWithControlsLayoutItemProps {
     fullHeight?: boolean;
 }
 
-export interface TableProps extends TableWithControlsLayoutItemProps {
+export interface TableProps extends Omit<TableWithControlsLayoutItemProps, 'children'> {
     loading?: boolean;
     scrollContainerRef?: React.RefObject<HTMLElement>;
     scrollDependencies?: any[];
+    onSort?: (params: any) => void;
+    children?: React.ReactNode | ((props: {onSort: (params: any) => void}) => React.ReactNode);
 }
 
 export const TableWithControlsLayout = ({
@@ -56,24 +58,34 @@ TableWithControlsLayout.Table = function Table({
     className,
     scrollContainerRef,
     scrollDependencies = [],
+    onSort,
 }: TableProps) {
     // Create an internal ref for the table container
     const tableContainerRef = React.useRef<HTMLDivElement>(null);
 
     // Use the internal ref for scrolling
-    useTableScroll({
+    const {handleTableScroll} = useTableScroll({
         tableContainerRef,
         scrollContainerRef,
         dependencies: scrollDependencies,
     });
 
+    // Create a wrapper function that triggers scroll on sort
+    const handleSort = React.useCallback(
+        (params: any) => {
+            onSort?.(params); // Call original callback if provided
+            handleTableScroll(); // Trigger scroll to top
+        },
+        [onSort, handleTableScroll],
+    );
+
     if (loading) {
         return <TableSkeleton className={b('loader')} />;
     }
 
     return (
         <div ref={tableContainerRef} className={b('table', className)}>
-            {children}
+            {typeof children === 'function' ? children({onSort: handleSort}) : children}
         </div>
     );
 };

src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx

@@ -55,18 +55,26 @@ const NodeGroup = React.memo(function NodeGroup({
             expanded={isExpanded}
             onIsExpandedChange={onIsExpandedChange}
         >
-            <NodesTable
-                path={path}
-                database={database}
-                searchValue={searchValue}
-                problemFilter={'All'}
-                uptimeFilter={NodesUptimeFilterValues.All}
-                peerRoleFilter={peerRoleFilter}
-                filterGroup={name}
-                filterGroupBy={groupByParam}
-                initialEntitiesCount={count}
-                columns={columns}
-                scrollContainerRef={scrollContainerRef}
+            <PaginatedTableWithLayout
+                initialState={{sortParams: undefined}}
+                table={
+                    <NodesTable
+                        path={path}
+                        database={database}
+                        searchValue={searchValue}
+                        problemFilter={'All'}
+                        uptimeFilter={NodesUptimeFilterValues.All}
+                        peerRoleFilter={peerRoleFilter}
+                        filterGroup={name}
+                        filterGroupBy={groupByParam}
+                        initialEntitiesCount={count}
+                        columns={columns}
+                        scrollContainerRef={scrollContainerRef}
+                    />
+                }
+                tableProps={{
+                    scrollContainerRef: scrollContainerRef,
+                }}
             />
         </TableGroup>
     );

src/containers/Storage/PaginatedStorageGroups/GroupedStorageGroupsComponent.tsx

@@ -59,20 +59,28 @@ export const StorageGroupGroup = React.memo(function StorageGroupGroup({
             expanded={isExpanded}
             onIsExpandedChange={onIsExpandedChange}
         >
-            <PaginatedStorageGroupsTable
-                database={database}
-                scrollContainerRef={scrollContainerRef}
-                nodeId={nodeId}
-                groupId={groupId}
-                pDiskId={pDiskId}
-                filterGroup={name}
-                filterGroupBy={filterGroupBy}
-                searchValue={searchValue}
-                visibleEntities={'all'}
-                onShowAll={handleShowAllGroups}
-                renderErrorMessage={renderPaginatedTableErrorMessage}
-                columns={columns}
-                initialEntitiesCount={count}
+            <PaginatedTableWithLayout
+                initialState={{sortParams: undefined}}
+                table={
+                    <PaginatedStorageGroupsTable
+                        database={database}
+                        scrollContainerRef={scrollContainerRef}
+                        nodeId={nodeId}
+                        groupId={groupId}
+                        pDiskId={pDiskId}
+                        filterGroup={name}
+                        filterGroupBy={filterGroupBy}
+                        searchValue={searchValue}
+                        visibleEntities={'all'}
+                        onShowAll={handleShowAllGroups}
+                        renderErrorMessage={renderPaginatedTableErrorMessage}
+                        columns={columns}
+                        initialEntitiesCount={count}
+                    />
+                }
+                tableProps={{
+                    scrollContainerRef: scrollContainerRef,
+                }}
             />
         </TableGroup>
     );

src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx

@@ -60,21 +60,29 @@ export const StorageNodeGroup = React.memo(function StorageNodeGroup({
             expanded={isExpanded}
             onIsExpandedChange={onIsExpandedChange}
         >
-            <PaginatedStorageNodesTable
-                database={database}
-                scrollContainerRef={scrollContainerRef}
-                nodeId={nodeId}
-                groupId={groupId}
-                filterGroup={name}
-                filterGroupBy={filterGroupBy}
-                searchValue={searchValue}
-                visibleEntities={'all'}
-                nodesUptimeFilter={NodesUptimeFilterValues.All}
-                onShowAll={handleShowAllNodes}
-                renderErrorMessage={renderPaginatedTableErrorMessage}
-                columns={columns}
-                initialEntitiesCount={count}
-                onDataFetched={onDataFetched}
+            <PaginatedTableWithLayout
+                initialState={{sortParams: undefined}}
+                table={
+                    <PaginatedStorageNodesTable
+                        database={database}
+                        scrollContainerRef={scrollContainerRef}
+                        nodeId={nodeId}
+                        groupId={groupId}
+                        filterGroup={name}
+                        filterGroupBy={filterGroupBy}
+                        searchValue={searchValue}
+                        visibleEntities={'all'}
+                        nodesUptimeFilter={NodesUptimeFilterValues.All}
+                        onShowAll={handleShowAllNodes}
+                        renderErrorMessage={renderPaginatedTableErrorMessage}
+                        columns={columns}
+                        initialEntitiesCount={count}
+                        onDataFetched={onDataFetched}
+                    />
+                }
+                tableProps={{
+                    scrollContainerRef: scrollContainerRef,
+                }}
             />
         </TableGroup>
     );

src/containers/Tablets/TabletsTable.tsx

@@ -217,12 +217,15 @@ export function TabletsTable({
                 scrollDependencies={[tabletsSearch]}
                 loading={loading}
             >
-                <ResizeableDataTable
-                    columns={columns}
-                    data={filteredTablets}
-                    settings={DEFAULT_TABLE_SETTINGS}
-                    emptyDataMessage={i18n('noTabletsData')}
-                />
+                {({onSort}) => (
+                    <ResizeableDataTable
+                        columns={columns}
+                        data={filteredTablets}
+                        settings={DEFAULT_TABLE_SETTINGS}
+                        emptyDataMessage={i18n('noTabletsData')}
+                        onSort={onSort}
+                    />
+                )}
             </TableWithControlsLayout.Table>
         </TableWithControlsLayout>
     );

src/containers/Tenants/Tenants.tsx

@@ -128,7 +128,7 @@ export const Tenants = ({additionalTenantsProps, scrollContainerRef}: TenantsPro
         );
     };
 
-    const renderTable = () => {
+    const renderTable = (onSort?: (params: any) => void) => {
         const columns: Column<PreparedTenant>[] = [
             {
                 name: 'Name',
@@ -261,6 +261,7 @@ export const Tenants = ({additionalTenantsProps, scrollContainerRef}: TenantsPro
                 columns={columns}
                 settings={DEFAULT_TABLE_SETTINGS}
                 emptyDataMessage="No such tenants"
+                onSort={onSort}
             />
         );
     };
@@ -277,7 +278,7 @@ export const Tenants = ({additionalTenantsProps, scrollContainerRef}: TenantsPro
                     loading={loading}
                     scrollDependencies={[searchValue, problemFilter]}
                 >
-                    {currentData ? renderTable() : null}
+                    {({onSort}) => (currentData ? renderTable(onSort) : null)}
                 </TableWithControlsLayout.Table>
             </TableWithControlsLayout>
         </div>