fix: table width and height

Author: helloqian12138

packages/drip-table-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drip-table-generator",
-  "version": "3.2.2-alpha.5",
+  "version": "3.2.2-alpha.6",
   "description": "A visualization tool for generating schema of drip-table.",
   "main": "dist/index.min.js",
   "module": "lib/index.js",

packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/left-columns/index.tsx

@@ -53,20 +53,23 @@ function LeftFixedColumnsInner<
   const leftMargins = React.useMemo(() => {
     let margin = 0;
     if (props.tableConfig.hasSubTable) {
-      margin += props.tableConfig.configs.bordered ? 49 : 48;
+      margin += props.tableConfig.configs.bordered ? 50 : 48;
     }
     if (props.tableConfig.configs.rowSelection) {
       margin += props.tableConfig.configs.bordered ? 49 : 48;
     }
-    props.columnList.forEach((columnWrapper, index) => {
-      const column = columnWrapper.column;
-      margin += column.width ? formatNumber(String(column.width).replace('px', '').replace('%', '') || 200) as number : 200;
-    });
+    for (let i = 0; i < props.columnList.length; i++) {
+      const column = props.columnList[i].column;
+      const width = column.width ? formatNumber(String(column.width).replace('px', '').replace('%', '') || 200) as number : 200;
+      margin += Math.max(width, 120);
+    }
+    if (props.columnList.length > 0 && !props.tableConfig.configs.bordered) {
+      margin += 3;
+    }
     return margin;
   }, [props.tableConfig.hasSubTable, props.tableConfig.configs, props.columnList]);
   React.useImperativeHandle(ref, () => ({
     getRowHeight: () => {
-      const rowHeight = rowRef.current?.offsetHeight ?? 0;
       let maxCellHeight = 0;
       for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
         if (element.children[0]) {
@@ -76,7 +79,7 @@ function LeftFixedColumnsInner<
           }
         }
       }
-      return (rowRef.current?.children.length || 0) <= 0 ? rowHeight : maxCellHeight;
+      return maxCellHeight;
     },
     getSubTableHeight: () => {
       const rows = (containerRef.current?.children || []) as HTMLDivElement[];
@@ -102,7 +105,7 @@ function LeftFixedColumnsInner<
         bordered: props.columnList.length > 0 || props.tableConfig.hasSubTable || props.tableConfig.configs.rowSelection,
       })}
       ref={containerRef}
-      style={{ width: leftMargins }}
+      style={{ width: props.tableConfig.hasSubTable ? leftMargins : void 0 }}
     >
       <div className={classNames(
         'jfe-drip-table-generator-workstation-table-row jfe-drip-table-generator-workstation-table-header',

packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/right-columns/index.tsx

@@ -45,7 +45,6 @@ function RightFixedColumnsInner<
   const rowRef = React.createRef<HTMLDivElement>();
   React.useImperativeHandle(ref, () => ({
     getRowHeight: () => {
-      const rowHeight = rowRef.current?.offsetHeight ?? 0;
       let maxCellHeight = 0;
       for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
         if (element.children[0]) {
@@ -55,7 +54,7 @@ function RightFixedColumnsInner<
           }
         }
       }
-      return (rowRef.current?.children.length || 0) <= 0 ? rowHeight : maxCellHeight;
+      return maxCellHeight;
     },
   }));
   return (

packages/drip-table-generator/src/layouts/table-workstation/editable-table/index.tsx

@@ -46,31 +46,6 @@ function EditableTable<
   const scrollColumnsRef = React.useRef<ScrollableColumnsHandler>(null);
   const rightColumnsRef = React.useRef<RightFixedColumnsHandler>(null);
 
-  React.useEffect(() => {
-    const leftHeight = leftColumnsRef.current?.getRowHeight() ?? 0;
-    const scrollHeight = scrollColumnsRef.current?.getRowHeight() ?? 0;
-    const rightHeight = rightColumnsRef.current?.getRowHeight() ?? 0;
-    if ((leftHeight !== scrollHeight || rightHeight !== scrollHeight || leftHeight !== rightHeight) && (
-      Math.abs(scrollHeight - leftHeight) > 1 && Math.abs(scrollHeight - rightHeight) > 1
-    )) {
-      setRowHeight(Math.max(leftHeight, scrollHeight, rightHeight));
-    }
-  }, [props.dataSource, props.schema, props.tableConfig]);
-
-  React.useEffect(() => {
-    setTimeout(() => {
-      const leftHeights = leftColumnsRef.current?.getSubTableHeight() ?? [];
-      setSubTableHeights(leftHeights);
-    }, 200);
-  }, [props.dataSource, props.schema, props.tableConfig, context.tableConfigs]);
-
-  React.useEffect(() => {
-    setTimeout(() => {
-      const rowHeights = scrollColumnsRef.current?.getRowHeaderHeights() ?? [];
-      setRowHeaderHeights(rowHeights);
-    }, 200);
-  }, [props.dataSource, props.schema, props.tableConfig, context.tableConfigs]);
-
   const tableHeight = React.useMemo(() => {
     if (props.tableConfig.configs.scroll?.y && typeof props.tableConfig.configs.scroll?.y !== 'boolean') {
       return props.tableConfig.configs.scroll?.y;
@@ -116,6 +91,37 @@ function EditableTable<
     leftFixedColumns = filterArray(columnList, item => item.column.fixed === 'left' || (item.column.fixed && item.id < sortableColumns[0].id));
     rightFixedColumns = filterArray(columnList, item => item.column.fixed === 'right' || (item.column.fixed && item.id > sortableColumns[0].id));
   }
+
+  React.useEffect(() => {
+    const leftHeight = leftColumnsRef.current?.getRowHeight() ?? 0;
+    const scrollHeight = scrollColumnsRef.current?.getRowHeight() ?? 0;
+    const rightHeight = rightColumnsRef.current?.getRowHeight() ?? 0;
+    if (leftFixedColumns.length > 0 && sortableColumns.length > 0 && rightFixedColumns.length > 0
+      && (
+        Math.abs(scrollHeight - leftHeight) > 1 && Math.abs(scrollHeight - rightHeight) > 1
+      )) {
+      setRowHeight(Math.max(leftHeight, scrollHeight, rightHeight));
+    } else if (sortableColumns.length > 0 && rightFixedColumns.length <= 0 && Math.abs(scrollHeight - leftHeight) > 1) {
+      setRowHeight(Math.max(leftHeight, scrollHeight));
+    } else if (sortableColumns.length > 0 && leftFixedColumns.length <= 0 && Math.abs(scrollHeight - rightHeight) > 1) {
+      setRowHeight(Math.max(rightHeight, scrollHeight));
+    }
+  }, [props.dataSource, props.schema, props.tableConfig, leftFixedColumns, rightFixedColumns, sortableColumns]);
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      const leftHeights = leftColumnsRef.current?.getSubTableHeight() ?? [];
+      setSubTableHeights(leftHeights);
+    }, 200);
+  }, [props.dataSource, props.schema, props.tableConfig, context.tableConfigs]);
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      const rowHeights = scrollColumnsRef.current?.getRowHeaderHeights() ?? [];
+      setRowHeaderHeights(rowHeights);
+    }, 200);
+  }, [props.dataSource, props.schema, props.tableConfig, context.tableConfigs]);
+
   return (
     <TableConfigsContext.Consumer>
       {({ tableConfigs, setTableColumns }) => (