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

Commite959fd1

Browse files
fix: separate options to fix header and toolbar
1 parentb2b423d commite959fd1

File tree

4 files changed

+50
-19
lines changed

4 files changed

+50
-19
lines changed

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

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -131,9 +131,10 @@ const TableWrapper = styled.div<{
131131
$rowStyle:TableRowStyleType;
132132
toolbarPosition:"above"|"below"|"close";
133133
fixedHeader:boolean;
134+
fixedToolbar:boolean;
134135
}>`
135136
max-height: 100%;
136-
overflow-y:${(props)=>(props.fixedHeader ?"hidden" :"auto")};
137+
overflow-y: auto;
137138
background: white;
138139
border:${(props)=>`1px solid${props.$style.border}`};
139140
border-radius:${(props)=>props.$style.radius};
@@ -168,6 +169,10 @@ const TableWrapper = styled.div<{
168169
border-top: none !important;
169170
border-inline-start: none !important;
170171
172+
.ant-table-content {
173+
overflow: unset !important;
174+
}
175+
171176
// A table expand row contains table
172177
.ant-table-tbody .ant-table-wrapper:only-child .ant-table {
173178
margin: 0;
@@ -182,7 +187,15 @@ const TableWrapper = styled.div<{
182187
border-color:${(props)=>props.$style.border};
183188
color:${(props)=>props.$style.headerText};
184189
border-inline-end:${(props)=>`1px solid${props.$style.border}`} !important;
185-
190+
${(props)=>
191+
props.fixedHeader&&`
192+
position: sticky;
193+
position: -webkit-sticky;
194+
top:${props.fixedToolbar ?'47px' :'0'};
195+
z-index: 99;
196+
`
197+
}
198+
186199
&:last-child {
187200
border-inline-end: none !important;
188201
}
@@ -371,9 +384,6 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
371384
viewModeResizable:boolean;
372385
rowColorFn:RowColorViewType;
373386
columnsStyle:TableColumnStyleType;
374-
fixedHeader:boolean;
375-
height?:number;
376-
autoHeight?:boolean;
377387
};
378388

379389
functionTableCellView(props:{
@@ -547,9 +557,7 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
547557
columns={columns}
548558
scroll={{
549559
x:COL_MIN_WIDTH*columns.length,
550-
y:props.fixedHeader&&props.height&&!props.autoHeight
551-
?`${props.height-100}px`
552-
:undefined,
560+
y:undefined,
553561
}}
554562
></Table>
555563
);
@@ -563,10 +571,10 @@ export function TableCompView(props: {
563571
onDownload:(fileName:string)=>void;
564572
}){
565573
consteditorState=useContext(EditorContext);
566-
const{ width,height,ref}=useResizeDetector({
574+
const{ width, ref}=useResizeDetector({
567575
refreshMode:"debounce",
568576
refreshRate:600,
569-
handleHeight:true,
577+
handleHeight:false,
570578
});
571579
constviewMode=useUserViewMode();
572580
constcompName=useContext(CompNameContext);
@@ -591,7 +599,6 @@ export function TableCompView(props: {
591599
()=>compChildren.dynamicColumnConfig.getView(),
592600
[compChildren.dynamicColumnConfig]
593601
);
594-
constautoHeight=compChildren.autoHeight.getView();
595602
constcolumnsAggrData=comp.columnAggrData;
596603
constexpansion=useMemo(()=>compChildren.expansion.getView(),[compChildren.expansion]);
597604
constantdColumns=useMemo(
@@ -689,6 +696,7 @@ export function TableCompView(props: {
689696
$rowStyle={rowStyle}
690697
toolbarPosition={toolbar.position}
691698
fixedHeader={compChildren.fixedHeader.getView()}
699+
fixedToolbar={toolbar.fixedToolbar&&toolbar.position==='above'}
692700
>
693701
{toolbar.position==="above"&&toolbarView}
694702
<ResizeableTable<RecordType>
@@ -709,15 +717,12 @@ export function TableCompView(props: {
709717
onTableChange(pagination,filters,sorter,extra,comp.dispatch,onEvent);
710718
}}
711719
showHeader={!compChildren.hideHeader.getView()}
712-
fixedHeader={compChildren.fixedHeader.getView()}
713720
columns={antdColumns}
714721
columnsStyle={columnsStyle}
715722
viewModeResizable={compChildren.viewModeResizable.getView()}
716723
dataSource={pageDataInfo.data}
717724
size={compChildren.size.getView()}
718725
tableLayout="fixed"
719-
height={height}
720-
autoHeight={autoHeight}
721726
loading={
722727
loading||
723728
// fixme isLoading type

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

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,22 @@ const getStyle = (
4848
style:TableStyleType,
4949
filtered:boolean,
5050
theme:ThemeDetail,
51-
position:ToolbarRowType["position"]
51+
position:ToolbarRowType["position"],
52+
fixedToolbar:boolean,
5253
)=>{
5354
returncss`
5455
background-color:${style.toolbarBackground};
5556
// Implement horizontal scrollbar and vertical page number selection is not blocked
56-
padding:${position==="above" ?"13px 16px 313px 16px" :"313px 16px 13px 16px"};
57-
margin:${position==="above" ?"0 0 -300px 0" :"-300px 0 0 0"};
57+
// padding:${position==="above" ?"13px 16px 313px 16px" :"313px 16px 13px 16px"};
58+
// margin:${position==="above" ?"0 0 -300px 0" :"-300px 0 0 0"};
59+
padding: 13px 12px;
60+
${fixedToolbar&&`
61+
position: sticky;
62+
postion: -webkit-sticky;
63+
z-index: 99;
64+
`};
65+
${fixedToolbar&&position==='below'&&`bottom: 0;`};
66+
${fixedToolbar&&position==='above'&&`top: 0;`};
5867
5968
.toolbar-icons {
6069
.refresh,
@@ -147,9 +156,16 @@ const ToolbarWrapper = styled.div<{
147156
$filtered:boolean;
148157
theme:ThemeDetail;
149158
position:ToolbarRowType["position"];
159+
fixedToolbar:boolean;
150160
}>`
151-
overflow: auto;
152-
${(props)=>props.$style&&getStyle(props.$style,props.$filtered,props.theme,props.position)}
161+
// overflow: auto;
162+
${(props)=>props.$style&&getStyle(
163+
props.$style,
164+
props.$filtered,
165+
props.theme,
166+
props.position,
167+
props.fixedToolbar,
168+
)}
153169
`;
154170

155171
constToolbarWrapper2=styled.div`
@@ -539,6 +555,7 @@ export const TableToolbarComp = (function () {
539555
showDownload:BoolControl,
540556
showFilter:BoolControl,
541557
columnSetting:BoolControl,
558+
fixedToolbar:BoolControl,
542559
// searchText: StringControl,
543560
filter:stateComp<TableFilter>({stackType:"and",filters:[]}),
544561
position:dropdownControl(positionOptions,"below"),
@@ -563,6 +580,10 @@ export const TableToolbarComp = (function () {
563580
})
564581
.setPropertyViewFn((children)=>[
565582
children.position.propertyView({label:trans("table.position"),radioButton:true}),
583+
children.fixedToolbar.propertyView({
584+
label:trans("table.fixedToolbar"),
585+
tooltip:trans("table.fixedToolbarTooltip")
586+
}),
566587
children.showFilter.propertyView({label:trans("table.showFilter")}),
567588
children.showRefresh.propertyView({label:trans("table.showRefresh")}),
568589
children.showDownload.propertyView({label:trans("table.showDownload")}),
@@ -728,6 +749,7 @@ export function TableToolbar(props: {
728749
theme={theme}
729750
$filtered={toolbar.filter.filters.length>0}
730751
position={toolbar.position}
752+
fixedToolbar={toolbar.fixedToolbar}
731753
>
732754
<ToolbarWrapper2>
733755
<ToolbarIconsclassName="toolbar-icons">

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1253,6 +1253,8 @@ export const en = {
12531253
hideHeader:"Hide table header",
12541254
fixedHeader:"Fixed table header",
12551255
fixedHeaderTooltip:"Header will be fixed for vertically scrollable table",
1256+
fixedToolbar:"Fixed toolbar",
1257+
fixedToolbarTooltip:"Toolbaar will be fixed for vertically scrollable table based on position",
12561258
hideBordered:"Hide column border",
12571259
deleteColumn:"Delete column",
12581260
confirmDeleteColumn:"Confirm delete column: ",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1176,6 +1176,8 @@ table: {
11761176
hideHeader:"隐藏表头",
11771177
fixedHeader:"固定表头",
11781178
fixedHeaderTooltip:"垂直滚动表格的标题将被固定",
1179+
fixedToolbar:"固定工具栏",
1180+
fixedToolbarTooltip:"工具栏将根据所选位置固定为垂直滚动表格",
11791181
hideBordered:"隐藏列边框",
11801182
deleteColumn:"删除列",
11811183
confirmDeleteColumn:"确认删除列:",

0 commit comments

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