Skip to content

Commit 37d494a

Browse files
iamfaraniamfaran
committed
basic refactor complete
1 parent 4fd3e12 commit 37d494a

File tree

6 files changed

+155
-69
lines changed

6 files changed

+155
-69
lines changed

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/AutoModeTable.tsx

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,11 @@
1+
// AutoModeTable.tsx
12
import React from "react";
23
import BaseTable, { BaseTableProps } from "./BaseTable";
34

4-
export interface AutoModeTableProps<RecordType> extends BaseTableProps<RecordType> {
5-
// No additional props needed - auto mode is simple!
6-
}
5+
export interface AutoModeTableProps<RecordType> extends BaseTableProps<RecordType> {}
76

87
function AutoModeTableComp<RecordType extends object>(props: AutoModeTableProps<RecordType>) {
9-
const { ...baseProps } = props;
10-
11-
// Auto mode configuration: natural growth, no height constraints
12-
return (
13-
<BaseTable<RecordType>
14-
{...baseProps}
15-
// Override any height-related props for auto mode
16-
containerHeight={undefined}
17-
isFixedHeight={false}
18-
/>
19-
);
8+
return <BaseTable<RecordType> {...props} />;
209
}
2110

2211
const AutoModeTable = React.memo(AutoModeTableComp) as typeof AutoModeTableComp;

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/BaseTable.tsx

