fix(Table): Adjusted scroll flag calculation

DevoInc · Nov 28, 2023 · 951bf1a · 951bf1a
1 parent 0d83d6b
commit 951bf1a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/packages/table/src/core/Table/Table.tsx b/packages/table/src/core/Table/Table.tsx
@@ -35,8 +35,6 @@ export const Table: React.FC<TableProps> = ({ tableOptions, data }) => {
     types,
   );
   const { hasScroll } = useTableScroll(rowVirtualizer, ref);
-  console.info('hasScroll: ', hasScroll);
-  console.info(measures);
   return (
     <TableContext.Provider
       value={{

diff --git a/packages/table/src/core/Table/useTableScroll.ts b/packages/table/src/core/Table/useTableScroll.ts
@@ -5,21 +5,24 @@ export const useTableScroll = (
   rowVirtualizer: Virtualizer<HTMLDivElement, Element>,
   wrapperRef: React.MutableRefObject<HTMLDivElement>,
 ) => {
-  const [bodyHeight] = React.useState(rowVirtualizer?.getTotalSize() || 0);
-  const [totalHeight] = React.useState(wrapperRef?.current?.clientHeight || 0);
-  const [headHeight] = React.useState(
-    wrapperRef?.current?.querySelector('thead')?.clientHeight || 0,
-  );
-  console.info('bodyHeight: ', bodyHeight);
-  console.info('totalHeight: ', totalHeight);
-  console.info('headHeight: ', headHeight);
-  const [hasScroll, setHasScroll] = React.useState(
-    bodyHeight > totalHeight - headHeight,
-  );
+  const [dataHeight, setDataHeight] = React.useState<number>(0);
+  const [wrapperHeight, setWrapperHeight] = React.useState<number>(0);
+  const [headHeight, setHeadHeight] = React.useState<number>(0);
+  const [hasScroll, setHasScroll] = React.useState<boolean>(false);
 
   React.useEffect(() => {
-    setHasScroll(bodyHeight > totalHeight - headHeight);
-  }, [bodyHeight, totalHeight, headHeight]);
+    setDataHeight(rowVirtualizer.getTotalSize());
+    setWrapperHeight(wrapperRef.current?.offsetHeight);
+    setHeadHeight(
+      wrapperRef.current?.querySelector<HTMLElement>('table thead')
+        ?.offsetHeight,
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  React.useEffect(() => {
+    setHasScroll(dataHeight > wrapperHeight - headHeight);
+  }, [dataHeight, wrapperHeight, headHeight]);
 
   return { hasScroll };
 };