diff --git a/webapp/packages/core-blocks/src/useControlledScroll.ts b/webapp/packages/core-blocks/src/useControlledScroll.ts index 0958693c0b..6bf957096e 100644 --- a/webapp/packages/core-blocks/src/useControlledScroll.ts +++ b/webapp/packages/core-blocks/src/useControlledScroll.ts @@ -15,11 +15,11 @@ export interface IScrollState { export function useControlledScroll(element: HTMLDivElement | null, state: IScrollState): void { useEffect(() => { - const box = element; - - if (box) { - box.scrollTop = state.scrollTop; - box.scrollLeft = state.scrollLeft; + if (element) { + setTimeout(() => { + element.scrollTop = state.scrollTop; + element.scrollLeft = state.scrollLeft; + }, 0); } }, [element, state]); diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.tsx index f0b4165e31..4b7c81ced5 100644 --- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.tsx +++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectPropertyTable/Table/Table.tsx @@ -8,15 +8,16 @@ import { observer } from 'mobx-react-lite'; import { useRef } from 'react'; -import DataGrid, { DataGridHandle } from 'react-data-grid'; +import DataGrid from 'react-data-grid'; import styled, { css } from 'reshadow'; import { DBObject, NavTreeResource } from '@cloudbeaver/core-app'; -import { useTable } from '@cloudbeaver/core-blocks'; +import { IScrollState, useControlledScroll, useTable } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import { Translate } from '@cloudbeaver/core-localization'; import type { ObjectPropertyInfo } from '@cloudbeaver/core-sdk'; import { useStyles } from '@cloudbeaver/core-theming'; +import { useTabLocalState } from '@cloudbeaver/core-ui'; import { isDefined, TextTools } from '@cloudbeaver/core-utils'; import { getValue } from '../../helpers'; @@ -95,10 +96,14 @@ export const Table = observer(function Table({ objects, truncated, }) { - const ref = useRef(null); + const tableContainer = useRef(null); const navTreeResource = useService(NavTreeResource); const styles = useStyles(style, baseStyles, tableStyles); const tableState = useTable(); + const tabLocalState = useTabLocalState(() => ({ scrollTop: 0, scrollLeft: 0 })); + + const scrollBox = (tableContainer.current?.firstChild as HTMLDivElement | undefined) ?? null; + useControlledScroll(scrollBox, tabLocalState); const baseObject = objects .slice() @@ -126,9 +131,8 @@ export const Table = observer(function Table({ return styled(styles)( - + row.id}