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

Commitc7f2c54

Browse files
fix table scroll behaviour
1 parent6e98446 commitc7f2c54

File tree

8 files changed

+163
-78
lines changed

8 files changed

+163
-78
lines changed

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

Lines changed: 95 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
2828
import{PrimaryColor}from"constants/style";
2929
import{trans}from"i18n";
3030
import_from"lodash";
31-
import{darkenColor,isDarkColor}from"lowcoder-design";
31+
import{darkenColor,isDarkColor,ScrollBar}from"lowcoder-design";
3232
importReact,{Children,useCallback,useContext,useEffect,useMemo,useRef,useState}from"react";
3333
import{Resizable}from"react-resizable";
3434
importstyled,{css}from"styled-components";
@@ -43,6 +43,7 @@ import { CellColorViewType } from "./column/tableColumnComp";
4343
import{defaultTheme}from"@lowcoder-ee/constants/themeConstants";
4444
import{useMergeCompStyles}from"@lowcoder-ee/util/hooks";
4545
import{childrenToProps}from"@lowcoder-ee/comps/generators/multi";
46+
import{getVerticalMargin}from"@lowcoder-ee/util/cssUtil";
4647

4748

4849
functiongenLinerGradient(color:string){
@@ -148,10 +149,13 @@ const BackgroundWrapper = styled.div<{
148149
// padding: unset !important;
149150
padding:${(props)=>props.$style.padding} !important;
150151
margin:${(props)=>props.$style.margin} !important;
151-
overflow: scroll !important;
152+
//overflow: scroll !important;
152153
border-style:${(props)=>props.$style.borderStyle} !important;
153154
border-width:${(props)=>`${props.$style.borderWidth} !important`};
154-
${(props)=>props.$style}
155+
border-color:${(props)=>`${props.$style.border} !important`};
156+
height: calc(100% -${(props)=>getVerticalMargin(props.$style.margin.split(' '))});
157+
// overflow-y: auto;
158+
//${(props)=>props.$style}
155159
`;
156160

157161
// TODO: find a way to limit the calc function for max-height only to first Margin value
@@ -166,7 +170,9 @@ const TableWrapper = styled.div<{
166170
$visibleResizables:boolean;
167171
$showHRowGridBorder?:boolean;
168172
}>`
169-
overflow: unset !important;
173+
// overflow: unset !important;
174+
// max-height: 100%;
175+
// overflow-y: auto;
170176
171177
.ant-table-wrapper {
172178
border-top: unset;
@@ -193,22 +199,23 @@ const TableWrapper = styled.div<{
193199
}
194200
195201
.ant-table {
196-
overflow-y:scroll;
202+
//overflow-y:scroll;
197203
background:${(props)=>props.$style.background};
198204
.ant-table-container {
199205
border-left: unset;
200206
border-top: none !important;
201207
border-inline-start: none !important;
202-
overflow-y:scroll;
203-
height:300px
208+
//overflow-y:scroll;
209+
//height:300px;
204210
205211
&::after {
206212
box-shadow: none !important;
207213
}
208214
209215
.ant-table-content {
210-
overflow-y:scroll;
211-
overflow-x:scroll;
216+
// overflow-y:scroll;
217+
// overflow-x:scroll;
218+
overflow: unset !important
212219
}
213220
214221
// A table expand row contains table
@@ -220,21 +227,22 @@ const TableWrapper = styled.div<{
220227
border-top: unset;
221228
222229
> .ant-table-thead {
230+
${(props)=>
231+
props.$fixedHeader&&`
232+
position: sticky;
233+
position: -webkit-sticky;
234+
top:${props.$fixedToolbar ?'47px' :'0'};
235+
z-index: 99;
236+
`
237+
}
223238
> tr > th {
224239
background-color:${(props)=>props.$headerStyle.headerBackground};
225240
226241
border-color:${(props)=>props.$headerStyle.border};
227242
border-width:${(props)=>props.$headerStyle.borderWidth};
228243
color:${(props)=>props.$headerStyle.headerText};
229244
// border-inline-end:${(props)=>`${props.$headerStyle.borderWidth} solid${props.$headerStyle.border}`} !important;
230-
${(props)=>
231-
props.$fixedHeader&&`
232-
position: sticky;
233-
position: -webkit-sticky;
234-
top:${props.$fixedToolbar ?'47px' :'0'};
235-
z-index: 99;
236-
`
237-
}
245+
238246
239247
> div {
240248
margin:${(props)=>props.$headerStyle.margin};
@@ -715,6 +723,8 @@ export function TableCompView(props: {
715723
consttoolbarStyle=compChildren.toolbarStyle.getView();
716724
constrowAutoHeight=compChildren.rowAutoHeight.getView();
717725
consttableAutoHeight=comp.getTableAutoHeight();
726+
constshowHorizontalScrollbar=compChildren.showHorizontalScrollbar.getView();
727+
constshowVerticalScrollbar=compChildren.showVerticalScrollbar.getView();
718728
constvisibleResizables=compChildren.visibleResizables.getView();
719729
constshowHRowGridBorder=compChildren.showHRowGridBorder.getView();
720730
constcolumnsStyle=compChildren.columnsStyle.getView();
@@ -833,69 +843,76 @@ export function TableCompView(props: {
833843
return(
834844
<BackgroundColorContext.Providervalue={style.background}>
835845
<BackgroundWrapperref={ref}$style={style}$tableAutoHeight={tableAutoHeight}>
836-
{toolbar.position==="above"&&toolbarView}
837-
<TableWrapper
838-
$style={style}
839-
$rowStyle={rowStyle}
840-
$headerStyle={headerStyle}
841-
$toolbarStyle={toolbarStyle}
842-
$toolbarPosition={toolbar.position}
843-
$fixedHeader={compChildren.fixedHeader.getView()}
844-
$fixedToolbar={toolbar.fixedToolbar&&toolbar.position==='above'}
845-
$visibleResizables={visibleResizables}
846-
$showHRowGridBorder={showHRowGridBorder}
847-
>
848-
<ResizeableTable<RecordType>
849-
expandable={{
850-
...expansion.expandableConfig,
851-
childrenColumnName:supportChildren
852-
?COLUMN_CHILDREN_KEY
853-
:"OB_CHILDREN_KEY_PLACEHOLDER",
854-
fixed:"left",
855-
onExpand:(expanded)=>{
856-
if(expanded){
857-
handleChangeEvent('rowExpand')
858-
}else{
859-
handleChangeEvent('rowShrink')
846+
{/* <div style={{
847+
overflowY: 'auto',
848+
maxHeight: '100%',
849+
}}> */}
850+
<ScrollBarstyle={{height:"100%",margin:"0px",padding:"0px"}}hideScrollbar={!showVerticalScrollbar}>
851+
{toolbar.position==="above"&&toolbarView}
852+
<TableWrapper
853+
$style={style}
854+
$rowStyle={rowStyle}
855+
$headerStyle={headerStyle}
856+
$toolbarStyle={toolbarStyle}
857+
$toolbarPosition={toolbar.position}
858+
$fixedHeader={compChildren.fixedHeader.getView()}
859+
$fixedToolbar={toolbar.fixedToolbar&&toolbar.position==='above'}
860+
$visibleResizables={visibleResizables}
861+
$showHRowGridBorder={showHRowGridBorder}
862+
>
863+
<ResizeableTable<RecordType>
864+
expandable={{
865+
...expansion.expandableConfig,
866+
childrenColumnName:supportChildren
867+
?COLUMN_CHILDREN_KEY
868+
:"OB_CHILDREN_KEY_PLACEHOLDER",
869+
fixed:"left",
870+
onExpand:(expanded)=>{
871+
if(expanded){
872+
handleChangeEvent('rowExpand')
873+
}else{
874+
handleChangeEvent('rowShrink')
875+
}
860876
}
877+
}}
878+
rowColorFn={compChildren.rowColor.getView()asany}
879+
rowHeightFn={compChildren.rowHeight.getView()asany}
880+
{...compChildren.selection.getView()(onEvent)}
881+
bordered={compChildren.showRowGridBorder.getView()}
882+
onChange={(pagination,filters,sorter,extra)=>{
883+
onTableChange(pagination,filters,sorter,extra,comp.dispatch,onEvent);
884+
}}
885+
showHeader={!compChildren.hideHeader.getView()}
886+
columns={antdColumns}
887+
columnsStyle={columnsStyle}
888+
viewModeResizable={compChildren.viewModeResizable.getView()}
889+
visibleResizables={compChildren.visibleResizables.getView()}
890+
dataSource={pageDataInfo.data}
891+
size={compChildren.size.getView()}
892+
rowAutoHeight={rowAutoHeight}
893+
tableLayout="fixed"
894+
loading={
895+
loading||
896+
// fixme isLoading type
897+
(compChildren.showDataLoadSpinner.getView()&&
898+
(compChildren.dataasany).isLoading())||
899+
compChildren.loading.getView()
861900
}
862-
}}
863-
rowColorFn={compChildren.rowColor.getView()asany}
864-
rowHeightFn={compChildren.rowHeight.getView()asany}
865-
{...compChildren.selection.getView()(onEvent)}
866-
bordered={compChildren.showRowGridBorder.getView()}
867-
onChange={(pagination,filters,sorter,extra)=>{
868-
onTableChange(pagination,filters,sorter,extra,comp.dispatch,onEvent);
869-
}}
870-
showHeader={!compChildren.hideHeader.getView()}
871-
columns={antdColumns}
872-
columnsStyle={columnsStyle}
873-
viewModeResizable={compChildren.viewModeResizable.getView()}
874-
visibleResizables={compChildren.visibleResizables.getView()}
875-
dataSource={pageDataInfo.data}
876-
size={compChildren.size.getView()}
877-
rowAutoHeight={rowAutoHeight}
878-
tableLayout="fixed"
879-
loading={
880-
loading||
881-
// fixme isLoading type
882-
(compChildren.showDataLoadSpinner.getView()&&
883-
(compChildren.dataasany).isLoading())||
884-
compChildren.loading.getView()
885-
}
886-
onCellClick={(columnName:string,dataIndex:string)=>{
887-
comp.children.selectedCell.dispatchChangeValueAction({
888-
name:columnName,
889-
dataIndex:dataIndex,
890-
});
891-
}}
892-
/>
893-
894-
<SlotConfigContext.Providervalue={{modalWidth:width&&Math.max(width,300)}}>
895-
{expansion.expandModalView}
896-
</SlotConfigContext.Provider>
897-
</TableWrapper>
898-
{toolbar.position==="below"&&toolbarView}
901+
onCellClick={(columnName:string,dataIndex:string)=>{
902+
comp.children.selectedCell.dispatchChangeValueAction({
903+
name:columnName,
904+
dataIndex:dataIndex,
905+
});
906+
}}
907+
/>
908+
909+
<SlotConfigContext.Providervalue={{modalWidth:width&&Math.max(width,300)}}>
910+
{expansion.expandModalView}
911+
</SlotConfigContext.Provider>
912+
</TableWrapper>
913+
{toolbar.position==="below"&&toolbarView}
914+
</ScrollBar>
915+
{/* </div> */}
899916
</BackgroundWrapper>
900917

901918
</BackgroundColorContext.Provider>

‎client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,12 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
462462
radioButton:true,
463463
})}
464464
{comp.children.autoHeight.getPropertyView()}
465+
{comp.children.showHorizontalScrollbar.propertyView({
466+
label:trans("prop.showHorizontalScrollbar"),
467+
})}
468+
{!comp.children.autoHeight.getView()&&comp.children.showVerticalScrollbar.propertyView({
469+
label:trans("prop.showVerticalScrollbar"),
470+
})}
465471
{comp.children.fixedHeader.propertyView({
466472
label:trans("table.fixedHeader"),
467473
tooltip:trans("table.fixedHeaderTooltip")

‎client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,8 @@ const tableChildrenMap = {
197197
hideHeader:BoolControl,
198198
fixedHeader:BoolControl,
199199
autoHeight:withDefault(AutoHeightControl,"auto"),
200+
showVerticalScrollbar:BoolControl,
201+
showHorizontalScrollbar:BoolControl,
200202
data:withIsLoadingMethod(JSONObjectArrayControl),
201203
showDataLoadSpinner:withDefault(BoolPureControl,true),
202204
columns:ColumnListComp,

‎client/packages/lowcoder/src/i18n/locales/de.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,8 @@ export const de: typeof en = {
200200
"className":"Klasse",
201201
"dataTestId":"Test ID",
202202
"horizontalGridCells":"Horizontale Gitterzellen",
203+
"showHorizontalScrollbar":"Show horizontal scrollbar",
204+
"showVerticalScrollbar":"Show vertical scrollbar",
203205
},
204206
"autoHeightProp":{
205207
...en.autoHeightProp,

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,8 @@ export const en = {
220220
"preventOverwriting":"Prevent overwriting styles",
221221
"color":"Color",
222222
"horizontalGridCells":"Horizontal Grid Cells",
223+
"showHorizontalScrollbar":"Show horizontal scrollbar",
224+
"showVerticalScrollbar":"Show vertical scrollbar",
223225
},
224226
"autoHeightProp":{
225227
"auto":"Auto",

‎client/packages/lowcoder/src/i18n/locales/pt.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,8 @@ export const pt: typeof en = {
231231
"className":"Nome da Classe CSS",
232232
"dataTestId":"ID Individual",
233233
"horizontalGridCells":"Células de grade horizontal",
234+
"showHorizontalScrollbar":"Show horizontal scrollbar",
235+
"showVerticalScrollbar":"Show vertical scrollbar",
234236
},
235237
"autoHeightProp":{
236238
...en.autoHeightProp,

‎client/packages/lowcoder/src/i18n/locales/zh.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,8 @@ export const zh: typeof en = {
220220
"horizontal":"水平",
221221
"minHorizontalWidth":"最小水平宽度",
222222
"horizontalGridCells":"水平网格单元",
223+
"showHorizontalScrollbar":"Show horizontal scrollbar",
224+
"showVerticalScrollbar":"Show vertical scrollbar",
223225
},
224226

225227
autoHeightProp:{
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
typeDirection={
2+
top:string;
3+
right:string;
4+
bottom:string;
5+
left:string;
6+
}
7+
8+
exportconstparseMarginOrPadding=(style:string):Direction=>{
9+
conststyles=style.split(' ');
10+
if(styles.length===1){
11+
return{
12+
top:styles[0],right:styles[0],bottom:styles[0],left:styles[0],
13+
};
14+
}
15+
if(styles.length===2){
16+
return{
17+
top:styles[0],right:styles[1],bottom:styles[0],left:styles[1],
18+
};
19+
}
20+
if(styles.length===3){
21+
return{
22+
top:styles[0],right:styles[1],bottom:styles[2],left:styles[1],
23+
};
24+
}
25+
if(styles.length===4){
26+
return{
27+
top:styles[0],right:styles[1],bottom:styles[2],left:styles[3],
28+
};
29+
}
30+
// invalid margin/padding
31+
return{
32+
top:'0px',right:'0px',bottom:'0px',left:'0px',
33+
};
34+
}
35+
36+
exportconstgetVerticalMargin=(margin:string[])=>{
37+
if(margin.length===1)return`(${margin[0]} +${margin[0]})`;
38+
if(margin.length===2)return`(${margin[0]} +${margin[0]})`;
39+
if(margin.length===3||margin.length===4)
40+
return`(${margin[0]} +${margin[2]})`;
41+
42+
return'0px';
43+
}
44+
45+
exportconstgetHorizontalMargin=(margin:string[])=>{
46+
if(margin.length===1)return`(${margin[0]} +${margin[0]})`;
47+
if(margin.length===2)return`(${margin[1]} +${margin[1]})`;
48+
if(margin.length===3||margin.length===4)
49+
return`(${margin[1]} +${margin[3]})`;
50+
51+
return'0px';
52+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp