Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit59e02f5

Browse files
author
Faran
committed
add scroll
1 parentffbea62 commit59e02f5

File tree

1 file changed

+70
-47
lines changed

1 file changed

+70
-47
lines changed

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

Lines changed: 70 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,29 @@ import 'simplebar-react/dist/simplebar.min.css';
66

77
constMainContainer=styled.div<{
88
$mode:'AUTO'|'FIXED';
9+
$showHorizontalScrollbar:boolean;
10+
$showVerticalScrollbar:boolean;
911
}>`
1012
display: flex;
1113
flex-direction: column;
1214
height: 100%;
1315
position: relative;
16+
17+
/* Critical CSS controls for SimpleBar */
18+
19+
20+
${props=>!props.$showHorizontalScrollbar&&`
21+
div.simplebar-horizontal {
22+
visibility: hidden !important;
23+
}
24+
`}
25+
26+
${props=>!props.$showVerticalScrollbar&&`
27+
div.simplebar-vertical {
28+
visibility: hidden !important;
29+
}
30+
`}
31+
1432
`;
1533

1634
constStickyToolbar=styled.div<{
@@ -24,46 +42,33 @@ const StickyToolbar = styled.div<{
2442
?'0 2px 8px rgba(0,0,0,0.1)'
2543
:'0 -2px 8px rgba(0,0,0,0.1)'
2644
};
45+
flex-shrink: 0;
2746
`;
2847

2948
constDefaultToolbar=styled.div`
3049
flex-shrink: 0;
50+
/* Prevent horizontal scrolling while allowing vertical flow */
51+
position: sticky;
52+
left: 0;
53+
right: 0;
54+
z-index: 1;
55+
background: inherit;
3156
`;
3257

3358
constTableSection=styled.div<{
3459
$mode:'AUTO'|'FIXED';
3560
}>`
36-
3761
flex: 1 1 auto;
3862
min-height: 0;
39-
border: 4px solid blue;
40-
overflow: hidden;
63+
min-width: 0;
4164
`;
4265

43-
44-
constSimpleBarWrapper=styled(SimpleBar)<{
45-
$showVertical:boolean;
46-
$showHorizontal:boolean;
47-
}>`
66+
constSimpleBarWrapper=styled(SimpleBar)`
4867
height: 100%;
49-
border: 4px solid red;
68+
overflow: auto !important;
5069
51-
.ant-table-content, .ant-table-body {
52-
overflow: unset !important;
53-
}
54-
55-
${props=>!props.$showVertical&&`
56-
.simplebar-track.simplebar-vertical {
57-
visibility: hidden !important;
58-
}
59-
`}
60-
61-
${props=>!props.$showHorizontal&&`
62-
.simplebar-track.simplebar-horizontal {
63-
visibility: hidden !important;
64-
}
65-
`}
66-
70+
71+
/* CRITICAL: Transfer scroll control from Ant Design to SimpleBar */
6772
`;
6873

6974
interfaceTableContainerProps{
@@ -89,32 +94,50 @@ export const TableContainer: React.FC<TableContainerProps> = ({
8994
showVerticalScrollbar,
9095
showHorizontalScrollbar
9196
})=>{
92-
97+
consthideScrollbar=!showHorizontalScrollbar&&!showVerticalScrollbar;
9398

9499
return(
95-
<MainContainer$mode={mode}ref={containerRef}>
96-
{stickyToolbar&&toolbarPosition==='above'&&(
100+
<MainContainer
101+
$mode={mode}
102+
ref={containerRef}
103+
$showHorizontalScrollbar={showHorizontalScrollbar}
104+
$showVerticalScrollbar={showVerticalScrollbar}
105+
>
106+
{/* Sticky above toolbar - always visible */}
107+
{stickyToolbar&&toolbarPosition==='above'&&showToolbar&&(
97108
<StickyToolbar$position="above">{toolbar}</StickyToolbar>
98109
)}
99-
<TableSection$mode={mode}>
100-
101-
<SimpleBarWrapper
102-
$showVertical={showVerticalScrollbar}
103-
$showHorizontal={showHorizontalScrollbar}
104-
>
105-
{!stickyToolbar&&toolbarPosition==='above'&&(
106-
<DefaultToolbar>{toolbar}</DefaultToolbar>
107-
)}
108-
{children}
109-
{!stickyToolbar&&toolbarPosition==='below'&&(
110-
<DefaultToolbar>{toolbar}</DefaultToolbar>
110+
111+
<TableSection$mode={mode}>
112+
{hideScrollbar ?(
113+
/* No scrollbars - render without SimpleBar */
114+
<>
115+
{!stickyToolbar&&toolbarPosition==='above'&&showToolbar&&(
116+
<DefaultToolbar>{toolbar}</DefaultToolbar>
117+
)}
118+
{children}
119+
{!stickyToolbar&&toolbarPosition==='below'&&showToolbar&&(
120+
<DefaultToolbar>{toolbar}</DefaultToolbar>
121+
)}
122+
</>
123+
) :(
124+
/* Scrollbars enabled - use SimpleBar */
125+
<SimpleBarWrapperclassName="simplebar-wrapper">
126+
{!stickyToolbar&&toolbarPosition==='above'&&showToolbar&&(
127+
<DefaultToolbar>{toolbar}</DefaultToolbar>
128+
)}
129+
{children}
130+
{!stickyToolbar&&toolbarPosition==='below'&&showToolbar&&(
131+
<DefaultToolbar>{toolbar}</DefaultToolbar>
132+
)}
133+
</SimpleBarWrapper>
134+
)}
135+
</TableSection>
136+
137+
{/* Sticky below toolbar - always visible */}
138+
{stickyToolbar&&toolbarPosition==='below'&&showToolbar&&(
139+
<StickyToolbar$position="below">{toolbar}</StickyToolbar>
111140
)}
112-
</SimpleBarWrapper>
113-
114-
</TableSection>
115-
{stickyToolbar&&toolbarPosition==='below'&&(
116-
<StickyToolbar$position="below">{toolbar}</StickyToolbar>
117-
)}
118-
</MainContainer>
141+
</MainContainer>
119142
);
120143
};

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp