TablePanel: Fix vertical scrollbar (#53457)

* TablePanel: Fix vertical scroll

* Fix vertical scrollbar with virtualized rendering

* betterer

* Refactor prop

.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"],

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<Props> = ({
   scrollRefCallback,
   updateAfterMountMs,
   scrollTop,
+  onScroll,
   children,
 }) => {
   const ref = useRef<Scrollbars & { view: HTMLDivElement }>(null);
@@ -132,6 +134,7 @@ export const CustomScrollbar: FC<Props> = ({
       renderThumbHorizontal={renderThumbHorizontal}
       renderThumbVertical={renderThumbVertical}
       renderView={renderView}
+      onScroll={onScroll}
     >
       {children}
     </Scrollbars>

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<Props> = memo((props: Props) => {
     enablePagination,
   } = props;
 
+  const listRef = useRef<FixedSizeList>(null);
   const tableStyles = useStyles2(getTableStyles);
   const headerHeight = noHeader ? 0 : tableStyles.cellHeight;
 
@@ -207,11 +208,11 @@ export const Table: FC<Props> = 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<Props> = memo((props: Props) => {
       </div>
     );
   }
+
+  const handleScroll: React.UIEventHandler = (event) => {
+    const { scrollTop } = event.target as HTMLDivElement;
+
+    if (listRef.current !== null) {
+      listRef.current.scrollTo(scrollTop);
+    }
+  };
+
   return (
     <div {...getTableProps()} className={tableStyles.table} aria-label={ariaLabel} role="table">
-      <CustomScrollbar hideVerticalTrack={true}>
+      <CustomScrollbar onScroll={handleScroll}>
         <div className={tableStyles.tableContentWrapper(totalColumnsWidth)}>
           {!noHeader && <HeaderRow headerGroups={headerGroups} showTypeIcons={showTypeIcons} />}
           {itemCount > 0 ? (
@@ -291,7 +301,8 @@ export const Table: FC<Props> = memo((props: Props) => {
               itemCount={itemCount}
               itemSize={tableStyles.rowHeight}
               width={'100%'}
-              style={{ overflow: 'hidden auto' }}
+              ref={listRef}
+              style={{ overflow: undefined }}
             >
               {RenderRow}
             </FixedSizeList>