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

Commit 23149c6

Browse files
Merge pull request lowcoder-org#1093 from lowcoder-org/table-scrollbars
Table scrollbars
2 parents 6e98446 + 72e7419 commit 23149c6

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

7478
return hideScrollbar ? (
7579
<ScrollBarWrapper className={className}>
80+
{prefixNode}
7681
{children}
82+
{suffixNode}
7783
</ScrollBarWrapper>
7884
) : (
7985
<ScrollBarWrapper className={className}>
8086
<SimpleBar style={combinedStyle} scrollableNodeProps={scrollableNodeProps} {...otherProps}>
81-
{children}
87+
{({ scrollableNodeProps, contentNodeProps }) => {
88+
return (
89+
<div {...scrollableNodeProps as any}>
90+
{prefixNode}
91+
<div {...contentNodeProps as any}>
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:${(style as SelectStyleType).fontFamily} !important;
8385
text-transform:${(style as SelectStyleType).textTransform} !important;
8486
text-decoration:${(style as SelectStyleType).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
import React, { Children, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
3333
import { Resizable } from "react-resizable";
3434
import styled, { 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
function genLinerGradient(color: string) {
@@ -141,17 +142,35 @@ const TitleResizeHandle = styled.span`
141142
const BackgroundWrapper = 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
const toolbarStyle = compChildren.toolbarStyle.getView();
716731
const rowAutoHeight = compChildren.rowAutoHeight.getView();
717732
const tableAutoHeight = comp.getTableAutoHeight();
733+
const showHorizontalScrollbar = compChildren.showHorizontalScrollbar.getView();
734+
const showVerticalScrollbar = compChildren.showVerticalScrollbar.getView();
718735
const visibleResizables = compChildren.visibleResizables.getView();
719736
const showHRowGridBorder = compChildren.showHRowGridBorder.getView();
720737
const columnsStyle = compChildren.columnsStyle.getView();
@@ -832,70 +849,84 @@ export function TableCompView(props: {
832849

833850
return (
834851
<BackgroundColorContext.Provider value={style.background} >
835-
<BackgroundWrapper ref={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() as any}
894+
rowHeightFn={compChildren.rowHeight.getView() as any}
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.data as any).isLoading()) ||
914+
compChildren.loading.getView()
861915
}
862-
}}
863-
rowColorFn={compChildren.rowColor.getView() as any}
864-
rowHeightFn={compChildren.rowHeight.getView() as any}
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.data as any).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.Provider value={{ 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.Provider value={{ 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
] as const;
15171516

15181517
export const TableRowStyle = [

‎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)

AltStyle によって変換されたページ (->オリジナル) /