fix: replace maxHeight with auto/fixed Height

lowcoder-org · FalkWolsky · Nov 30, 2023 · Nov 30, 2023 · Nov 30, 2023 · Nov 30, 2023
commit 18e49cabd1dd513f61d99006e2dd9df4bbd790be
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
@@ -58,6 +58,10 @@ export class TableImplComp extends TableInitComp implements IContainer {
   readonly filterData: RecordType[] = [];
   readonly columnAggrData: ColumnsAggrData = {};
 
+  override autoHeight(): boolean {
+    return this.children.autoHeight.getView();
+  }
+
   private getSlotContainer() {
     return this.children.expansion.children.slot.getSelectedComp().getComp().children.container;
   }

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -158,7 +158,8 @@ const TableWrapper = styled.div<{
   $rowStyle: TableRowStyleType;
   toolbarPosition: "above" | "below" | "close";
 }>`
-  overflow: hidden;
+  max-height: 100%;
+  overflow-y: auto;
   background: white;
   border: 1px solid #d7d9e0;
 
@@ -364,7 +365,7 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
   rowColorFn: RowColorViewType;
   columnsStyle: TableColumnStyleType;
   fixedHeader: boolean;
-  maxHeight: string;
+  height?: number;
 };
 
 function TableCellView(props: {
@@ -538,7 +539,7 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
       columns={columns}
       scroll={{
         x: COL_MIN_WIDTH * columns.length,
-        y: props.fixedHeader ? props.maxHeight : undefined,
+        y: props.fixedHeader && props.height ? `${props.height - 100}px` : undefined,
       }}
     ></Table>
   );
@@ -552,10 +553,10 @@ export function TableCompView(props: {
   onDownload: (fileName: string) => void;
 }) {
   const editorState = useContext(EditorContext);
-  const { width, ref } = useResizeDetector({
+  const { width, height, ref } = useResizeDetector({
     refreshMode: "debounce",
     refreshRate: 600,
-    handleHeight: false,
+    handleHeight: true,
   });
   const viewMode = useUserViewMode();
   const compName = useContext(CompNameContext);
@@ -671,8 +672,8 @@ export function TableCompView(props: {
 
   return (
     <BackgroundColorContext.Provider value={style.background}>
+      <div ref={ref} style={{height: '100%'}}>
       <TableWrapper
-        ref={ref}
         $style={style}
         $rowStyle={rowStyle}
         toolbarPosition={toolbar.position}
@@ -697,13 +698,13 @@ export function TableCompView(props: {
           }}
           showHeader={!compChildren.hideHeader.getView()}
           fixedHeader={compChildren.fixedHeader.getView()}
-          maxHeight={compChildren.maxHeight.getView()}
           columns={antdColumns}
           columnsStyle={columnsStyle}
           viewModeResizable={compChildren.viewModeResizable.getView()}
           dataSource={pageDataInfo.data}
           size={compChildren.size.getView()}
           tableLayout="fixed"
+          height={height}
           loading={
             loading ||
             // fixme isLoading type
@@ -717,6 +718,7 @@ export function TableCompView(props: {
           {expansion.expandModalView}
         </SlotConfigContext.Provider>
       </TableWrapper>
+      </div>
     </BackgroundColorContext.Provider>
   );
 }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -429,6 +429,7 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
       <Section name={trans("prop.columns")}>{columnPropertyView(comp)}</Section>
       <Section name={sectionNames.layout}>
         {comp.children.expansion.getPropertyView()}
+        {comp.children.autoHeight.getPropertyView()}
         {hiddenPropertyView(comp.children)}
       </Section>
       <Section name={trans("prop.rowSelection")}>
@@ -465,12 +466,6 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
           label: trans("table.fixedHeader"),
           tooltip: trans("table.fixedHeaderTooltip")
         })}
-        {comp.children.fixedHeader.getView() &&
-          comp.children.maxHeight.propertyView({
-            label: trans("table.maxHeight"),
-            tooltip: trans("table.maxHeightTooltip")
-          })
-        }
       </Section>
       <Section name={"Row Style"}>
         {comp.children.rowStyle.getPropertyView()}

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -33,6 +33,7 @@ import { JSONObject } from "util/jsonTypes";
 import { ExpansionControl } from "./expansionControl";
 import { PaginationControl } from "./paginationControl";
 import { SelectionControl } from "./selectionControl";
+import { AutoHeightControl } from "comps/controls/autoHeightControl";
 
 const sizeOptions = [
   {
@@ -136,7 +137,7 @@ const tableChildrenMap = {
   hideBordered: BoolControl,
   hideHeader: BoolControl,
   fixedHeader: BoolControl,
-  maxHeight: withDefault(RadiusControl, '300px'),
+  autoHeight: withDefault(AutoHeightControl, "auto"),
   data: withIsLoadingMethod(JSONObjectArrayControl),
   showDataLoadSpinner: withDefault(BoolPureControl, true),
   columns: ColumnListComp,

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1250,8 +1250,6 @@ export const en = {
     hideHeader: "Hide table header",
     fixedHeader: "Fixed table header",
     fixedHeaderTooltip: "Header will be fixed for vertically scrollable table",
-    maxHeight: "Max. Height",
-    maxHeightTooltip: "Set max. height to make table scrollable",
     hideBordered: "Hide column border",
     deleteColumn: "Delete column",
     confirmDeleteColumn: "Confirm delete column: ",

diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -1176,8 +1176,6 @@ table: {
     hideHeader: "隐藏表头",
     fixedHeader: "固定表头",
     fixedHeaderTooltip: "垂直滚动表格的标题将被固定",
-    maxHeight: "最大限度。高度",
-    maxHeightTooltip: "设置最大值使表格可滚动的高度",
     hideBordered: "隐藏列边框",
     deleteColumn: "删除列",
     confirmDeleteColumn: "确认删除列:",