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

Commit23149c6

Browse files
authored
Merge pull requestlowcoder-org#1093 from lowcoder-org/table-scrollbars
Table scrollbars
2 parents6e98446 +72e7419 commit23149c6

File tree

11 files changed

+201
-85
lines changed

11 files changed

+201
-85
lines changed

‎client/packages/lowcoder-design/src/components/ScrollBar.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ interface IProps {
5656
};
5757
$hideplaceholder?:boolean;
5858
hideScrollbar?:boolean;
59+
prefixNode?:React.ReactNode;
60+
suffixNode?:React.ReactNode;
5961
}
6062

6163
exportconstScrollBar=({
@@ -65,6 +67,8 @@ export const ScrollBar = ({
6567
scrollableNodeProps,
6668
hideScrollbar=false,
6769
$hideplaceholder=false,
70+
prefixNode,
71+
suffixNode,
6872
...otherProps
6973
}:IProps)=>{
7074
constheight=style?.height??'100%';
@@ -73,12 +77,24 @@ export const ScrollBar = ({
7377

7478
returnhideScrollbar ?(
7579
<ScrollBarWrapperclassName={className}>
80+
{prefixNode}
7681
{children}
82+
{suffixNode}
7783
</ScrollBarWrapper>
7884
) :(
7985
<ScrollBarWrapperclassName={className}>
8086
<SimpleBarstyle={combinedStyle}scrollableNodeProps={scrollableNodeProps}{...otherProps}>
81-
{children}
87+
{({ scrollableNodeProps, contentNodeProps})=>{
88+
return(
89+
<div{...scrollableNodePropsasany}>
90+
{prefixNode}
91+
<div{...contentNodePropsasany}>
92+
{children}
93+
</div>
94+
{suffixNode}
95+
</div>
96+
);
97+
}}
8298
</SimpleBar>
8399
</ScrollBarWrapper>
84100
);

‎client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,9 @@ export const getStyle = (
7878
.ant-select-selection-search {
7979
padding:${style.padding};
8080
}
81-
.ant-select-selection-search-input {
81+
.ant-select-selection-search-input,
82+
.ant-select-selection-item,
83+
.ant-select-selection-item .option-label {
8284
font-family:${(styleasSelectStyleType).fontFamily} !important;
8385
text-transform:${(styleasSelectStyleType).textTransform} !important;
8486
text-decoration:${(styleasSelectStyleType).textDecoration} !important;

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

Lines changed: 113 additions & 82 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){
@@ -141,17 +142,35 @@ const TitleResizeHandle = styled.span`
141142
constBackgroundWrapper=styled.div<{
142143
$style:TableStyleType;
143144
$tableAutoHeight:boolean;
144-
}>`
145+
$showHorizontalScrollbar:boolean;
146+
$showVerticalScrollbar:boolean;
147+
}>`
148+
display: flex;
149+
flex-direction: column;
145150
background:${(props)=>props.$style.background} !important;
146-
// border:${(props)=>`${props.$style.border} !important`};
147151
border-radius:${(props)=>props.$style.radius} !important;
148-
// padding: unset !important;
149152
padding:${(props)=>props.$style.padding} !important;
150153
margin:${(props)=>props.$style.margin} !important;
151-
overflow: scroll !important;
152154
border-style:${(props)=>props.$style.borderStyle} !important;
153155
border-width:${(props)=>`${props.$style.borderWidth} !important`};
154-
${(props)=>props.$style}
156+
border-color:${(props)=>`${props.$style.border} !important`};
157+
height: calc(100% -${(props)=>getVerticalMargin(props.$style.margin.split(' '))});
158+
overflow: hidden;
159+
160+
> div.table-scrollbar-wrapper {
161+
height: auto;
162+
overflow: auto;
163+
${(props)=>!props.$showHorizontalScrollbar&&`
164+
div.simplebar-horizontal {
165+
visibility: hidden !important;
166+
}
167+
`}
168+
${(props)=>!props.$showVerticalScrollbar&&`
169+
div.simplebar-vertical {
170+
visibility: hidden !important;
171+
}
172+
`}
173+
}
155174
`;
156175

157176
// TODO: find a way to limit the calc function for max-height only to first Margin value
@@ -166,8 +185,6 @@ const TableWrapper = styled.div<{
166185
$visibleResizables:boolean;
167186
$showHRowGridBorder?:boolean;
168187
}>`
169-
overflow: unset !important;
170-
171188
.ant-table-wrapper {
172189
border-top: unset;
173190
border-color: inherit;
@@ -193,22 +210,18 @@ const TableWrapper = styled.div<{
193210
}
194211
195212
.ant-table {
196-
overflow-y:scroll;
197213
background:${(props)=>props.$style.background};
198214
.ant-table-container {
199215
border-left: unset;
200216
border-top: none !important;
201217
border-inline-start: none !important;
202-
overflow-y:scroll;
203-
height:300px
204218
205219
&::after {
206220
box-shadow: none !important;
207221
}
208222
209223
.ant-table-content {
210-
overflow-y:scroll;
211-
overflow-x:scroll;
224+
overflow: unset !important
212225
}
213226
214227
// A table expand row contains table
@@ -220,21 +233,23 @@ const TableWrapper = styled.div<{
220233
border-top: unset;
221234
222235
> .ant-table-thead {
236+
${(props)=>
237+
props.$fixedHeader&&`
238+
position: sticky;
239+
position: -webkit-sticky;
240+
// top:${props.$fixedToolbar ?'47px' :'0'};
241+
top: 0;
242+
z-index: 99;
243+
`
244+
}
223245
> tr > th {
224246
background-color:${(props)=>props.$headerStyle.headerBackground};
225247
226248
border-color:${(props)=>props.$headerStyle.border};
227249
border-width:${(props)=>props.$headerStyle.borderWidth};
228250
color:${(props)=>props.$headerStyle.headerText};
229251
// 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-
}
252+
238253
239254
> div {
240255
margin:${(props)=>props.$headerStyle.margin};
@@ -715,6 +730,8 @@ export function TableCompView(props: {
715730
consttoolbarStyle=compChildren.toolbarStyle.getView();
716731
constrowAutoHeight=compChildren.rowAutoHeight.getView();
717732
consttableAutoHeight=comp.getTableAutoHeight();
733+
constshowHorizontalScrollbar=compChildren.showHorizontalScrollbar.getView();
734+
constshowVerticalScrollbar=compChildren.showVerticalScrollbar.getView();
718735
constvisibleResizables=compChildren.visibleResizables.getView();
719736
constshowHRowGridBorder=compChildren.showHRowGridBorder.getView();
720737
constcolumnsStyle=compChildren.columnsStyle.getView();
@@ -832,70 +849,84 @@ export function TableCompView(props: {
832849

833850
return(
834851
<BackgroundColorContext.Providervalue={style.background}>
835-
<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}
852+
<BackgroundWrapper
853+
ref={ref}
854+
$style={style}
855+
$tableAutoHeight={tableAutoHeight}
856+
$showHorizontalScrollbar={showHorizontalScrollbar}
857+
$showVerticalScrollbar={showVerticalScrollbar}
858+
>
859+
{toolbar.position==="above"&&toolbar.fixedToolbar&&toolbarView}
860+
<ScrollBar
861+
className="table-scrollbar-wrapper"
862+
style={{height:"100%",margin:"0px",padding:"0px"}}
863+
hideScrollbar={!showHorizontalScrollbar&&!showVerticalScrollbar}
864+
prefixNode={toolbar.position==="above"&&!toolbar.fixedToolbar&&toolbarView}
865+
suffixNode={toolbar.position==="below"&&!toolbar.fixedToolbar&&toolbarView}
847866
>
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')
867+
<TableWrapper
868+
$style={style}
869+
$rowStyle={rowStyle}
870+
$headerStyle={headerStyle}
871+
$toolbarStyle={toolbarStyle}
872+
$toolbarPosition={toolbar.position}
873+
$fixedHeader={compChildren.fixedHeader.getView()}
874+
$fixedToolbar={toolbar.fixedToolbar&&toolbar.position==='above'}
875+
$visibleResizables={visibleResizables}
876+
$showHRowGridBorder={showHRowGridBorder}
877+
>
878+
<ResizeableTable<RecordType>
879+
expandable={{
880+
...expansion.expandableConfig,
881+
childrenColumnName:supportChildren
882+
?COLUMN_CHILDREN_KEY
883+
:"OB_CHILDREN_KEY_PLACEHOLDER",
884+
fixed:"left",
885+
onExpand:(expanded)=>{
886+
if(expanded){
887+
handleChangeEvent('rowExpand')
888+
}else{
889+
handleChangeEvent('rowShrink')
890+
}
860891
}
892+
}}
893+
rowColorFn={compChildren.rowColor.getView()asany}
894+
rowHeightFn={compChildren.rowHeight.getView()asany}
895+
{...compChildren.selection.getView()(onEvent)}
896+
bordered={compChildren.showRowGridBorder.getView()}
897+
onChange={(pagination,filters,sorter,extra)=>{
898+
onTableChange(pagination,filters,sorter,extra,comp.dispatch,onEvent);
899+
}}
900+
showHeader={!compChildren.hideHeader.getView()}
901+
columns={antdColumns}
902+
columnsStyle={columnsStyle}
903+
viewModeResizable={compChildren.viewModeResizable.getView()}
904+
visibleResizables={compChildren.visibleResizables.getView()}
905+
dataSource={pageDataInfo.data}
906+
size={compChildren.size.getView()}
907+
rowAutoHeight={rowAutoHeight}
908+
tableLayout="fixed"
909+
loading={
910+
loading||
911+
// fixme isLoading type
912+
(compChildren.showDataLoadSpinner.getView()&&
913+
(compChildren.dataasany).isLoading())||
914+
compChildren.loading.getView()
861915
}
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}
916+
onCellClick={(columnName:string,dataIndex:string)=>{
917+
comp.children.selectedCell.dispatchChangeValueAction({
918+
name:columnName,
919+
dataIndex:dataIndex,
920+
});
921+
}}
922+
/>
923+
924+
<SlotConfigContext.Providervalue={{modalWidth:width&&Math.max(width,300)}}>
925+
{expansion.expandModalView}
926+
</SlotConfigContext.Provider>
927+
</TableWrapper>
928+
</ScrollBar>
929+
{toolbar.position==="below"&&toolbar.fixedToolbar&&toolbarView}
899930
</BackgroundWrapper>
900931

901932
</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/comps/controls/styleControlConstants.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1512,7 +1512,6 @@ export const TableHeaderStyle = [
15121512
},
15131513
TEXT_SIZE,
15141514
TEXT_WEIGHT,
1515-
FONT_FAMILY,
15161515
]asconst;
15171516

15181517
exportconstTableRowStyle=[

‎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":"Horizontale Bildlaufleiste anzeigen",
204+
"showVerticalScrollbar":"Vertikale Bildlaufleiste anzeigen",
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":"Mostrar barra de rolagem horizontal",
235+
"showVerticalScrollbar":"Mostrar barra de rolagem vertical",
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":"显示水平滚动条",
224+
"showVerticalScrollbar":"显示垂直滚动条",
223225
},
224226

225227
autoHeightProp:{

0 commit comments

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