Merge pull request #536 from lowcoder-org/feat-layout-mode-table

Dev to Feature

Author: FalkWolsky

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

@@ -61,6 +61,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;
   }

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;
 
@@ -275,6 +276,7 @@ const TableTd = styled.td<{
   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 {
     color: ${(props) => props.$style.text};
@@ -362,6 +364,9 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
   viewModeResizable: boolean;
   rowColorFn: RowColorViewType;
   columnsStyle: TableColumnStyleType;
+  fixedHeader: boolean;
+  height?: number;
+  autoHeight?: boolean;
 };
 
 function TableCellView(props: {
@@ -533,7 +538,12 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
       {...props}
       pagination={false}
       columns={columns}
-      scroll={{ x: COL_MIN_WIDTH * columns.length }}
+      scroll={{
+        x: COL_MIN_WIDTH * columns.length,
+        y: props.fixedHeader && props.height && !props.autoHeight
+          ? `${props.height - 100}px`
+          : undefined,
+      }}
     ></Table>
   );
 }
@@ -546,11 +556,10 @@ export function TableCompView(props: {
   onDownload: (fileName: string) => void;
 }) {
   const editorState = useContext(EditorContext);
-  // const editorModeStatus = editorState.editorModeStatus;
-  const { width, ref } = useResizeDetector({
+  const { width, height, ref } = useResizeDetector({
     refreshMode: "debounce",
     refreshRate: 600,
-    handleHeight: false,
+    handleHeight: true,
   });
   const viewMode = useUserViewMode();
   const compName = useContext(CompNameContext);
@@ -575,6 +584,7 @@ export function TableCompView(props: {
     () => compChildren.dynamicColumnConfig.getView(),
     [compChildren.dynamicColumnConfig]
   );
+  const autoHeight = compChildren.autoHeight.getView();
   const columnsAggrData = comp.columnAggrData;
   const expansion = useMemo(() => compChildren.expansion.getView(), [compChildren.expansion]);
   const antdColumns = useMemo(
@@ -666,8 +676,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}
@@ -691,12 +701,15 @@ export function TableCompView(props: {
             onTableChange(pagination, filters, sorter, extra, comp.dispatch, onEvent);
           }}
           showHeader={!compChildren.hideHeader.getView()}
+          fixedHeader={compChildren.fixedHeader.getView()}
           columns={antdColumns}
           columnsStyle={columnsStyle}
           viewModeResizable={compChildren.viewModeResizable.getView()}
           dataSource={pageDataInfo.data}
           size={compChildren.size.getView()}
           tableLayout="fixed"
+          height={height}
+          autoHeight={autoHeight}
           loading={
             loading ||
             // fixme isLoading type
@@ -710,6 +723,7 @@ export function TableCompView(props: {
           {expansion.expandModalView}
         </SlotConfigContext.Provider>
       </TableWrapper>
+      </div>
     </BackgroundColorContext.Provider>
   );
 }

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

@@ -6,6 +6,7 @@ import {
   BoolCodeControl,
   ColorOrBoolCodeControl,
   JSONObjectArrayControl,
+  RadiusControl,
   StringControl,
 } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
@@ -33,6 +34,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 = [
   {
@@ -135,6 +137,8 @@ export type RowColorViewType = (param: {
 const tableChildrenMap = {
   hideBordered: BoolControl,
   hideHeader: BoolControl,
+  fixedHeader: BoolControl,
+  autoHeight: withDefault(AutoHeightControl, "auto"),
   data: withIsLoadingMethod(JSONObjectArrayControl),
   showDataLoadSpinner: withDefault(BoolPureControl, true),
   columns: ColumnListComp,

client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx

@@ -40,11 +40,16 @@ function useScreenInfo() {
   }
 
   const getScreenInfo = useCallback(() => {
-    const { width, height } = window.screen;
+    const { innerWidth, innerHeight } = window;
     const deviceType = getDeviceType();
     const flags = getFlagsByDeviceType(deviceType);
 
-    return { width, height, deviceType, ...flags };
+    return {
+      width: innerWidth,
+      height: innerHeight,
+      deviceType,
+      ...flags
+    };
   }, [])
 
   const [screenInfo, setScreenInfo] = useState<ScreenInfo>({});

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

@@ -1248,6 +1248,8 @@ export const en = {
     type: "Type",
     tableSize: "Table size",
     hideHeader: "Hide table header",
+    fixedHeader: "Fixed table header",
+    fixedHeaderTooltip: "Header will be fixed for vertically scrollable table",
     hideBordered: "Hide column border",
     deleteColumn: "Delete column",
     confirmDeleteColumn: "Confirm delete column: ",

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

@@ -1174,6 +1174,8 @@ table: {
     type: "类型",
     tableSize: "表格尺寸",
     hideHeader: "隐藏表头",
+    fixedHeader: "固定表头",
+    fixedHeaderTooltip: "垂直滚动表格的标题将被固定",
     hideBordered: "隐藏列边框",
     deleteColumn: "删除列",
     confirmDeleteColumn: "确认删除列:",

client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx

@@ -13,7 +13,7 @@ import {
   RightPanelContentWrapper,
 } from "pages/editor/right/styledComponent";
 import { tableDragClassName } from "pages/tutorials/tutorialsConstant";
-import React, { useContext, useMemo, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import {
   BaseSection,
@@ -99,6 +99,7 @@ Object.keys(uiCompCategoryNames).forEach((cat) => {
 export const UICompPanel = () => {
   const { onDrag, searchValue } = useContext(RightContext);
   const [propertySectionState, setPropertySectionState] = useState<PropertySectionState>(initialState);
+  const [searchedPropertySectionState, setSearchedPropertySectionState] = useState<PropertySectionState>({});
 
   const categories = useMemo(() => {
     const cats: Record<string, [string, UICompManifest][]> = Object.fromEntries(
@@ -113,11 +114,18 @@ export const UICompPanel = () => {
   }, []);
 
   const propertySectionContextValue = useMemo<PropertySectionContextType>(() => {
+    const state = searchValue
+      ? searchedPropertySectionState
+      : propertySectionState;
+    const setStateFn = searchValue
+      ? setSearchedPropertySectionState
+      : setPropertySectionState;
+
     return {
       compName: stateCompName,
-      state: propertySectionState,
+      state,
       toggle: (compName: string, sectionName: string) => {
-        setPropertySectionState((oldState) => {
+        setStateFn((oldState) => {
           const nextSectionState: PropertySectionState = { ...oldState };
           const compState = nextSectionState[compName] || {};
           compState[sectionName] = compState[sectionName] === false;
@@ -126,7 +134,13 @@ export const UICompPanel = () => {
         });
       },
     };
-  }, [propertySectionState]);
+  }, [searchValue, propertySectionState, searchedPropertySectionState]);
+
+  useEffect(() => {
+    if(!searchValue) {
+      setSearchedPropertySectionState({})
+    }
+  }, [searchValue])
 
   const compList = useMemo(
     () =>
@@ -187,7 +201,6 @@ export const UICompPanel = () => {
 
   return (
     <RightPanelContentWrapper>
-      {/* {compList.length > 0 ? compList : <EmptyCompContent />} */}
       <PropertySectionContext.Provider
         value={propertySectionContextValue}
       >