From 09e2a94bee724a8a33ea93139b70482e2ee12a2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8=E6=9E=9A?= <li.yangmei@yiban.com>
Date: Wed, 2 Apr 2025 21:06:54 +0800
Subject: [PATCH 01/23] feat: column header of the ListTable supports folding

---
 packages/vtable/src/ListTable.ts              | 33 ++++++++++++++++-
 .../vtable/src/layout/simple-header-layout.ts | 37 +++++++++++++------
 packages/vtable/src/ts-types/events.ts        |  1 +
 packages/vtable/src/ts-types/table-engine.ts  |  4 ++
 4 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts
index fc45ffa453..5635ad8a85 100644
--- a/packages/vtable/src/ListTable.ts
+++ b/packages/vtable/src/ListTable.ts
@@ -36,7 +36,7 @@ import { computeColWidth } from './scenegraph/layout/compute-col-width';
 import { computeRowHeight } from './scenegraph/layout/compute-row-height';
 import { defaultOrderFn } from './tools/util';
 import type { IEditor } from '@visactor/vtable-editors';
-import type { ColumnData, ColumnDefine } from './ts-types/list-table/layout-map/api';
+import type { ColumnData, ColumnDefine, HeaderData } from './ts-types/list-table/layout-map/api';
 import { getCellRadioState, setCellRadioState } from './state/radio/radio';
 import { cloneDeepSpec } from '@visactor/vutils-extension';
 import { getGroupCheckboxState, setCellCheckboxState } from './state/checkbox/checkbox';
