add custom Hook to calculate table height / body

lowcoder-org · iamfaran · Aug 5, 2025 · Aug 5, 2025 · Aug 5, 2025 · Aug 6, 2025
commit 67f995289999bfc9f4c434fcfda4f30403d2c64e
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/hooks/useTableConfiguration.ts b/client/packages/lowcoder/src/comps/comps/tableLiteComp/hooks/useTableConfiguration.ts
@@ -0,0 +1,121 @@
+// hooks/useTableConfiguration.ts
+import { useMemo, useState, useEffect, useRef } from 'react';
+
+// ============= HOOK 1: TABLE MODE =============
+export function useTableMode(autoHeight: boolean) {
+  return useMemo(() => ({
+    mode: autoHeight ? 'AUTO' : 'FIXED' as const,
+    isAutoMode: autoHeight,
+    isFixedMode: !autoHeight
+  }), [autoHeight]);
+}
+
+// ============= HOOK 2: CONTAINER HEIGHT MEASUREMENT =============
+export function useContainerHeight(enabled: boolean) {
+  const [containerHeight, setContainerHeight] = useState<number>(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!enabled || !containerRef.current) return;
+
+    const measureHeight = () => {
+      const element = containerRef.current;
+      if (element) {
+        // clientHeight gives us the inner height available for content
+        setContainerHeight(element.clientHeight);
+      }
+    };
+
+    // Initial measurement
+    measureHeight();
+
+    // Watch for size changes
+    const resizeObserver = new ResizeObserver(measureHeight);
+    resizeObserver.observe(containerRef.current);
+
+    return () => resizeObserver.disconnect();
+  }, [enabled]);
+
+  return { containerHeight, containerRef };
+}
+
+// ============= HOOK 3: HEIGHT CALCULATIONS =============
+interface HeightConfig {
+  showToolbar: boolean;
+  showHeader: boolean;
+  toolbarHeight?: number;
+  headerHeight?: number;
+  containerPadding?: number;
+}
+
+export function useTableHeights(
+  mode: 'AUTO' | 'FIXED',
+  containerHeight: number,
+  config: HeightConfig
+) {
+  return useMemo(() => {
+    if (mode === 'AUTO') {
+      return {
+        containerStyle: { 
+          height: '100%', 
+          display: 'flex', 
+          flexDirection: 'column' as const 
+        },
+        tableHeight: undefined,
+        bodyHeight: undefined,
+        scrollY: undefined,
+        canVirtualize: false
+      };
+    }
+
+    // FIXED mode calculations
+    const {
+      showToolbar = false,
+      showHeader = true,
+      toolbarHeight = 48,
+      headerHeight = 40,
+      containerPadding = 0
+    } = config;
+
+    const toolbarSpace = showToolbar ? toolbarHeight : 0;
+    const headerSpace = showHeader ? headerHeight : 0;
+    const totalUsedSpace = toolbarSpace + headerSpace + containerPadding;
+
+    // Calculate available height for table body
+    const bodyHeight = Math.max(0, containerHeight - totalUsedSpace);
+
+    return {
+      containerStyle: { 
+        height: '100%', 
+        display: 'flex', 
+        flexDirection: 'column' as const 
+      },
+      tableHeight: containerHeight,
+      bodyHeight,
+      scrollY: bodyHeight > 0 ? bodyHeight : undefined,
+      canVirtualize: bodyHeight > 100 // Reasonable minimum for virtualization
+    };
+  }, [mode, containerHeight, config]);
+}
+
+// ============= HOOK 4: VIRTUALIZATION CONFIG =============
+export function useVirtualization(
+  canVirtualize: boolean,
+  dataLength: number,
+  threshold: number = 50
+) {
+  return useMemo(() => {
+    const shouldVirtualize = canVirtualize && dataLength >= threshold;
+
+    return {
+      enabled: shouldVirtualize,
+      threshold,
+      itemHeight: 40, // Could be made configurable later
+      reason: !canVirtualize 
+        ? 'height_insufficient' 
+        : dataLength < threshold 
+        ? 'data_too_small' 
+        : 'enabled'
+    };
+  }, [canVirtualize, dataLength, threshold]);
+}
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx
@@ -10,6 +10,7 @@ import { TableSummary } from "./tableSummaryComp";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import ResizeableTable from "./parts/ResizeableTable";
 import { TableWrapper } from "./styles/TableWrapper";
