Table fixes/updates

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

@@ -34,6 +34,7 @@ export interface CellProps {
   size?: string;
   candidateTags?: string[];
   candidateStatus?: { text: string; status: StatusType }[];
+  textOverflow?: boolean;
 }
 
 export type CellViewReturn = (props: CellProps) => ReactNode;
@@ -43,17 +44,6 @@ export type EditViewFn<T> = (props: {
   onChangeEnd: () => void;
 }) => ReactNode;
 
-export const SizeWrapper = styled.div<{ $size?: string }>`
-  ${(props) =>
-    props.$size &&
-    `padding: ${
-      props.$size === "small" ? "8.5px 8px" : props.$size === "large" ? "16.5px 16px" : "12.5px 8px"
-    };
-    line-height: 21px;
-    min-height: ${props.$size === "small" ? "39px" : props.$size === "large" ? "55px" : "47px"};
-    `}
-`;
-
 const BorderDiv = styled.div`
   position: absolute;
   border: 1.5px solid #315efb;
@@ -127,11 +117,15 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
   }
 
   return (
-    <ColumnTypeView>
+    <ColumnTypeView
+      textOverflow={props.textOverflow}
+    >
       {status === "toSave" && !isEditing && <EditableChip />}
-      <SizeWrapper $size={props.size} onDoubleClick={enterEditFn}>
+      <div
+        onDoubleClick={enterEditFn}
+      >
         {normalView}
-      </SizeWrapper>
+      </div>
     </ColumnTypeView>
   );
 }

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

@@ -1,13 +1,17 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 
-const ColumnTypeViewWrapper = styled.div`
-  div {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    word-break: keep-all;
-  }
+const ColumnTypeViewWrapper = styled.div<{
+  textOverflow?: boolean
+}>`
+  ${props => !props.textOverflow && `
+    div {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      word-break: keep-all;
+    }
+  `}
 `;
 
 const ColumnTypeHoverView = styled.div<{
@@ -62,7 +66,10 @@ function childIsOverflow(nodes: HTMLCollection): boolean {
   return false;
 }
 
-export default function ColumnTypeView(props: { children: React.ReactNode }) {
+export default function ColumnTypeView(props: {
+  children: React.ReactNode,
+  textOverflow?: boolean,
+}) {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const hoverViewRef = useRef<HTMLDivElement>(null);
   const [isHover, setIsHover] = useState(false);
@@ -161,6 +168,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
     <>
       <ColumnTypeViewWrapper
         ref={wrapperRef}
+        textOverflow={props.textOverflow}
         onMouseEnter={() => {
           delayMouseEnter();
         }}
@@ -171,7 +179,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
       >
         {props.children}
       </ColumnTypeViewWrapper>
-      {isHover && hasOverflow && wrapperRef.current && (
+      {isHover && hasOverflow && wrapperRef.current && !props.textOverflow && (
         <ColumnTypeHoverView
           ref={hoverViewRef}
           visible={adjustedPosition.done}

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

@@ -26,6 +26,7 @@ import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
 import { ColorControl } from "comps/controls/colorControl";
 import { JSONValue } from "util/jsonTypes";
 import styled from "styled-components";
+import { TextOverflowControl } from "comps/controls/textOverflowControl";
 
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
 export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
@@ -103,7 +104,8 @@ export const columnChildrenMap = {
   borderWidth: withDefault(RadiusControl, ""),
   radius: withDefault(RadiusControl, ""),
   textSize: withDefault(RadiusControl, ""),
-  cellColor: CellColorComp, 
+  cellColor: CellColorComp,
+  textOverflow: withDefault(TextOverflowControl, "ellipsis"),
 };
 
 const StyledIcon = styled.span`
@@ -228,6 +230,7 @@ export class ColumnComp extends ColumnInitComp {
           preInputNode: <StyledIcon as={TextSizeIcon} title="" />,	
           placeholder: '14px',
         })}
+        {this.children.textOverflow.getPropertyView()}
         {this.children.cellColor.getPropertyView()}
       </>
     );

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

@@ -51,7 +51,7 @@ import { lastValueIfEqual, shallowEqual } from "util/objectUtils";
 import { IContainer } from "../containerBase";
 import { getSelectedRowKeys } from "./selectionControl";
 import { compTablePropertyView } from "./tablePropertyView";
-import { RowColorComp, TableChildrenView, TableInitComp } from "./tableTypes";
+import { RowColorComp, RowHeightComp, TableChildrenView, TableInitComp } from "./tableTypes";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
@@ -196,6 +196,17 @@ export class TableImplComp extends TableInitComp implements IContainer {
             })
           )
         );
+        comp = comp.setChild(
+          "rowHeight",
+          comp.children.rowHeight.reduce(
+            RowHeightComp.changeContextDataAction({
+              currentRow: nextRowExample,
+              currentIndex: 0,
+              currentOriginalIndex: 0,
+              columnTitle: nextRowExample ? Object.keys(nextRowExample)[0] : undefined,
+            })
+          )
+        );
       }
 
       if (dataChanged) {

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

@@ -2,7 +2,7 @@ import { Table } from "antd";
 import { TableProps } from "antd/es/table";
 import { TableCellContext, TableRowContext } from "comps/comps/tableComp/tableContext";
 import { TableToolbar } from "comps/comps/tableComp/tableToolbarComp";
-import { RowColorViewType } from "comps/comps/tableComp/tableTypes";
+import { RowColorViewType, RowHeightViewType } from "comps/comps/tableComp/tableTypes";
 import {
   COL_MIN_WIDTH,
   COLUMN_CHILDREN_KEY,
@@ -169,6 +169,10 @@ const TableWrapper = styled.div<{
       border-top: none !important;
       border-inline-start: none !important;
 
+      &::after {
+        box-shadow: none !important;
+      }
+
       .ant-table-content {
         overflow: unset !important;
       }
@@ -280,8 +284,10 @@ const TableTh = styled.th<{ width?: number }>`
 
 const TableTd = styled.td<{
   background: string;
-  $style: TableColumnStyleType;
+  $style: TableColumnStyleType & {rowHeight?: string};
   $isEditing: boolean;
+  $tableSize?: string;
+  $autoHeight?: boolean;
 }>`
   .ant-table-row-expand-icon,
   .ant-table-row-indent {
@@ -291,16 +297,42 @@ const TableTd = styled.td<{
     background: ${(props) => props.background};
     border-color: ${(props) => props.$style.border};
   }
-
   background: ${(props) => props.background} !important;
   border-color: ${(props) => props.$style.border} !important;
   border-width: ${(props) => props.$style.borderWidth} !important;
   border-radius: ${(props) => props.$style.radius};
   padding: 0 !important;
 
-  > div > div {
+  > div {
     color: ${(props) => props.$style.text};
     font-size: ${(props) => props.$style.textSize};
+    line-height: 21px;
+
+    ${(props) => props.$tableSize === 'small' && `
+      padding: 8.5px 8px;
+      min-height: ${props.$style.rowHeight || '39px'};
+      ${!props.$autoHeight && `
+        overflow-y: auto;
+        max-height: ${props.$style.rowHeight || '39px'};
+      `};
+    `};
+    ${(props) => props.$tableSize === 'middle' && `
+      padding: 12.5px 8px;
+      min-height: ${props.$style.rowHeight || '47px'};
+      ${!props.$autoHeight && `
+        overflow-y: auto;
+        max-height: ${props.$style.rowHeight || '47px'};
+      `};
+    `};
+    ${(props) => props.$tableSize === 'large' && `
+      padding: 16.5px 16px;
+      min-height: ${props.$style.rowHeight || '55px'};
+      ${!props.$autoHeight && `
+        overflow-y: auto;
+        max-height: ${props.$style.rowHeight || '55px'};
+      `};
+    `};
+
     &,
     > .ant-badge > .ant-badge-status-text,
     > div > .markdown-body {
@@ -383,30 +415,40 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
   columns: CustomColumnType<RecordType>[];
   viewModeResizable: boolean;
   rowColorFn: RowColorViewType;
+  rowHeightFn: RowHeightViewType;
   columnsStyle: TableColumnStyleType;
+  size?: string;
+  rowAutoHeight?: boolean;
 };
 
 function TableCellView(props: {
   record: RecordType;
   title: string;
   rowColorFn: RowColorViewType;
+  rowHeightFn: RowHeightViewType;
   cellColorFn: CellColorViewType;
   rowIndex: number;
   children: any;
   columnsStyle: TableColumnStyleType;
   columnStyle: TableColumnStyleType;
+  tableSize?: string;
+  autoHeight?: boolean;
 }) {
   const {
     record,
     title,
     rowIndex,
     rowColorFn,
+    rowHeightFn,
     cellColorFn,
     children,
     columnsStyle,
     columnStyle,
+    tableSize,
+    autoHeight,
     ...restProps
   } = props;
+
   const [editing, setEditing] = useState(false);
   const rowContext = useContext(TableRowContext);
   let tdView;
@@ -419,17 +461,24 @@ function TableCellView(props: {
       currentOriginalIndex: record[OB_ROW_ORI_INDEX],
       columnTitle: title,
     });
+    const rowHeight = rowHeightFn({
+      currentRow: record,
+      currentIndex: rowIndex,
+      currentOriginalIndex: record[OB_ROW_ORI_INDEX],
+      columnTitle: title,
+    });
     const cellColor = cellColorFn({
       currentCell: record[title.toLowerCase()],
     });
 
-    const style: TableColumnStyleType = {
+    const style = {
       background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
       text: columnStyle.text || columnsStyle.text,
       border: columnStyle.border || columnsStyle.border,
       radius: columnStyle.radius || columnsStyle.radius,
       borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
       textSize: columnStyle.textSize || columnsStyle.textSize,
+      rowHeight: rowHeight,
     }
     let { background } = style;
     if (rowContext.selected) {
@@ -444,6 +493,8 @@ function TableCellView(props: {
         background={background}
         $style={style}
         $isEditing={editing}
+        $tableSize={tableSize}
+        $autoHeight={autoHeight}
       >
         {children}
       </TableTd>
@@ -511,10 +562,13 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
         record,
         title: col.titleText,
         rowColorFn: props.rowColorFn,
+        rowHeightFn: props.rowHeightFn,
         cellColorFn: cellColorFn,
         rowIndex: rowIndex,
         columnsStyle: props.columnsStyle,
         columnStyle: style,
+        tableSize: props.size,
+        autoHeight: props.rowAutoHeight,
       }),
       onHeaderCell: () => ({
         width: resizeWidth,
@@ -583,6 +637,7 @@ export function TableCompView(props: {
   const compChildren = comp.children;
   const style = compChildren.style.getView();
   const rowStyle = compChildren.rowStyle.getView();
+  const rowAutoHeight = compChildren.rowAutoHeight.getView();
   const columnsStyle = compChildren.columnsStyle.getView();
   const changeSet = useMemo(() => compChildren.columns.getChangeSet(), [compChildren.columns]);
   const hasChange = useMemo(() => !_.isEmpty(changeSet), [changeSet]);
@@ -610,7 +665,7 @@ export function TableCompView(props: {
         size,
         dynamicColumn,
         dynamicColumnConfig,
-        columnsAggrData
+        columnsAggrData,
       ),
     [
       columnViews,
@@ -711,6 +766,7 @@ export function TableCompView(props: {
             }
           }}
           rowColorFn={compChildren.rowColor.getView() as any}
+          rowHeightFn={compChildren.rowHeight.getView() as any}
           {...compChildren.selection.getView()(onEvent)}
           bordered={!compChildren.hideBordered.getView()}
           onChange={(pagination, filters, sorter, extra) => {
@@ -722,6 +778,7 @@ export function TableCompView(props: {
           viewModeResizable={compChildren.viewModeResizable.getView()}
           dataSource={pageDataInfo.data}
           size={compChildren.size.getView()}
+          rowAutoHeight={rowAutoHeight}
           tableLayout="fixed"
           loading={
             loading ||

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

@@ -504,11 +504,12 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
 
       {["layout", "both"].includes(editorModeStatus) && (
         <><Section name={"Table Style"}>
-            {comp.children.style.getPropertyView()}
-
+            {comp.children.style.getPropertyView()}  
           </Section>
           <Section name={"Row Style"}>
             {comp.children.rowStyle.getPropertyView()}
+            {comp.children.rowAutoHeight.getPropertyView()}
+            {comp.children.rowHeight.getPropertyView()}
             {comp.children.rowColor.getPropertyView()}
           </Section>
           <Section name={"Column Style"}>

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

@@ -54,14 +54,12 @@ const getStyle = (
   return css`
     background-color: ${style.toolbarBackground};
     // Implement horizontal scrollbar and vertical page number selection is not blocked
-    // padding: ${position === "above" ? "13px 16px 313px 16px" : "313px 16px 13px 16px"};
-    // margin: ${position === "above" ? "0 0 -300px 0" : "-300px 0 0 0"};
     padding: 13px 12px;
-    ${fixedToolbar && `
-      position: sticky;
-      postion: -webkit-sticky;
-      z-index: 99;
-    `};
+    position: sticky;
+    postion: -webkit-sticky;
+    left: 0;
+
+    ${fixedToolbar && `z-index: 99;`};
     ${fixedToolbar && position === 'below' && `bottom: 0;`};
     ${fixedToolbar && position === 'above' && `top: 0;` };