fix: better code

Author: astandrik

src/components/PaginatedTable/PaginatedTableWithLayout.tsx

@@ -9,7 +9,7 @@ import type {PaginatedTableState} from './types';
 export interface PaginatedTableWithLayoutProps {
     controls?: React.ReactNode;
     table: React.ReactNode;
-    tableWrapperProps?: TableWrapperProps;
+    tableWrapperProps?: Omit<TableWrapperProps, 'children'>;
     error?: React.ReactNode;
     initialState?: Partial<PaginatedTableState>;
     fullHeight?: boolean;
@@ -20,7 +20,7 @@ const TableWrapper = ({
     tableWrapperProps,
 }: {
     table: React.ReactNode;
-    tableWrapperProps?: TableWrapperProps;
+    tableWrapperProps?: Omit<TableWrapperProps, 'children'>;
 }) => {
     const {tableState} = usePaginatedTableState();
     const {sortParams} = tableState;

src/components/ResizeableDataTable/ResizeableDataTable.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type {Column, DataTableProps, Settings} from '@gravity-ui/react-data-table';
 import DataTable, {updateColumnsWidth} from '@gravity-ui/react-data-table';
 import {Skeleton} from '@gravity-ui/uikit';
@@ -13,6 +15,7 @@ export interface ResizeableDataTableProps<T> extends Omit<DataTableProps<T>, 'th
     columnsWidthLSKey?: string;
     wrapperClassName?: string;
     loading?: boolean;
+    onSortChange?: (params: any) => void;
 }
 
 export function ResizeableDataTable<T>({
@@ -21,10 +24,20 @@ export function ResizeableDataTable<T>({
     settings,
     wrapperClassName,
     loading,
+    onSort,
+    onSortChange,
     ...props
 }: ResizeableDataTableProps<T>) {
     const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
 
+    const handleSort = React.useCallback(
+        (params: any) => {
+            onSort?.(params); // Original onSort if provided
+            onSortChange?.(params); // Expose sort params to parent
+        },
+        [onSort, onSortChange],
+    );
+
     // If loading is true, override the render method of each column to display a Skeleton
     const processedColumns = loading
         ? columns.map((column: Column<T>) => ({
@@ -46,6 +59,7 @@ export function ResizeableDataTable<T>({
                 theme="yandex-cloud"
                 columns={updatedColumns}
                 onResize={setTableColumnsWidth}
+                onSort={handleSort}
                 settings={newSettings}
                 {...props}
             />

src/components/TableWithControlsLayout/TableWithControlsLayout.tsx

@@ -12,7 +12,7 @@ import './TableWithControlsLayout.scss';
 const b = cn('ydb-table-with-controls-layout');
 
 interface TableWithControlsLayoutItemProps {
-    children?: React.ReactNode;
+    children: React.ReactNode;
     renderExtraControls?: () => React.ReactNode;
     className?: string;
     fullHeight?: boolean;
@@ -22,10 +22,7 @@ export interface TableWrapperProps extends Omit<TableWithControlsLayoutItemProps
     loading?: boolean;
     scrollContainerRef?: React.RefObject<HTMLElement>;
     scrollDependencies?: any[];
-
-    // onSort is called with the table's sort parameters and triggers auto-scrolling.
-    onSort?: (params: any) => void;
-    children?: React.ReactNode | ((props: {onSort: (params: any) => void}) => React.ReactNode);
+    children: React.ReactNode;
 }
 
 export const TableWithControlsLayout = ({
@@ -60,34 +57,24 @@ TableWithControlsLayout.Table = function Table({
     className,
     scrollContainerRef,
     scrollDependencies = [],
-    onSort,
 }: TableWrapperProps) {
     // Create an internal ref for the table container
     const tableContainerRef = React.useRef<HTMLDivElement>(null);
 
     // Use the internal ref for scrolling
-    const {handleTableScroll} = useTableScroll({
+    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)}>
-            {typeof children === 'function' ? children({onSort: handleSort}) : children}
+            {children}
         </div>
     );
 };

src/containers/Tablets/TabletsTable.tsx

@@ -183,6 +183,9 @@ export function TabletsTable({
         tabletsSearch: StringParam,
     });
 
+    // Track sort state for scroll dependencies
+    const [sortParams, setSortParams] = React.useState<any>();
+
     const columns = React.useMemo(() => getColumns({database}), [database]);
 
     const filteredTablets = React.useMemo(() => {
@@ -214,18 +217,16 @@ export function TabletsTable({
             {error ? <ResponseError error={error} /> : null}
             <TableWithControlsLayout.Table
                 scrollContainerRef={scrollContainerRef}
-                scrollDependencies={[tabletsSearch]}
+                scrollDependencies={[tabletsSearch, sortParams]}
                 loading={loading}
             >
-                {({onSort}) => (
-                    <ResizeableDataTable
-                        columns={columns}
-                        data={filteredTablets}
-                        settings={DEFAULT_TABLE_SETTINGS}
-                        emptyDataMessage={i18n('noTabletsData')}
-                        onSort={onSort}
-                    />
-                )}
+                <ResizeableDataTable
+                    columns={columns}
+                    data={filteredTablets}
+                    settings={DEFAULT_TABLE_SETTINGS}
+                    emptyDataMessage={i18n('noTabletsData')}
+                    onSortChange={setSortParams}
+                />
             </TableWithControlsLayout.Table>
         </TableWithControlsLayout>
     );

src/containers/Tenants/Tenants.tsx

@@ -70,6 +70,9 @@ export const Tenants = ({additionalTenantsProps, scrollContainerRef}: TenantsPro
     );
     const loading = isFetching && currentData === undefined;
 
+    // Track sort state for scroll dependencies
+    const [sortParams, setSortParams] = React.useState<any>();
+
     const isCreateDBAvailable =
         useCreateDatabaseFeatureAvailable() && uiFactory.onCreateDB !== undefined;
     const isEditDBAvailable = useEditDatabaseFeatureAvailable() && uiFactory.onEditDB !== undefined;
@@ -128,7 +131,7 @@ export const Tenants = ({additionalTenantsProps, scrollContainerRef}: TenantsPro
         );
     };
 
-    const renderTable = (onSort?: (params: any) => void) => {
+    const renderTable = () => {
         const columns: Column<PreparedTenant>[] = [
             {
                 name: 'Name',
@@ -261,7 +264,7 @@ export const Tenants = ({additionalTenantsProps, scrollContainerRef}: TenantsPro
                 columns={columns}
                 settings={DEFAULT_TABLE_SETTINGS}
                 emptyDataMessage="No such tenants"
-                onSort={onSort}
+                onSortChange={setSortParams}
             />
         );
     };
@@ -276,9 +279,9 @@ export const Tenants = ({additionalTenantsProps, scrollContainerRef}: TenantsPro
                 <TableWithControlsLayout.Table
                     scrollContainerRef={scrollContainerRef}
                     loading={loading}
-                    scrollDependencies={[searchValue, problemFilter]}
+                    scrollDependencies={[searchValue, problemFilter, sortParams]}
                 >
-                    {({onSort}) => (currentData ? renderTable(onSort) : null)}
+                    {currentData ? renderTable() : null}
                 </TableWithControlsLayout.Table>
             </TableWithControlsLayout>
         </div>