basic refactor complete

lowcoder-org · iamfaran · Aug 5, 2025 · Aug 5, 2025 · Aug 5, 2025 · Aug 6, 2025
commit 37d494ad1091880c924347aad3296eda2e876b0b
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/AutoModeTable.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/AutoModeTable.tsx
@@ -1,22 +1,11 @@
+// AutoModeTable.tsx
 import React from "react";
 import BaseTable, { BaseTableProps } from "./BaseTable";
 
-export interface AutoModeTableProps<RecordType> extends BaseTableProps<RecordType> {
-  // No additional props needed - auto mode is simple!
-}
+export interface AutoModeTableProps<RecordType> extends BaseTableProps<RecordType> {}
 
 function AutoModeTableComp<RecordType extends object>(props: AutoModeTableProps<RecordType>) {
-  const { ...baseProps } = props;
-
-  // Auto mode configuration: natural growth, no height constraints
-  return (
-    <BaseTable<RecordType>
-      {...baseProps}
-      // Override any height-related props for auto mode
-      containerHeight={undefined}
-      isFixedHeight={false}
-    />
-  );
+  return <BaseTable<RecordType> {...props} />;
 }
 
 const AutoModeTable = React.memo(AutoModeTableComp) as typeof AutoModeTableComp;

diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx
@@ -3,7 +3,6 @@ import React, {
     useMemo,
     useState,
     useRef,
-    useEffect,
   } from "react";
   import { default as Table, TableProps, ColumnType } from "antd/es/table";
   import ResizeableTitle from "./ResizeableTitle";