Lines changed: 7 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React, {
33
useMemo,
44
useState,
55
useRef,
6-
useEffect,
76
} from "react";
87
import { default as Table, TableProps, ColumnType } from "antd/es/table";
98
import ResizeableTitle from "./ResizeableTitle";
@@ -32,7 +31,6 @@ import React, {
3231
height: 0 !important;
3332
}
3433
`;
35-
3634
export interface BaseTableProps<RecordType> extends Omit<TableProps<RecordType>, "components" | "columns"> {
3735
columns: CustomColumnType<RecordType>[];
3836
viewModeResizable: boolean;
@@ -43,9 +41,9 @@ import React, {
4341
customLoading?: boolean;
4442
onCellClick: (columnName: string, dataIndex: string) => void;
4543

46-
// Simplified props (remove the old virtualization logic for now)
47-
containerHeight?: number;
48-
isFixedHeight?: boolean;
44+
// NEW: Accept explicit configuration from parent
45+
scroll?: { x?: number | string; y?: number };
46+
virtual?: boolean;
4947
}
5048

5149
/**
@@ -63,8 +61,8 @@ import React, {
6361
rowAutoHeight,
6462
customLoading,
6563
onCellClick,
66-
containerHeight,
67-
isFixedHeight,
64+
scroll,
65+
virtual,
6866
dataSource,
6967
...restProps
7068
} = props;
@@ -168,38 +166,6 @@ import React, {
168166
});
169167
}, [columns, resizeData, createCellHandler, createHeaderCellHandler]);
170168

171-
172-
173-
// Sum widths (including resized values) to keep horizontal scroll baseline accurate
174-
function getTotalTableWidth(
175-
cols: CustomColumnType<RecordType>[],
176-
rData: { index: number; width: number }
177-
) {
178-
return cols.reduce((sum, col, i) => {
179-
const liveWidth =
180-
(rData.index === i ? rData.width : (col.width as number | undefined)) ??
181-
undefined;
182-
const w =
183-
typeof liveWidth === "number" && liveWidth > 0
184-
? liveWidth
185-
: COL_MIN_WIDTH;
186-
return sum + w;
187-
}, 0);
188-
}
189-
190-
const scrollAndVirtualizationSettings = useMemo(() => {
191-
const totalWidth = getTotalTableWidth(memoizedColumns as any, resizeData);
192-
const shouldVirtualize = isFixedHeight && (dataSource?.length ?? 0) >= 50;
193-
194-
return {
195-
virtual: shouldVirtualize,
196-
scroll: {
197-
x: totalWidth,
198-
// FIX: Set y for ANY fixed height mode, not just virtualization
199-
y: isFixedHeight && containerHeight ? containerHeight : undefined
200-
}
201-
};
202-
}, [isFixedHeight, containerHeight, dataSource?.length, memoizedColumns, resizeData]);
203169

204170
return (
205171
<StyledTableWrapper ref={tableRef}>
@@ -216,8 +182,8 @@ import React, {
216182
dataSource={dataSource}
217183
pagination={false}
218184
columns={memoizedColumns}
219-
virtual={scrollAndVirtualizationSettings.virtual}
220-
scroll={scrollAndVirtualizationSettings.scroll}
185+
virtual={virtual || false}
186+
scroll={scroll || { x: 'max-content' }}
221187
/>
222188
</StyledTableWrapper>
223189
);

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/FixedModeTable.tsx

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// FixedModeTable.tsx
12
import React from "react";
23
import BaseTable, { BaseTableProps } from "./BaseTable";
34

@@ -6,16 +7,7 @@ export interface FixedModeTableProps<RecordType> extends BaseTableProps<RecordTy
67
}
78

89
function FixedModeTableComp<RecordType extends object>(props: FixedModeTableProps<RecordType>) {
9-
const { bodyHeight, ...baseProps } = props;
10-
11-
// Fixed mode configuration: height constraints and internal scrolling
12-
return (
13-
<BaseTable<RecordType>
14-
{...baseProps}
15-
containerHeight={bodyHeight}
16-
isFixedHeight={true}
17-
/>
18-
);
10+
return <BaseTable<RecordType> {...props} />;
1911
}
2012

2113
const FixedModeTable = React.memo(FixedModeTableComp) as typeof FixedModeTableComp;

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableRenderer.tsx

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import React, { useMemo } from "react";
2+
import AutoModeTable from "./AutoModeTable";
3+
import FixedModeTable from "./FixedModeTable";
4+
import VirtualizedTable from "./VirtualizedTable";
5+
import { BaseTableProps } from "./BaseTable";
6+
import { COL_MIN_WIDTH } from "../tableUtils";
7+
8+
export interface TableRendererProps<RecordType> extends BaseTableProps<RecordType> {
9+
mode: 'AUTO' | 'FIXED';
10+
heights: {
11+
bodyHeight?: number;
12+
canVirtualize: boolean;
13+
[key: string]: any;
14+
};
15+
virtualizationConfig: {
16+
enabled: boolean;
17+
itemHeight: number;
18+
threshold: number;
19+
reason?: string;
20+
};
21+
}
22+
23+
function TableRendererComp<RecordType extends object>(props: TableRendererProps<RecordType>) {
24+
const {
25+
mode,
26+
heights,
27+
virtualizationConfig,
28+
columns,
29+
...baseTableProps
30+
} = props;
31+
32+
// Calculate total width for X scroll
33+
const totalWidth = useMemo(() => {
34+
return columns.reduce((sum, col) => {
35+
const width = typeof col.width === "number" && col.width > 0 ? col.width : COL_MIN_WIDTH;
36+
return sum + width;
37+
}, 0);
38+
}, [columns]);
39+
40+
// AUTO MODE: Natural growth
41+
if (mode === 'AUTO') {
42+
console.log('AutoModeTable');
43+
return (
44+
<AutoModeTable
45+
{...baseTableProps}
46+
columns={columns}
47+
scroll={{ x: totalWidth }}
48+
virtual={false}
49+
/>
50+
);
51+
}
52+
53+
// FIXED MODE: Height-constrained with optional virtualization
54+
if (mode === 'FIXED') {
55+
console.log('FixedModeTable');
56+
const bodyHeight = heights.bodyHeight ?? 0;
57+
58+
if (bodyHeight <= 0) {
59+
console.warn('TableRenderer: Invalid bodyHeight, falling back to auto mode');
60+
return (
61+
<AutoModeTable
62+
{...baseTableProps}
63+
columns={columns}
64+
scroll={{ x: totalWidth }}
65+
virtual={false}
66+
/>
67+
);
68+
}
69+
70+
const scrollConfig = { x: totalWidth, y: bodyHeight };
71+
72+
// VIRTUALIZED: High performance for large datasets
73+
if (virtualizationConfig.enabled && heights.canVirtualize) {
74+
console.log('VirtualizedTable');
75+
return (
76+
<VirtualizedTable
77+
{...baseTableProps}
78+
columns={columns}
79+
bodyHeight={bodyHeight}
80+
virtualizationConfig={virtualizationConfig}
81+
scroll={scrollConfig}
82+
virtual={true}
83+
/>
84+
);
85+
}
86+
87+
// FIXED: Regular height-constrained mode
88+
return (
89+
<FixedModeTable
90+
{...baseTableProps}
91+
columns={columns}
92+
bodyHeight={bodyHeight}
93+
scroll={scrollConfig}
94+
virtual={false}
95+
/>
96+
);
97+
}
98+
99+
// Fallback
100+
return (
101+
<AutoModeTable
102+
{...baseTableProps}
103+
columns={columns}
104+
scroll={{ x: totalWidth }}
105+
virtual={false}
106+
/>
107+
);
108+
}
109+
110+
const TableRenderer = React.memo(TableRendererComp) as typeof TableRendererComp;
111+
export default TableRenderer;

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/VirtualizedTable.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from "react";
2+
import BaseTable, { BaseTableProps } from "./BaseTable";
3+
4+
export interface VirtualizedTableProps<RecordType> extends BaseTableProps<RecordType> {
5+
bodyHeight: number;
6+
virtualizationConfig: {
7+
enabled: boolean;
8+
itemHeight: number;
9+
threshold: number;
10+
reason?: string;
11+
};
12+
}
13+
14+
function VirtualizedTableComp<RecordType extends object>(props: VirtualizedTableProps<RecordType>) {
15+
const { bodyHeight, virtualizationConfig, ...baseProps } = props;
16+
17+
// Virtualized mode: explicit scroll config for performance
18+
return (
19+
<BaseTable<RecordType>
20+
{...baseProps}
21+
// Props are set by TableRenderer
22+
/>
23+
);
24+
}
25+
26+
const VirtualizedTable = React.memo(VirtualizedTableComp) as typeof VirtualizedTableComp;
27+
export default VirtualizedTable;

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/tableCompView.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { TableImplComp } from "./tableComp";
88
import { EmptyContent } from "pages/common/styledComponent";
99
import { TableSummary } from "./tableSummaryComp";
1010
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
11-
import BaseTable from "./parts/BaseTable";
11+
import TableRenderer from "./parts/TableRenderer";
1212
import { TableWrapper } from "./styles/TableWrapper";
1313
import { useContainerHeight, useTableMode, useTableHeights, useVirtualization } from "./hooks/useTableConfiguration";
1414

@@ -193,7 +193,7 @@ export const TableCompView = React.memo((props: {
193193
$visibleResizables={visibleResizables}
194194
$showHRowGridBorder={showHRowGridBorder}
195195
>
196-
<BaseTable<any>
196+
<TableRenderer<any>
197197
{...compChildren.selection.getView()(onEvent)}
198198
bordered={compChildren.showRowGridBorder.getView()}
199199
onChange={(pagination: any, filters: any, sorter: any, extra: any) => {
@@ -218,8 +218,9 @@ export const TableCompView = React.memo((props: {
218218
dataIndex: dataIndex,
219219
});
220220
}}
221-
containerHeight={containerHeight}
222-
isFixedHeight={isFixedMode}
221+
mode={mode as 'AUTO' | 'FIXED'}
222+
heights={heights}
223+
virtualizationConfig={virtualization}
223224
/>
224225
</TableWrapper>
225226
</div>

0 commit comments

Comments
 (0)