diff --git a/packages/drip-table-generator/package.json b/packages/drip-table-generator/package.json
index 88815d5da..33ad721a2 100755
--- a/packages/drip-table-generator/package.json
+++ b/packages/drip-table-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "drip-table-generator",
-  "version": "3.2.2-alpha.8",
+  "version": "3.2.2-alpha.9",
   "description": "A visualization tool for generating schema of drip-table.",
   "main": "dist/index.min.js",
   "module": "lib/index.js",
diff --git a/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/left-columns/index.tsx b/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/left-columns/index.tsx
index b5043f04e..26fe004df 100644
--- a/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/left-columns/index.tsx
+++ b/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/left-columns/index.tsx
@@ -19,6 +19,8 @@ import { DripTableGeneratorProps } from '@/typing';
 
 import EditableTable from '../..';
 import ColumnHeader from '../column-header';
+import { RightFixedColumnsHandler } from '../right-columns';
+import { ScrollableColumnsHandler } from '../scroll-columns';
 import TableSection from '../table-section';
 
 export interface LeftFixedColumnsProps<
@@ -28,14 +30,14 @@ export interface LeftFixedColumnsProps<
   tableConfig: DTGTableConfig;
   previewDataSource: ({ id: number; record: RecordType })[];
   containerWidth: number;
-  rowHeight: number | undefined;
+  siblings: [React.RefObject<ScrollableColumnsHandler>, React.RefObject<RightFixedColumnsHandler>];
   columnList: { id: number; column: DTGTableConfig['columns'][number] }[];
   ref?: React.RefObject<LeftFixedColumnsHandler>;
   rowHeaderHeights?: number[];
 }
 
 export interface LeftFixedColumnsHandler {
-  getRowHeight: () => number[];
+  getRowHeight: () => number;
   getSubTableHeight: () => number[];
 }
 
