Skip to content

Commit 11bd51c

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #564 from raheeliftikhar5/table-fixes
Table fixes/updates
2 parents cb8fee7 + fc8185e commit 11bd51c

File tree

13 files changed

+215
-47
lines changed

13 files changed

+215
-47
lines changed

‎client/packages/lowcoder/src/components/table/EditableCell.tsx‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export interface CellProps {
3434
size?: string;
3535
candidateTags?: string[];
3636
candidateStatus?: { text: string; status: StatusType }[];
37+
textOverflow?: boolean;
3738
}
3839

3940
export type CellViewReturn = (props: CellProps) => ReactNode;
@@ -43,17 +44,6 @@ export type EditViewFn<T> = (props: {
4344
onChangeEnd: () => void;
4445
}) => ReactNode;
4546

46-
export const SizeWrapper = styled.div<{ $size?: string }>`
47-
${(props) =>
48-
props.$size &&
49-
`padding: ${
50-
props.$size === "small" ? "8.5px 8px" : props.$size === "large" ? "16.5px 16px" : "12.5px 8px"
51-
};
52-
line-height: 21px;
53-
min-height: ${props.$size === "small" ? "39px" : props.$size === "large" ? "55px" : "47px"};
54-
`}
55-
`;
56-
5747
const BorderDiv = styled.div`
5848
position: absolute;
5949
border: 1.5px solid #315efb;
@@ -127,11 +117,15 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
127117
}
128118

129119
return (
130-
<ColumnTypeView>
120+
<ColumnTypeView
121+
textOverflow={props.textOverflow}
122+
>
131123
{status === "toSave" && !isEditing && <EditableChip />}
132-
<SizeWrapper $size={props.size} onDoubleClick={enterEditFn}>
124+
<div
125+
onDoubleClick={enterEditFn}
126+
>
133127
{normalView}
134-
</SizeWrapper>
128+
</div>
135129
</ColumnTypeView>
136130
);
137131
}

‎client/packages/lowcoder/src/components/table/columnTypeView.tsx‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import React, { useEffect, useMemo, useRef, useState } from "react";
22
import styled from "styled-components";
33

4-
const ColumnTypeViewWrapper = styled.div`
5-
div {
6-
overflow: hidden;
7-
white-space: nowrap;
8-
text-overflow: ellipsis;
9-
word-break: keep-all;
10-
}
4+
const ColumnTypeViewWrapper = styled.div<{
5+
textOverflow?: boolean
6+
}>`
7+
${props => !props.textOverflow && `
8+
div {
9+
overflow: hidden;
10+
white-space: nowrap;
11+
text-overflow: ellipsis;
12+
word-break: keep-all;
13+
}
14+
`}
1115
`;
1216