@@ -839,6 +839,9 @@ export class ListTable extends BaseTable implements ListTableAPI {
    * @returns
    */
   getHierarchyState(col: number, row: number) {
+    if (this.isHeader(col, row)) {
+      return (this._getHeaderLayoutMap(col, row) as HeaderData)?.hierarchyState;
+    }
     if (!this.options.groupBy || (isArray(this.options.groupBy) && this.options.groupBy.length === 0)) {
       const define = this.getBodyColumnDefine(col, row) as ColumnDefine;
       if (!define.tree) {
@@ -857,6 +860,34 @@ export class ListTable extends BaseTable implements ListTableAPI {
   toggleHierarchyState(col: number, row: number, recalculateColWidths: boolean = true) {
     this.stateManager.updateHoverIcon(col, row, undefined, undefined);
     const hierarchyState = this.getHierarchyState(col, row);
+    if (this.isHeader(col, row)) {
+      // 表头的展开和收起
+      const headerTreeNode = this.internalProps.layoutMap.getHeader(col, row) as any;
+      const { hierarchyState: rawHierarchyState, define: columnDefine } = headerTreeNode;
+      if (![HierarchyState.collapse, HierarchyState.expand].includes(rawHierarchyState) || !columnDefine) {
+        return;
+      }
+      const children = columnDefine.columns;
+      // 有子节点才需要自动展开和折叠
+      if (!!Array.isArray(children) && children.length > 0) {
+        const hierarchyState =
+          rawHierarchyState === HierarchyState.expand ? HierarchyState.collapse : HierarchyState.expand;
+        headerTreeNode.hierarchyState = hierarchyState;
+        headerTreeNode.define.hierarchyState = hierarchyState;
+        // 全量更新
+        this.updateColumns(this.internalProps.columns);
+      }
+
+      this.fireListeners(TABLE_EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE, {
+        col,
+        row,
+        hierarchyState,
+        originData: headerTreeNode,
+        cellLocation: this.getCellLocation(col, row)
+      });
+      return;
+    }
+
     if (hierarchyState === HierarchyState.expand) {
       this._refreshHierarchyState(col, row, recalculateColWidths);
       this.fireListeners(TABLE_EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE, {
diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts
index 99c8f05217..b56fcf02d5 100644
--- a/packages/vtable/src/layout/simple-header-layout.ts
+++ b/packages/vtable/src/layout/simple-header-layout.ts
@@ -2,15 +2,15 @@
 import { isValid, merge } from '@visactor/vutils';
 import type { ListTable } from '../ListTable';
 import { DefaultSparklineSpec } from '../tools/global';
-import type {
-  CellAddress,
-  CellRange,
-  CellLocation,
-  IListTableCellHeaderPaths,
-  LayoutObjectId,
-  AggregationType,
-  Aggregation,
-  IRowSeriesNumber
+import {
+  type CellAddress,
+  type CellRange,
+  type CellLocation,
+  type IListTableCellHeaderPaths,
+  type LayoutObjectId,
+  type Aggregation,
+  type IRowSeriesNumber,
+  HierarchyState
 } from '../ts-types';
 import type { ChartColumnDefine, ColumnsDefine } from '../ts-types/list-table/define';
 import type {
@@ -66,6 +66,10 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
   _hasAggregationOnBottomCount: number = 0;
   /**层级维度结构显示形式 */
   rowHierarchyType?: 'grid' | 'tree';
+  /** 列表头树形展示模式 */
+  columnHierarchyType?: 'grid-tree';
+  /** 列表头默认展开层级 */
+  columnExpandLevel?: number;
   // 缓存行号列号对应的cellRange 需要注意当表头位置拖拽后 这个缓存的行列号已不准确 进行重置
   _cellRangeMap: Map<string, CellRange>; //存储单元格的行列号范围 针对解决是否为合并单元格情况
   constructor(table: ListTable, columns: ColumnsDefine, showHeader: boolean, hierarchyIndent: number) {
@@ -77,7 +81,14 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
     this._headerCellIds = [];
     this.hierarchyIndent = hierarchyIndent ?? 20;
     this.hierarchyTextStartAlignment = table.options.hierarchyTextStartAlignment;
-    this.columnTree = new DimensionTree(columns as any, { seqId: 0 }, null); //seqId这里没有利用上 所有顺便传了0
+    this.columnHierarchyType = table.options.columnHierarchyType;
+    this.columnExpandLevel = table.options.columnExpandLevel ?? 1;
+    this.columnTree = new DimensionTree(
+      columns as any,
+      { seqId: 0 },
+      this.columnHierarchyType,
+      this.columnHierarchyType === 'grid-tree' ? this.columnExpandLevel : undefined
+    ); //seqId这里没有利用上 所有顺便传了0
     this._headerObjectsIncludeHided = this._addHeaders(0, columns, []);
     // this._headerObjectMapIncludeHided = this._headerObjectsIncludeHided.reduce((o, e) => {
     //   o[e.id as number] = e;
@@ -989,6 +1000,8 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
         headerType: hd.headerType ?? 'text',
         dropDownMenu: hd.dropDownMenu,
         define: hd,
+        // 展开/折叠状态
+        hierarchyState: (hd as HeaderData).hierarchyState,
         columnWidthComputeMode: hd.columnWidthComputeMode
         // iconPositionList:[]
       };
@@ -1002,7 +1015,9 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
       } else if (this._headerCellIds[row - 1]) {
         rowCells[col] = this._headerCellIds[row - 1][col];
       }
-      if (hd.columns) {
+      // 当前节点是展开状态才需要添加子节点
+      const expand = (hd as HeaderData).hierarchyState === HierarchyState.expand;
+      if (!!hd.columns && !!expand) {
         const isAllHided = hd.columns.every((c: any) => c.hide);
         !isAllHided &&
           this._addHeaders(
diff --git a/packages/vtable/src/ts-types/events.ts b/packages/vtable/src/ts-types/events.ts
index 49509d8caf..acab71eb7f 100644
--- a/packages/vtable/src/ts-types/events.ts
+++ b/packages/vtable/src/ts-types/events.ts
@@ -203,6 +203,7 @@ export interface TableEventHandlersEventArgumentMap {
     dimensionInfo?: IDimensionInfo[];
     /**整条数据-原始数据 */
     originData?: any;
+    cellLocation?: CellLocation;
   };
   vchart_event_type: {
     eventName: string;
diff --git a/packages/vtable/src/ts-types/table-engine.ts b/packages/vtable/src/ts-types/table-engine.ts
index b2da3755c0..238172a6c3 100644
--- a/packages/vtable/src/ts-types/table-engine.ts
+++ b/packages/vtable/src/ts-types/table-engine.ts
@@ -239,6 +239,10 @@ export interface ListTableConstructorOptions extends BaseTableConstructorOptions
   hierarchyExpandLevel?: number;
   /** 同层级的结点是否按文字对齐 如没有收起展开图标的节点和有图标的节点文字对齐 默认false */
   hierarchyTextStartAlignment?: boolean;
+  /** 列表头树形展示模式(设置成 'grid-tree' 则支持展开和折叠) */
+  columnHierarchyType?: 'grid-tree';
+  /** 列表头默认展开层级(columnHierarchyType 为 'grid-tree' 时有效) */
+  columnExpandLevel?: number;
   /** 分页配置 */
   pagination?: IPagination;
 

From d7ed551cd84c42655c9ea944e0295ae0af581f9e Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Thu, 3 Apr 2025 14:30:18 +0800
Subject: [PATCH 02/23] fix: mobile touch event resize column width #3693

---
 packages/vtable/src/event/listener/table-group.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vtable/src/event/listener/table-group.ts b/packages/vtable/src/event/listener/table-group.ts
index 779e2e7170..98bb271688 100644
--- a/packages/vtable/src/event/listener/table-group.ts
+++ b/packages/vtable/src/event/listener/table-group.ts
@@ -823,6 +823,7 @@ export function bindTableGroupListener(eventManager: EventManager) {
       eventManager.downIcon = hitIcon;
       // 处理列宽调整  这里和tableGroup.addEventListener('pointerdown' 逻辑一样
       if (
+        e.pointerType !== 'touch' && // 移动端不应该在这里处理列宽调整 下面有eventManager.touchMove的逻辑
         !hitIcon &&
         !eventManager.checkCellFillhandle(eventArgsSet) &&
         !stateManager.columnResize.resizing &&

From ebfea82bdbde67b9f269f20f8f471c3ae306f783 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Thu, 3 Apr 2025 14:30:41 +0800
Subject: [PATCH 03/23] docs: update changlog of rush

---
 ...bug-mobile-touch-event-error_2025-04-03-06-30.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/@visactor/vtable/3693-bug-mobile-touch-event-error_2025-04-03-06-30.json

diff --git a/common/changes/@visactor/vtable/3693-bug-mobile-touch-event-error_2025-04-03-06-30.json b/common/changes/@visactor/vtable/3693-bug-mobile-touch-event-error_2025-04-03-06-30.json
new file mode 100644
index 0000000000..98e04114ab
--- /dev/null
+++ b/common/changes/@visactor/vtable/3693-bug-mobile-touch-event-error_2025-04-03-06-30.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: mobile touch event resize column width #3693\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}
\ No newline at end of file

From 8dd8aa409644766836a085c72a89fc02ec317195 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8=E6=9E=9A?= <li.yangmei@yiban.com>
Date: Thu, 3 Apr 2025 16:19:07 +0800
Subject: [PATCH 04/23] docs: add docs and guide of ListTable header folding

---
 .../list-table-header-group-collapse.md       | 115 ++++++++++++++++++
 docs/assets/demo/menu.json                    |   7 ++
 .../list-table-header-group-collapse.md       | 115 ++++++++++++++++++
 .../en/table_type/List_table/columns_tree.md  | 114 +++++++++++++++++
 docs/assets/guide/menu.json                   |   7 ++
 .../zh/table_type/List_table/columns_tree.md  | 108 ++++++++++++++++
 docs/assets/option/en/table/listTable.md      |   7 ++
 docs/assets/option/zh/table/listTable.md      |   7 ++
 .../vtable/src/layout/simple-header-layout.ts |   2 +-
 9 files changed, 481 insertions(+), 1 deletion(-)
 create mode 100644 docs/assets/demo/en/basic-functionality/list-table-header-group-collapse.md
 create mode 100644 docs/assets/demo/zh/basic-functionality/list-table-header-group-collapse.md
 create mode 100644 docs/assets/guide/en/table_type/List_table/columns_tree.md
 create mode 100644 docs/assets/guide/zh/table_type/List_table/columns_tree.md

diff --git a/docs/assets/demo/en/basic-functionality/list-table-header-group-collapse.md b/docs/assets/demo/en/basic-functionality/list-table-header-group-collapse.md
new file mode 100644
index 0000000000..67eabed522
--- /dev/null
+++ b/docs/assets/demo/en/basic-functionality/list-table-header-group-collapse.md
@@ -0,0 +1,115 @@
+---
+category: examples
+group: Basic Features
+title: List Table - Header Group Collapse
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/list-table-header-group.png
+link: table-type/list-table
+option: ListTable-columns-text#columns
+---
+
+# List Table - Header Group Collapse
+
+Configure columns as a nested multi-layer structure to achieve multi-layer header grouping effects. Enable tree-style expansion and collapse functionality through `columnHierarchyType: 'grid-tree'`, and set the default expansion level with `columnExpandLevel`.
+
+## Key Configurations
+
+- columns
+- `columnHierarchyType` Set hierarchy display to `grid-tree` to enable tree-style expand/collapse
+- `columnExpandLevel` Configure default expansion level (defaults to 1)
+
+## Code demo
+
+```javascript livedemo template=vtable
+let tableInstance;
+const records = [
+  {
+    id: 1,
+    name: 'name.1',
+    name_1: 'name_1.1',
+    name_2: 'name_2.1',
+    name_2_1: 'name_2_1.1',
+    name_2_2: 'name_2_2.1'
+  },
+  {
+    id: 2,
+    name: 'name.2',
+    name_1: 'name_1.2',
+    name_2: 'name_2.2',
+    name_2_1: 'name_2_1.2',
+    name_2_2: 'name_2_2.2'
+  },
+  {
+    id: 3,
+    name: 'name.3',
+    name_1: 'name_1.3',
+    name_2: 'name_2.3',
+    name_2_1: 'name_2_1.3',
+    name_2_2: 'name_2_2.3'
+  },
+  {
+    id: 4,
+    name: 'name.4',
+    name_1: 'name_1.4',
+    name_2: 'name_2.4',
+    name_2_1: 'name_2_1.4',
+    name_2_2: 'name_2_2.4'
+  },
+  {
+    id: 5,
+    name: 'name.5',
+    name_1: 'name_1.5',
+    name_2: 'name_2.5',
+    name_2_1: 'name_2_1.5',
+    name_2_2: 'name_2_2.5'
+  }
+];
+
+const columns = [
+  {
+    field: 'id',
+    title: 'ID',
+    width: 100
+  },
+  {
+    field: 'name',
+    title: 'Name',
+    columns: [
+      {
+        field: 'name_1',
+        title: 'Name_1',
+        width: 120
+      },
+      {
+        field: 'name_2',
+        title: 'Name_2',
+        width: 150,
+        columns: [
+          {
+            field: 'name_2_1',
+            title: 'Name_2_1',
+            width: 150
+          },
+          {
+            field: 'name_2_2',
+            title: 'Name_2_2',
+            width: 150
+          }
+        ]
+      }
+    ]
+  }
+];
+
+const option = {
+  records,
+  columns,
+  columnHierarchyType: 'grid-tree',
+  columnExpandLevel: 3,
+  widthMode: 'standard',
+  autoWrapText: true,
+  autoRowHeight: true,
+  defaultColWidth: 150
+};
+tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+window['tableInstance'] = tableInstance;
+```
diff --git a/docs/assets/demo/menu.json b/docs/assets/demo/menu.json
index 51b1716f84..465824021a 100644
--- a/docs/assets/demo/menu.json
+++ b/docs/assets/demo/menu.json
@@ -520,6 +520,13 @@
             "en": "List Table - Header Group"
           }
         },
+        {
+          "path": "list-table-header-group-collapse",
+          "title": {
+            "zh": "基本表格表头分组与折叠",
+            "en": "List Table - Header Group Collapse"
+          }
+        },
         {
           "path": "auto-wrap-text",
           "title": {
diff --git a/docs/assets/demo/zh/basic-functionality/list-table-header-group-collapse.md b/docs/assets/demo/zh/basic-functionality/list-table-header-group-collapse.md
new file mode 100644
index 0000000000..b640f84fde
--- /dev/null
+++ b/docs/assets/demo/zh/basic-functionality/list-table-header-group-collapse.md
@@ -0,0 +1,115 @@
+---
+category: examples
+group: Basic Features
+title: 基本表格表头分组与折叠
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/list-table-header-group.png
+link: table-type/list-table
+option: ListTable-columns-text#columns
+---
+
+# 基本表格表头分组与折叠
+
+将 columns 配置为嵌套多层结构来实现多层表头分组效果，可通过配置 `columnHierarchyType: 'grid-tree'` 开启树形的展开和折叠，并通过 `columnExpandLevel` 来设置默认展开层级。
+
+## 关键配置
+
+- columns
+- `columnHierarchyType` 将层级展示设置为 `grid-tree`，开启树形的展开和折叠功能
+- `columnExpandLevel` 设置默认展开层级，默认为`1`
+
+## 代码演示
+
+```javascript livedemo template=vtable
+let tableInstance;
+const records = [
+  {
+    id: 1,
+    name: 'name.1',
+    name_1: 'name_1.1',
+    name_2: 'name_2.1',
+    name_2_1: 'name_2_1.1',
+    name_2_2: 'name_2_2.1'
+  },
+  {
+    id: 2,
+    name: 'name.2',
+    name_1: 'name_1.2',
+    name_2: 'name_2.2',
+    name_2_1: 'name_2_1.2',
+    name_2_2: 'name_2_2.2'
+  },
+  {
+    id: 3,
+    name: 'name.3',
+    name_1: 'name_1.3',
+    name_2: 'name_2.3',
+    name_2_1: 'name_2_1.3',
+    name_2_2: 'name_2_2.3'
+  },
+  {
+    id: 4,
+    name: 'name.4',
+    name_1: 'name_1.4',
+    name_2: 'name_2.4',
+    name_2_1: 'name_2_1.4',
+    name_2_2: 'name_2_2.4'
+  },
+  {
+    id: 5,
+    name: 'name.5',
+    name_1: 'name_1.5',
+    name_2: 'name_2.5',
+    name_2_1: 'name_2_1.5',
+    name_2_2: 'name_2_2.5'
+  }
+];
+
+const columns = [
+  {
+    field: 'id',
+    title: 'ID',
+    width: 100
+  },
+  {
+    field: 'name',
+    title: 'Name',
+    columns: [
+      {
+        field: 'name_1',
+        title: 'Name_1',
+        width: 120
+      },
+      {
+        field: 'name_2',
+        title: 'Name_2',
+        width: 150,
+        columns: [
+          {
+            field: 'name_2_1',
+            title: 'Name_2_1',
+            width: 150
+          },
+          {
+            field: 'name_2_2',
+            title: 'Name_2_2',
+            width: 150
+          }
+        ]
+      }
+    ]
+  }
+];
+
+const option = {
+  records,
+  columns,
+  columnHierarchyType: 'grid-tree',
+  columnExpandLevel: 3,
+  widthMode: 'standard',
+  autoWrapText: true,
+  autoRowHeight: true,
+  defaultColWidth: 150
+};
+tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+window['tableInstance'] = tableInstance;
+```
diff --git a/docs/assets/guide/en/table_type/List_table/columns_tree.md b/docs/assets/guide/en/table_type/List_table/columns_tree.md
new file mode 100644
index 0000000000..a2292a5474
--- /dev/null
+++ b/docs/assets/guide/en/table_type/List_table/columns_tree.md
@@ -0,0 +1,114 @@
+## Basic Table Header Grouping and Collapsing
+
+In this tutorial, we will learn how to implement multi-level header grouping and collapsing in VTable using a tree structure to visualize complex header hierarchies.
+
+---
+
+## Use Cases
+
+Header grouping and collapsing are suitable for the following scenarios:
+
+- **Multidimensional Data Analysis**: Combine related fields into logical groups (e.g., "Sales Data" includes sub-columns like "Revenue" and "Profit").
+- **Complex Data Structures**: Tables with explicit hierarchical relationships (e.g., "Region-Province-City" three-level structure).
+- **Space Optimization**: Improve readability by collapsing non-critical columns.
+- **Dynamic Interaction**: Allow users to expand/collapse specific groups on demand for flexible data exploration.
+
+---
+
+## Implementation Steps
+
+### 1. Configure Multi-Level Header Structure
+
+Define header hierarchies using nested structures in the `columns` configuration. Each group adds sub-columns via the `columns` field to form a tree relationship.
+
+### 2. Enable Tree-Style Collapsing
+
+Set `columnHierarchyType: 'grid-tree'` to enable interactive tree-style collapsing for headers.
+
+### 3. Set Default Expansion Level
+
+Specify the initial expansion level using `columnExpandLevel` (default: `1`, showing only the first-level groups).
+
+---
+
+## Example
+
+```javascript livedemo template=vtable
+const records = [
+  { region: 'North', province: 'Province A', city: 'City 1', revenue: 1000, cost: 600 },
+  { region: 'North', province: 'Province A', city: 'City 2', revenue: 1500, cost: 800 },
+  { region: 'South', province: 'Province B', city: 'City 3', revenue: 2000, cost: 1100 }
+];
+
+const columns = [
+  {
+    title: 'Region',
+    field: 'region',
+    width: 150,
+    columns: [
+      {
+        title: 'Province',
+        field: 'province',
+        width: 150,
+        columns: [
+          {
+            title: 'City',
+            field: 'city',
+            width: 150
+          }
+        ]
+      }
+    ]
+  },
+  {
+    title: 'Financial Metrics',
+    field: 'metrics',
+    width: 180,
+    columns: [
+      { title: 'Revenue', field: 'revenue', width: 150 },
+      { title: 'Cost', field: 'cost', width: 150 }
+    ]
+  }
+];
+
+const option = {
+  records,
+  columns,
+  columnHierarchyType: 'grid-tree', // Enable tree-style collapsing
+  columnExpandLevel: 2, // Expand to the second level by default
+  widthMode: 'standard',
+  defaultRowHeight: 40
+};
+
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+window.tableInstance = tableInstance;
+```
+
+---
+
+## Advanced Configuration
+
+### Listen to Collapse Events
+
+Capture user interactions and execute custom logic:
+
+```javascript
+tableInstance.on(VTable.ListTable.EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE, args => {
+  if (args.cellLocation === 'columnHeader') {
+    console.log('Header state changed:', args);
+  }
+});
+```
+
+### Dynamically Update Header States
+
+Programmatically control header expansion/collapse:
+
+```javascript
+// Toggle the expansion state of a specific column
+tableInstance.toggleHierarchyState(col, row);
+```
+
+---
+
+With these configurations, you can quickly implement structured multi-level headers with dynamic interactions, ideal for complex data analysis scenarios.
diff --git a/docs/assets/guide/menu.json b/docs/assets/guide/menu.json
index c4e7535d66..0577c37e5d 100644
--- a/docs/assets/guide/menu.json
+++ b/docs/assets/guide/menu.json
@@ -87,6 +87,13 @@
                 "en": "tree list"
               }
             },
+            {
+              "path": "columns_tree",
+              "title": {
+                "zh": "表头分组及折叠",
+                "en": "Columns tree"
+              }
+            },
             {
               "path": "group_list",
               "title": {
diff --git a/docs/assets/guide/zh/table_type/List_table/columns_tree.md b/docs/assets/guide/zh/table_type/List_table/columns_tree.md
new file mode 100644
index 0000000000..275addb557
--- /dev/null
+++ b/docs/assets/guide/zh/table_type/List_table/columns_tree.md
@@ -0,0 +1,108 @@
+## 基本表格表头分组及折叠
+
+在本教程中，我们将学习如何使用 VTable 实现多层表头分组及折叠功能，通过树形结构展示复杂表头层级。
+
+## 使用场景
+
+表头分组及折叠功能适用于以下场景：
+
+- **多维数据分析**：需要将多个关联字段合并为逻辑分组（如“销售数据”包含“销售额”“利润”等子列）。
+- **复杂数据结构**：数据表字段具有明确的层级关系（如“地区-省份-城市”三级结构）。
+- **空间优化**：通过折叠功能隐藏非关键列，提升表格可读性。
+- **动态交互**：允许用户按需展开/收起特定分组，灵活查看数据。
+
+## 使用方式
+
+### 1. 配置多层表头结构
+
+在 `columns` 配置中使用嵌套结构定义表头层级。每个分组通过 `columns` 字段添加子列，形成树形关系。
+
+### 2. 启用树形折叠功能
+
+设置 `columnHierarchyType: 'grid-tree'` 开启表头树形折叠交互。
+
+### 3. 设置默认展开层级
+
+通过 `columnExpandLevel` 指定初始展开层级（默认值为 `1`，即仅展示第一级分组）。
+
+## 示例
+
+```javascript livedemo template=vtable
+const records = [
+  { region: 'North', province: 'A', city: 'City1', revenue: 1000, cost: 600 },
+  { region: 'North', province: 'A', city: 'City2', revenue: 1500, cost: 800 },
+  { region: 'South', province: 'B', city: 'City3', revenue: 2000, cost: 1100 }
+];
+
+const columns = [
+  {
+    title: 'Region',
+    field: 'region',
+    width: 150,
+    columns: [
+      {
+        title: 'Province',
+        field: 'province',
+        width: 150,
+        columns: [
+          {
+            title: 'City',
+            field: 'city',
+            width: 150
+          }
+        ]
+      }
+    ]
+  },
+  {
+    title: 'Financial Metrics',
+    field: 'metrics',
+    width: 180,
+    columns: [
+      { title: 'Revenue', field: 'revenue', width: 150 },
+      { title: 'Cost', field: 'cost', width: 150 }
+    ]
+  }
+];
+
+const option = {
+  records,
+  columns,
+  columnHierarchyType: 'grid-tree', // 启用树形折叠
+  columnExpandLevel: 2, // 默认展开至第二级
+  widthMode: 'standard',
+  defaultRowHeight: 40
+};
+
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+window.tableInstance = tableInstance;
+```
+
+---
+
+## 高级配置
+
+### 监听折叠事件
+
+获取用户交互行为并执行自定义逻辑：
+
+```javascript
+tableInstance.on(VTable.ListTable.EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE, args => {
+  if (args.cellLocation === 'columnHeader') {
+    console.log('表头状态变化：', args);
+  }
+});
+```
+
+### 动态更新表头状态
+
+手动控制表头展开/收起：
+
+```javascript
+// 切换指定列的展开状态
+tableInstance.toggleHierarchyState(col, row);
+```
+
+---
+
+通过上述配置，可快速实现多层表头的结构化展示与动态交互，适用于复杂数据场景下的灵活分析需求。
diff --git a/docs/assets/option/en/table/listTable.md b/docs/assets/option/en/table/listTable.md
index 50c73f0741..1ef0cc28ba 100644
--- a/docs/assets/option/en/table/listTable.md
+++ b/docs/assets/option/en/table/listTable.md
@@ -93,6 +93,13 @@ When displayed as a tree structure, the number of levels is expanded by default.
 
 Whether nodes at the same level are aligned by text, such as nodes without collapsed expansion icons and nodes with icons. Default is false
 
+## columnHierarchyType('grid-tree')
+
+Defines the hierarchy display mode for column headers. When set to 'grid-tree', it enables tree-style expand/collapse functionality in the header structure.
+
+## columnExpandLevel(number)
+
+Sets the initial expansion level of column headers. Defaults to 1.
 
 ## aggregation(Aggregation|CustomAggregation|Array|Function)
 
diff --git a/docs/assets/option/zh/table/listTable.md b/docs/assets/option/zh/table/listTable.md
index 46912dd2f7..9fa580014a 100644
--- a/docs/assets/option/zh/table/listTable.md
+++ b/docs/assets/option/zh/table/listTable.md
@@ -90,6 +90,13 @@ SortState {
 
 同层级的结点是否按文字对齐 如没有收起展开图标的节点和有图标的节点文字对齐 默认 false
 
+## columnHierarchyType('grid-tree')
+
+列表头中层级维度结构显示形式，设置为 'grid-tree' 时开启树形结构的展开折叠功能。
+
+## columnExpandLevel(number)
+
+列表头初始化展开层数，默认是 1。
 
 ## aggregation(Aggregation|CustomAggregation|Array|Function)
 
diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts
index b56fcf02d5..1d017bf40b 100644
--- a/packages/vtable/src/layout/simple-header-layout.ts
+++ b/packages/vtable/src/layout/simple-header-layout.ts
@@ -1016,7 +1016,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
         rowCells[col] = this._headerCellIds[row - 1][col];
       }
       // 当前节点是展开状态才需要添加子节点
-      const expand = (hd as HeaderData).hierarchyState === HierarchyState.expand;
+      const expand = !(hd as HeaderData).hierarchyState || (hd as HeaderData).hierarchyState === HierarchyState.expand;
       if (!!hd.columns && !!expand) {
         const isAllHided = hd.columns.every((c: any) => c.hide);
         !isAllHided &&

From 32a35981f3ecd66e8d799da34005b9850bbedeb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8=E6=9E=9A?= <li.yangmei@yiban.com>
Date: Thu, 3 Apr 2025 17:59:22 +0800
Subject: [PATCH 05/23] chore: listtable header grouping configuration
 parameter name modification: column -> header

---
 .../list-table-header-group-collapse.md                | 10 +++++-----
 .../list-table-header-group-collapse.md                | 10 +++++-----
 .../guide/en/table_type/List_table/columns_tree.md     |  8 ++++----
 .../guide/zh/table_type/List_table/columns_tree.md     |  8 ++++----
 docs/assets/option/en/table/listTable.md               |  8 ++++----
 docs/assets/option/zh/table/listTable.md               |  8 ++++----
 packages/vtable/src/layout/simple-header-layout.ts     |  4 ++--
 packages/vtable/src/ts-types/table-engine.ts           |  8 ++++----
 8 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/docs/assets/demo/en/basic-functionality/list-table-header-group-collapse.md b/docs/assets/demo/en/basic-functionality/list-table-header-group-collapse.md
index 67eabed522..782e9b8312 100644
--- a/docs/assets/demo/en/basic-functionality/list-table-header-group-collapse.md
+++ b/docs/assets/demo/en/basic-functionality/list-table-header-group-collapse.md
@@ -9,13 +9,13 @@ option: ListTable-columns-text#columns
 
 # List Table - Header Group Collapse
 
-Configure columns as a nested multi-layer structure to achieve multi-layer header grouping effects. Enable tree-style expansion and collapse functionality through `columnHierarchyType: 'grid-tree'`, and set the default expansion level with `columnExpandLevel`.
+Configure columns as a nested multi-layer structure to achieve multi-layer header grouping effects. Enable tree-style expansion and collapse functionality through `headerHierarchyType: 'grid-tree'`, and set the default expansion level with `headerExpandLevel`.
 
 ## Key Configurations
 
 - columns
-- `columnHierarchyType` Set hierarchy display to `grid-tree` to enable tree-style expand/collapse
-- `columnExpandLevel` Configure default expansion level (defaults to 1)
+- `headerHierarchyType` Set hierarchy display to `grid-tree` to enable tree-style expand/collapse
+- `headerExpandLevel` Configure default expansion level (defaults to 1)
 
 ## Code demo
 
@@ -103,8 +103,8 @@ const columns = [
 const option = {
   records,
   columns,
-  columnHierarchyType: 'grid-tree',
-  columnExpandLevel: 3,
+  headerHierarchyType: 'grid-tree',
+  headerExpandLevel: 3,
   widthMode: 'standard',
   autoWrapText: true,
   autoRowHeight: true,
diff --git a/docs/assets/demo/zh/basic-functionality/list-table-header-group-collapse.md b/docs/assets/demo/zh/basic-functionality/list-table-header-group-collapse.md
index b640f84fde..bf8500cf6a 100644
--- a/docs/assets/demo/zh/basic-functionality/list-table-header-group-collapse.md
+++ b/docs/assets/demo/zh/basic-functionality/list-table-header-group-collapse.md
@@ -9,13 +9,13 @@ option: ListTable-columns-text#columns
 
 # 基本表格表头分组与折叠
 
-将 columns 配置为嵌套多层结构来实现多层表头分组效果，可通过配置 `columnHierarchyType: 'grid-tree'` 开启树形的展开和折叠，并通过 `columnExpandLevel` 来设置默认展开层级。
+将 columns 配置为嵌套多层结构来实现多层表头分组效果，可通过配置 `headerHierarchyType: 'grid-tree'` 开启树形的展开和折叠，并通过 `headerExpandLevel` 来设置默认展开层级。
 
 ## 关键配置
 
 - columns
-- `columnHierarchyType` 将层级展示设置为 `grid-tree`，开启树形的展开和折叠功能
-- `columnExpandLevel` 设置默认展开层级，默认为`1`
+- `headerHierarchyType` 将层级展示设置为 `grid-tree`，开启树形的展开和折叠功能
+- `headerExpandLevel` 设置默认展开层级，默认为`1`
 
 ## 代码演示
 
@@ -103,8 +103,8 @@ const columns = [
 const option = {
   records,
   columns,
-  columnHierarchyType: 'grid-tree',
-  columnExpandLevel: 3,
+  headerHierarchyType: 'grid-tree',
+  headerExpandLevel: 3,
   widthMode: 'standard',
   autoWrapText: true,
   autoRowHeight: true,
diff --git a/docs/assets/guide/en/table_type/List_table/columns_tree.md b/docs/assets/guide/en/table_type/List_table/columns_tree.md
index a2292a5474..ecbb3f6b3e 100644
--- a/docs/assets/guide/en/table_type/List_table/columns_tree.md
+++ b/docs/assets/guide/en/table_type/List_table/columns_tree.md
@@ -23,11 +23,11 @@ Define header hierarchies using nested structures in the `columns` configuration
 
 ### 2. Enable Tree-Style Collapsing
 
-Set `columnHierarchyType: 'grid-tree'` to enable interactive tree-style collapsing for headers.
+Set `headerHierarchyType: 'grid-tree'` to enable interactive tree-style collapsing for headers.
 
 ### 3. Set Default Expansion Level
 
-Specify the initial expansion level using `columnExpandLevel` (default: `1`, showing only the first-level groups).
+Specify the initial expansion level using `headerExpandLevel` (default: `1`, showing only the first-level groups).
 
 ---
 
@@ -74,8 +74,8 @@ const columns = [
 const option = {
   records,
   columns,
-  columnHierarchyType: 'grid-tree', // Enable tree-style collapsing
-  columnExpandLevel: 2, // Expand to the second level by default
+  headerHierarchyType: 'grid-tree', // Enable tree-style collapsing
+  headerExpandLevel: 2, // Expand to the second level by default
   widthMode: 'standard',
   defaultRowHeight: 40
 };
diff --git a/docs/assets/guide/zh/table_type/List_table/columns_tree.md b/docs/assets/guide/zh/table_type/List_table/columns_tree.md
index 275addb557..5f32092b7e 100644
--- a/docs/assets/guide/zh/table_type/List_table/columns_tree.md
+++ b/docs/assets/guide/zh/table_type/List_table/columns_tree.md
@@ -19,11 +19,11 @@
 
 ### 2. 启用树形折叠功能
 
-设置 `columnHierarchyType: 'grid-tree'` 开启表头树形折叠交互。
+设置 `headerHierarchyType: 'grid-tree'` 开启表头树形折叠交互。
 
 ### 3. 设置默认展开层级
 
-通过 `columnExpandLevel` 指定初始展开层级（默认值为 `1`，即仅展示第一级分组）。
+通过 `headerExpandLevel` 指定初始展开层级（默认值为 `1`，即仅展示第一级分组）。
 
 ## 示例
 
@@ -68,8 +68,8 @@ const columns = [
 const option = {
   records,
   columns,
-  columnHierarchyType: 'grid-tree', // 启用树形折叠
-  columnExpandLevel: 2, // 默认展开至第二级
+  headerHierarchyType: 'grid-tree', // 启用树形折叠
+  headerExpandLevel: 2, // 默认展开至第二级
   widthMode: 'standard',
   defaultRowHeight: 40
 };
diff --git a/docs/assets/option/en/table/listTable.md b/docs/assets/option/en/table/listTable.md
index 1ef0cc28ba..3ff595bb3d 100644
--- a/docs/assets/option/en/table/listTable.md
+++ b/docs/assets/option/en/table/listTable.md
@@ -93,13 +93,13 @@ When displayed as a tree structure, the number of levels is expanded by default.
 
 Whether nodes at the same level are aligned by text, such as nodes without collapsed expansion icons and nodes with icons. Default is false
 
-## columnHierarchyType('grid-tree')
+## headerHierarchyType('grid-tree')
 
-Defines the hierarchy display mode for column headers. When set to 'grid-tree', it enables tree-style expand/collapse functionality in the header structure.
+Defines the hierarchy display mode for headers. When set to 'grid-tree', it enables tree-style expand/collapse functionality in the header structure.
 
-## columnExpandLevel(number)
+## headerExpandLevel(number)
 
-Sets the initial expansion level of column headers. Defaults to 1.
+Sets the initial expansion level of headers. Defaults to 1.
 
 ## aggregation(Aggregation|CustomAggregation|Array|Function)
 
diff --git a/docs/assets/option/zh/table/listTable.md b/docs/assets/option/zh/table/listTable.md
index 9fa580014a..42b7aa478b 100644
--- a/docs/assets/option/zh/table/listTable.md
+++ b/docs/assets/option/zh/table/listTable.md
@@ -90,13 +90,13 @@ SortState {
 
 同层级的结点是否按文字对齐 如没有收起展开图标的节点和有图标的节点文字对齐 默认 false
 
-## columnHierarchyType('grid-tree')
+## headerHierarchyType('grid-tree')
 
-列表头中层级维度结构显示形式，设置为 'grid-tree' 时开启树形结构的展开折叠功能。
+表头中层级维度结构显示形式，设置为 'grid-tree' 时开启树形结构的展开折叠功能。
 
-## columnExpandLevel(number)
+## headerExpandLevel(number)
 
-列表头初始化展开层数，默认是 1。
+表头初始化展开层数，默认是 1。
 
 ## aggregation(Aggregation|CustomAggregation|Array|Function)
 
diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts
index 1d017bf40b..09f7586e3c 100644
--- a/packages/vtable/src/layout/simple-header-layout.ts
+++ b/packages/vtable/src/layout/simple-header-layout.ts
@@ -81,8 +81,8 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
     this._headerCellIds = [];
     this.hierarchyIndent = hierarchyIndent ?? 20;
     this.hierarchyTextStartAlignment = table.options.hierarchyTextStartAlignment;
-    this.columnHierarchyType = table.options.columnHierarchyType;
-    this.columnExpandLevel = table.options.columnExpandLevel ?? 1;
+    this.columnHierarchyType = table.options.headerHierarchyType;
+    this.columnExpandLevel = table.options.headerExpandLevel ?? 1;
     this.columnTree = new DimensionTree(
       columns as any,
       { seqId: 0 },
diff --git a/packages/vtable/src/ts-types/table-engine.ts b/packages/vtable/src/ts-types/table-engine.ts
index 238172a6c3..ce2a7fdddd 100644
--- a/packages/vtable/src/ts-types/table-engine.ts
+++ b/packages/vtable/src/ts-types/table-engine.ts
@@ -239,10 +239,10 @@ export interface ListTableConstructorOptions extends BaseTableConstructorOptions
   hierarchyExpandLevel?: number;
   /** 同层级的结点是否按文字对齐 如没有收起展开图标的节点和有图标的节点文字对齐 默认false */
   hierarchyTextStartAlignment?: boolean;
-  /** 列表头树形展示模式(设置成 'grid-tree' 则支持展开和折叠) */
-  columnHierarchyType?: 'grid-tree';
-  /** 列表头默认展开层级(columnHierarchyType 为 'grid-tree' 时有效) */
-  columnExpandLevel?: number;
+  /** 表头树形展示模式(设置成 'grid-tree' 则支持展开和折叠) */
+  headerHierarchyType?: 'grid-tree';
+  /** 表头默认展开层级(headerHierarchyType 为 'grid-tree' 时有效) */
+  headerExpandLevel?: number;
   /** 分页配置 */
   pagination?: IPagination;
 

From 7f61042976db47ae8625951084c95d2c375ffea1 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Thu, 3 Apr 2025 18:14:03 +0800
Subject: [PATCH 06/23] docs: update changlog of rush

---
 .../feat-listtable-columntree_2025-04-03-10-14.json   | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/@visactor/vtable/feat-listtable-columntree_2025-04-03-10-14.json

diff --git a/common/changes/@visactor/vtable/feat-listtable-columntree_2025-04-03-10-14.json b/common/changes/@visactor/vtable/feat-listtable-columntree_2025-04-03-10-14.json
new file mode 100644
index 0000000000..aed85e573e
--- /dev/null
+++ b/common/changes/@visactor/vtable/feat-listtable-columntree_2025-04-03-10-14.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Merge pull request #3698 from VisActor/develop\n\nmerge develop\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}
\ No newline at end of file

From 609790a52d0ed2cc65116eca4589d5741c451440 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Thu, 3 Apr 2025 18:15:23 +0800
Subject: [PATCH 07/23] docs: update changelog

---
 .../vtable/feat-listtable-columntree_2025-04-03-10-14.json      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/changes/@visactor/vtable/feat-listtable-columntree_2025-04-03-10-14.json b/common/changes/@visactor/vtable/feat-listtable-columntree_2025-04-03-10-14.json
index aed85e573e..e83ceffab6 100644
--- a/common/changes/@visactor/vtable/feat-listtable-columntree_2025-04-03-10-14.json
+++ b/common/changes/@visactor/vtable/feat-listtable-columntree_2025-04-03-10-14.json
@@ -1,7 +1,7 @@
 {
   "changes": [
     {
-      "comment": "Merge pull request #3698 from VisActor/develop\n\nmerge develop\n",
+      "comment": "feat: list table header support hierarchy \n\n",
       "type": "none",
       "packageName": "@visactor/vtable"
     }

From 4a981eaad6bb554163a2663cd08d6147497bbcb5 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Thu, 3 Apr 2025 18:30:07 +0800
Subject: [PATCH 08/23] fix: list table create DimensionTree

---
 packages/vtable/src/layout/simple-header-layout.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts
index 09f7586e3c..40c529e298 100644
--- a/packages/vtable/src/layout/simple-header-layout.ts
+++ b/packages/vtable/src/layout/simple-header-layout.ts
@@ -86,7 +86,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
     this.columnTree = new DimensionTree(
       columns as any,
       { seqId: 0 },
-      this.columnHierarchyType,
+      this.columnHierarchyType ?? null,
       this.columnHierarchyType === 'grid-tree' ? this.columnExpandLevel : undefined
     ); //seqId这里没有利用上 所有顺便传了0
     this._headerObjectsIncludeHided = this._addHeaders(0, columns, []);

From 422c3c0b0494b292d7112ffa551854d32ecef73e Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Mon, 7 Apr 2025 11:53:20 +0800
Subject: [PATCH 09/23] fix: frame border set array render bottom line position
 error #3684

---
 .../graphic/contributions/rect-contribution-render.ts         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vtable/src/scenegraph/graphic/contributions/rect-contribution-render.ts b/packages/vtable/src/scenegraph/graphic/contributions/rect-contribution-render.ts
index adbff93c3d..581a2ff542 100644
--- a/packages/vtable/src/scenegraph/graphic/contributions/rect-contribution-render.ts
+++ b/packages/vtable/src/scenegraph/graphic/contributions/rect-contribution-render.ts
@@ -226,8 +226,8 @@ export class SplitRectAfterRenderContribution implements IRectRenderContribution
           stroke,
           strokeArrayWidth || lineWidth,
           strokeArrayColor || strokeColor,
-          Math.ceil(width + deltaWidth),
-          Math.ceil(height + deltaHeight)
+          rect.name !== 'table-border-rect' ? Math.ceil(width + deltaWidth) : width + deltaWidth,
+          rect.name !== 'table-border-rect' ? Math.ceil(height + deltaHeight) : height + deltaHeight
         );
       }
     }

From 2237993a3bcc98f0bb0fbb8cde37a2db0ddcbbf7 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Mon, 7 Apr 2025 11:54:28 +0800
Subject: [PATCH 10/23] docs: update changlog of rush

---
 ...-bug-frame-border-with-array_2025-04-07-03-54.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/@visactor/vtable/3684-bug-frame-border-with-array_2025-04-07-03-54.json

diff --git a/common/changes/@visactor/vtable/3684-bug-frame-border-with-array_2025-04-07-03-54.json b/common/changes/@visactor/vtable/3684-bug-frame-border-with-array_2025-04-07-03-54.json
new file mode 100644
index 0000000000..5ef5a8be02
--- /dev/null
+++ b/common/changes/@visactor/vtable/3684-bug-frame-border-with-array_2025-04-07-03-54.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: frame border set array render bottom line position error #3684\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}
\ No newline at end of file

From 0edd814936085a481a32524455c2be96224cda83 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Mon, 7 Apr 2025 15:53:44 +0800
Subject: [PATCH 11/23] fix: when set frozen disableDragSelect not work #3702

---
 packages/vtable/src/event/listener/container-dom.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vtable/src/event/listener/container-dom.ts b/packages/vtable/src/event/listener/container-dom.ts
index e027054367..a026bed238 100644
--- a/packages/vtable/src/event/listener/container-dom.ts
+++ b/packages/vtable/src/event/listener/container-dom.ts
@@ -785,7 +785,7 @@ export function bindContainerDomListener(eventManager: EventManager) {
           table.stateManager.updateInteractionState(InteractionState.grabing);
           const targetCol = table.getTargetColAtConsiderRightFrozen(selectX, considerFrozenX);
           const targetRow = table.getTargetRowAtConsiderBottomFrozen(selectY, considerFrozenY);
-          if (isValid(targetCol) && isValid(targetRow)) {
+          if (!table.options.select?.disableDragSelect && isValid(targetCol) && isValid(targetRow)) {
             table.stateManager.updateSelectPos(targetCol.col, targetRow.row, false, false, false, false);
           }
         });

From e064f4ed3d8d6e8612a20612f69eebbc7b28df05 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Mon, 7 Apr 2025 15:57:54 +0800
Subject: [PATCH 12/23] docs: update changlog of rush

---
 ...bledragselect-frozencolcount_2025-04-07-07-57.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/@visactor/vtable/3702-bug-disabledragselect-frozencolcount_2025-04-07-07-57.json

diff --git a/common/changes/@visactor/vtable/3702-bug-disabledragselect-frozencolcount_2025-04-07-07-57.json b/common/changes/@visactor/vtable/3702-bug-disabledragselect-frozencolcount_2025-04-07-07-57.json
new file mode 100644
index 0000000000..f2133f76cb
--- /dev/null
+++ b/common/changes/@visactor/vtable/3702-bug-disabledragselect-frozencolcount_2025-04-07-07-57.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: when set frozen disableDragSelect not work #3702\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}
\ No newline at end of file

From 5af5a00819004ed97770a32cb1f50b0a9e9f0d5f Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Mon, 7 Apr 2025 19:34:21 +0800
Subject: [PATCH 13/23] fix: updateTaskRecord api #3639

---
 docs/assets/guide/en/gantt/introduction.md    |  5 ----
 docs/assets/guide/zh/gantt/introduction.md    |  5 ----
 packages/vtable-gantt/src/Gantt.ts            | 26 ++++++++++---------
 .../vtable-gantt/src/scenegraph/task-bar.ts   |  2 ++
 4 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/docs/assets/guide/en/gantt/introduction.md b/docs/assets/guide/en/gantt/introduction.md
index e7eb24a496..725f1caab2 100644
--- a/docs/assets/guide/en/gantt/introduction.md
+++ b/docs/assets/guide/en/gantt/introduction.md
@@ -156,11 +156,6 @@ If there is no field data for the task date in the original data, you can create
 The button style can be configured via `taskBar.scheduleCreation.buttonStyle`.
 
 If the current configuration does not meet your needs, you can also customize the display effect of the creation schedule through the `taskBar.scheduleCreation.customLayout` configuration item.
-**Note: Different Gantt chart instances have different capabilities to create schedules.**
-
-When `tasksShowMode` is `TasksShowMode.Tasks_Separate` or `TasksShowMode.Sub_Tasks_Separate`, each piece of data has a corresponding row position display, but when there is no `startDate` and `endDate` field set in the data, a create button will appear when the mouse hovers over the row, and clicking the button will create a schedule and display the task bar.
-
-When `tasksShowMode` is `TasksShowMode.Sub_Tasks_Inline`, `TasksShowMode.Sub_Tasks_Arrange`, or `TasksShowMode.Sub_Tasks_Compact`, a create button will be displayed when the mouse hovers over the blank area, and clicking the button will trigger the event `GANTT_EVENT_TYPE.CREATE_TASK_SCHEDULE`, but it will not actually create a task schedule. The user needs to listen for this event and create a schedule update data according to business needs.
 
 **Note: Different Gantt chart instances have different capabilities to create schedules.**
 
diff --git a/docs/assets/guide/zh/gantt/introduction.md b/docs/assets/guide/zh/gantt/introduction.md
index 521f6ea387..6f1555c939 100644
--- a/docs/assets/guide/zh/gantt/introduction.md
+++ b/docs/assets/guide/zh/gantt/introduction.md
@@ -156,11 +156,6 @@ links:[
 按钮的样式可以通过`taskBar.scheduleCreation.buttonStyle`配置。
 
 如果当前配置不能满足需求，也可以通过`taskBar.scheduleCreation.customLayout`配置项自定义创建排期的展示效果。
-**注意：不同的甘特图实例，创建排期能力不同。：**
-
-当`tasksShowMode`为`TasksShowMode.Tasks_Separate`或`TasksShowMode.Sub_Tasks_Separate`，也就是每条数据有对应的一行位置展示，但是数据中没有设置 startDate 和 endDate 的字段时，鼠标 hover 到该行会出现创建按钮，点击按钮会创建排期并展示任务条。
-
-当`tasksShowMode`为`TasksShowMode.Sub_Tasks_Inline`或`TasksShowMode.Sub_Tasks_Arrange`或`TasksShowMode.Sub_Tasks_Compact`，需要明确指明 scheduleCreatable 为`true`，才可出现创建按钮。当鼠标 hover 到空白区域即会显示创建按钮，点击按钮会触发事件`GANTT_EVENT_TYPE.CREATE_TASK_SCHEDULE`但不会真正的创建任务排期，使用者需要监听该事件根据业务需求来自行创建排期更新数据。
 
 **注意：不同的甘特图实例，创建排期能力不同。：**
 
diff --git a/packages/vtable-gantt/src/Gantt.ts b/packages/vtable-gantt/src/Gantt.ts
index 4abe2c78f2..955141ec80 100644
--- a/packages/vtable-gantt/src/Gantt.ts
+++ b/packages/vtable-gantt/src/Gantt.ts
@@ -929,7 +929,10 @@ export class Gantt extends EventTarget {
     this.data.adjustOrder(source_index, source_sub_task_index, target_index, target_sub_task_index);
   }
   // 定义多个函数签名
-  /** 更新数据信息 */
+  /** 更新数据信息
+   * 如果TasksShowModes是 tasks_separate 模式 则需要传入task_index即可
+   * 如果TasksShowModes是 sub_tasks_*** 模式 则需要传入task_index和sub_task_index
+   */
   updateTaskRecord(record: any, task_index: number | number[]): void;
   updateTaskRecord(record: any, task_index: number, sub_task_index: number): void;
   updateTaskRecord(record: any, task_index: number | number[], sub_task_index?: number) {
@@ -947,17 +950,16 @@ export class Gantt extends EventTarget {
       this._refreshTaskBar(index, sub_index);
       return;
     }
-    const index = task_index as number;
-
-    // if (this.taskListTableInstance.rowHierarchyType === 'tree' && typeof index === 'number') {
-    //   //如果是树形结构 需要获取数据源对应的索引
-    //   index = this.taskListTableInstance.getRecordIndexByCell(
-    //     0,
-    //     index + this.taskListTableInstance.columnHeaderLevelCount
-    //   );
-    // }
-    this._updateRecordToListTable(record, index);
-    this._refreshTaskBar(index, undefined);
+    let recordIndexs: number | number[] = task_index;
+    if (this.taskListTableInstance.rowHierarchyType === 'tree') {
+      //如果是树形结构 需要获取数据源对应的索引
+      recordIndexs = this.taskListTableInstance.getRecordIndexByCell(
+        0,
+        task_index + this.taskListTableInstance.columnHeaderLevelCount
+      );
+    }
+    this._updateRecordToListTable(record, recordIndexs);
+    this._refreshTaskBar(task_index, undefined);
   }
 
   /**
diff --git a/packages/vtable-gantt/src/scenegraph/task-bar.ts b/packages/vtable-gantt/src/scenegraph/task-bar.ts
index 6630ba8f3a..ac7107a831 100644
--- a/packages/vtable-gantt/src/scenegraph/task-bar.ts
+++ b/packages/vtable-gantt/src/scenegraph/task-bar.ts
@@ -161,7 +161,9 @@ export class TaskBar {
       // clip: true
     });
     barGroupBox.name = 'task-bar';
+    //如果TaskShowMode是tasks_separate模式 这里的task_index其实是table中的bodyIndex；如果TaskShowMode是sub_tasks_***模式 task_index也是对应父节点任务条在table中的bodyIndex（但不会渲染父节点，只是渲染子节点）
     barGroupBox.task_index = index;
+    //如果TaskShowMode是tasks_separate模式，不会赋值sub_task_index；如果TaskShowMode是sub_tasks_***模式 这里的sub_task_index是父节点下子元素的index
     barGroupBox.sub_task_index = childIndex;
     barGroupBox.record = taskRecord;
 

From 7751c7ef603c438cbfcc228a0dbcf388c15848f0 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Mon, 7 Apr 2025 19:35:01 +0800
Subject: [PATCH 14/23] docs: update changlog of rush

---
 .../fix-gantt-updateRecord_2025-04-07-11-35.json      | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/@visactor/vtable/fix-gantt-updateRecord_2025-04-07-11-35.json

diff --git a/common/changes/@visactor/vtable/fix-gantt-updateRecord_2025-04-07-11-35.json b/common/changes/@visactor/vtable/fix-gantt-updateRecord_2025-04-07-11-35.json
new file mode 100644
index 0000000000..65b05c424b
--- /dev/null
+++ b/common/changes/@visactor/vtable/fix-gantt-updateRecord_2025-04-07-11-35.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: updateTaskRecord api #3639\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}
\ No newline at end of file

From 18fadbd3fe76bf861f2e2174d907d8c1a913fc04 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Tue, 8 Apr 2025 10:40:31 +0800
Subject: [PATCH 15/23] fix: when move tree node position code occor error
 #3645 #3706

---
 packages/vtable/src/state/checkbox/checkbox.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vtable/src/state/checkbox/checkbox.ts b/packages/vtable/src/state/checkbox/checkbox.ts
index 5e5878da2a..2b70d5a694 100644
--- a/packages/vtable/src/state/checkbox/checkbox.ts
+++ b/packages/vtable/src/state/checkbox/checkbox.ts
@@ -36,7 +36,7 @@ function setSingleCheckedState(
   const recordIndex = state.table.getRecordShowIndexByCell(col, row);
   if (recordIndex >= 0) {
     const dataIndex = state.table.dataSource.getIndexKey(recordIndex).toString();
-    if (state.checkedState.has(dataIndex)) {
+    if (state.checkedState.get(dataIndex)) {
       state.checkedState.get(dataIndex)[field] = checked;
     } else {
       state.checkedState.set(dataIndex, {
@@ -89,7 +89,7 @@ export function syncCheckedState(
     if (isValid(state.checkedState.get(dataIndex)?.[field])) {
       return state.checkedState.get(dataIndex)[field];
     }
-    if (state.checkedState.has(dataIndex)) {
+    if (state.checkedState.get(dataIndex)) {
       state.checkedState.get(dataIndex)[field] = checked;
     } else if (dataIndex.includes(',')) {
       // child record, sync parent record state

From 04aae325fff66a3ee5fc23beafcf046c881c79e8 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Tue, 8 Apr 2025 10:45:13 +0800
Subject: [PATCH 16/23] docs: update changlog of rush

---
 ...ree-node-move-position-error_2025-04-08-02-45.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/@visactor/vtable/3645-bug-tree-node-move-position-error_2025-04-08-02-45.json

diff --git a/common/changes/@visactor/vtable/3645-bug-tree-node-move-position-error_2025-04-08-02-45.json b/common/changes/@visactor/vtable/3645-bug-tree-node-move-position-error_2025-04-08-02-45.json
new file mode 100644
index 0000000000..be432b69f1
--- /dev/null
+++ b/common/changes/@visactor/vtable/3645-bug-tree-node-move-position-error_2025-04-08-02-45.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: when move tree node position code occor error #3645 #3706\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}
\ No newline at end of file

From 8bcd898e0820d4d12bef68c409694916a584854d Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Tue, 8 Apr 2025 15:45:08 +0800
Subject: [PATCH 17/23] refactor: computeColsWidth api call time

---
 .../progress/create-group-for-first-screen.ts             | 8 ++++++--
 .../vtable/src/scenegraph/group-creater/progress/proxy.ts | 4 +++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts b/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts
index b305114724..a601651e39 100644
--- a/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts
+++ b/packages/vtable/src/scenegraph/group-creater/progress/create-group-for-first-screen.ts
@@ -66,11 +66,15 @@ export function createGroupForFirstScreen(
 
   if (distCol < table.colCount - table.rightFrozenColCount) {
     // compute right frozen row height
-    computeColsWidth(table, table.colCount - table.rightFrozenColCount, table.colCount - 1);
+    if (table.colCount - table.rightFrozenColCount <= table.colCount - 1) {
+      computeColsWidth(table, table.colCount - table.rightFrozenColCount, table.colCount - 1);
+    }
   }
   if (distRow < table.rowCount - table.bottomFrozenRowCount) {
     // compute bottom frozen row height
-    computeRowsHeight(table, table.rowCount - table.bottomFrozenRowCount, table.rowCount - 1);
+    if (table.rowCount - table.bottomFrozenRowCount <= table.rowCount - 1) {
+      computeRowsHeight(table, table.rowCount - table.bottomFrozenRowCount, table.rowCount - 1);
+    }
   }
 
   // update colHeaderGroup rowHeaderGroup bodyGroup position
diff --git a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts
index c39dc285e7..a68e28c491 100644
--- a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts
+++ b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts
@@ -392,7 +392,9 @@ export class SceneProxy {
   createColGroup(onceCount: number) {
     // compute rows height
     const endCol = Math.min(this.totalCol, this.currentCol + onceCount);
-    computeColsWidth(this.table, this.currentCol + 1, endCol);
+    if (this.table.widthMode !== 'adaptive') {
+      computeColsWidth(this.table, this.currentCol + 1, endCol);
+    }
 
     this.colEnd = endCol;
 

From e7f922c5a9a5543be7e6a52b85cb6fdb1b8140dd Mon Sep 17 00:00:00 2001
From: BlInYo <blinyo@163.com>
Date: Sat, 5 Apr 2025 20:01:19 +0800
Subject: [PATCH 18/23] feat: listTable added tiggerEvent parameter to
 changeCellValue

---
 docs/assets/api/en/methods.md             |  4 ++--
 docs/assets/api/zh/methods.md             | 14 +++++++++++---
 packages/vtable/src/ListTable.ts          | 22 ++++++++++++++++++----
 packages/vtable/src/core/record-helper.ts |  8 ++++++--
 4 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/docs/assets/api/en/methods.md b/docs/assets/api/en/methods.md
index 3974e4fda7..c2ac4a6125 100644
--- a/docs/assets/api/en/methods.md
+++ b/docs/assets/api/en/methods.md
@@ -1060,7 +1060,7 @@ Change the value of a cell:
 ```
 
 /\*_ Set the value of the cell. Note that it corresponds to the original value of the source data, and the vtable instance records will be modified accordingly _/
-changeCellValue: (col: number, row: number, value: string | number | null, workOnEditableCell = false) => void;
+changeCellValue: (col: number, row: number, value: string | number | null, workOnEditableCell = false, triggerEvent = true) => void;
 
 ```
 
@@ -1077,7 +1077,7 @@ Change the value of cells in batches:
 - @param row The starting row number of pasted data
 - @param values Data array of multiple cells
   \*/
-  changeCellValues(startCol: number, startRow: number, values: string[][])
+  changeCellValues(startCol: number, startRow: number, values: string[][], workOnEditableCell = false, triggerEvent=true) => void;
 
 ```
 
diff --git a/docs/assets/api/zh/methods.md b/docs/assets/api/zh/methods.md
index 94e58cc911..7bf508a0a1 100644
--- a/docs/assets/api/zh/methods.md
+++ b/docs/assets/api/zh/methods.md
@@ -956,8 +956,15 @@ use case: 对于透视图的场景上，点击图例项后 更新过滤规则 
 更改单元格的 value 值：
 
 ```
-  /** 设置单元格的value值，注意对应的是源数据的原始值，vtable实例records会做对应修改 */
-  changeCellValue: (col: number, row: number, value: string | number | null, workOnEditableCell = false) => void;
+  /**
+   * 设置单元格的value值，注意对应的是源数据的原始值，vtable实例records会做对应修改
+   * @param col 单元格的起始列号
+   * @param row 单元格的起始行号
+   * @param value 更改后的值
+   * @param workOnEditableCell 是否仅更改可编辑单元格
+   * @param triggerEvent 是否在值发生改变的时候触发change_cell_value事件
+   */
+  changeCellValue: (col: number, row: number, value: string | number | null, workOnEditableCell = false, triggerEvent = true) => void;
 ```
 
 ## changeCellValues(Function)
@@ -971,8 +978,9 @@ use case: 对于透视图的场景上，点击图例项后 更新过滤规则 
    * @param row 粘贴数据的起始行号
    * @param values 多个单元格的数据数组
    * @param workOnEditableCell 是否仅更改可编辑单元格
+   * @param triggerEvent 是否在值发生改变的时候触发change_cell_value事件
    */
-  changeCellValues(startCol: number, startRow: number, values: string[][], workOnEditableCell = false)
+  changeCellValues(startCol: number, startRow: number, values: string[][], workOnEditableCell = false, triggerEvent=true) => void;
 ```
 
 ## getEditor(Function)
diff --git a/packages/vtable/src/ListTable.ts b/packages/vtable/src/ListTable.ts
index fc45ffa453..5b980faf2b 100644
--- a/packages/vtable/src/ListTable.ts
+++ b/packages/vtable/src/ListTable.ts
@@ -1326,9 +1326,16 @@ export class ListTable extends BaseTable implements ListTableAPI {
    * @param row
    * @param value 更改后的值
    * @param workOnEditableCell 限制只能更改配置了编辑器的单元格值。快捷键paste这里配置的true，限制只能修改可编辑单元格值
+   * @param triggerEvent 是否在值发生改变的时候触发change_cell_value事件
    */
-  changeCellValue(col: number, row: number, value: string | number | null, workOnEditableCell = false) {
-    return listTableChangeCellValue(col, row, value, workOnEditableCell, this);
+  changeCellValue(
+    col: number,
+    row: number,
+    value: string | number | null,
+    workOnEditableCell = false,
+    triggerEvent = true
+  ) {
+    return listTableChangeCellValue(col, row, value, workOnEditableCell, triggerEvent, this);
   }
   /**
    * 批量更新多个单元格的数据
@@ -1336,9 +1343,16 @@ export class ListTable extends BaseTable implements ListTableAPI {
    * @param row 粘贴数据的起始行号
    * @param values 多个单元格的数据数组
    * @param workOnEditableCell 是否仅更改可编辑单元格
+   * @param triggerEvent 是否在值发生改变的时候触发change_cell_value事件
    */
-  changeCellValues(startCol: number, startRow: number, values: (string | number)[][], workOnEditableCell = false) {
-    return listTableChangeCellValues(startCol, startRow, values, workOnEditableCell, this);
+  changeCellValues(
+    startCol: number,
+    startRow: number,
+    values: (string | number)[][],
+    workOnEditableCell = false,
+    triggerEvent = true
+  ) {
+    return listTableChangeCellValues(startCol, startRow, values, workOnEditableCell, triggerEvent, this);
   }
   /**
    * 添加数据 单条数据
diff --git a/packages/vtable/src/core/record-helper.ts b/packages/vtable/src/core/record-helper.ts
index eed1083f77..062e2cac93 100644
--- a/packages/vtable/src/core/record-helper.ts
+++ b/packages/vtable/src/core/record-helper.ts
@@ -14,12 +14,14 @@ import { TABLE_EVENT_TYPE } from './TABLE_EVENT_TYPE';
  * @param row
  * @param value 更改后的值
  * @param workOnEditableCell 限制只能更改配置了编辑器的单元格值。快捷键paste这里配置的true，限制只能修改可编辑单元格值
+ * @param triggerEvent 是否在值发生改变的时候触发change_cell_value事件
  */
 export function listTableChangeCellValue(
   col: number,
   row: number,
   value: string | number | null,
   workOnEditableCell: boolean,
+  triggerEvent: boolean,
   table: ListTable
 ) {
   if ((workOnEditableCell && table.isHasEditorDefine(col, row)) || workOnEditableCell === false) {
@@ -91,7 +93,7 @@ export function listTableChangeCellValue(
       table.scenegraph.updateRowHeight(row, newHeight - oldHeight);
     }
     const changedValue = table.getCellOriginValue(col, row);
-    if (oldValue !== changedValue) {
+    if (oldValue !== changedValue && triggerEvent) {
       table.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
         col,
         row,
@@ -109,12 +111,14 @@ export function listTableChangeCellValue(
  * @param row 粘贴数据的起始行号
  * @param values 多个单元格的数据数组
  * @param workOnEditableCell 是否仅更改可编辑单元格
+ * @param triggerEvent 是否在值发生改变的时候触发change_cell_value事件
  */
 export function listTableChangeCellValues(
   startCol: number,
   startRow: number,
   values: (string | number)[][],
   workOnEditableCell: boolean,
+  triggerEvent: boolean,
   table: ListTable
 ) {
   let pasteColEnd = startCol;
@@ -193,7 +197,7 @@ export function listTableChangeCellValues(
           table.dataSource.changeFieldValue(value, recordIndex, field, startCol + j, startRow + i, table);
         }
         const changedValue = table.getCellOriginValue(startCol + j, startRow + i);
-        if (oldValue !== changedValue) {
+        if (oldValue !== changedValue && triggerEvent) {
           table.fireListeners(TABLE_EVENT_TYPE.CHANGE_CELL_VALUE, {
             col: startCol + j,
             row: startRow + i,

From 5de71ec8a62b7f527565bef31619d30a827036d0 Mon Sep 17 00:00:00 2001
From: BlInYo <blinyo@163.com>
Date: Tue, 8 Apr 2025 21:35:58 +0800
Subject: [PATCH 19/23] docs: update changlog of rush

---
 .../vtable/feat-changeCellValue_2025-04-08-13-35.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/@visactor/vtable/feat-changeCellValue_2025-04-08-13-35.json

diff --git a/common/changes/@visactor/vtable/feat-changeCellValue_2025-04-08-13-35.json b/common/changes/@visactor/vtable/feat-changeCellValue_2025-04-08-13-35.json
new file mode 100644
index 0000000000..3b99a3abf0
--- /dev/null
+++ b/common/changes/@visactor/vtable/feat-changeCellValue_2025-04-08-13-35.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: listTable added tiggerEvent parameter to changeCellValue\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "blinyo@163.com"
+}
\ No newline at end of file

From 247611c77c6226f6e11e134566c84f86a0233d9d Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Wed, 9 Apr 2025 14:30:31 +0800
Subject: [PATCH 20/23] fix: repeat call computeColsWidth adaptive mode result
 error

---
 .../vtable/src/scenegraph/group-creater/progress/proxy.ts     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts
index a68e28c491..e6949a3a17 100644
--- a/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts
+++ b/packages/vtable/src/scenegraph/group-creater/progress/proxy.ts
@@ -695,7 +695,9 @@ export class SceneProxy {
     //     colGroup.needUpdate = false;
     //   }
     // }
-    computeColsWidth(this.table, this.colUpdatePos, distCol);
+    if (this.table.widthMode === 'autoWidth') {
+      computeColsWidth(this.table, this.colUpdatePos, distCol);
+    }
     updateColContent(this.colUpdatePos, distCol, this);
     this.colUpdatePos = distCol + 1;
   }

From 5d3f0d70805a7a51ebe556ecf1e7e2f8c40f836e Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Wed, 9 Apr 2025 14:31:12 +0800
Subject: [PATCH 21/23] docs: update changlog of rush

---
 ...mputeColsWidth_api_call_time_2025-04-09-06-31.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/@visactor/vtable/refactor-computeColsWidth_api_call_time_2025-04-09-06-31.json

diff --git a/common/changes/@visactor/vtable/refactor-computeColsWidth_api_call_time_2025-04-09-06-31.json b/common/changes/@visactor/vtable/refactor-computeColsWidth_api_call_time_2025-04-09-06-31.json
new file mode 100644
index 0000000000..3a47be852c
--- /dev/null
+++ b/common/changes/@visactor/vtable/refactor-computeColsWidth_api_call_time_2025-04-09-06-31.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: repeat call computeColsWidth adaptive mode result error\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}
\ No newline at end of file

From 2d76bc2a989359a51aed9dee2e96eda775b49761 Mon Sep 17 00:00:00 2001
From: Libon <bon.li@outlook.com>
Date: Thu, 10 Apr 2025 13:43:51 +0800
Subject: [PATCH 22/23] docs: correct the dropdown menu click event name

---
 docs/assets/demo/en/component/dropdown.md              |  2 +-
 docs/assets/demo/en/interaction/context-menu.md        |  2 +-
 docs/assets/demo/zh/component/dropdown.md              |  2 +-
 docs/assets/demo/zh/interaction/context-menu.md        |  2 +-
 ... customize the drop-down menu in table component.md | 10 +++++-----
 ...ustomize the context menu in the table component.md |  6 +++---
 ... customize the drop-down menu in table component.md | 10 +++++-----
 ...ustomize the context menu in the table component.md |  6 +++---
 docs/assets/guide/en/Event/event_list.md               |  2 +-
 docs/assets/guide/zh/Event/event_list.md               |  2 +-
 packages/vtable/src/scenegraph/component/menu.ts       |  2 +-
 11 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/docs/assets/demo/en/component/dropdown.md b/docs/assets/demo/en/component/dropdown.md
index 8e237859f2..7aa2715a4b 100644
--- a/docs/assets/demo/en/component/dropdown.md
+++ b/docs/assets/demo/en/component/dropdown.md
@@ -11,7 +11,7 @@ option: ListTable-columns-text#dropDownMenu
 # drop down menu
 
 In this example, the dropDownMenu is configured in the first column of columns, and when hovered to the header cell, a drop-down menu is displayed for further operation.
-At the same time through monitoring`click_cell`Event, when the mouse clicks the order icon in the first column, the interface showDropDownMenu is called to display the drop-down menu. To continue the operation according to the item clicked on the drop-down menu, you can listen to the event dropdownmenu_click.
+At the same time through monitoring`click_cell`Event, when the mouse clicks the order icon in the first column, the interface showDropDownMenu is called to display the drop-down menu. To continue the operation according to the item clicked on the drop-down menu, you can listen to the event dropdown_menu_click.
 
 ## Key Configurations
 
diff --git a/docs/assets/demo/en/interaction/context-menu.md b/docs/assets/demo/en/interaction/context-menu.md
index c1f987733a..ceb4e41a0f 100644
--- a/docs/assets/demo/en/interaction/context-menu.md
+++ b/docs/assets/demo/en/interaction/context-menu.md
@@ -10,7 +10,7 @@ option: ListTable#menu.contextMenuItems
 
 # Right click menu
 
-Right-click pop-up menu, if you need to click on the drop-down menu to continue the operation, you can listen to the event dropdownmenu_click.
+Right-click pop-up menu, if you need to click on the drop-down menu to continue the operation, you can listen to the event dropdown_menu_click.
 
 In this example, after clicking the right mouse button, a copy, paste, delete and other functions will appear in the drop-down menu. After clicking the copy, the selected cell content will be copied to the clipboard, after clicking paste, the content in the clipboard will be pasted to the selected cell, and after clicking delete, the content of the selected cell will be set to empty.
 
diff --git a/docs/assets/demo/zh/component/dropdown.md b/docs/assets/demo/zh/component/dropdown.md
index 88812b3a10..637e7182e6 100644
--- a/docs/assets/demo/zh/component/dropdown.md
+++ b/docs/assets/demo/zh/component/dropdown.md
@@ -11,7 +11,7 @@ option: ListTable-columns-text#dropDownMenu
 # 下拉菜单
 
 在该示例中，在 columns 第一列中配置了 dropDownMenu, 当 hover 到表头单元格时会显示下拉菜单以进行进一步操作。
-同时通过监听`click_cell`事件，鼠标点击第一列中订单 icon 时，调用接口 showDropDownMenu 来显示下拉菜单。如需根据点击下拉菜单的项目来继续操作，可以监听事件 dropdownmenu_click。
+同时通过监听`click_cell`事件，鼠标点击第一列中订单 icon 时，调用接口 showDropDownMenu 来显示下拉菜单。如需根据点击下拉菜单的项目来继续操作，可以监听事件 dropdown_menu_click。
 
 ## 关键配置
 
diff --git a/docs/assets/demo/zh/interaction/context-menu.md b/docs/assets/demo/zh/interaction/context-menu.md
index e8f3695573..2a80edf1b1 100644
--- a/docs/assets/demo/zh/interaction/context-menu.md
+++ b/docs/assets/demo/zh/interaction/context-menu.md
@@ -10,7 +10,7 @@ option: ListTable#menu.contextMenuItems
 
 # 右键菜单
 
-右键弹出菜单, 如需根据点击下拉菜单的项目来继续操作，可以监听事件 dropdownmenu_click。
+右键弹出菜单, 如需根据点击下拉菜单的项目来继续操作，可以监听事件 dropdown_menu_click。
 
 本例中，点击右键后会出现复制、粘贴、删除等功能的下拉菜单，点击复制后，会将选中的单元格内容复制到剪贴板，点击粘贴后，会将剪贴板中的内容粘贴到选中的单元格中，点击删除后，会将选中的单元格内容设置为空。
 
diff --git a/docs/assets/faq/en/16-How to customize the drop-down menu in table component.md b/docs/assets/faq/en/16-How to customize the drop-down menu in table component.md
index c2f8e4b1be..9ffaecf78d 100644
--- a/docs/assets/faq/en/16-How to customize the drop-down menu in table component.md	
+++ b/docs/assets/faq/en/16-How to customize the drop-down menu in table component.md	
@@ -58,11 +58,11 @@ menu: {
 2. Configure in the header
    dropDownMenu can be configured in columns. The items are the same as defaultHeaderMenuItems. The menu only takes effect in the corresponding column.
 3. Menu selection status update
-   After the drop-down menu item is selected, the "dropdownmenu_click" event will be triggered. The listening event updates the drop-down menu status through the setDropDownMenuHighlight interface. The selected item text and icon will change the style.
+   After the drop-down menu item is selected, the "dropdown_menu_click" event will be triggered. The listening event updates the drop-down menu status through the setDropDownMenuHighlight interface. The selected item text and icon will change the style.
 
 ```javascript
-table.on('dropdownmenu_click', (args: any) => {
-  console.log('dropdownmenu_click', args);
+table.on('dropdown_menu_click', (args: any) => {
+  console.log('dropdown_menu_click', args);
   table.setDropDownMenuHighlight([args]);
 });
 ```
@@ -140,8 +140,8 @@ const option: TYPES.ListTableConstructorOptions = {
   }
 };
 const table = new ListTable(document.getElementById('container'), option);
-table.on('dropdownmenu_click', (args: any) => {
-  console.log('dropdownmenu_click', args);
+table.on('dropdown_menu_click', (args: any) => {
+  console.log('dropdown_menu_click', args);
   table.setDropDownMenuHighlight([args]);
 });
 ```
diff --git a/docs/assets/faq/en/18-How to customize the context menu in the table component.md b/docs/assets/faq/en/18-How to customize the context menu in the table component.md
index c3d5ec639b..753869eb55 100644
--- a/docs/assets/faq/en/18-How to customize the context menu in the table component.md	
+++ b/docs/assets/faq/en/18-How to customize the context menu in the table component.md	
@@ -38,10 +38,10 @@ Menu item configuration:
 - text: the text of the menu item
 - menuKey: unique identifier of the menu item
 
-After the drop-down menu item is selected, the "dropdownmenu_click" event will be triggered, and you can listen to the event and perform related operations.
+After the drop-down menu item is selected, the "dropdown_menu_click" event will be triggered, and you can listen to the event and perform related operations.
 
 ```javascript
-table.on('dropdownmenu_click', (args: any) => {
+table.on('dropdown_menu_click', (args: any) => {
   console.log('menu_click', args);
 });
 ```
@@ -65,7 +65,7 @@ const option: TYPES.ListTableConstructorOptions = {
   }
 };
 const table = new ListTable(document.getElementById('container'), option);
-table.on('dropdownmenu_click', (args: any) => {
+table.on('dropdown_menu_click', (args: any) => {
   console.log('menu_click', args);
 });
 ```
diff --git a/docs/assets/faq/zh/16-How to customize the drop-down menu in table component.md b/docs/assets/faq/zh/16-How to customize the drop-down menu in table component.md
index 9683ef1b7f..d887811c69 100644
--- a/docs/assets/faq/zh/16-How to customize the drop-down menu in table component.md	
+++ b/docs/assets/faq/zh/16-How to customize the drop-down menu in table component.md	
@@ -58,11 +58,11 @@ menu: {
 2. 在表头中配置
    在 columns 中可以配置 dropDownMenu，项目与 defaultHeaderMenuItems 相同，该菜单只在对应的列中生效。
 3. 菜单选中状态更新
-   下拉菜单项目选中后，会触发"dropdownmenu_click"事件，监听事件事件通过 setDropDownMenuHighlight 接口更新下拉菜单状态，选中的项目文字和 icon 会更改样式。
+   下拉菜单项目选中后，会触发"dropdown_menu_click"事件，监听事件事件通过 setDropDownMenuHighlight 接口更新下拉菜单状态，选中的项目文字和 icon 会更改样式。
 
 ```javascript
-table.on('dropdownmenu_click', (args: any) => {
-  console.log('dropdownmenu_click', args);
+table.on('dropdown_menu_click', (args: any) => {
+  console.log('dropdown_menu_click', args);
   table.setDropDownMenuHighlight([args]);
 });
 ```
@@ -140,8 +140,8 @@ const option: TYPES.ListTableConstructorOptions = {
   }
 };
 const table = new ListTable(document.getElementById('container'), option);
-table.on('dropdownmenu_click', (args: any) => {
-  console.log('dropdownmenu_click', args);
+table.on('dropdown_menu_click', (args: any) => {
+  console.log('dropdown_menu_click', args);
   table.setDropDownMenuHighlight([args]);
 });
 ```
diff --git a/docs/assets/faq/zh/18-How to customize the context menu in the table component.md b/docs/assets/faq/zh/18-How to customize the context menu in the table component.md
index 95eaf64ac5..517d9c4cc4 100644
--- a/docs/assets/faq/zh/18-How to customize the context menu in the table component.md	
+++ b/docs/assets/faq/zh/18-How to customize the context menu in the table component.md	
@@ -38,10 +38,10 @@ menu: {
 - text: 菜单项目的文字
 - menuKey: 菜单项目的唯一标识符
 
-下拉菜单项目选中后，会触发"dropdownmenu_click"事件，可以监听事件事件执行相关操作。
+下拉菜单项目选中后，会触发"dropdown_menu_click"事件，可以监听事件事件执行相关操作。
 
 ```javascript
-table.on('dropdownmenu_click', (args: any) => {
+table.on('dropdown_menu_click', (args: any) => {
   console.log('menu_click', args);
 });
 ```
@@ -65,7 +65,7 @@ const option: TYPES.ListTableConstructorOptions = {
   }
 };
 const table = new ListTable(document.getElementById('container'), option);
-table.on('dropdownmenu_click', (args: any) => {
+table.on('dropdown_menu_click', (args: any) => {
   console.log('menu_click', args);
 });
 ```
diff --git a/docs/assets/guide/en/Event/event_list.md b/docs/assets/guide/en/Event/event_list.md
index ced2ecbcdf..4391c9eb27 100644
--- a/docs/assets/guide/en/Event/event_list.md
+++ b/docs/assets/guide/en/Event/event_list.md
@@ -33,7 +33,7 @@ For a more comprehensive list of events, please refer to: https://visactor.io/vt
 | After sort                                 | AFTER_SORT                                          | Execute after sorting event                                                                                            |
 | Click Fixed Column                         | FREEZE_CLICK                                        | Click Fixed Column Icon Event                                                                                          |
 | Scroll                                     | SCROLL                                              | Scroll Table Events                                                                                                    |
-| Click the drop-down icon                   | DROPDOWNMENU_CLICK                                  | Click the drop-down menu icon event                                                                                    |
+| Click the drop-down icon                   | DROPDOWN_MENU_CLICK                                  | Click the drop-down menu icon event                                                                                    |
 | Click on the drop-down menu                | MENU_CLICK                                          | Click on the drop-down menu Events                                                                                     |
 | Mouse over miniature                       | MOUSEOVER_CHART_SYMBOL                              | Mouse over miniature mark events                                                                                       |
 | Drag and drop box to select mouse release  | DRAG_SELECT_END                                     | Drag and drop box to select cell mouse release event                                                                   |
diff --git a/docs/assets/guide/zh/Event/event_list.md b/docs/assets/guide/zh/Event/event_list.md
index a31f2ed4f1..9927d0a0e9 100644
--- a/docs/assets/guide/zh/Event/event_list.md
+++ b/docs/assets/guide/zh/Event/event_list.md
@@ -35,7 +35,7 @@
 | 滚动                     | SCROLL                      | 滚动表格事件                                                              |
 | 滚动                     | SCROLL_HORIZONTAL_END       | 横向滚动右侧事件                                                          |
 | 滚动                     | SCROLL_VERTICAL_END         | 竖向滚动底部事件                                                          |
-| 点击下拉图标             | DROPDOWNMENU_CLICK          | 点击下拉菜单图标事件                                                      |
+| 点击下拉图标             | DROPDOWN_MENU_CLICK          | 点击下拉菜单图标事件                                                      |
 | 点击下拉菜单             | MENU_CLICK                  | 点击下拉菜单事件                                                          |
 | 鼠标经过迷你图           | MOUSEOVER_CHART_SYMBOL      | 鼠标经过迷你图标记事件                                                    |
 | 拖拽框选鼠标松开         | DRAG_SELECT_END             | 拖拽框选单元格鼠标松开事件                                                |
diff --git a/packages/vtable/src/scenegraph/component/menu.ts b/packages/vtable/src/scenegraph/component/menu.ts
index 1a5b324095..3381d0c917 100644
--- a/packages/vtable/src/scenegraph/component/menu.ts
+++ b/packages/vtable/src/scenegraph/component/menu.ts
@@ -326,7 +326,7 @@ export class MenuHandler {
         result.event = e.nativeEvent;
         this._table.fireListeners(TABLE_EVENT_TYPE.DROPDOWN_MENU_CLICK, result);
 
-        // 由DROPDOWNMENU_CLICK事件清空菜单
+        // 由DROPDOWN_MENU_CLICK事件清空菜单
         // this.detach();
       }
     });

From 6e170b20a6aa0806a82ac7c46dd1bc39d31227df Mon Sep 17 00:00:00 2001
From: Rui-Sun <sunrui1992@foxmail.com>
Date: Wed, 9 Apr 2025 16:08:36 +0800
Subject: [PATCH 23/23] fix: fix flex layout update in react-custom-layout
 component #3696

---
 ...x-custom-flex-layout_2025-04-09-08-08.json |  10 +
 packages/react-vtable/demo/src/App.tsx        |   6 +-
 .../component/user/custom-layout-update.tsx   | 188 ++++++++++++++++++
 .../src/table-components/custom/reconciler.ts |  20 +-
 4 files changed, 220 insertions(+), 4 deletions(-)
 create mode 100644 common/changes/@visactor/vtable/fix-custom-flex-layout_2025-04-09-08-08.json
 create mode 100644 packages/react-vtable/demo/src/component/user/custom-layout-update.tsx

diff --git a/common/changes/@visactor/vtable/fix-custom-flex-layout_2025-04-09-08-08.json b/common/changes/@visactor/vtable/fix-custom-flex-layout_2025-04-09-08-08.json
new file mode 100644
index 0000000000..61daf547f9
--- /dev/null
+++ b/common/changes/@visactor/vtable/fix-custom-flex-layout_2025-04-09-08-08.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "fix: fix flex layout update in react-custom-layout component #3696",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}
\ No newline at end of file
diff --git a/packages/react-vtable/demo/src/App.tsx b/packages/react-vtable/demo/src/App.tsx
index 245516aea8..0e34141142 100644
--- a/packages/react-vtable/demo/src/App.tsx
+++ b/packages/react-vtable/demo/src/App.tsx
@@ -23,6 +23,8 @@ import customLayoutDomSite from './component/custom-layout-dom-site';
 import customLayoutDomSite1 from './component/custom-layout-dom-site-1';
 import customLayoutPivot from './component/custom-layout-pivot';
 
+import userCustomLayoutUpdate from './component/user/custom-layout-update';
+
 // export default listTable;
 // export default listEditor;
 // export default listOptionRecord;
@@ -45,5 +47,7 @@ import customLayoutPivot from './component/custom-layout-pivot';
 // export default customLayout;
 // export default customLayoutDom;
 // export default customLayoutDomSite;
-export default customLayoutDomSite1;
+// export default customLayoutDomSite1;
 // export default customLayoutPivot;
+
+export default userCustomLayoutUpdate;
diff --git a/packages/react-vtable/demo/src/component/user/custom-layout-update.tsx b/packages/react-vtable/demo/src/component/user/custom-layout-update.tsx
new file mode 100644
index 0000000000..e4b6eed6df
--- /dev/null
+++ b/packages/react-vtable/demo/src/component/user/custom-layout-update.tsx
@@ -0,0 +1,188 @@
+/* eslint-disable max-len */
+import { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import type { CustomLayoutFunctionArg } from '../../../../src';
+import {
+  ListTable,
+  ListColumn,
+  CustomLayout,
+  Group,
+  Text,
+  Tag,
+  Checkbox,
+  Radio,
+  Button,
+  Link,
+  Avatar,
+  Image,
+  Popover
+} from '../../../../src';
+
+const UserProfileComponent = (props: any) => {
+  const { table, row, col, rect, dataValue, align } = props;
+  if (!table || row === undefined || col === undefined) {
+    return null;
+  }
+  const { height, width } = rect || table.getCellRect(col, row);
+  const record = table.getRecordByCell(col, row);
+
+  const [hover, setHover] = useState(false);
+
+  return (
+    <Group
+      attribute={{
+        width,
+        height,
+        display: 'flex',
+        alignItems: align,
+        justifyContent: 'center',
+        flexDirection: 'column',
+        flexWrap: 'nowrap'
+      }}
+    >
+      <Group
+        attribute={{
+          // boundsPadding: [0, 10],
+          // stroke: 'red',
+          // lineWidth: 1,
+          // display: 'flex',
+          // // background: style?.bgColor
+          // background: 'pink'
+          boundsPadding: [0, 10],
+          stroke: '#16a34a',
+          lineWidth: 1,
+          display: 'flex',
+          cornerRadius: 10,
+          background: '#ccc'
+        }}
+      >
+        <Text
+          attribute={{
+            text: dataValue,
+            fontSize: 12,
+            // fill: style?.textColor,
+            fill: 'blue',
+            boundsPadding: 3,
+            cursor: 'pointer',
+            backgroundCornerRadius: 8
+          }}
+        />
+      </Group>
+    </Group>
+  );
+};
+
+function App() {
+  const [col, setCol] = useState([
+    { title: 'ID', field: 'bloggerId' },
+    { title: 'Name', field: 'bloggerName' }
+  ]);
+  const records = [
+    {
+      bloggerId: 1,
+      bloggerName: 'Virtual Anchor Xiaohua',
+      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
+      introduction:
+        'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
+      fansCount: 400,
+      worksCount: 10,
+      viewCount: 5,
+      city: 'Dream City',
+      tags: ['game', 'anime', 'food']
+    },
+    {
+      bloggerId: 2,
+      bloggerName: 'Virtual anchor little wolf',
+      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
+      introduction:
+        'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
+      fansCount: 800,
+      worksCount: 20,
+      viewCount: 15,
+      city: 'City of Music',
+      tags: ['music', 'travel', 'photography']
+    },
+    {
+      bloggerId: 3,
+      bloggerName: 'Virtual anchor bunny',
+      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
+      introduction:
+        'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
+      fansCount: 600,
+      worksCount: 15,
+      viewCount: 10,
+      city: 'City of Art',
+      tags: ['painting', 'handmade', 'beauty makeup']
+    },
+    {
+      bloggerId: 4,
+      bloggerName: 'Virtual anchor kitten',
+      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
+      introduction:
+        'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
+      fansCount: 1000,
+      worksCount: 30,
+      viewCount: 20,
+      city: 'Health City',
+      tags: ['dance', 'fitness', 'cooking']
+    },
+    {
+      bloggerId: 5,
+      bloggerName: 'Virtual anchor Bear',
+      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
+      introduction:
+        'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
+      fansCount: 1200,
+      worksCount: 25,
+      viewCount: 18,
+      city: 'City of Wisdom',
+      tags: ['Movie', 'Literature']
+    },
+    {
+      bloggerId: 6,
+      bloggerName: 'Virtual anchor bird',
+      bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
+      introduction:
+        'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
+      fansCount: 900,
+      worksCount: 12,
+      viewCount: 8,
+      city: 'Happy City',
+      tags: ['music', 'performance', 'variety']
+    }
+  ];
+
+  const columns = [];
+  const handleChange = () => {
+    setCol([
+      { title: 'ID', field: 'bloggerId' },
+      { title: 'Name', field: 'bloggerName' }
+    ]);
+  };
+  return (
+    <div>
+      <button onClick={handleChange}>更新columns</button>
+      <ListTable
+        records={records}
+        // theme={VTable.themes.ARCO}
+        height={900}
+        // defaultRowHeight={80}
+        onReady={(table: any) => {
+          // eslint-disable-next-line no-undef
+          (window as any).tableInstance = table;
+        }}
+        // ReactDOM={ReactDom}
+      >
+        {col.map((item, i) => {
+          return (
+            <ListColumn key={i} field={'bloggerName'} title={'Name'} width={220}>
+              <UserProfileComponent align="center" role={'custom-layout'} />
+            </ListColumn>
+          );
+        })}
+      </ListTable>
+    </div>
+  );
+}
+
+export default App;
diff --git a/packages/react-vtable/src/table-components/custom/reconciler.ts b/packages/react-vtable/src/table-components/custom/reconciler.ts
index fe669f89b4..6ab82d2f28 100644
--- a/packages/react-vtable/src/table-components/custom/reconciler.ts
+++ b/packages/react-vtable/src/table-components/custom/reconciler.ts
@@ -1,6 +1,6 @@
 import { application, REACT_TO_CANOPUS_EVENTS, Tag } from '@visactor/vtable/es/vrender';
-import type { Graphic, IGraphic, IGraphicCreator } from '@visactor/vtable/es/vrender';
-import { isFunction, merge } from '@visactor/vutils';
+import type { FlexLayoutPlugin, Graphic, IGraphic, IGraphicCreator } from '@visactor/vtable/es/vrender';
+import { isFunction, isNumber, merge } from '@visactor/vutils';
 import React from 'react';
 import ReactReconciler from 'react-reconciler';
 import { DefaultEventPriority } from 'react-reconciler/constants.js';
@@ -175,10 +175,24 @@ function updateGraphicProps(graphic: IGraphic, newProps: any, oldProps: any) {
       );
     }
   }
-  // update all attribute
   const attribute = newProps.attribute ?? merge({}, newProps);
+
+  // update all attribute
   graphic.initAttributes(attribute);
   if (graphic.type === 'image') {
     graphic.loadImage(attribute.image);
   }
+
+  if (
+    attribute.display === 'flex' &&
+    attribute.width === undefined &&
+    attribute.height === undefined &&
+    isNumber(oldProps.attribute.width) &&
+    isNumber(oldProps.attribute.height)
+  ) {
+    const plugin = graphic.stage.pluginService.findPluginsByName('FlexLayoutPlugin')[0] as FlexLayoutPlugin;
+    if (plugin) {
+      plugin.tryLayoutChildren(graphic);
+    }
+  }
 }