@@ -32,7 +31,6 @@ import React, {
       height: 0 !important;
     }
   `;
-
   export interface BaseTableProps<RecordType> extends Omit<TableProps<RecordType>, "components" | "columns"> {
     columns: CustomColumnType<RecordType>[];
     viewModeResizable: boolean;
@@ -43,9 +41,9 @@ import React, {
     customLoading?: boolean;
     onCellClick: (columnName: string, dataIndex: string) => void;
 
-    // Simplified props (remove the old virtualization logic for now)
-    containerHeight?: number;
-    isFixedHeight?: boolean;
+    // NEW: Accept explicit configuration from parent
+    scroll?: { x?: number | string; y?: number };
+    virtual?: boolean;
   }
 
   /**
@@ -63,8 +61,8 @@ import React, {
       rowAutoHeight,
       customLoading,
       onCellClick,
-      containerHeight,
-      isFixedHeight,
+      scroll,
+      virtual,
       dataSource,
       ...restProps
     } = props;
@@ -168,38 +166,6 @@ import React, {
       });
     }, [columns, resizeData, createCellHandler, createHeaderCellHandler]);
 
-
-
-    // Sum widths (including resized values) to keep horizontal scroll baseline accurate
-    function getTotalTableWidth(
-      cols: CustomColumnType<RecordType>[],
-      rData: { index: number; width: number }
-    ) {
-      return cols.reduce((sum, col, i) => {
-        const liveWidth =
-          (rData.index === i ? rData.width : (col.width as number | undefined)) ??
-          undefined;
-        const w =
-          typeof liveWidth === "number" && liveWidth > 0
-            ? liveWidth
-            : COL_MIN_WIDTH;
-        return sum + w;
-      }, 0);
-    }
-
-    const scrollAndVirtualizationSettings = useMemo(() => {
-      const totalWidth = getTotalTableWidth(memoizedColumns as any, resizeData);
-      const shouldVirtualize = isFixedHeight && (dataSource?.length ?? 0) >= 50;
-
-      return {
-        virtual: shouldVirtualize,
-        scroll: {
-          x: totalWidth,
-          // FIX: Set y for ANY fixed height mode, not just virtualization
-          y: isFixedHeight && containerHeight ? containerHeight : undefined
-        }
-      };
-    }, [isFixedHeight, containerHeight, dataSource?.length, memoizedColumns, resizeData]);
 
     return (
       <StyledTableWrapper ref={tableRef}>
@@ -216,8 +182,8 @@ import React, {
           dataSource={dataSource}
           pagination={false}
           columns={memoizedColumns}
-          virtual={scrollAndVirtualizationSettings.virtual}
-          scroll={scrollAndVirtualizationSettings.scroll}
+          virtual={virtual || false}
+          scroll={scroll || { x: 'max-content' }}
         />
       </StyledTableWrapper>
     );

diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/FixedModeTable.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/FixedModeTable.tsx
@@ -1,3 +1,4 @@
+// FixedModeTable.tsx  
 import React from "react";
 import BaseTable, { BaseTableProps } from "./BaseTable";
 
@@ -6,16 +7,7 @@ export interface FixedModeTableProps<RecordType> extends BaseTableProps<RecordTy
 }
 
 function FixedModeTableComp<RecordType extends object>(props: FixedModeTableProps<RecordType>) {
-  const { bodyHeight, ...baseProps } = props;
-
-  // Fixed mode configuration: height constraints and internal scrolling
-  return (
-    <BaseTable<RecordType>
-      {...baseProps}
-      containerHeight={bodyHeight}
-      isFixedHeight={true}
-    />
-  );
+  return <BaseTable<RecordType> {...props} />;
 }
 
 const FixedModeTable = React.memo(FixedModeTableComp) as typeof FixedModeTableComp;

diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableRenderer.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableRenderer.tsx
@@ -0,0 +1,111 @@
+import React, { useMemo } from "react";
+import AutoModeTable from "./AutoModeTable";
+import FixedModeTable from "./FixedModeTable";
+import VirtualizedTable from "./VirtualizedTable";
+import { BaseTableProps } from "./BaseTable";
+import { COL_MIN_WIDTH } from "../tableUtils";
+
+export interface TableRendererProps<RecordType> extends BaseTableProps<RecordType> {
+  mode: 'AUTO' | 'FIXED';
+  heights: {
+    bodyHeight?: number;
+    canVirtualize: boolean;
+    [key: string]: any;
+  };
+  virtualizationConfig: {
+    enabled: boolean;
+    itemHeight: number;
+    threshold: number;
+    reason?: string;
+  };
+}
+
+function TableRendererComp<RecordType extends object>(props: TableRendererProps<RecordType>) {
+  const {
+    mode,
+    heights,
+    virtualizationConfig,
+    columns,
+    ...baseTableProps
+  } = props;
+
+  // Calculate total width for X scroll
+  const totalWidth = useMemo(() => {
+    return columns.reduce((sum, col) => {
+      const width = typeof col.width === "number" && col.width > 0 ? col.width : COL_MIN_WIDTH;
+      return sum + width;
+    }, 0);
+  }, [columns]);
+
+  // AUTO MODE: Natural growth
+  if (mode === 'AUTO') {
+    console.log('AutoModeTable');
+    return (
+      <AutoModeTable
+        {...baseTableProps}
+        columns={columns}
+        scroll={{ x: totalWidth }}
+        virtual={false}
+      />
+    );
+  }
+
+  // FIXED MODE: Height-constrained with optional virtualization
+  if (mode === 'FIXED') {
+    console.log('FixedModeTable');
+    const bodyHeight = heights.bodyHeight ?? 0;
+
+    if (bodyHeight <= 0) {
+      console.warn('TableRenderer: Invalid bodyHeight, falling back to auto mode');
+      return (
+        <AutoModeTable
+          {...baseTableProps}
+          columns={columns}
+          scroll={{ x: totalWidth }}
+          virtual={false}
+        />
+      );
+    }
+
+    const scrollConfig = { x: totalWidth, y: bodyHeight };
+
+    // VIRTUALIZED: High performance for large datasets
+    if (virtualizationConfig.enabled && heights.canVirtualize) {
+        console.log('VirtualizedTable');
+      return (
+        <VirtualizedTable
+          {...baseTableProps}
+          columns={columns}
+          bodyHeight={bodyHeight}
+          virtualizationConfig={virtualizationConfig}
+          scroll={scrollConfig}
+          virtual={true}
+        />
+      );
+    }
+
+    // FIXED: Regular height-constrained mode
+    return (
+      <FixedModeTable
+        {...baseTableProps}
+        columns={columns}
+        bodyHeight={bodyHeight}
+        scroll={scrollConfig}
+        virtual={false}
+      />
+    );
+  }
+
+  // Fallback
+  return (
+    <AutoModeTable
+      {...baseTableProps}
+      columns={columns}
+      scroll={{ x: totalWidth }}
+      virtual={false}
+    />
+  );
+}
+
+const TableRenderer = React.memo(TableRendererComp) as typeof TableRendererComp;
+export default TableRenderer;
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/VirtualizedTable.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/VirtualizedTable.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import BaseTable, { BaseTableProps } from "./BaseTable";
+
+export interface VirtualizedTableProps<RecordType> extends BaseTableProps<RecordType> {
+  bodyHeight: number;
+  virtualizationConfig: {
+    enabled: boolean;
+    itemHeight: number;
+    threshold: number;
+    reason?: string;
+  };
+}
+
+function VirtualizedTableComp<RecordType extends object>(props: VirtualizedTableProps<RecordType>) {
+  const { bodyHeight, virtualizationConfig, ...baseProps } = props;
+
+  // Virtualized mode: explicit scroll config for performance
+  return (
+    <BaseTable<RecordType>
+      {...baseProps}
+      // Props are set by TableRenderer
+    />
+  );
+}
+
+const VirtualizedTable = React.memo(VirtualizedTableComp) as typeof VirtualizedTableComp;
+export default VirtualizedTable;
diff --git a/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx
@@ -8,7 +8,7 @@ import { TableImplComp } from "./tableComp";
 import { EmptyContent } from "pages/common/styledComponent";
 import { TableSummary } from "./tableSummaryComp";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
-import BaseTable from "./parts/BaseTable";
+import TableRenderer from "./parts/TableRenderer";
 import { TableWrapper } from "./styles/TableWrapper";
 import { useContainerHeight, useTableMode, useTableHeights, useVirtualization } from "./hooks/useTableConfiguration";
 
@@ -193,7 +193,7 @@ export const TableCompView = React.memo((props: {
 					$visibleResizables={visibleResizables}
 					$showHRowGridBorder={showHRowGridBorder}
 				>
-					<BaseTable<any>
+					<TableRenderer<any>
 						{...compChildren.selection.getView()(onEvent)}
 						bordered={compChildren.showRowGridBorder.getView()}
 						onChange={(pagination: any, filters: any, sorter: any, extra: any) => {
@@ -218,8 +218,9 @@ export const TableCompView = React.memo((props: {
 								dataIndex: dataIndex,
 							});
 						}}
-						containerHeight={containerHeight}
-						isFixedHeight={isFixedMode}
+						mode={mode as 'AUTO' | 'FIXED'}
+						heights={heights}
+						virtualizationConfig={virtualization}
 					/>
 				</TableWrapper>
 			</div>