1317
const ColumnTypeHoverView = styled.div<{
@@ -62,7 +66,10 @@ function childIsOverflow(nodes: HTMLCollection): boolean {
6266
return false;
6367
}
6468

65-
export default function ColumnTypeView(props: { children: React.ReactNode }) {
69+
export default function ColumnTypeView(props: {
70+
children: React.ReactNode,
71+
textOverflow?: boolean,
72+
}) {
6673
const wrapperRef = useRef<HTMLDivElement>(null);
6774
const hoverViewRef = useRef<HTMLDivElement>(null);
6875
const [isHover, setIsHover] = useState(false);
@@ -161,6 +168,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
161168
<>
162169
<ColumnTypeViewWrapper
163170
ref={wrapperRef}
171+
textOverflow={props.textOverflow}
164172
onMouseEnter={() => {
165173
delayMouseEnter();
166174
}}
@@ -171,7 +179,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
171179
>
172180
{props.children}
173181
</ColumnTypeViewWrapper>
174-
{isHover && hasOverflow && wrapperRef.current && (
182+
{isHover && hasOverflow && wrapperRef.current && !props.textOverflow && (
175183
<ColumnTypeHoverView
176184
ref={hoverViewRef}
177185
visible={adjustedPosition.done}

‎client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
2626
import { ColorControl } from "comps/controls/colorControl";
2727
import { JSONValue } from "util/jsonTypes";
2828
import styled from "styled-components";
29+
import { TextOverflowControl } from "comps/controls/textOverflowControl";
2930

3031
export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
3132
export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
@@ -103,7 +104,8 @@ export const columnChildrenMap = {
103104
borderWidth: withDefault(RadiusControl, ""),
104105
radius: withDefault(RadiusControl, ""),
105106
textSize: withDefault(RadiusControl, ""),
106-
cellColor: CellColorComp,
107+
cellColor: CellColorComp,
108+
textOverflow: withDefault(TextOverflowControl, "ellipsis"),
107109
};
108110

109111
const StyledIcon = styled.span`
@@ -228,6 +230,7 @@ export class ColumnComp extends ColumnInitComp {
228230
preInputNode: <StyledIcon as={TextSizeIcon} title="" />,
229231
placeholder: '14px',
230232
})}
233+
{this.children.textOverflow.getPropertyView()}
231234
{this.children.cellColor.getPropertyView()}
232235
</>
233236
);

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ import { lastValueIfEqual, shallowEqual } from "util/objectUtils";
5151
import { IContainer } from "../containerBase";
5252
import { getSelectedRowKeys } from "./selectionControl";
5353
import { compTablePropertyView } from "./tablePropertyView";
54-
import { RowColorComp, TableChildrenView, TableInitComp } from "./tableTypes";
54+
import { RowColorComp, RowHeightComp, TableChildrenView, TableInitComp } from "./tableTypes";
5555

5656
import { useContext } from "react";
5757
import { EditorContext } from "comps/editorState";
@@ -196,6 +196,17 @@ export class TableImplComp extends TableInitComp implements IContainer {
196196
})
197197
)
198198
);
199+
comp = comp.setChild(
200+
"rowHeight",
201+
comp.children.rowHeight.reduce(
202+
RowHeightComp.changeContextDataAction({
203+
currentRow: nextRowExample,
204+
currentIndex: 0,
205+
currentOriginalIndex: 0,
206+
columnTitle: nextRowExample ? Object.keys(nextRowExample)[0] : undefined,
207+
})
208+
)
209+
);
199210
}
200211

201212
if (dataChanged) {

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

Lines changed: 63 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Table } from "antd";
22
import { TableProps } from "antd/es/table";
33
import { TableCellContext, TableRowContext } from "comps/comps/tableComp/tableContext";
44
import { TableToolbar } from "comps/comps/tableComp/tableToolbarComp";
5-
import { RowColorViewType } from "comps/comps/tableComp/tableTypes";
5+
import { RowColorViewType, RowHeightViewType } from "comps/comps/tableComp/tableTypes";
66
import {
77
COL_MIN_WIDTH,
88
COLUMN_CHILDREN_KEY,
@@ -169,6 +169,10 @@ const TableWrapper = styled.div<{
169169
border-top: none !important;
170170
border-inline-start: none !important;
171171
172+
&::after {
173+
box-shadow: none !important;
174+
}
175+
172176
.ant-table-content {
173177
overflow: unset !important;
174178
}
@@ -280,8 +284,10 @@ const TableTh = styled.th<{ width?: number }>`
280284

281285
const TableTd = styled.td<{
282286
background: string;
283-
$style: TableColumnStyleType;
287+
$style: TableColumnStyleType & {rowHeight?: string};
284288
$isEditing: boolean;
289+
$tableSize?: string;
290+
$autoHeight?: boolean;
285291
}>`
286292
.ant-table-row-expand-icon,
287293
.ant-table-row-indent {
@@ -291,16 +297,42 @@ const TableTd = styled.td<{
291297
background: ${(props) => props.background};
292298
border-color: ${(props) => props.$style.border};
293299
}
294-
295300
background: ${(props) => props.background} !important;
296301
border-color: ${(props) => props.$style.border} !important;
297302
border-width: ${(props) => props.$style.borderWidth} !important;
298303
border-radius: ${(props) => props.$style.radius};
299304
padding: 0 !important;
300305
301-
> div > div {
306+
> div {
302307
color: ${(props) => props.$style.text};
303308
font-size: ${(props) => props.$style.textSize};
309+
line-height: 21px;
310+
311+
${(props) => props.$tableSize === 'small' && `
312+
padding: 8.5px 8px;
313+
min-height: ${props.$style.rowHeight || '39px'};
314+
${!props.$autoHeight && `
315+
overflow-y: auto;
316+
max-height: ${props.$style.rowHeight || '39px'};
317+
`};
318+
`};
319+
${(props) => props.$tableSize === 'middle' && `
320+
padding: 12.5px 8px;
321+
min-height: ${props.$style.rowHeight || '47px'};
322+
${!props.$autoHeight && `
323+
overflow-y: auto;
324+
max-height: ${props.$style.rowHeight || '47px'};
325+
`};
326+
`};
327+
${(props) => props.$tableSize === 'large' && `
328+
padding: 16.5px 16px;
329+
min-height: ${props.$style.rowHeight || '55px'};
330+
${!props.$autoHeight && `
331+
overflow-y: auto;
332+
max-height: ${props.$style.rowHeight || '55px'};
333+
`};
334+
`};
335+
304336
&,
305337
> .ant-badge > .ant-badge-status-text,
306338
> div > .markdown-body {
@@ -383,30 +415,40 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
383415
columns: CustomColumnType<RecordType>[];
384416
viewModeResizable: boolean;
385417
rowColorFn: RowColorViewType;
418+
rowHeightFn: RowHeightViewType;
386419
columnsStyle: TableColumnStyleType;
420+
size?: string;
421+
rowAutoHeight?: boolean;
387422
};
388423

389424
function TableCellView(props: {
390425
record: RecordType;
391426
title: string;
392427
rowColorFn: RowColorViewType;
428+
rowHeightFn: RowHeightViewType;
393429
cellColorFn: CellColorViewType;
394430
rowIndex: number;
395431
children: any;
396432
columnsStyle: TableColumnStyleType;
397433
columnStyle: TableColumnStyleType;
434+
tableSize?: string;
435+
autoHeight?: boolean;
398436
}) {
399437
const {
400438
record,
401439
title,
402440
rowIndex,
403441
rowColorFn,
442+
rowHeightFn,
404443
cellColorFn,
405444
children,
406445
columnsStyle,
407446
columnStyle,
447+
tableSize,
448+
autoHeight,
408449
...restProps
409450
} = props;
451+
410452
const [editing, setEditing] = useState(false);
411453
const rowContext = useContext(TableRowContext);
412454
let tdView;
@@ -419,17 +461,24 @@ function TableCellView(props: {
419461
currentOriginalIndex: record[OB_ROW_ORI_INDEX],
420462
columnTitle: title,
421463
});
464+
const rowHeight = rowHeightFn({
465+
currentRow: record,
466+
currentIndex: rowIndex,
467+
currentOriginalIndex: record[OB_ROW_ORI_INDEX],
468+
columnTitle: title,
469+
});
422470
const cellColor = cellColorFn({
423471
currentCell: record[title.toLowerCase()],
424472
});
425473

426-
const style: TableColumnStyleType = {
474+
const style = {
427475
background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
428476
text: columnStyle.text || columnsStyle.text,
429477
border: columnStyle.border || columnsStyle.border,
430478
radius: columnStyle.radius || columnsStyle.radius,
431479
borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
432480
textSize: columnStyle.textSize || columnsStyle.textSize,
481+
rowHeight: rowHeight,
433482
}
434483
let { background } = style;
435484
if (rowContext.selected) {
@@ -444,6 +493,8 @@ function TableCellView(props: {
444493
background={background}
445494
$style={style}
446495
$isEditing={editing}
496+
$tableSize={tableSize}
497+
$autoHeight={autoHeight}
447498
>
448499
{children}
449500
</TableTd>
@@ -511,10 +562,13 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
511562
record,
512563
title: col.titleText,
513564
rowColorFn: props.rowColorFn,
565+
rowHeightFn: props.rowHeightFn,
514566
cellColorFn: cellColorFn,
515567
rowIndex: rowIndex,
516568
columnsStyle: props.columnsStyle,
517569
columnStyle: style,
570+
tableSize: props.size,
571+
autoHeight: props.rowAutoHeight,
518572
}),
519573
onHeaderCell: () => ({
520574
width: resizeWidth,
@@ -583,6 +637,7 @@ export function TableCompView(props: {
583637
const compChildren = comp.children;
584638
const style = compChildren.style.getView();
585639
const rowStyle = compChildren.rowStyle.getView();
640+
const rowAutoHeight = compChildren.rowAutoHeight.getView();
586641
const columnsStyle = compChildren.columnsStyle.getView();
587642
const changeSet = useMemo(() => compChildren.columns.getChangeSet(), [compChildren.columns]);
588643
const hasChange = useMemo(() => !_.isEmpty(changeSet), [changeSet]);
@@ -610,7 +665,7 @@ export function TableCompView(props: {
610665
size,
611666
dynamicColumn,
612667
dynamicColumnConfig,
613-
columnsAggrData
668+
columnsAggrData,
614669
),
615670
[
616671
columnViews,
@@ -711,6 +766,7 @@ export function TableCompView(props: {
711766
}
712767
}}
713768
rowColorFn={compChildren.rowColor.getView() as any}
769+
rowHeightFn={compChildren.rowHeight.getView() as any}
714770
{...compChildren.selection.getView()(onEvent)}
715771
bordered={!compChildren.hideBordered.getView()}
716772
onChange={(pagination, filters, sorter, extra) => {
@@ -722,6 +778,7 @@ export function TableCompView(props: {
722778
viewModeResizable={compChildren.viewModeResizable.getView()}
723779
dataSource={pageDataInfo.data}
724780
size={compChildren.size.getView()}
781+
rowAutoHeight={rowAutoHeight}
725782
tableLayout="fixed"
726783
loading={
727784
loading ||

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -504,11 +504,12 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
504504

505505
{["layout", "both"].includes(editorModeStatus) && (
506506
<><Section name={"Table Style"}>
507-
{comp.children.style.getPropertyView()}
508-
507+
{comp.children.style.getPropertyView()}
509508
</Section>
510509
<Section name={"Row Style"}>
511510
{comp.children.rowStyle.getPropertyView()}
511+
{comp.children.rowAutoHeight.getPropertyView()}
512+
{comp.children.rowHeight.getPropertyView()}
512513
{comp.children.rowColor.getPropertyView()}
513514
</Section>
514515
<Section name={"Column Style"}>

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,14 +54,12 @@ const getStyle = (
5454
return css`
5555
background-color: ${style.toolbarBackground};
5656
// Implement horizontal scrollbar and vertical page number selection is not blocked
57-
// padding: ${position === "above" ? "13px 16px 313px 16px" : "313px 16px 13px 16px"};
58-
// margin: ${position === "above" ? "0 0 -300px 0" : "-300px 0 0 0"};
5957
padding: 13px 12px;
60-
${fixedToolbar && `
61-
position: sticky;
62-
postion: -webkit-sticky;
63-
z-index: 99;
64-
`};
58+
position: sticky;
59+
postion: -webkit-sticky;
60+
left: 0;
61+
62+
${fixedToolbar && `z-index: 99;`};
6563
${fixedToolbar && position === 'below' && `bottom: 0;`};
6664
${fixedToolbar && position === 'above' && `top: 0;` };
6765

0 commit comments

Comments
 (0)