Skip to content

Commit 2fc52e6

Browse files
iamfaraniamfaran
committed
move footer inside the main wrapper
1 parent 4590bfe commit 2fc52e6

File tree

2 files changed

+151
-55
lines changed

2 files changed

+151
-55
lines changed

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// parts/TableContainer.tsx
2+
import React from 'react';
3+
import styled from 'styled-components';
4+
5+
const MainContainer = styled.div<{
6+
$mode: 'AUTO' | 'FIXED';
7+
$height?: number;
8+
}>`
9+
display: flex;
10+
flex-direction: column;
11+
height: ${props => props.$mode === 'FIXED' && props.$height ? `${props.$height}px` : '100%'};
12+
overflow: hidden;
13+
position: relative;
14+
`;
15+
16+
const StickyToolbar = styled.div<{
17+
$position: 'above' | 'below';
18+
}>`
19+
position: sticky;
20+
${props => props.$position === 'above' ? 'top: 0;' : 'bottom: 0;'}
21+
z-index: 10;
22+
background: inherit;
23+
box-shadow: ${props => props.$position === 'above'
24+
? '0 2px 8px rgba(0,0,0,0.1)'
25+
: '0 -2px 8px rgba(0,0,0,0.1)'
26+
};
27+
`;
28+
29+
const DefaultToolbar = styled.div`
30+
flex-shrink: 0;
31+
`;
32+
33+
const TableSection = styled.div<{
34+
$mode: 'AUTO' | 'FIXED';
35+
}>`
36+
flex: 1;
37+
min-height: 0;
38+
overflow: ${props => props.$mode === 'FIXED' ? 'auto' : 'visible'};
39+
`;
40+
41+
interface TableContainerProps {
42+
mode: 'AUTO' | 'FIXED';
43+
containerHeight?: number;
44+
toolbarPosition: 'above' | 'below' | 'close';
45+
stickyToolbar: boolean;
46+
showToolbar: boolean;
47+
toolbar: React.ReactNode;
48+
children: React.ReactNode;
49+
containerRef?: React.RefObject<HTMLDivElement>;
50+
}
51+
52+
export const TableContainer: React.FC<TableContainerProps> = ({
53+
mode,
54+
containerHeight,
55+
toolbarPosition,
56+
stickyToolbar,
57+
showToolbar,
58+
toolbar,
59+
children,
60+
containerRef
61+
}) => {
62+
const ToolbarComponent = stickyToolbar ? StickyToolbar : DefaultToolbar;
63+
64+
return (
65+
<MainContainer $mode={mode} $height={containerHeight} ref={containerRef}>
66+
{/* Above toolbar */}
67+
{showToolbar && toolbarPosition === 'above' && (
68+
<ToolbarComponent $position="above">
69+
{toolbar}
70+
</ToolbarComponent>
71+
)}
72+
73+
{/* Table content */}
74+
<TableSection $mode={mode}>
75+
{children}
76+
</TableSection>
77+
78+
{/* Below toolbar */}
79+
{showToolbar && toolbarPosition === 'below' && (
80+
<ToolbarComponent $position="below">
81+
{toolbar}
82+
</ToolbarComponent>
83+
)}
84+
</MainContainer>
85+
);
86+
};

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

Lines changed: 65 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
1111
import TableRenderer from "./parts/TableRenderer";
1212
import { useContainerHeight, useTableMode, useTableHeights, useVirtualization } from "./hooks/useTableConfiguration";
1313
import { ToolbarStyleProvider } from "./styles/ToolbarStyles";
14+
import { TableContainer } from "./parts/TableContainer";
1415

