diff --git a/.betterer.results b/.betterer.results index 0085e2e0a51..20f039f9db5 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1747,7 +1747,8 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "2"], [0, 0, 0, "Do not use any type assertions.", "3"], [0, 0, 0, "Do not use any type assertions.", "4"], - [0, 0, 0, "Unexpected any. Specify a different type.", "5"] + [0, 0, 0, "Unexpected any. Specify a different type.", "5"], + [0, 0, 0, "Do not use any type assertions.", "6"] ], "packages/grafana-ui/src/components/Table/TableCell.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx index 47a8416d0fa..e7f62d72e96 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx +++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx @@ -23,6 +23,7 @@ interface Props { setScrollTop?: (position: ScrollbarPosition) => void; autoHeightMin?: number | string; updateAfterMountMs?: number; + onScroll?: React.UIEventHandler; } /** @@ -42,6 +43,7 @@ export const CustomScrollbar: FC = ({ scrollRefCallback, updateAfterMountMs, scrollTop, + onScroll, children, }) => { const ref = useRef(null); @@ -132,6 +134,7 @@ export const CustomScrollbar: FC = ({ renderThumbHorizontal={renderThumbHorizontal} renderThumbVertical={renderThumbVertical} renderView={renderView} + onScroll={onScroll} > {children} diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx index 6bf310ddefa..6b8e71a979c 100644 --- a/packages/grafana-ui/src/components/Table/Table.tsx +++ b/packages/grafana-ui/src/components/Table/Table.tsx @@ -1,4 +1,4 @@ -import React, { FC, memo, useCallback, useEffect, useMemo } from 'react'; +import React, { FC, memo, useCallback, useEffect, useMemo, useRef } from 'react'; import { Cell, Column, @@ -131,6 +131,7 @@ export const Table: FC = memo((props: Props) => { enablePagination, } = props; + const listRef = useRef(null); const tableStyles = useStyles2(getTableStyles); const headerHeight = noHeader ? 0 : tableStyles.cellHeight; @@ -207,11 +208,11 @@ export const Table: FC = memo((props: Props) => { } = useTable(options, useFilters, useSortBy, usePagination, useAbsoluteLayout, useResizeColumns); let listHeight = height - (headerHeight + footerHeight); + if (enablePagination) { listHeight -= tableStyles.cellHeight; } const pageSize = Math.round(listHeight / tableStyles.cellHeight) - 1; - useEffect(() => { // Don't update the page size if it is less than 1 if (pageSize <= 0) { @@ -280,9 +281,18 @@ export const Table: FC = memo((props: Props) => { ); } + + const handleScroll: React.UIEventHandler = (event) => { + const { scrollTop } = event.target as HTMLDivElement; + + if (listRef.current !== null) { + listRef.current.scrollTo(scrollTop); + } + }; + return (
- +
{!noHeader && } {itemCount > 0 ? ( @@ -291,7 +301,8 @@ export const Table: FC = memo((props: Props) => { itemCount={itemCount} itemSize={tableStyles.rowHeight} width={'100%'} - style={{ overflow: 'hidden auto' }} + ref={listRef} + style={{ overflow: undefined }} > {RenderRow}