@@ -48,8 +50,10 @@ function LeftFixedColumnsInner<
 ) {
   const { tableConfigs } = React.useContext(TableConfigsContext);
   const currentTableIndex = tableConfigs.findIndex(c => c.tableId === props.tableConfig.tableId);
+  const [rowHeight, setRowHeight] = React.useState(void 0 as number | undefined);
   const rowRef = React.createRef<HTMLDivElement>();
   const containerRef = React.createRef<HTMLDivElement>();
+
   const leftMargins = React.useMemo(() => {
     let margin = 0;
     if (props.tableConfig.hasSubTable) {
@@ -68,20 +72,34 @@ function LeftFixedColumnsInner<
     }
     return margin;
   }, [props.tableConfig.hasSubTable, props.tableConfig.configs, props.columnList]);
-  React.useImperativeHandle(ref, () => ({
-    getRowHeight: () => {
-      let maxCellHeight = 0;
-      const rowHeight = rowRef.current?.offsetHeight ?? 0;
-      for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
-        if (element.children[0]) {
-          const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
-          if (trueCellHeight > maxCellHeight) {
-            maxCellHeight = trueCellHeight;
-          }
+
+  const getCurrentRowHeight = () => {
+    let maxCellHeight = 0;
+    const currentRowHeight = rowRef.current?.offsetHeight ?? 0;
+    for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
+      if (element.children[0]) {
+        const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
+        if (trueCellHeight > maxCellHeight) {
+          maxCellHeight = trueCellHeight;
         }
       }
-      return [rowHeight, maxCellHeight];
-    },
+    }
+    return currentRowHeight - maxCellHeight === 1 ? currentRowHeight : maxCellHeight;
+  };
+
+  React.useEffect(() => {
+    const currentRowHeight = getCurrentRowHeight();
+    const [scrollRef, rightRef] = props.siblings;
+    const scrollColumnsHeight = scrollRef.current?.getRowHeight() || 0;
+    const rightFixedColumnsHeight = rightRef.current?.getRowHeight() || 0;
+    const maxSiblingsHeight = Math.max(scrollColumnsHeight, rightFixedColumnsHeight);
+    if (maxSiblingsHeight > currentRowHeight) {
+      setRowHeight(maxSiblingsHeight);
+    }
+  }, [props.columnList, props.tableConfig, props.dataSource]);
+
+  React.useImperativeHandle(ref, () => ({
+    getRowHeight: getCurrentRowHeight,
     getSubTableHeight: () => {
       const rows = (containerRef.current?.children || []) as HTMLDivElement[];
       const start = props.tableConfig.configs.showHeader ? 1 : 0;
@@ -174,7 +192,7 @@ function LeftFixedColumnsInner<
                 stripe: props.tableConfig.configs.stripe && rowIndex % 2 === 1,
               })}
               ref={rowRef}
-              style={{ height: props.rowHeight }}
+              style={{ height: rowHeight }}
             >
               {props.tableConfig.hasSubTable && (
                 <div
diff --git a/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/right-columns/index.tsx b/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/right-columns/index.tsx
index 503721292..578a38d35 100644
--- a/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/right-columns/index.tsx
+++ b/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/right-columns/index.tsx
@@ -15,6 +15,8 @@ import { DTGTableConfig } from '@/context/table-configs';
 import { DripTableGeneratorProps } from '@/typing';
 
 import ColumnHeader from '../column-header';
+import { LeftFixedColumnsHandler } from '../left-columns';
+import { ScrollableColumnsHandler } from '../scroll-columns';
 import TableSection from '../table-section';
 
 export interface RightFixedColumnsProps<
@@ -24,7 +26,7 @@ export interface RightFixedColumnsProps<
   tableConfig: DTGTableConfig;
   previewDataSource: ({ id: number; record: RecordType })[];
   containerWidth: number;
-  rowHeight: number | undefined;
+  siblings: [React.RefObject<LeftFixedColumnsHandler>, React.RefObject<ScrollableColumnsHandler>];
   columnList: { id: number; column: DTGTableConfig['columns'][number] }[];
   ref?: React.RefObject<RightFixedColumnsHandler>;
   subTableHeights?: number[];
@@ -32,7 +34,7 @@ export interface RightFixedColumnsProps<
 }
 
 export interface RightFixedColumnsHandler {
-  getRowHeight: () => number[];
+  getRowHeight: () => number;
 }
 
 function RightFixedColumnsInner<
@@ -43,20 +45,35 @@ function RightFixedColumnsInner<
   ref: React.ForwardedRef<RightFixedColumnsHandler>,
 ) {
   const rowRef = React.createRef<HTMLDivElement>();
-  React.useImperativeHandle(ref, () => ({
-    getRowHeight: () => {
-      let maxCellHeight = 0;
-      const rowHeight = rowRef.current?.offsetHeight ?? 0;
-      for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
-        if (element.children[0]) {
-          const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
-          if (trueCellHeight > maxCellHeight) {
-            maxCellHeight = trueCellHeight;
-          }
+  const [rowHeight, setRowHeight] = React.useState(void 0 as number | undefined);
+
+  const getCurrentRowHeight = () => {
+    let maxCellHeight = 0;
+    const currentRowHeight = rowRef.current?.offsetHeight ?? 0;
+    for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
+      if (element.children[0]) {
+        const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
+        if (trueCellHeight > maxCellHeight) {
+          maxCellHeight = trueCellHeight;
         }
       }
-      return [rowHeight, maxCellHeight];
-    },
+    }
+    return currentRowHeight - maxCellHeight === 1 ? currentRowHeight : maxCellHeight;
+  };
+
+  React.useEffect(() => {
+    const currentRowHeight = getCurrentRowHeight();
+    const [leftRef, scrollRef] = props.siblings;
+    const leftFixedColumnsHeight = leftRef.current?.getRowHeight() || 0;
+    const scrollColumnsHeight = scrollRef.current?.getRowHeight() || 0;
+    const maxSiblingsHeight = Math.max(scrollColumnsHeight, leftFixedColumnsHeight);
+    if (maxSiblingsHeight > currentRowHeight) {
+      setRowHeight(maxSiblingsHeight);
+    }
+  }, [props.columnList, props.tableConfig, props.dataSource]);
+
+  React.useImperativeHandle(ref, () => ({
+    getRowHeight: getCurrentRowHeight,
   }));
   return (
     <div
@@ -97,7 +114,7 @@ function RightFixedColumnsInner<
               stripe: props.tableConfig.configs.stripe && rowIndex % 2 === 1,
             })}
             ref={rowRef}
-            style={{ height: props.rowHeight }}
+            style={{ height: rowHeight }}
           >
             <TableSection
               {...props}
diff --git a/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/scroll-columns/index.tsx b/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/scroll-columns/index.tsx
index 52633f366..b88009130 100644
--- a/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/scroll-columns/index.tsx
+++ b/packages/drip-table-generator/src/layouts/table-workstation/editable-table/components/scroll-columns/index.tsx
@@ -15,6 +15,8 @@ import { DTGTableConfig } from '@/context/table-configs';
 import { DripTableGeneratorProps } from '@/typing';
 
 import ColumnHeader from '../column-header';
+import { LeftFixedColumnsHandler } from '../left-columns';
+import { RightFixedColumnsHandler } from '../right-columns';
 import RowHeader from '../row/row-header';
 import TableSection from '../table-section';
 
@@ -25,14 +27,14 @@ export interface ScrollableColumnsProps<
   tableConfig: DTGTableConfig;
   previewDataSource: ({ id: number; record: RecordType })[];
   containerWidth: number;
-  rowHeight: number | undefined;
+  siblings: [React.RefObject<LeftFixedColumnsHandler>, React.RefObject<RightFixedColumnsHandler>];
   columnList: { id: number; column: DTGTableConfig['columns'][number] }[];
   ref?: React.RefObject<ScrollableColumnsHandler>;
   subTableHeights?: number[];
 }
 
 export interface ScrollableColumnsHandler {
-  getRowHeight: () => number[];
+  getRowHeight: () => number;
   getRowHeaderHeights: () => number[];
 }
 
@@ -45,20 +47,35 @@ function ScrollableColumnsInner<
 ) {
   const rowRef = React.createRef<HTMLDivElement>();
   const containerRef = React.createRef<HTMLDivElement>();
-  React.useImperativeHandle(ref, () => ({
-    getRowHeight: () => {
-      let maxCellHeight = 0;
-      const rowHeight = rowRef.current?.offsetHeight ?? 0;
-      for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
-        if (element.children[0]) {
-          const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
-          if (trueCellHeight > maxCellHeight) {
-            maxCellHeight = trueCellHeight;
-          }
+  const [rowHeight, setRowHeight] = React.useState(void 0 as number | undefined);
+
+  const getCurrentRowHeight = () => {
+    let maxCellHeight = 0;
+    const currentRowHeight = rowRef.current?.offsetHeight ?? 0;
+    for (const element of (rowRef.current?.children || []) as HTMLDivElement[]) {
+      if (element.children[0]) {
+        const trueCellHeight = (element.children[0] as HTMLDivElement).offsetHeight + 28;
+        if (trueCellHeight > maxCellHeight) {
+          maxCellHeight = trueCellHeight;
         }
       }
-      return [rowHeight, maxCellHeight];
-    },
+    }
+    return currentRowHeight - maxCellHeight === 1 ? currentRowHeight : maxCellHeight;
+  };
+
+  React.useEffect(() => {
+    const currentRowHeight = getCurrentRowHeight();
+    const [leftRef, rightRef] = props.siblings;
+    const leftFixedColumnsHeight = leftRef.current?.getRowHeight() || 0;
+    const rightFixedColumnsHeight = rightRef.current?.getRowHeight() || 0;
+    const maxSiblingsHeight = Math.max(rightFixedColumnsHeight, leftFixedColumnsHeight);
+    if (maxSiblingsHeight > currentRowHeight) {
+      setRowHeight(maxSiblingsHeight);
+    }
+  }, [props.columnList, props.tableConfig, props.dataSource]);
+
+  React.useImperativeHandle(ref, () => ({
+    getRowHeight: getCurrentRowHeight,
     getRowHeaderHeights: () => {
       const rows = (containerRef.current?.children || []) as HTMLDivElement[];
       const start = props.tableConfig.configs.showHeader ? 1 : 0;
@@ -117,7 +134,7 @@ function ScrollableColumnsInner<
               stripe: props.tableConfig.configs.stripe && rowIndex % 2 === 1,
             })}
             ref={rowRef}
-            style={{ height: props.rowHeight }}
+            style={{ height: rowHeight }}
           >
             <TableSection
               {...props}
diff --git a/packages/drip-table-generator/src/layouts/table-workstation/editable-table/index.tsx b/packages/drip-table-generator/src/layouts/table-workstation/editable-table/index.tsx
index a2bbb8ea1..a20295c87 100644
--- a/packages/drip-table-generator/src/layouts/table-workstation/editable-table/index.tsx
+++ b/packages/drip-table-generator/src/layouts/table-workstation/editable-table/index.tsx
@@ -38,14 +38,12 @@ function EditableTable<
 >(props: EditableTableProps<RecordType, ExtraOptions>) {
   const context = React.useContext(TableConfigsContext);
   const [previewRecord] = React.useState(void 0 as number | undefined);
-  const [rowHeight, setRowHeight] = React.useState(void 0 as number | undefined);
   const [subTableHeights, setSubTableHeights] = React.useState([] as number[]);
   const [rowHeaderHeights, setRowHeaderHeights] = React.useState([] as number[]);
   const containerRef = React.useRef<TableContainerHandler>(null);
   const leftColumnsRef = React.useRef<LeftFixedColumnsHandler>(null);
   const scrollColumnsRef = React.useRef<ScrollableColumnsHandler>(null);
   const rightColumnsRef = React.useRef<RightFixedColumnsHandler>(null);
-  const lastRowHeights = React.useRef<number[]>([]);
 
   const tableHeight = React.useMemo(() => {
     if (props.tableConfig.configs.scroll?.y && typeof props.tableConfig.configs.scroll?.y !== 'boolean') {
@@ -93,24 +91,6 @@ function EditableTable<
     rightFixedColumns = filterArray(columnList, item => item.column.fixed === 'right' || (item.column.fixed && item.id > sortableColumns[0].id));
   }
 
-  React.useEffect(() => {
-    const [leftRowHeight, leftCellHeight] = leftColumnsRef.current?.getRowHeight() ?? [0, 0];
-    const [scrollRowHeight, scrollCellHeight] = scrollColumnsRef.current?.getRowHeight() ?? [0, 0];
-    const [rightRowHeight, rightCellHeight] = rightColumnsRef.current?.getRowHeight() ?? [0, 0];
-    if (lastRowHeights.current.length <= 0) {
-      if (leftRowHeight !== scrollRowHeight || rightRowHeight !== scrollCellHeight || leftRowHeight !== rightRowHeight) {
-        setRowHeight(Math.max(leftCellHeight, scrollCellHeight, rightCellHeight) + 1);
-        lastRowHeights.current = [leftCellHeight, scrollCellHeight, rightCellHeight];
-      }
-    } else {
-      const [lastLeftHeight, lastScrollHeight, lastRightHeight] = lastRowHeights.current ?? [];
-      if (lastLeftHeight !== leftCellHeight || Math.abs(lastScrollHeight - scrollCellHeight) > 1 || lastRightHeight !== rightCellHeight) {
-        setRowHeight(Math.max(leftCellHeight, scrollCellHeight, rightCellHeight) + 1);
-        lastRowHeights.current = [leftCellHeight, scrollCellHeight, rightCellHeight];
-      }
-    }
-  }, [props.dataSource, props.schema, props.tableConfig]);
-
   React.useEffect(() => {
     setTimeout(() => {
       const leftHeights = leftColumnsRef.current?.getSubTableHeight() ?? [];
@@ -160,8 +140,8 @@ function EditableTable<
                 columnList={leftFixedColumns}
                 previewDataSource={previewDataSource as ({ id: number; record: RecordType })[]}
                 containerWidth={tableWidth}
-                rowHeight={rowHeight}
                 rowHeaderHeights={rowHeaderHeights}
+                siblings={[scrollColumnsRef, rightColumnsRef]}
               />
               <ScrollableColumns<RecordType, ExtraOptions>
                 {...props}
@@ -170,8 +150,8 @@ function EditableTable<
                 columnList={sortableColumns}
                 previewDataSource={previewDataSource}
                 containerWidth={tableWidth}
-                rowHeight={rowHeight}
                 subTableHeights={subTableHeights}
+                siblings={[leftColumnsRef, rightColumnsRef]}
               />
               <RightFixedColumns<RecordType, ExtraOptions>
                 {...props}
@@ -180,9 +160,9 @@ function EditableTable<
                 columnList={rightFixedColumns}
                 previewDataSource={previewDataSource}
                 containerWidth={tableWidth}
-                rowHeight={rowHeight}
                 subTableHeights={subTableHeights}
                 rowHeaderHeights={rowHeaderHeights}
+                siblings={[leftColumnsRef, scrollColumnsRef]}
               />
             </div>
             <AddColumnComponent