1516
export const TableCompView = React.memo((props: {
1617
comp: InstanceType<typeof TableImplComp>;
@@ -48,6 +49,8 @@ export const TableCompView = React.memo((props: {
4849
const autoHeight = compChildren.autoHeight.getView();
4950
const rowAutoHeight = compChildren.rowAutoHeight.getView();
5051
const showHeader = !compChildren.hideHeader.getView();
52+
const stickyToolbar = false; // TODO: Add this as a prop later
53+
5154

5255
// NEW: Use hooks for clean logic
5356
const { mode, isFixedMode } = useTableMode(autoHeight);
@@ -171,65 +174,72 @@ export const TableCompView = React.memo((props: {
171174

172175
if (antdColumns.length === 0) {
173176
return (
174-
<div>
175-
{toolbar.position === "above" && !hideToolbar && toolbarView}
176-
<EmptyContent text={trans("table.emptyColumns")} />
177-
{toolbar.position === "below" && !hideToolbar && toolbarView}
178-
</div>
177+
<TableContainer
178+
mode={mode as 'AUTO' | 'FIXED'}
179+
containerHeight={mode === 'FIXED' ? containerHeight : undefined}
180+
toolbarPosition={toolbar.position}
181+
stickyToolbar={stickyToolbar}
182+
showToolbar={!hideToolbar}
183+
toolbar={toolbarView}
184+
>
185+
<EmptyContent text={trans("table.emptyColumns")} />
186+
</TableContainer>
179187
);
180-
}
181-
188+
}
182189
const showTableLoading =
183190
loading ||
184191
((showDataLoadingIndicators) && (compChildren.data as any).isLoading()) ||
185192
compChildren.loading.getView();
186193

187-
return (
188-
<div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
189-
{toolbar.position === "above" && !hideToolbar && toolbarView}
190-
<div ref={containerRef} style={{ flex: 1, minHeight: 0 }}>
191-
192-
<TableRenderer<any>
193-
{...compChildren.selection.getView()(onEvent)}
194-
bordered={compChildren.showRowGridBorder.getView()}
195-
onChange={(pagination: any, filters: any, sorter: any, extra: any) => {
196-
onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent);
197-
}}
198-
showHeader={showHeader}
199-
columns={antdColumns}
200-
dataSource={pageDataInfo.data}
201-
size={size}
202-
tableLayout="fixed"
203-
pagination={false}
204-
summary={summaryView}
205-
viewModeResizable={compChildren.viewModeResizable.getView()}
206-
rowColorFn={compChildren.rowColor.getView() as any}
207-
rowHeightFn={compChildren.rowHeight.getView() as any}
208-
columnsStyle={columnsStyle}
209-
rowAutoHeight={rowAutoHeight}
210-
customLoading={showTableLoading}
211-
onCellClick={(columnName: string, dataIndex: string) => {
212-
comp.children.selectedCell.dispatchChangeValueAction({
213-
name: columnName,
214-
dataIndex: dataIndex,
215-
});
216-
}}
217-
mode={mode as 'AUTO' | 'FIXED'}
218-
heights={heights}
219-
virtualizationConfig={virtualization}
220-
// ADD: Style props
221-
style={style}
222-
toolbarStyle={toolbarStyle}
223-
headerStyle={headerStyle}
224-
rowStyle={rowStyle}
225-
fixedHeader={compChildren.fixedHeader.getView()}
226-
showHRowGridBorder={showHRowGridBorder}
227-
showVerticalScrollbar={compChildren.showVerticalScrollbar.getView()}
228-
showHorizontalScrollbar={compChildren.showHorizontalScrollbar.getView()}
229-
/>
230-
231-
</div>
232-
{toolbar.position === "below" && !hideToolbar && toolbarView}
233-
</div>
234-
);
194+
return (
195+
<TableContainer
196+
mode={mode as 'AUTO' | 'FIXED'}
197+
containerHeight={mode === 'FIXED' ? containerHeight : undefined}
198+
toolbarPosition={toolbar.position}
199+
stickyToolbar={stickyToolbar}
200+
showToolbar={!hideToolbar}
201+
toolbar={toolbarView}
202+
containerRef={containerRef}
203+
>
204+
205+
<TableRenderer<any>
206+
{...compChildren.selection.getView()(onEvent)}
207+
bordered={compChildren.showRowGridBorder.getView()}
208+
onChange={(pagination: any, filters: any, sorter: any, extra: any) => {
209+
onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent);
210+
}}
211+
showHeader={showHeader}
212+
columns={antdColumns}
213+
dataSource={pageDataInfo.data}
214+
size={size}
215+
tableLayout="fixed"
216+
pagination={false}
217+
summary={summaryView}
218+
viewModeResizable={compChildren.viewModeResizable.getView()}
219+
rowColorFn={compChildren.rowColor.getView() as any}
220+
rowHeightFn={compChildren.rowHeight.getView() as any}
221+
columnsStyle={columnsStyle}
222+
rowAutoHeight={rowAutoHeight}
223+
customLoading={showTableLoading}
224+
onCellClick={(columnName: string, dataIndex: string) => {
225+
comp.children.selectedCell.dispatchChangeValueAction({
226+
name: columnName,
227+
dataIndex: dataIndex,
228+
});
229+
}}
230+
mode={mode as 'AUTO' | 'FIXED'}
231+
heights={heights}
232+
virtualizationConfig={virtualization}
233+
style={style}
234+
toolbarStyle={toolbarStyle}
235+
headerStyle={headerStyle}
236+
rowStyle={rowStyle}
237+
fixedHeader={compChildren.fixedHeader.getView()}
238+
showHRowGridBorder={showHRowGridBorder}
239+
showVerticalScrollbar={compChildren.showVerticalScrollbar.getView()}
240+
showHorizontalScrollbar={compChildren.showHorizontalScrollbar.getView()}
241+
/>
242+
243+
</TableContainer>
244+
);
235245
});

0 commit comments

Comments
 (0)