+import { useContainerHeight, useTableMode, useTableHeights, useVirtualization } from "./hooks/useTableConfiguration";
 
 export const TableCompView = React.memo((props: {
 	comp: InstanceType<typeof TableImplComp>;
@@ -21,10 +22,6 @@ export const TableCompView = React.memo((props: {
 	const showDataLoadingIndicators = currentTheme?.showDataLoadingIndicators;
 
 	const compName = useContext(CompNameContext);
-	const [loading, setLoading] = useState(false);
-	const tableViewportRef = useRef<HTMLDivElement>(null);
-
-	const [containerHeight, setContainerHeight] = useState<number>(0);
 
 	const { comp, onDownload, onRefresh } = props;
 	const compChildren = comp.children;
@@ -48,34 +45,35 @@ export const TableCompView = React.memo((props: {
 	const size = useMemo(() => compChildren.size.getView(), [compChildren.size]);
 	const onEvent = useMemo(() => compChildren.onEvent.getView(), [compChildren.onEvent]);
 	const dynamicColumn = compChildren.dynamicColumn.getView();
+	const [loading, setLoading] = useState(false);
+	const autoHeight = compChildren.autoHeight.getView();
+	const rowAutoHeight = compChildren.rowAutoHeight.getView();
+	const showHeader = !compChildren.hideHeader.getView();
+
+	// NEW: Use hooks for clean logic
+	const { mode, isFixedMode } = useTableMode(autoHeight);
+	const { containerHeight, containerRef } = useContainerHeight(isFixedMode);
+	const heights = useTableHeights(mode as 'AUTO' | 'FIXED', containerHeight, {
+		showToolbar: !hideToolbar,
+		showHeader: showHeader,
+		toolbarHeight: 48,
+		headerHeight: 40
+	});
+	const virtualization = useVirtualization(
+		heights.canVirtualize,
+		data?.length ?? 0,
+		50
+	);
+
+
 	const dynamicColumnConfig = useMemo(
 		() => compChildren.dynamicColumnConfig.getView(),
 		[compChildren.dynamicColumnConfig]
 	);
 	const columnsAggrData = comp.columnAggrData;
 	const headerFilters = useMemo(() => compChildren.headerFilters.getView(), [compChildren.headerFilters]);
 
-	// Virtualization logic - simplified: enable for fixed height with 50+ rows
-	const isFixedHeight = !compChildren.autoHeight.getView(); // autoHeight: "fixed" when false
-	const rowAutoHeight = compChildren.rowAutoHeight.getView();
 
-	// Measure container height for virtualization
-	useEffect(() => {
-		if (!isFixedHeight || !tableViewportRef.current) return;
-
-		const measureHeight = () => {
-			const el = tableViewportRef.current;
-			if (el) {
-            // clientHeight = inner height available to the scrollable body
-				setContainerHeight(el.clientHeight);
-			}
-		};
-		measureHeight();
-		const resizeObserver = new ResizeObserver(measureHeight);
-		resizeObserver.observe(tableViewportRef.current);
-
-		return () => resizeObserver.disconnect();
-	}, [isFixedHeight]);
 
 	const antdColumns = useMemo(
 		() =>
@@ -186,7 +184,7 @@ export const TableCompView = React.memo((props: {
 	return (
 		<div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
 			{toolbar.position === "above" && !hideToolbar && toolbarView}
-			<div ref={tableViewportRef} style={{ flex: 1, minHeight: 0 }}>
+			<div ref={containerRef} style={{ flex: 1, minHeight: 0 }}>
 				<TableWrapper
 					$style={style}
 					$headerStyle={headerStyle}
@@ -201,7 +199,7 @@ export const TableCompView = React.memo((props: {
 						onChange={(pagination: any, filters: any, sorter: any, extra: any) => {
 							onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent);
 						}}
-						showHeader={!compChildren.hideHeader.getView()}
+						showHeader={showHeader}
 						columns={antdColumns}
 						dataSource={pageDataInfo.data}
 						size={compChildren.size.getView()}
@@ -221,7 +219,7 @@ export const TableCompView = React.memo((props: {
 							});
 						}}
 						containerHeight={containerHeight}
-						isFixedHeight={isFixedHeight}
+						isFixedHeight={isFixedMode}
 					/>
 				</TableWrapper>
 			</div>