fixed tableheight not being correct

trelliscope · Jun 13, 2024 · 350a5ec · 350a5ec
1 parent 7c980d2
commit 350a5ec
Showing 1 changed file with 3 additions and 6 deletions.
diff --git a/src/components/ContentContainer/ContentContainer.tsx b/src/components/ContentContainer/ContentContainer.tsx
@@ -67,6 +67,7 @@ const ContentContainer: React.FC = () => {
   const [columnPinning, setColumnPinning] = useState({ left: [...panelMetaLabels] });
   const unSortableMetas = displayMetas.filter((meta) => !meta.sortable).map((meta) => meta.varname);
   const sort = useSelector(selectSort);
+  const tableContentRef = useRef<HTMLDivElement>(null);
 
   // this is a hack to remove the out of control tooltips / title tags that are being generated by the table library
   useEffect(() => {
@@ -83,8 +84,7 @@ const ContentContainer: React.FC = () => {
     const tableRows = document.querySelectorAll('.MuiTableRow-root');
     // tableContentRef.current?.clientHeight
     // we know that app header + subheader is 100
-    const tableHeight = window.innerHeight - 100 - 1;
-
+    const tableHeight = (tableContentRef.current?.clientHeight ?? 500) - 100 - 1;
     let rowCount = 1;
     if (tableHeight && tableRows.length > 0) {
       // first row is header but all subsequent rows should have same height
@@ -100,8 +100,6 @@ const ContentContainer: React.FC = () => {
     return rowCount;
   }
 
-  const tableContentRef = useRef<HTMLDivElement>(null);
-
   const {
     ref: tableWrapperRef,
     width: tableWrapperRefWidth = 1,
@@ -365,8 +363,7 @@ const ContentContainer: React.FC = () => {
         },
       },
     },
-
-    muiTableHeadProps: {
+    muiTableContainerProps: {
       style: {
         overflowX: 'auto',
         overscrollBehaviorX: 'none',