Table: add a ResizeObserver to useScrollbarWidth (#109145)

* Table: add a MutationObserver to useScrollbarWidth

* makes more sense to use a resize observer

packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx

@@ -171,7 +171,7 @@ export function TableNG(props: TableNGProps) {
     [theme, visibleFields, cellHeight]
   );
   const gridRef = useRef<DataGridHandle>(null);
-  const scrollbarWidth = useScrollbarWidth(gridRef, height, sortedRows);
+  const scrollbarWidth = useScrollbarWidth(gridRef, height);
   const availableWidth = useMemo(
     () => (hasNestedFrames ? width - COLUMN.EXPANDER_WIDTH : width) - scrollbarWidth,
     [width, hasNestedFrames, scrollbarWidth]

packages/grafana-ui/src/components/Table/TableNG/hooks.ts

@@ -534,16 +534,28 @@ export function useColumnResize(
   return dataGridResizeHandler;
 }
 
-export function useScrollbarWidth(ref: RefObject<DataGridHandle>, height: number, renderedRows: TableRow[]) {
+export function useScrollbarWidth(ref: RefObject<DataGridHandle>, height: number) {
   const [scrollbarWidth, setScrollbarWidth] = useState(0);
 
   useLayoutEffect(() => {
     const el = ref.current?.element;
 
-    if (el) {
-      setScrollbarWidth(el.offsetWidth - el.clientWidth);
+    if (!el) {
+      return;
     }
-  }, [ref, height, renderedRows]);
+
+    const updateScrollbarDimensions = () => {
+      setScrollbarWidth(el.offsetWidth - el.clientWidth);
+    };
+
+    updateScrollbarDimensions();
+
+    const resizeObserver = new ResizeObserver(updateScrollbarDimensions);
+    resizeObserver.observe(el);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [ref, height]);
 
   return scrollbarWidth;
 }