From 85592361ccc14a3b434205c63bd24c998027553a Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Fri, 6 Sep 2024 17:26:06 +0900
Subject: [PATCH] Add TreeColumn (#426)

* Add TreeColumn

* update

* update

* fix
---
 README.md                                     |   6 +-
 package.json                                  |   2 +-
 .../.vscode/settings.json                     |   2 +-
 .../package-lock.json                         |   4 +-
 .../cheetah-grid-icon-svg-loader/package.json |   2 +-
 ..._content_svg_production_ic_add_48px_svg.js |  13 +
 ...duction_ic_keyboard_arrow_down_48px_svg.js |  13 +
 ...duction_ic_keyboard_arrow_left_48px_svg.js |  13 +
 ...uction_ic_keyboard_arrow_right_48px_svg.js |  13 +
 ...roduction_ic_keyboard_arrow_up_48px_svg.js |  13 +
 ...__image_svg_production_ic_edit_48px_svg.js |  13 +
 ...g_production_ic_arrow_downward_48px_svg.js |  13 +
 ...svg_production_ic_arrow_upward_48px_svg.js |  13 +
 ...svg_production_ic_chevron_left_48px_svg.js |  13 +
 ...vg_production_ic_chevron_right_48px_svg.js |  13 +
 ..._svg_production_ic_expand_less_48px_svg.js |  13 +
 ..._svg_production_ic_expand_more_48px_svg.js |  13 +
 ..._toggle_svg_production_ic_star_24px_svg.js |  13 +
 ..._svg_production_ic_star_border_24px_svg.js |  13 +
 ...le_svg_production_ic_star_half_24px_svg.js |  13 +
 .../test-fixtures/expect/test-icon.html       |   2 +-
 .../test-fixtures/expect/test-icons.html      |   2 +-
 .../test-fixtures/inputs/package-lock.json    |  12 +-
 .../tests/lib/font-svg-to-icons-load.js       |   6 +-
 .../tests/lib/svg-to-icon-load.js             |  20 +-
 .../tests/test-utils.js                       |   9 +-
 packages/cheetah-grid/package-lock.json       |   4 +-
 packages/cheetah-grid/package.json            |   2 +-
 .../cheetah-grid/src/js/GridCanvasHelper.ts   | 168 ++++--
 .../src/js/columns/action/Action.ts           |  63 ++-
 .../src/js/columns/action/ButtonAction.ts     |  18 +-
 .../src/js/columns/action/actionBind.ts       |  94 +++-
 packages/cheetah-grid/src/js/columns/style.ts |   4 +
 .../src/js/columns/style/TreeStyle.ts         |  62 ++
 packages/cheetah-grid/src/js/columns/type.ts  |   4 +
 .../src/js/columns/type/BranchGraphColumn.ts  |  47 +-
 .../src/js/columns/type/IconColumn.ts         |  17 +-
 .../js/columns/type/MultilineTextColumn.ts    |   4 +-
 .../src/js/columns/type/NumberColumn.ts       |  20 +-
 .../columns/type/PercentCompleteBarColumn.ts  |   9 +
 .../src/js/columns/type/TreeColumn.ts         | 532 ++++++++++++++++++
 packages/cheetah-grid/src/js/core/DrawGrid.ts |  76 ++-
 .../src/js/header/type/SortHeader.ts          |   4 +-
 packages/cheetah-grid/src/js/icons.ts         |  64 +++
 .../src/js/internal/symbolManager.ts          |   3 +
 packages/cheetah-grid/src/js/themes/theme.ts  |  65 ++-
 .../src/js/ts-types-internal/grid-engine.ts   |  23 +
 .../src/js/ts-types/column/action.ts          |  23 +-
 .../src/js/ts-types/column/style.ts           |  12 +
 .../src/js/ts-types/column/type.ts            |  76 ++-
 .../cheetah-grid/src/js/ts-types/define.ts    |  22 +-
 .../cheetah-grid/src/js/ts-types/events.ts    |   5 +-
 .../src/js/ts-types/grid-engine.ts            |   9 +-
 .../cheetah-grid/src/js/ts-types/plugin.ts    |  14 +-
 .../src/test/ListGrid_sample_for_tree.html    |  28 +
 .../src/test/ListGrid_sample_for_tree.js      | 173 ++++++
 packages/demo/package-lock.json               |   4 +-
 packages/demo/package.json                    |   2 +-
 packages/docs/api/js/column_actions/Action.md |  30 +
 .../api/js/column_actions/ButtonAction.md     |  18 +
 .../docs/api/js/column_actions/CheckEditor.md |  20 +-
 .../docs/api/js/column_actions/Classes.md     |   4 +
 .../js/column_actions/InlineInputEditor.md    |  23 +-
 .../api/js/column_actions/InlineMenuEditor.md |  22 +
 .../docs/api/js/column_actions/RadioEditor.md |  22 +-
 .../column_actions/SmallDialogInputEditor.md  |  18 +-
 .../api/js/column_types/BranchGraphColumn.md  |  65 ++-
 .../docs/api/js/column_types/TreeColumn.md    | 218 +++++++
 .../api/vue/components/CGridTreeColumn.md     | 200 +++++++
 .../introduction/getting-started-with-vue.md  |   4 +-
 packages/docs/introduction/getting-started.md |   6 +-
 packages/docs/package-lock.json               |   4 +-
 packages/docs/package.json                    |   2 +-
 packages/react-cheetah-grid/package-lock.json |   4 +-
 .../vue-cheetah-grid/lib/CGridTreeColumn.vue  |  87 +++
 packages/vue-cheetah-grid/lib/index.js        |   3 +
 packages/vue-cheetah-grid/package-lock.json   |   4 +-
 packages/vue-cheetah-grid/package.json        |   2 +-
 78 files changed, 2444 insertions(+), 225 deletions(-)
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__content_svg_production_ic_add_48px_svg.js
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_down_48px_svg.js
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_left_48px_svg.js
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_right_48px_svg.js
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_up_48px_svg.js
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__image_svg_production_ic_edit_48px_svg.js
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_arrow_downward_48px_svg.js
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_arrow_upward_48px_svg.js
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_chevron_left_48px_svg.js
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_chevron_right_48px_svg.js
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_expand_less_48px_svg.js
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_expand_more_48px_svg.js
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__toggle_svg_production_ic_star_24px_svg.js
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__toggle_svg_production_ic_star_border_24px_svg.js
 create mode 100644 packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__toggle_svg_production_ic_star_half_24px_svg.js
 create mode 100644 packages/cheetah-grid/src/js/columns/style/TreeStyle.ts
 create mode 100644 packages/cheetah-grid/src/js/columns/type/TreeColumn.ts
 create mode 100644 packages/cheetah-grid/src/test/ListGrid_sample_for_tree.html
 create mode 100644 packages/cheetah-grid/src/test/ListGrid_sample_for_tree.js
 create mode 100644 packages/docs/api/js/column_actions/Action.md
 create mode 100644 packages/docs/api/js/column_types/TreeColumn.md
 create mode 100644 packages/docs/api/vue/components/CGridTreeColumn.md
 create mode 100644 packages/vue-cheetah-grid/lib/CGridTreeColumn.vue

diff --git a/README.md b/README.md
index ac228b72a..4365dff62 100644
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@ The fastest open-source data table for web.
 [![npm](https://img.shields.io/npm/v/cheetah-grid.svg)](https://www.npmjs.com/package/cheetah-grid)
 
 ```html
-<script src="https://unpkg.com/cheetah-grid@1.14"></script>
+<script src="https://unpkg.com/cheetah-grid@1.15"></script>
 ```
 
 ### Downloading Cheetah Grid using npm
@@ -46,10 +46,10 @@ const cheetahGrid = require("cheetah-grid");
 
 [![npm](https://img.shields.io/npm/v/cheetah-grid.svg)](https://www.npmjs.com/package/cheetah-grid)
 
-[cheetahGrid.es5.min.js](https://unpkg.com/cheetah-grid@1.14/dist/cheetahGrid.es5.min.js)
+[cheetahGrid.es5.min.js](https://unpkg.com/cheetah-grid@1.15/dist/cheetahGrid.es5.min.js)
 
 SourceMap  
-[cheetahGrid.es5.min.js.map](https://unpkg.com/cheetah-grid@1.14/dist/cheetahGrid.es5.min.js.map)
+[cheetahGrid.es5.min.js.map](https://unpkg.com/cheetah-grid@1.15/dist/cheetahGrid.es5.min.js.map)
 
 ### Downloading Cheetah Grid using GitHub
 
diff --git a/package.json b/package.json
index a320cfd5b..f079f1127 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "cheetah-grid-manager",
   "private": true,
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Cheetah Grid is a high performance grid engine that works on canvas",
   "keywords": [
     "spreadsheet",
diff --git a/packages/cheetah-grid-icon-svg-loader/.vscode/settings.json b/packages/cheetah-grid-icon-svg-loader/.vscode/settings.json
index e8c5bbd63..4c9e2db05 100644
--- a/packages/cheetah-grid-icon-svg-loader/.vscode/settings.json
+++ b/packages/cheetah-grid-icon-svg-loader/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.codeActionsOnSaveTimeout": 10000,
 }
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/package-lock.json b/packages/cheetah-grid-icon-svg-loader/package-lock.json
index 95406a930..a7610f48b 100644
--- a/packages/cheetah-grid-icon-svg-loader/package-lock.json
+++ b/packages/cheetah-grid-icon-svg-loader/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cheetah-grid-icon-svg-loader",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cheetah-grid-icon-svg-loader",
-      "version": "1.14.0",
+      "version": "1.15.0",
       "license": "MIT",
       "dependencies": {
         "loader-utils": "^1.1.0",
diff --git a/packages/cheetah-grid-icon-svg-loader/package.json b/packages/cheetah-grid-icon-svg-loader/package.json
index 8375450e8..255ffcc8d 100644
--- a/packages/cheetah-grid-icon-svg-loader/package.json
+++ b/packages/cheetah-grid-icon-svg-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cheetah-grid-icon-svg-loader",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Webpack loader that loads the icon module for Cheetah Grid from SVG.",
   "main": "lib/index.js",
   "files": [
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__content_svg_production_ic_add_48px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__content_svg_production_ic_add_48px_svg.js
new file mode 100644
index 000000000..7c6415d5d
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__content_svg_production_ic_add_48px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_add_48px": {
+  "d": "M38 26H26v12h-4V26H10v-4h12V10h4v12h12v4z",
+  "width": 48,
+  "height": 48
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__content_svg_production_ic_add_48px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_down_48px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_down_48px_svg.js
new file mode 100644
index 000000000..528d1d73a
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_down_48px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_keyboard_arrow_down_48px": {
+  "d": "M14.83 16.42L24 25.59l9.17-9.17L36 19.25l-12 12-12-12z",
+  "width": 48,
+  "height": 48
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__hardware_svg_production_ic_keyboard_arrow_down_48px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_left_48px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_left_48px_svg.js
new file mode 100644
index 000000000..6207a643b
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_left_48px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_keyboard_arrow_left_48px": {
+  "d": "M30.83 32.67l-9.17-9.17 9.17-9.17L28 11.5l-12 12 12 12z",
+  "width": 48,
+  "height": 48
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__hardware_svg_production_ic_keyboard_arrow_left_48px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_right_48px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_right_48px_svg.js
new file mode 100644
index 000000000..806e51d75
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_right_48px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_keyboard_arrow_right_48px": {
+  "d": "M17.17 32.92l9.17-9.17-9.17-9.17L20 11.75l12 12-12 12z",
+  "width": 48,
+  "height": 48
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__hardware_svg_production_ic_keyboard_arrow_right_48px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_up_48px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_up_48px_svg.js
new file mode 100644
index 000000000..030ccfdad
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__hardware_svg_production_ic_keyboard_arrow_up_48px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_keyboard_arrow_up_48px": {
+  "d": "M14.83 30.83L24 21.66l9.17 9.17L36 28 24 16 12 28z",
+  "width": 48,
+  "height": 48
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__hardware_svg_production_ic_keyboard_arrow_up_48px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__image_svg_production_ic_edit_48px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__image_svg_production_ic_edit_48px_svg.js
new file mode 100644
index 000000000..6361c1cad
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__image_svg_production_ic_edit_48px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_edit_48px": {
+  "d": "M6 34.5V42h7.5l22.13-22.13-7.5-7.5L6 34.5zm35.41-20.41c.78-.78.78-2.05 0-2.83l-4.67-4.67c-.78-.78-2.05-.78-2.83 0l-3.66 3.66 7.5 7.5 3.66-3.66z",
+  "width": 48,
+  "height": 48
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__image_svg_production_ic_edit_48px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_arrow_downward_48px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_arrow_downward_48px_svg.js
new file mode 100644
index 000000000..f4bef285f
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_arrow_downward_48px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_arrow_downward_48px": {
+  "d": "M40 24l-2.82-2.82L26 32.34V8h-4v24.34L10.84 21.16 8 24l16 16 16-16z",
+  "width": 48,
+  "height": 48
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__navigation_svg_production_ic_arrow_downward_48px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_arrow_upward_48px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_arrow_upward_48px_svg.js
new file mode 100644
index 000000000..66821ef57
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_arrow_upward_48px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_arrow_upward_48px": {
+  "d": "M8 24l2.83 2.83L22 15.66V40h4V15.66l11.17 11.17L40 24 24 8 8 24z",
+  "width": 48,
+  "height": 48
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__navigation_svg_production_ic_arrow_upward_48px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_chevron_left_48px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_chevron_left_48px_svg.js
new file mode 100644
index 000000000..6fedd08c8
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_chevron_left_48px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_chevron_left_48px": {
+  "d": "M30.83 14.83L28 12 16 24l12 12 2.83-2.83L21.66 24z",
+  "width": 48,
+  "height": 48
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__navigation_svg_production_ic_chevron_left_48px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_chevron_right_48px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_chevron_right_48px_svg.js
new file mode 100644
index 000000000..db7194ec1
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_chevron_right_48px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_chevron_right_48px": {
+  "d": "M20 12l-2.83 2.83L26.34 24l-9.17 9.17L20 36l12-12z",
+  "width": 48,
+  "height": 48
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__navigation_svg_production_ic_chevron_right_48px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_expand_less_48px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_expand_less_48px_svg.js
new file mode 100644
index 000000000..44bae1f51
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_expand_less_48px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_expand_less_48px": {
+  "d": "M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z",
+  "width": 48,
+  "height": 48
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__navigation_svg_production_ic_expand_less_48px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_expand_more_48px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_expand_more_48px_svg.js
new file mode 100644
index 000000000..5eb642cce
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__navigation_svg_production_ic_expand_more_48px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_expand_more_48px": {
+  "d": "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z",
+  "width": 48,
+  "height": 48
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__navigation_svg_production_ic_expand_more_48px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__toggle_svg_production_ic_star_24px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__toggle_svg_production_ic_star_24px_svg.js
new file mode 100644
index 000000000..82ea511fd
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__toggle_svg_production_ic_star_24px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_star_24px": {
+  "d": "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z",
+  "width": 24,
+  "height": 24
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__toggle_svg_production_ic_star_24px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__toggle_svg_production_ic_star_border_24px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__toggle_svg_production_ic_star_border_24px_svg.js
new file mode 100644
index 000000000..edaf74ff7
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__toggle_svg_production_ic_star_border_24px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_star_border_24px": {
+  "d": "M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z",
+  "width": 24,
+  "height": 24
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__toggle_svg_production_ic_star_border_24px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__toggle_svg_production_ic_star_half_24px_svg.js b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__toggle_svg_production_ic_star_half_24px_svg.js
new file mode 100644
index 000000000..6abadd7d8
--- /dev/null
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/material-design-icons__toggle_svg_production_ic_star_half_24px_svg.js
@@ -0,0 +1,13 @@
+var obj={
+ "ic_star_half_24px": {
+  "d": "M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z",
+  "width": 24,
+  "height": 24
+ }
+}
+  if (typeof window !== 'undefined') {
+    window['material-design-icons__toggle_svg_production_ic_star_half_24px_svg']=obj
+  } else {
+    module.exports=obj
+  }
+  
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/test-icon.html b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/test-icon.html
index 1ff228e4e..76e1e3fe4 100644
--- a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/test-icon.html
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/test-icon.html
@@ -81,7 +81,7 @@ <h1>ICONS</h1>
 		headerRowHeight: 24,
 	});
 	const records = [];
-	const {icons} = cheetahGrid;
+	const icons = cheetahGrid.getIcons();
 	Object.keys(icons).forEach((k, i) => {
 		records.push({
 			no: i + 1,
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/test-icons.html b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/test-icons.html
index d2ff8a0a9..e3d9256bf 100644
--- a/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/test-icons.html
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/expect/test-icons.html
@@ -80,7 +80,7 @@ <h1>ICONS</h1>
 		headerRowHeight: 24,
 	});
 	const records = [];
-	const {icons} = cheetahGrid;
+	const icons = cheetahGrid.getIcons();
 	Object.keys(icons).forEach((k, i) => {
 		records.push({
 			no: i + 1,
diff --git a/packages/cheetah-grid-icon-svg-loader/test-fixtures/inputs/package-lock.json b/packages/cheetah-grid-icon-svg-loader/test-fixtures/inputs/package-lock.json
index 80ff234da..88a6bfbf3 100644
--- a/packages/cheetah-grid-icon-svg-loader/test-fixtures/inputs/package-lock.json
+++ b/packages/cheetah-grid-icon-svg-loader/test-fixtures/inputs/package-lock.json
@@ -1,9 +1,15 @@
 {
   "name": "cheetah-grid-icon-svg-loader-test-inputs",
+  "lockfileVersion": 3,
   "requires": true,
-  "lockfileVersion": 1,
-  "dependencies": {
-    "material-design-icons": {
+  "packages": {
+    "": {
+      "name": "cheetah-grid-icon-svg-loader-test-inputs",
+      "devDependencies": {
+        "material-design-icons": "^3.0.1"
+      }
+    },
+    "node_modules/material-design-icons": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
       "integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78=",
diff --git a/packages/cheetah-grid-icon-svg-loader/tests/lib/font-svg-to-icons-load.js b/packages/cheetah-grid-icon-svg-loader/tests/lib/font-svg-to-icons-load.js
index 915b53e1c..ff02b068c 100644
--- a/packages/cheetah-grid-icon-svg-loader/tests/lib/font-svg-to-icons-load.js
+++ b/packages/cheetah-grid-icon-svg-loader/tests/lib/font-svg-to-icons-load.js
@@ -23,9 +23,8 @@ describe('font svg load', () => {
 
 		const result = eval(resultModule);//eslint-disable-line no-eval
 		const expect = loadExpect(name);
-		assert.deepStrictEqual(result, expect);
-
 		saveExpect(name, result);
+		assert.deepStrictEqual(result, expect);
 	});
 
 	it('should succeed loading module for fontawesome-webfont.svg', () => {
@@ -34,8 +33,7 @@ describe('font svg load', () => {
 
 		const result = eval(resultModule);//eslint-disable-line no-eval
 		const expect = loadExpect(name);
-		assert.deepStrictEqual(result, expect);
-
 		saveExpect(name, result);
+		assert.deepStrictEqual(result, expect);
 	});
 });
\ No newline at end of file
diff --git a/packages/cheetah-grid-icon-svg-loader/tests/lib/svg-to-icon-load.js b/packages/cheetah-grid-icon-svg-loader/tests/lib/svg-to-icon-load.js
index 1d42f5d85..15b3d5633 100644
--- a/packages/cheetah-grid-icon-svg-loader/tests/lib/svg-to-icon-load.js
+++ b/packages/cheetah-grid-icon-svg-loader/tests/lib/svg-to-icon-load.js
@@ -12,6 +12,21 @@ const MDI_ROOT = path.join(__dirname, '../../test-fixtures/inputs/node_modules/m
 const TEST_TARGETS = [
 	'./action/svg/production',
 	'./av/svg/design/ic_playlist_play_48px.svg',
+	'./toggle/svg/production/ic_star_24px.svg',
+	'./toggle/svg/production/ic_star_border_24px.svg',
+	'./toggle/svg/production/ic_star_half_24px.svg',
+	'./content/svg/production/ic_add_48px.svg',
+	'./image/svg/production/ic_edit_48px.svg',
+	'./navigation/svg/production/ic_arrow_downward_48px.svg',
+	'./navigation/svg/production/ic_arrow_upward_48px.svg',
+	'./navigation/svg/production/ic_chevron_left_48px.svg',
+	'./navigation/svg/production/ic_chevron_right_48px.svg',
+	'./navigation/svg/production/ic_expand_less_48px.svg',
+	'./navigation/svg/production/ic_expand_more_48px.svg',
+	'./hardware/svg/production/ic_keyboard_arrow_up_48px.svg',
+	'./hardware/svg/production/ic_keyboard_arrow_down_48px.svg',
+	'./hardware/svg/production/ic_keyboard_arrow_left_48px.svg',
+	'./hardware/svg/production/ic_keyboard_arrow_right_48px.svg',
 ];
 
 const walkTree = (rootDir, callback) => new Promise((resolve) => {
@@ -81,11 +96,10 @@ describe('svg load', () => {
 				return getAllSvgPaths(dirRoot).then((svgs) => {
 					const result = getAllModule(svgs);
 					const name = `material-design-icons${target.replace(/\\|\/|\./g, '_')}`;
-					// saveExpect(name, result);
-					const expect = loadExpect(name);
-					assert.deepStrictEqual(result, expect);
 
+					const expect = loadExpect(name);
 					saveExpect(name, result);
+					assert.deepStrictEqual(result, expect);
 				});
 			});
 		}
diff --git a/packages/cheetah-grid-icon-svg-loader/tests/test-utils.js b/packages/cheetah-grid-icon-svg-loader/tests/test-utils.js
index 4691f97df..bf4311834 100644
--- a/packages/cheetah-grid-icon-svg-loader/tests/test-utils.js
+++ b/packages/cheetah-grid-icon-svg-loader/tests/test-utils.js
@@ -11,7 +11,9 @@ function resolve(...names) {
 
 module.exports = {
 	loadExpect(name) {
-		return require(path.join(FIXTURES_ROOT, `./expect/${name}`));
+		const file = resolve(FIXTURES_ROOT, `./expect/${name}.js`);
+		if (!fs.existsSync(file)) { return {}; }
+		return require(file);
 	},
 	saveExpect(name, obj) {
 		const text = `var obj=${JSON.stringify(sortProps(obj), null, ' ')}
@@ -21,15 +23,16 @@ module.exports = {
     module.exports=obj
   }
   `;
+		const file = resolve(FIXTURES_ROOT, `./expect/${name}.js`);
 		let old;
 		try {
-			old = fs.readFileSync(resolve(FIXTURES_ROOT, `./expect/${name}.js`), 'utf-8');
+			old = fs.readFileSync(file, 'utf-8');
 		} catch (e) {
 			// ignore
 		}
 		if (old !== text) {
 			console.log(`save:${name}`);
-			fs.writeFileSync(resolve(FIXTURES_ROOT, `./expect/${name}.js`), text, 'utf-8');
+			fs.writeFileSync(file, text, 'utf-8');
 		}
 	}
 };
diff --git a/packages/cheetah-grid/package-lock.json b/packages/cheetah-grid/package-lock.json
index 5c30eeeb3..8be2451db 100644
--- a/packages/cheetah-grid/package-lock.json
+++ b/packages/cheetah-grid/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cheetah-grid",
-  "version": "1.13.3",
+  "version": "1.15.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cheetah-grid",
-      "version": "1.13.3",
+      "version": "1.15.0",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.12.3",
diff --git a/packages/cheetah-grid/package.json b/packages/cheetah-grid/package.json
index 400cda6b6..9a4db5545 100644
--- a/packages/cheetah-grid/package.json
+++ b/packages/cheetah-grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cheetah-grid",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Cheetah Grid is a high performance grid engine that works on canvas",
   "keywords": [
     "spreadsheet",
diff --git a/packages/cheetah-grid/src/js/GridCanvasHelper.ts b/packages/cheetah-grid/src/js/GridCanvasHelper.ts
index f0739d8ac..417e7e4f0 100644
--- a/packages/cheetah-grid/src/js/GridCanvasHelper.ts
+++ b/packages/cheetah-grid/src/js/GridCanvasHelper.ts
@@ -16,6 +16,8 @@ import type {
   RequiredThemeDefine,
   StylePropertyFunctionArg,
   TextOverflow,
+  TreeBranchIconStyleDefine,
+  TreeLineStyle,
 } from "./ts-types";
 import type { Inline, InlineDrawOption } from "./element/Inline";
 import { calcStartPosition, getFontSize } from "./internal/canvases";
@@ -46,34 +48,46 @@ function invalidateCell<T>(context: CellContext, grid: ListGridAPI<T>): void {
   const { col, row } = context;
   grid.invalidateCell(col, row);
 }
-function getColor<T>(
+function getStyleProperty<T>(
   color: ColorPropertyDefine,
   col: number,
   row: number,
   grid: ListGridAPI<T>,
   context: CanvasRenderingContext2D
 ): ColorDef;
-function getColor<T>(
+function getStyleProperty<T>(
   color: ColorsPropertyDefine,
   col: number,
   row: number,
   grid: ListGridAPI<T>,
   context: CanvasRenderingContext2D
 ): ColorsDef;
-function getColor<T>(
+function getStyleProperty<T>(
   color: undefined,
   col: number,
   row: number,
   grid: ListGridAPI<T>,
   context: CanvasRenderingContext2D
 ): undefined;
-function getColor<T>(
-  color: ColorPropertyDefine | ColorsPropertyDefine | undefined,
+function getStyleProperty<T, P>(
+  style: P | ((args: StylePropertyFunctionArg) => P),
   col: number,
   row: number,
   grid: ListGridAPI<T>,
   context: CanvasRenderingContext2D
-): ColorDef | ColorsDef | undefined {
+): P;
+function getStyleProperty<T, P>(
+  color:
+    | ColorPropertyDefine
+    | ColorsPropertyDefine
+    | undefined
+    | P
+    | ((args: StylePropertyFunctionArg) => P),
+  col: number,
+  row: number,
+  grid: ListGridAPI<T>,
+  context: CanvasRenderingContext2D
+): ColorDef | ColorsDef | undefined | P {
   return getOrApply(color, {
     col,
     row,
@@ -98,30 +112,27 @@ function getFont<T>(
     context,
   });
 }
-function getThemeColor<
-  R,
-  T extends ColorPropertyDefine | ColorsPropertyDefine | string | number
->(grid: ListGridAPI<R>, ...names: string[]): T {
-  const gridThemeColor = getChainSafe(grid.theme, ...names);
-  if (gridThemeColor == null) {
+function getThemeValue<R, T>(grid: ListGridAPI<R>, ...names: string[]): T {
+  const gridThemeValue = getChainSafe(grid.theme, ...names);
+  if (gridThemeValue == null) {
     // use default theme
     return getChainSafe(themes.getDefault(), ...names);
   }
-  if (typeof gridThemeColor !== "function") {
-    return gridThemeColor;
+  if (typeof gridThemeValue !== "function") {
+    return gridThemeValue;
   }
-  let defaultThemeColor: ColorDef;
+  let defaultThemeValue: unknown;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return ((args: StylePropertyFunctionArg): any => {
-    const color = gridThemeColor(args);
-    if (color != null) {
+    const value = gridThemeValue(args);
+    if (value != null) {
       // use grid theme
-      return color;
+      return value;
     }
     // use default theme
-    defaultThemeColor =
-      defaultThemeColor || getChainSafe(themes.getDefault(), ...names);
-    return getOrApply(defaultThemeColor, args);
+    defaultThemeValue =
+      defaultThemeValue || getChainSafe(themes.getDefault(), ...names);
+    return getOrApply(defaultThemeValue, args);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   }) as any;
 }
@@ -159,7 +170,7 @@ function drawInlines<T>(
     if (inline.canDraw()) {
       ctx.save();
       try {
-        ctx.fillStyle = getColor(
+        ctx.fillStyle = getStyleProperty(
           inline.color() || ctx.fillStyle,
           col,
           row,
@@ -381,7 +392,7 @@ function _inlineRect<T>(
   }
 ): void {
   //文字style
-  ctx.fillStyle = getColor(color || ctx.fillStyle, col, row, grid, ctx);
+  ctx.fillStyle = getStyleProperty(color || ctx.fillStyle, col, row, grid, ctx);
   ctx.textAlign = textAlign;
   ctx.textBaseline = textBaseline;
   ctx.font = font || ctx.font;
@@ -489,7 +500,7 @@ function _multiInlineRect<T>(
   }
 ): void {
   //文字style
-  ctx.fillStyle = getColor(color || ctx.fillStyle, col, row, grid, ctx);
+  ctx.fillStyle = getStyleProperty(color || ctx.fillStyle, col, row, grid, ctx);
   ctx.textAlign = textAlign;
   ctx.textBaseline = textBaseline;
   ctx.font = font || ctx.font;
@@ -864,52 +875,53 @@ class ThemeResolver<T> implements RequiredThemeDefine {
   private _checkbox: RequiredThemeDefine["checkbox"] | null = null;
   private _radioButton: RequiredThemeDefine["radioButton"] | null = null;
   private _button: RequiredThemeDefine["button"] | null = null;
+  private _tree: RequiredThemeDefine["tree"] | null = null;
   private _header: RequiredThemeDefine["header"] | null = null;
   private _messages: RequiredThemeDefine["messages"] | null = null;
   private _indicators: RequiredThemeDefine["indicators"] | null = null;
   constructor(grid: ListGridAPI<T>) {
     this._grid = grid;
   }
-  getThemeColor<
+  getThemeValue<
     T extends ColorPropertyDefine | ColorsPropertyDefine | FontPropertyDefine
   >(...name: string[]): T {
-    return getThemeColor(this._grid, ...name);
+    return getThemeValue(this._grid, ...name);
   }
   get font(): string {
-    return getThemeColor(this._grid, "font");
+    return getThemeValue(this._grid, "font");
   }
   get underlayBackgroundColor(): string {
-    return getThemeColor(this._grid, "underlayBackgroundColor");
+    return getThemeValue(this._grid, "underlayBackgroundColor");
   }
   // color
   get color(): ColorPropertyDefine {
-    return getThemeColor(this._grid, "color");
+    return getThemeValue(this._grid, "color");
   }
   get frozenRowsColor(): ColorPropertyDefine {
-    return getThemeColor(this._grid, "frozenRowsColor");
+    return getThemeValue(this._grid, "frozenRowsColor");
   }
   // background
   get defaultBgColor(): ColorPropertyDefine {
-    return getThemeColor(this._grid, "defaultBgColor");
+    return getThemeValue(this._grid, "defaultBgColor");
   }
   get frozenRowsBgColor(): ColorPropertyDefine {
-    return getThemeColor(this._grid, "frozenRowsBgColor");
+    return getThemeValue(this._grid, "frozenRowsBgColor");
   }
   get selectionBgColor(): ColorPropertyDefine {
-    return getThemeColor(this._grid, "selectionBgColor");
+    return getThemeValue(this._grid, "selectionBgColor");
   }
   get highlightBgColor(): ColorPropertyDefine {
-    return getThemeColor(this._grid, "highlightBgColor");
+    return getThemeValue(this._grid, "highlightBgColor");
   }
   // border
   get borderColor(): ColorsPropertyDefine {
-    return getThemeColor(this._grid, "borderColor");
+    return getThemeValue(this._grid, "borderColor");
   }
   get frozenRowsBorderColor(): ColorsPropertyDefine {
-    return getThemeColor(this._grid, "frozenRowsBorderColor");
+    return getThemeValue(this._grid, "frozenRowsBorderColor");
   }
   get highlightBorderColor(): ColorsPropertyDefine {
-    return getThemeColor(this._grid, "highlightBorderColor");
+    return getThemeValue(this._grid, "highlightBorderColor");
   }
   get checkbox(): RequiredThemeDefine["checkbox"] {
     const grid = this._grid;
@@ -929,7 +941,7 @@ class ThemeResolver<T> implements RequiredThemeDefine {
     );
 
     function getCheckboxProp(prop: string): ColorPropertyDefine {
-      return getThemeColor(grid, "checkbox", prop);
+      return getThemeValue(grid, "checkbox", prop);
     }
   }
   get radioButton(): RequiredThemeDefine["radioButton"] {
@@ -956,7 +968,7 @@ class ThemeResolver<T> implements RequiredThemeDefine {
     );
 
     function getRadioButtonProp(prop: string): ColorPropertyDefine {
-      return getThemeColor(grid, "radioButton", prop);
+      return getThemeValue(grid, "radioButton", prop);
     }
   }
   get button(): RequiredThemeDefine["button"] {
@@ -974,7 +986,37 @@ class ThemeResolver<T> implements RequiredThemeDefine {
     );
 
     function getButtonProp(prop: string): ColorPropertyDefine {
-      return getThemeColor(grid, "button", prop);
+      return getThemeValue(grid, "button", prop);
+    }
+  }
+  get tree(): RequiredThemeDefine["tree"] {
+    const grid = this._grid;
+    return (
+      this._tree ||
+      (this._tree = {
+        get lineStyle(): TreeLineStyle {
+          return getTreeProp("lineStyle");
+        },
+        get lineColor(): ColorPropertyDefine {
+          return getTreeProp("lineColor");
+        },
+        get lineWidth(): number {
+          return getTreeProp("lineWidth");
+        },
+        get treeIcon(): TreeBranchIconStyleDefine {
+          return getTreeProp("treeIcon");
+        },
+      })
+    );
+
+    function getTreeProp<
+      T extends
+        | ColorPropertyDefine
+        | number
+        | TreeLineStyle
+        | TreeBranchIconStyleDefine
+    >(prop: string): T {
+      return getThemeValue(grid, "tree", prop);
     }
   }
   get header(): RequiredThemeDefine["header"] {
@@ -983,7 +1025,7 @@ class ThemeResolver<T> implements RequiredThemeDefine {
       this._header ||
       (this._header = {
         get sortArrowColor(): ColorPropertyDefine {
-          return getThemeColor(grid, "header", "sortArrowColor");
+          return getThemeValue(grid, "header", "sortArrowColor");
         },
       })
     );
@@ -1014,7 +1056,7 @@ class ThemeResolver<T> implements RequiredThemeDefine {
     function getMessageProp<T extends ColorPropertyDefine | number>(
       prop: string
     ): T {
-      return getThemeColor(grid, "messages", prop);
+      return getThemeValue(grid, "messages", prop);
     }
   }
   get indicators(): RequiredThemeDefine["indicators"] {
@@ -1052,7 +1094,7 @@ class ThemeResolver<T> implements RequiredThemeDefine {
     function getIndicatorsProp<T extends ColorPropertyDefine | number>(
       prop: string
     ): T {
-      return getThemeColor(grid, "indicators", prop);
+      return getThemeValue(grid, "indicators", prop);
     }
   }
 }
@@ -1133,7 +1175,15 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
     row: number,
     ctx: CanvasRenderingContext2D
   ): ColorsDef {
-    return getColor(color, col, row, this._grid, ctx);
+    return getStyleProperty(color, col, row, this._grid, ctx);
+  }
+  getStyleProperty<T>(
+    style: T | ((args: StylePropertyFunctionArg) => T),
+    col: number,
+    row: number,
+    ctx: CanvasRenderingContext2D
+  ): T {
+    return getStyleProperty(style, col, row, this._grid, ctx);
   }
   toBoxArray(
     obj: ColorsDef
@@ -1277,7 +1327,7 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
     });
   }
   multilineText(
-    multilines: string[],
+    lines: string[],
     context: CellContext,
     {
       padding,
@@ -1332,7 +1382,7 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
       }
       const calculator = this.createCalculator(context, font);
       lineHeight = calculator.calcHeight(lineHeight);
-      _multiInlineRect(this._grid, ctx, multilines, rect, col, row, {
+      _multiInlineRect(this._grid, ctx, lines, rect, col, row, {
         offset,
         color,
         textAlign,
@@ -1378,7 +1428,7 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
     ctx.save();
     try {
       font = getFont(font, context.col, context.row, this._grid, ctx);
-      ctx.fillStyle = getColor(color, col, row, this._grid, ctx);
+      ctx.fillStyle = getStyleProperty(color, col, row, this._grid, ctx);
       ctx.textAlign = textAlign;
       ctx.textBaseline = textBaseline;
       ctx.font = font || ctx.font;
@@ -1397,7 +1447,7 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
 
     this.drawWithClip(context, (ctx) => {
       const { col, row } = context;
-      ctx.fillStyle = getColor(fillColor, col, row, this._grid, ctx);
+      ctx.fillStyle = getStyleProperty(fillColor, col, row, this._grid, ctx);
 
       ctx.beginPath();
       ctx.rect(rect.left, rect.top, rect.width, rect.height);
@@ -1422,7 +1472,7 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
     ctx.save();
     try {
       const { col, row } = context;
-      ctx.fillStyle = getColor(fillColor, col, row, this._grid, ctx);
+      ctx.fillStyle = getStyleProperty(fillColor, col, row, this._grid, ctx);
 
       ctx.beginPath();
       ctx.rect(rect.left, rect.top, rect.width, rect.height);
@@ -1472,7 +1522,13 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
 
     this.drawBorderWithClip(context, (ctx) => {
       const { col, row } = context;
-      const borderColors = getColor(borderColor, col, row, this._grid, ctx);
+      const borderColors = getStyleProperty(
+        borderColor,
+        col,
+        row,
+        this._grid,
+        ctx
+      );
 
       if (lineWidth === 1) {
         ctx.lineWidth = 1;
@@ -1538,7 +1594,7 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
         //右が選択されている
         this.drawBorderWithClip(context, (ctx) => {
           const borderColors = toBoxArray(
-            getColor(
+            getStyleProperty(
               this.theme.highlightBorderColor,
               sel.col,
               sel.row,
@@ -1557,7 +1613,7 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
         //上が選択されている
         this.drawBorderWithClip(context, (ctx) => {
           const borderColors = toBoxArray(
-            getColor(
+            getStyleProperty(
               this.theme.highlightBorderColor,
               sel.col,
               sel.row,
@@ -1715,7 +1771,13 @@ export class GridCanvasHelper<T> implements GridCanvasHelperAPI {
       const width = rect.width - paddingNums[1] - paddingNums[3];
       const height = rect.height - paddingNums[0] - paddingNums[2];
 
-      bgColor = getColor(bgColor, context.col, context.row, this._grid, ctx);
+      bgColor = getStyleProperty(
+        bgColor,
+        context.col,
+        context.row,
+        this._grid,
+        ctx
+      );
 
       canvashelper.drawButton(ctx, left, top, width, height, {
         bgColor,
diff --git a/packages/cheetah-grid/src/js/columns/action/Action.ts b/packages/cheetah-grid/src/js/columns/action/Action.ts
index f457ad501..2397bff16 100644
--- a/packages/cheetah-grid/src/js/columns/action/Action.ts
+++ b/packages/cheetah-grid/src/js/columns/action/Action.ts
@@ -1,4 +1,6 @@
 import type {
+  AbstractActionOption,
+  ActionAreaPredicate,
   ActionListener,
   ActionOption,
   CellAddress,
@@ -12,9 +14,9 @@ import type { GridInternal } from "../../ts-types-internal";
 import { extend } from "../../internal/utils";
 import { isDisabledRecord } from "./action-utils";
 
-export class Action<T> extends BaseAction<T> {
+export abstract class AbstractAction<T> extends BaseAction<T> {
   private _action: ActionListener;
-  constructor(option: ActionOption = {}) {
+  constructor(option: AbstractActionOption = {}) {
     super(option);
     this._action = option.action || ((): void => {});
   }
@@ -27,12 +29,10 @@ export class Action<T> extends BaseAction<T> {
   set action(action: ActionListener) {
     this._action = action;
   }
-  clone(): Action<T> {
-    return new Action(this);
-  }
-  getState(_grid: GridInternal<T>): { mouseActiveCell?: CellAddress } {
-    return {};
-  }
+  abstract get area(): ActionAreaPredicate | undefined;
+  abstract set area(_area: ActionAreaPredicate | undefined);
+  abstract clone(): AbstractAction<T>;
+  abstract getState(_grid: GridInternal<T>): { mouseActiveCell?: CellAddress };
   bindGridEvent(
     grid: ListGridAPI<T>,
     cellId: LayoutObjectId
@@ -66,6 +66,33 @@ export class Action<T> extends BaseAction<T> {
           const range = grid.getCellRange(e.col, e.row);
           grid.invalidateCellRange(range);
         },
+        area: (e) => {
+          if (!this.area) {
+            return true;
+          }
+
+          const { event } = e;
+          const clientX = event.clientX || event.pageX + window.scrollX;
+          const clientY = event.clientY || event.pageY + window.scrollY;
+          const canvasRect = grid.canvas.getBoundingClientRect();
+          const xInCanvas = clientX - canvasRect.left;
+          const yInCanvas = clientY - canvasRect.top;
+
+          const rect = grid.getCellRect(e.col, e.row);
+          return this.area({
+            col: e.col,
+            row: e.row,
+            grid,
+            pointInCell: {
+              x: xInCanvas - rect.left + grid.scrollLeft,
+              y: yInCanvas - rect.top + grid.scrollTop,
+            },
+            pointInDrawingCanvas: {
+              x: xInCanvas,
+              y: yInCanvas,
+            },
+          });
+        },
       }),
       ...bindCellKeyAction(grid, cellId, {
         action,
@@ -79,3 +106,23 @@ export class Action<T> extends BaseAction<T> {
     // noop
   }
 }
+
+export class Action<T> extends AbstractAction<T> {
+  private _area?: ActionAreaPredicate;
+  constructor(option: ActionOption = {}) {
+    super(option);
+    this._area = option.area;
+  }
+  get area(): ActionAreaPredicate | undefined {
+    return this._area;
+  }
+  set area(area: ActionAreaPredicate | undefined) {
+    this._area = area;
+  }
+  clone(): Action<T> {
+    return new Action(this);
+  }
+  getState(_grid: GridInternal<T>): { mouseActiveCell?: CellAddress } {
+    return {};
+  }
+}
diff --git a/packages/cheetah-grid/src/js/columns/action/ButtonAction.ts b/packages/cheetah-grid/src/js/columns/action/ButtonAction.ts
index f9c08f60a..cc8e1f522 100644
--- a/packages/cheetah-grid/src/js/columns/action/ButtonAction.ts
+++ b/packages/cheetah-grid/src/js/columns/action/ButtonAction.ts
@@ -1,9 +1,23 @@
+import type { ActionAreaPredicate, ButtonActionOption } from "../../ts-types";
 import type { ButtonColumnState, GridInternal } from "../../ts-types-internal";
-import { Action } from "./Action";
+import { AbstractAction } from "./Action";
 import { getButtonColumnStateId } from "../../internal/symbolManager";
 import { obj } from "../../internal/utils";
+
 const BUTTON_COLUMN_STATE_ID = getButtonColumnStateId();
-export class ButtonAction<T> extends Action<T> {
+export class ButtonAction<T> extends AbstractAction<T> {
+  constructor(option: ButtonActionOption = {}) {
+    super(option);
+  }
+  get area(): ActionAreaPredicate | undefined {
+    return undefined;
+  }
+  set area(_area: ActionAreaPredicate | undefined) {
+    // noop
+  }
+  clone(): ButtonAction<T> {
+    return new ButtonAction(this);
+  }
   getState(grid: GridInternal<T>): ButtonColumnState {
     let state = grid[BUTTON_COLUMN_STATE_ID];
     if (!state) {
diff --git a/packages/cheetah-grid/src/js/columns/action/actionBind.ts b/packages/cheetah-grid/src/js/columns/action/actionBind.ts
index 1530530e4..fa0f1ea2c 100644
--- a/packages/cheetah-grid/src/js/columns/action/actionBind.ts
+++ b/packages/cheetah-grid/src/js/columns/action/actionBind.ts
@@ -3,6 +3,8 @@ import type {
   EventListenerId,
   LayoutObjectId,
   ListGridAPI,
+  MouseCellEvent,
+  MousePointerCellEvent,
 } from "../../ts-types";
 import { event, isPromise } from "../../internal/utils";
 import { DG_EVENT_TYPE } from "../../core/DG_EVENT_TYPE";
@@ -16,16 +18,46 @@ export function bindCellClickAction<T>(
     action,
     mouseOver,
     mouseOut,
+    area,
   }: {
     action: (cell: CellAddress) => void;
-    mouseOver: (cell: CellAddress) => boolean;
-    mouseOut: (cell: CellAddress) => void;
+    mouseOver?: (cell: CellAddress) => boolean;
+    mouseOut?: (cell: CellAddress) => void;
+    area?: (event: MouseCellEvent | MousePointerCellEvent) => boolean;
   }
 ): EventListenerId[] {
   function isTarget(col: number, row: number): boolean {
     return grid.getLayoutCellId(col, row) === cellId;
   }
-  return [
+  let mouseIsInCell: CellAddress | null = null;
+  let mouseOvered: CellAddress | null = null;
+
+  function processMouseOver(e: MousePointerCellEvent) {
+    mouseOvered = e;
+    if (mouseOver) {
+      if (
+        !mouseOver({
+          col: e.col,
+          row: e.row,
+        })
+      ) {
+        return;
+      }
+    }
+    grid.getElement().style.cursor = "pointer";
+  }
+  function processMouseOut(e: MousePointerCellEvent) {
+    if (mouseOut) {
+      mouseOut({
+        col: e.col,
+        row: e.row,
+      });
+    }
+    mouseOvered = null;
+    grid.getElement().style.cursor = "";
+  }
+
+  const disposables = [
     // click
     grid.listen(DG_EVENT_TYPE.CLICK_CELL, (e) => {
       if (!isTarget(e.col, e.row)) {
@@ -34,6 +66,9 @@ export function bindCellClickAction<T>(
       if (isPromise(grid.getRowRecord(e.row))) {
         return;
       }
+      if (area) {
+        if (!area(e)) return;
+      }
       action({
         col: e.col,
         row: e.row,
@@ -47,31 +82,50 @@ export function bindCellClickAction<T>(
       if (isPromise(grid.getRowRecord(e.row))) {
         return;
       }
-      if (mouseOver) {
-        if (
-          !mouseOver({
-            col: e.col,
-            row: e.row,
-          })
-        ) {
-          return;
-        }
+      mouseIsInCell = e;
+      if (area) {
+        if (!area(e)) return;
       }
-      grid.getElement().style.cursor = "pointer";
+      processMouseOver(e);
     }),
     grid.listen(DG_EVENT_TYPE.MOUSEOUT_CELL, (e) => {
-      if (!isTarget(e.col, e.row)) {
+      if (
+        !mouseIsInCell ||
+        mouseIsInCell.col !== e.col ||
+        mouseIsInCell.row !== e.row
+      ) {
         return;
       }
-      if (mouseOut) {
-        mouseOut({
-          col: e.col,
-          row: e.row,
-        });
+      if (!mouseOvered) {
+        processMouseOut(e);
       }
-      grid.getElement().style.cursor = "";
     }),
   ];
+  if (area) {
+    disposables.push(
+      grid.listen(DG_EVENT_TYPE.MOUSEMOVE_CELL, (e) => {
+        if (
+          !mouseIsInCell ||
+          mouseIsInCell.col !== e.col ||
+          mouseIsInCell.row !== e.row
+        ) {
+          return;
+        }
+        const isInArea = area(e);
+        if (!mouseOvered) {
+          if (!isInArea) return;
+          // mouse over
+          processMouseOver(e);
+        } else {
+          if (isInArea) return;
+          // mouse out
+          processMouseOut(e);
+        }
+      })
+    );
+  }
+
+  return disposables;
 }
 export function bindCellKeyAction<T>(
   grid: ListGridAPI<T>,
diff --git a/packages/cheetah-grid/src/js/columns/style.ts b/packages/cheetah-grid/src/js/columns/style.ts
index 67f30b45a..23be3a234 100644
--- a/packages/cheetah-grid/src/js/columns/style.ts
+++ b/packages/cheetah-grid/src/js/columns/style.ts
@@ -10,6 +10,7 @@ import type {
   NumberStyleOption,
   PercentCompleteBarStyleOption,
   StyleOption,
+  TreeStyleOption,
 } from "../ts-types";
 import { BaseStyle } from "./style/BaseStyle";
 import { ButtonStyle } from "./style/ButtonStyle";
@@ -22,6 +23,7 @@ import { NumberStyle } from "./style/NumberStyle";
 import { PercentCompleteBarStyle } from "./style/PercentCompleteBarStyle";
 import { RadioStyle } from "./style/RadioStyle";
 import { Style } from "./style/Style";
+import { TreeStyle } from "./style/TreeStyle";
 
 const { EVENT_TYPE } = BaseStyle;
 export {
@@ -37,6 +39,7 @@ export {
   PercentCompleteBarStyle,
   MultilineTextStyle,
   MenuStyle,
+  TreeStyle,
 };
 export type {
   BaseStyleOption,
@@ -49,6 +52,7 @@ export type {
   NumberStyleOption,
   PercentCompleteBarStyleOption,
   StyleOption,
+  TreeStyleOption,
 };
 export function of(
   columnStyle: ColumnStyleOption | null | undefined,
diff --git a/packages/cheetah-grid/src/js/columns/style/TreeStyle.ts b/packages/cheetah-grid/src/js/columns/style/TreeStyle.ts
new file mode 100644
index 000000000..c17368d83
--- /dev/null
+++ b/packages/cheetah-grid/src/js/columns/style/TreeStyle.ts
@@ -0,0 +1,62 @@
+import type {
+  ColorDef,
+  TreeBranchIconStyle,
+  TreeBranchIconStyleColumnIcon,
+  TreeLineStyle,
+  TreeStyleOption,
+} from "../../ts-types";
+import { Style } from "./Style";
+
+let defaultStyle: TreeStyle;
+export class TreeStyle extends Style {
+  private _lineStyle?: TreeLineStyle;
+  private _lineColor?: ColorDef;
+  private _lineWidth?: number;
+  private _treeIcon?: TreeBranchIconStyle | TreeBranchIconStyleColumnIcon;
+  static get DEFAULT(): TreeStyle {
+    return defaultStyle ? defaultStyle : (defaultStyle = new TreeStyle());
+  }
+  constructor(style: TreeStyleOption = {}) {
+    super(style);
+    this._lineStyle = style.lineStyle;
+    this._lineColor = style.lineColor;
+    this._lineWidth = style.lineWidth;
+    this._treeIcon = style.treeIcon;
+  }
+  clone(): TreeStyle {
+    return new TreeStyle(this);
+  }
+  get lineStyle(): TreeLineStyle | undefined {
+    return this._lineStyle;
+  }
+  set lineStyle(lineStyle: TreeLineStyle | undefined) {
+    this._lineStyle = lineStyle;
+    this.doChangeStyle();
+  }
+  get lineColor(): ColorDef | undefined {
+    return this._lineColor;
+  }
+  set lineColor(lineColor: ColorDef | undefined) {
+    this._lineColor = lineColor;
+    this.doChangeStyle();
+  }
+  get lineWidth(): number | undefined {
+    return this._lineWidth;
+  }
+  set lineWidth(lineWidth: number | undefined) {
+    this._lineWidth = lineWidth;
+    this.doChangeStyle();
+  }
+  get treeIcon():
+    | TreeBranchIconStyle
+    | TreeBranchIconStyleColumnIcon
+    | undefined {
+    return this._treeIcon;
+  }
+  set treeIcon(
+    treeIcon: TreeBranchIconStyle | TreeBranchIconStyleColumnIcon | undefined
+  ) {
+    this._treeIcon = treeIcon;
+    this.doChangeStyle();
+  }
+}
diff --git a/packages/cheetah-grid/src/js/columns/type.ts b/packages/cheetah-grid/src/js/columns/type.ts
index 0f1a39237..fec51264d 100644
--- a/packages/cheetah-grid/src/js/columns/type.ts
+++ b/packages/cheetah-grid/src/js/columns/type.ts
@@ -7,6 +7,7 @@ import type {
   MenuColumnOption,
   NumberColumnOption,
   PercentCompleteBarColumnOption,
+  TreeColumnOption,
 } from "../ts-types";
 import type { BaseColumn } from "./type/BaseColumn";
 import { BranchGraphColumn } from "./type/BranchGraphColumn";
@@ -20,6 +21,7 @@ import { MultilineTextColumn } from "./type/MultilineTextColumn";
 import { NumberColumn } from "./type/NumberColumn";
 import { PercentCompleteBarColumn } from "./type/PercentCompleteBarColumn";
 import { RadioColumn } from "./type/RadioColumn";
+import { TreeColumn } from "./type/TreeColumn";
 
 const TYPES = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -55,6 +57,7 @@ export {
   BranchGraphColumn,
   MenuColumn,
   MultilineTextColumn,
+  TreeColumn,
 };
 export type {
   BaseColumnOption,
@@ -64,6 +67,7 @@ export type {
   MenuColumnOption,
   NumberColumnOption,
   PercentCompleteBarColumnOption,
+  TreeColumnOption,
 };
 export function of<T>(
   columnType: ColumnTypeOption | BaseColumn<T> | null | undefined
diff --git a/packages/cheetah-grid/src/js/columns/type/BranchGraphColumn.ts b/packages/cheetah-grid/src/js/columns/type/BranchGraphColumn.ts
index f2bfe10c6..98719962d 100644
--- a/packages/cheetah-grid/src/js/columns/type/BranchGraphColumn.ts
+++ b/packages/cheetah-grid/src/js/columns/type/BranchGraphColumn.ts
@@ -1,6 +1,6 @@
 import type {
   BranchGraphColumnOption,
-  BranchGraphCommand,
+  BranchGraphCommandValue,
   CellContext,
   ColorDef,
   FieldDef,
@@ -22,16 +22,16 @@ type Timelines = { timeline: BranchPoint[][]; branches: string[] };
 function getAllColumnData<T>(
   grid: ListGridAPI<T>,
   field: FieldDef<T>,
-  callback: (allData: BranchGraphCommand[]) => void
+  callback: (allData: BranchGraphCommandValue[]) => void
 ): void {
   const { dataSource } = grid;
-  const allData: BranchGraphCommand[] = [];
+  const allData: BranchGraphCommandValue[] = [];
   let promise;
   for (let index = 0; index < dataSource.length; index++) {
     const data = dataSource.getField(
       index,
       field
-    ) as MaybePromiseOrUndef<BranchGraphCommand>;
+    ) as MaybePromiseOrUndef<BranchGraphCommandValue>;
     if (isPromise(data)) {
       const dataIndex = allData.length;
       allData.push(undefined);
@@ -106,18 +106,22 @@ class BranchPoint {
       (l) => l.fromIndex != null && l.toIndex != null
     );
 
-    const froms = lines.filter((l) => l.fromIndex != null && l.toIndex == null);
-    const tos = lines.filter((l) => l.fromIndex == null && l.toIndex != null);
+    const fromList = lines.filter(
+      (l) => l.fromIndex != null && l.toIndex == null
+    );
+    const toList = lines.filter(
+      (l) => l.fromIndex == null && l.toIndex != null
+    );
 
-    froms.forEach((f) => {
-      for (let i = 0; i < tos.length; i++) {
-        const t = tos[i];
+    fromList.forEach((f) => {
+      for (let i = 0; i < toList.length; i++) {
+        const t = toList[i];
         if (t.point) {
           continue;
         }
         if (f.colorIndex === t.colorIndex) {
           f.toIndex = t.toIndex;
-          tos.splice(i, 1);
+          toList.splice(i, 1);
           break;
         }
       }
@@ -125,7 +129,7 @@ class BranchPoint {
       result.push(f);
     });
 
-    return result.concat(tos);
+    return result.concat(toList);
   }
   static merge(a: BranchPoint, b: BranchPoint): BranchPoint {
     if (!a) {
@@ -310,8 +314,8 @@ function commitMerge(
       }),
     ],
   });
-  const froms = [...timeline];
-  const fromTargetLine = froms.pop();
+  const fromList = [...timeline];
+  const fromTargetLine = fromList.pop();
   if (fromTargetLine) {
     fromTargetLine[fromIndex] = BranchPoint.merge(
       fromTargetLine[fromIndex],
@@ -327,7 +331,7 @@ function commitMerge(
     );
   }
 
-  if (joinLine(froms, fromIndex) && fromTargetLine) {
+  if (joinLine(fromList, fromIndex) && fromTargetLine) {
     fromTargetLine[fromIndex].lines = BranchPoint.mergeLines(
       fromTargetLine[fromIndex].lines.concat([
         new BranchLine({
@@ -342,7 +346,7 @@ function commitMerge(
   return result;
 }
 
-function calcCommand(info: Timelines, command: BranchGraphCommand): void {
+function calcCommand(info: Timelines, command: BranchGraphCommandValue): void {
   const { timeline } = info;
   const timelineData: BranchPoint[] = [];
   // const last = timeline.length > 0 ? timeline[timeline.length - 1] : null;
@@ -511,7 +515,7 @@ function renderMerge<T>(
  * BranchGraphColumn
  *
  * Data commands
- * - mastar branch or orphan branch
+ * - master branch or orphan branch
  *
  * ```js
  * {
@@ -576,8 +580,9 @@ export class BranchGraphColumn<T> extends BaseColumn<T> {
   get StyleClass(): typeof BranchGraphStyle {
     return BranchGraphStyle;
   }
-  clearCache(grid: GridInternal<T>): void {
-    delete grid[_];
+  clearCache(grid: ListGridAPI<T>): void {
+    const internal = grid as GridInternal<T>;
+    delete internal[_];
   }
   onDrawCell(
     cellValue: MaybePromise<unknown>,
@@ -598,6 +603,12 @@ export class BranchGraphColumn<T> extends BaseColumn<T> {
   clone(): BranchGraphColumn<T> {
     return new BranchGraphColumn(this);
   }
+  get start(): "top" | "bottom" {
+    return this._start;
+  }
+  get cache(): boolean {
+    return this._cache;
+  }
   drawInternal(
     _value: unknown,
     context: CellContext,
diff --git a/packages/cheetah-grid/src/js/columns/type/IconColumn.ts b/packages/cheetah-grid/src/js/columns/type/IconColumn.ts
index d5bc47b44..f1f71419b 100644
--- a/packages/cheetah-grid/src/js/columns/type/IconColumn.ts
+++ b/packages/cheetah-grid/src/js/columns/type/IconColumn.ts
@@ -25,7 +25,7 @@ function repeatArray(
 }
 
 export class IconColumn<T> extends Column<T> {
-  private _tagName?: string;
+  private _tagName: string;
   private _className?: string;
   private _content?: string;
   private _name?: string;
@@ -44,6 +44,21 @@ export class IconColumn<T> extends Column<T> {
   clone(): IconColumn<T> {
     return new IconColumn(this);
   }
+  get tagName(): string {
+    return this._tagName;
+  }
+  get className(): string | undefined {
+    return this._className;
+  }
+  get content(): string | undefined {
+    return this._content;
+  }
+  get name(): string | undefined {
+    return this._name;
+  }
+  get iconWidth(): number | undefined {
+    return this._iconWidth;
+  }
   drawInternal(
     value: unknown,
     context: CellContext,
diff --git a/packages/cheetah-grid/src/js/columns/type/MultilineTextColumn.ts b/packages/cheetah-grid/src/js/columns/type/MultilineTextColumn.ts
index 765d8e4c6..9964e0ce6 100644
--- a/packages/cheetah-grid/src/js/columns/type/MultilineTextColumn.ts
+++ b/packages/cheetah-grid/src/js/columns/type/MultilineTextColumn.ts
@@ -48,13 +48,13 @@ export class MultilineTextColumn<T> extends BaseColumn<T> {
       return;
     }
     const textValue = value != null ? String(value) : "";
-    const multilines = textValue
+    const lines = textValue
       .replace(/\r?\n/g, "\n")
       .replace(/\r/g, "\n")
       .split("\n");
     helper.testFontLoad(font, textValue, context);
     utils.loadIcons(getIcon(), context, helper, (icons, context) => {
-      helper.multilineText(multilines, context, {
+      helper.multilineText(lines, context, {
         textAlign,
         textBaseline,
         color,
diff --git a/packages/cheetah-grid/src/js/columns/type/NumberColumn.ts b/packages/cheetah-grid/src/js/columns/type/NumberColumn.ts
index 7e2792767..6bca061ac 100644
--- a/packages/cheetah-grid/src/js/columns/type/NumberColumn.ts
+++ b/packages/cheetah-grid/src/js/columns/type/NumberColumn.ts
@@ -1,14 +1,26 @@
 import { Column } from "./Column";
 import type { NumberColumnOption } from "../../ts-types";
 import { NumberStyle } from "../style/NumberStyle";
-let defaultFotmat: Intl.NumberFormat;
+let defaultFormat: Intl.NumberFormat;
 export class NumberColumn<T> extends Column<T> {
   private _format?: Intl.NumberFormat;
+  static get defaultFormat(): Intl.NumberFormat {
+    return defaultFormat || (defaultFormat = new Intl.NumberFormat());
+  }
+  static set defaultFormat(fmt: Intl.NumberFormat) {
+    defaultFormat = fmt;
+  }
+  /**
+   * @deprecated Use defaultFormat instead
+   */
   static get defaultFotmat(): Intl.NumberFormat {
-    return defaultFotmat || (defaultFotmat = new Intl.NumberFormat());
+    return this.defaultFormat;
   }
+  /**
+   * @deprecated Use defaultFormat instead
+   */
   static set defaultFotmat(fmt: Intl.NumberFormat) {
-    defaultFotmat = fmt;
+    this.defaultFormat = fmt;
   }
   constructor(option: NumberColumnOption = {}) {
     super(option);
@@ -34,7 +46,7 @@ export class NumberColumn<T> extends Column<T> {
       const convertedValue = super.convertInternal(value);
       return convertedValue != null ? String(convertedValue) : "";
     }
-    const format = this._format || NumberColumn.defaultFotmat;
+    const format = this._format || NumberColumn.defaultFormat;
     return format.format(num);
   }
 }
diff --git a/packages/cheetah-grid/src/js/columns/type/PercentCompleteBarColumn.ts b/packages/cheetah-grid/src/js/columns/type/PercentCompleteBarColumn.ts
index 5755ffa66..14366c9b5 100644
--- a/packages/cheetah-grid/src/js/columns/type/PercentCompleteBarColumn.ts
+++ b/packages/cheetah-grid/src/js/columns/type/PercentCompleteBarColumn.ts
@@ -27,6 +27,15 @@ export class PercentCompleteBarColumn<T> extends Column<T> {
   clone(): PercentCompleteBarColumn<T> {
     return new PercentCompleteBarColumn(this);
   }
+  get min(): number {
+    return this.min;
+  }
+  get max(): number {
+    return this.max;
+  }
+  get formatter(): (value: unknown) => unknown {
+    return this.formatter;
+  }
   drawInternal(
     value: unknown,
     context: CellContext,
diff --git a/packages/cheetah-grid/src/js/columns/type/TreeColumn.ts b/packages/cheetah-grid/src/js/columns/type/TreeColumn.ts
new file mode 100644
index 000000000..9e0c3dcc0
--- /dev/null
+++ b/packages/cheetah-grid/src/js/columns/type/TreeColumn.ts
@@ -0,0 +1,532 @@
+import * as inlineUtils from "../../element/inlines";
+import * as utils from "../../columns/type/columnUtils";
+import type {
+  ActionAreaPredicate,
+  CellAddress,
+  CellContext,
+  DataSourceAPI,
+  FieldDef,
+  GridCanvasHelperAPI,
+  ListGridAPI,
+  MaybePromise,
+  RectProps,
+  TreeColumnOption,
+  TreeDataValue,
+} from "../../ts-types";
+import type { DrawCellInfo, GridInternal } from "../../ts-types-internal";
+import { Column } from "./Column";
+import { Rect } from "../../internal/Rect";
+import { TreeLineKind } from "../../ts-types-internal";
+import { TreeStyle } from "../style/TreeStyle";
+import { getFontSize } from "../../internal/canvases";
+import { getTreeColumnStateId } from "../../internal/symbolManager";
+import { isPromise } from "../../internal/utils";
+
+type NormalizedTreeData = {
+  /** The caption of the record */
+  caption: string;
+  /** An array of path indicating the hierarchy */
+  path: unknown[];
+  nodeType?: "leaf" | "branch";
+};
+
+type TreeInfo = {
+  getLines: () => TreeLineKind[];
+  caption: string;
+  path: unknown[];
+};
+
+const _ = getTreeColumnStateId();
+
+export class TreeColumn<T> extends Column<T> {
+  private _cache: boolean;
+  constructor(option: TreeColumnOption = {}) {
+    super(option);
+    this._cache = option.cache != null ? option.cache : false;
+  }
+  get StyleClass(): typeof TreeStyle {
+    return TreeStyle;
+  }
+  clearCache(grid: ListGridAPI<T>): void {
+    const internal = grid as GridInternal<T>;
+    if (!internal[_]) return;
+    delete internal[_].cache;
+  }
+  get drawnIconActionArea(): ActionAreaPredicate {
+    return (param) => {
+      const internal = param.grid as GridInternal<T>;
+      const state = internal[_];
+      if (!state?.drawnIcons) return false;
+      const drawnIcons = state.drawnIcons as DrawnIcons;
+      return drawnIcons.area(param);
+    };
+  }
+  onDrawCell(
+    cellValue: MaybePromise<unknown>,
+    info: DrawCellInfo<T>,
+    context: CellContext,
+    grid: GridInternal<T>
+  ): void | Promise<void> {
+    const state = grid[_] || (grid[_] = {});
+    if (this._cache && !state.cache) {
+      const cache = state.cache || (state.cache = new Map());
+      const { col, row } = context;
+      const field = grid.getField(col, row) as FieldDef<T>;
+      if (!cache.has(field)) {
+        cache.set(field, new TreeColumnInfo(grid, field));
+      }
+    }
+    return super.onDrawCell(cellValue, info, context, grid);
+  }
+  clone(): TreeColumn<T> {
+    return new TreeColumn(this);
+  }
+  get cache(): boolean {
+    return this._cache;
+  }
+  getCopyCellValue(value: unknown): unknown {
+    const treeData = getTreeDataFromValue(value as TreeDataValue);
+    return treeData.caption;
+  }
+  drawInternal(
+    value: unknown,
+    context: CellContext,
+    style: TreeStyle,
+    helper: GridCanvasHelperAPI,
+    grid: GridInternal<T>,
+    { drawCellBase, getIcon }: DrawCellInfo<T>
+  ): void {
+    const {
+      textAlign,
+      textBaseline,
+      bgColor,
+      padding,
+      color,
+      font,
+      textOverflow,
+    } = style;
+    if (bgColor) {
+      drawCellBase({
+        bgColor,
+      });
+    }
+
+    const state = grid[_] || (grid[_] = {});
+    if (state.drawnIcons) {
+      const drawnIcons = state.drawnIcons as DrawnIcons;
+      drawnIcons.delete(context);
+    }
+
+    const { col, row } = context;
+    const field = grid.getField(col, row) as FieldDef<T>;
+    const tci: TreeColumnInfo<T> = ((this._cache
+      ? state.cache?.get(field)
+      : null) ?? new TreeColumnInfo(grid, field)) as TreeColumnInfo<T>;
+    const info = tci.getInfo(value as TreeDataValue, row);
+
+    helper.testFontLoad(font, info.caption, context);
+    utils.loadIcons(getIcon(), context, helper, (icons, context) => {
+      const rect = context.getRect();
+
+      const basePadding = helper.toBoxPixelArray(padding || 0, context, font);
+
+      const nestLevel = info.path.length;
+
+      helper.drawWithClip(context, (ctx) => {
+        const fontSize = getFontSize(ctx, font);
+        const indentSize = fontSize.width;
+        const top = rect.top + basePadding[0];
+        const left = rect.left + basePadding[3];
+        const height = rect.height - basePadding[0] - basePadding[2];
+        const lineBaseline = textBaseline ?? (ctx.textBaseline || "middle");
+
+        // Calculate horizontal line position
+        let hLineY: number = top + height / 2;
+        if (
+          lineBaseline === "bottom" ||
+          lineBaseline === "alphabetic" ||
+          lineBaseline === "ideographic"
+        ) {
+          // bottom
+          hLineY = top + height - fontSize.height / 2;
+        } else if (textBaseline === "middle") {
+          hLineY = top + height / 2;
+        } else {
+          // top
+          hLineY = top + fontSize.height / 2;
+        }
+        // Get the tree icon
+        const definedTreeIcon =
+          style.treeIcon ||
+          helper.getStyleProperty(helper.theme.tree.treeIcon, col, row, ctx);
+        const treeIcon =
+          definedTreeIcon === "none"
+            ? null
+            : definedTreeIcon === "chevron_right" ||
+              definedTreeIcon === "expand_more"
+            ? { name: definedTreeIcon, width: fontSize.width }
+            : definedTreeIcon;
+
+        // Calculate icon rect
+        let iconRect: Rect | null = null;
+        if (treeIcon) {
+          ctx.save();
+          try {
+            const treeLineLeft = left + indentSize * (nestLevel - 1);
+            const vLineX = treeLineLeft + indentSize / 2;
+            const size = inlineUtils.iconOf(treeIcon).width({ ctx });
+            iconRect = new Rect(
+              vLineX - size / 2,
+              hLineY - size / 2,
+              size,
+              size
+            );
+          } finally {
+            ctx.restore();
+          }
+
+          // It preserves the position of the drawn icon
+          // because it is used for the `area` option of the `Action` class.
+          const drawnIcons = (state.drawnIcons ||
+            (state.drawnIcons = new DrawnIcons())) as DrawnIcons;
+          drawnIcons.set(context, iconRect);
+        }
+
+        // Get tree line color
+        const lineStyle = style.lineStyle || helper.theme.tree.lineStyle;
+
+        if (lineStyle !== "none") {
+          const lineWidth = style.lineWidth || helper.theme.tree.lineWidth;
+          const lineColor =
+            style.lineColor ||
+            helper.getColor(helper.theme.tree.lineColor, col, row, ctx);
+
+          ctx.save();
+          try {
+            ctx.strokeStyle = lineColor;
+            ctx.lineWidth = lineWidth;
+            ctx.lineCap = "round";
+
+            if (iconRect) {
+              // Clip icon area
+              ctx.beginPath();
+              ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+              // Draw a square in the opposite direction to hollow out the inside.
+              ctx.rect(
+                iconRect.right,
+                iconRect.top,
+                -iconRect.width,
+                iconRect.height
+              );
+
+              // // For debug
+              // ctx.fillStyle = "#0002";
+              // ctx.fill();
+
+              ctx.clip();
+            }
+
+            // Draw tree lines
+            info.getLines().forEach((line: TreeLineKind, index: number) => {
+              const treeLineLeft = left + indentSize * index;
+              const vLineX = treeLineLeft + indentSize / 2;
+              const treeLineRight = treeLineLeft + indentSize;
+              if (line !== TreeLineKind.none) {
+                ctx.beginPath();
+                if (line === TreeLineKind.vertical) {
+                  ctx.moveTo(vLineX, rect.top);
+                  ctx.lineTo(vLineX, rect.bottom);
+                } else if (line === TreeLineKind.last) {
+                  ctx.moveTo(vLineX, rect.top);
+                  ctx.lineTo(vLineX, hLineY);
+                  ctx.lineTo(treeLineRight, hLineY);
+                } else if (line === TreeLineKind.start) {
+                  ctx.moveTo(treeLineRight, hLineY);
+                  ctx.lineTo(vLineX, hLineY);
+                  ctx.lineTo(vLineX, rect.bottom);
+                } else if (line === TreeLineKind.verticalBranch) {
+                  ctx.moveTo(vLineX, rect.top);
+                  ctx.lineTo(vLineX, rect.bottom);
+                  ctx.moveTo(vLineX, hLineY);
+                  ctx.lineTo(treeLineRight, hLineY);
+                } else if (line === TreeLineKind.horizontal) {
+                  ctx.moveTo(treeLineLeft, hLineY);
+                  ctx.lineTo(treeLineRight, hLineY);
+                } else if (line === TreeLineKind.horizontalBranch) {
+                  ctx.moveTo(treeLineLeft, hLineY);
+                  ctx.lineTo(treeLineRight, hLineY);
+                  ctx.moveTo(vLineX, hLineY);
+                  ctx.lineTo(vLineX, rect.bottom);
+                } else if (line === TreeLineKind.lone) {
+                  ctx.moveTo(vLineX, hLineY);
+                  ctx.lineTo(treeLineRight, hLineY);
+                }
+                ctx.stroke();
+              }
+            });
+          } finally {
+            ctx.restore();
+          }
+        }
+
+        if (treeIcon) {
+          // Draw tree icon
+          const iconLeftOffset = indentSize * (nestLevel - 1);
+          const iconWidth = indentSize;
+          const iconPadding = basePadding.slice(0);
+          iconPadding[3] += iconLeftOffset;
+          iconPadding[1] = rect.width - iconWidth - iconPadding[3]; // padding right
+
+          helper.text("", context, {
+            textAlign: "center",
+            textBaseline,
+            color,
+            font,
+            icons: [treeIcon],
+            padding: iconPadding,
+          });
+        }
+
+        const textPadding = basePadding.slice(0);
+        textPadding[3] += nestLevel * indentSize; // Tree indent padding
+
+        helper.text(info.caption, context, {
+          textAlign,
+          textBaseline,
+          color,
+          font,
+          padding: textPadding,
+          textOverflow,
+          icons,
+        });
+      });
+    });
+  }
+}
+
+/**
+ * If the cell is a TreeColumn, gets the tree node information from the given cell.
+ */
+export function getTreeNodeInfoAt<T>({
+  grid,
+  col,
+  row,
+}: CellAddress & {
+  grid: ListGridAPI<T>;
+}): { hasChildren: boolean; nodeType: "leaf" | "branch" } {
+  const field = grid.getField(col, row);
+  if (!field) return { hasChildren: false, nodeType: "leaf" };
+  const { dataSource } = grid;
+  const currIndex = grid.getRecordIndexByRow(row);
+  const value = dataSource.getField(currIndex, field);
+  const treeData = getTreeDataFromValue(value);
+  const hasChildren = hasChildrenByRecord(
+    treeData,
+    dataSource,
+    field,
+    currIndex
+  );
+  return {
+    nodeType: hasChildren ? "branch" : treeData.nodeType || "leaf",
+    hasChildren,
+  };
+}
+
+function hasChildrenByRecord<T>(
+  treeData: NormalizedTreeData,
+  dataSource: DataSourceAPI<T>,
+  field: FieldDef<T>,
+  recordIndex: number
+): boolean {
+  const next = dataSource.getField(recordIndex + 1, field);
+  if (!next || isPromise(next)) return false;
+  const nextParentPath = getParentPath(next);
+  return (
+    treeData.path.length === nextParentPath.length &&
+    nextParentPath.every((p, i) => p === treeData.path[i])
+  );
+}
+
+class TreeColumnInfo<T> {
+  private _cache: Record<
+    number,
+    {
+      hasNextSiblings: (boolean | undefined)[];
+    }
+  > = {};
+  private _grid: ListGridAPI<T>;
+  private _field: FieldDef<T>;
+  constructor(grid: ListGridAPI<T>, field: FieldDef<T>) {
+    this._grid = grid;
+    this._field = field;
+  }
+  getInfo(value: TreeDataValue, row: number): TreeInfo {
+    const { _field: field, _grid: grid, _cache: cache } = this;
+    const currIndex = grid.getRecordIndexByRow(row);
+    const { dataSource } = grid;
+    const treeData = getTreeDataFromValue(value);
+
+    const hasChildren = hasChildrenByRecord(
+      treeData,
+      dataSource,
+      field,
+      currIndex
+    );
+
+    return {
+      caption: treeData.caption,
+      path: treeData.path,
+      getLines() {
+        const currPath: unknown[] = [];
+        const parentPath = treeData.path.slice(0, -1);
+        const parentLines: TreeLineKind[] = parentPath.map((p, index) => {
+          currPath.push(p);
+          const isLast = index === parentPath.length - 1;
+          if (hasNextSiblingWithCache(currPath)) {
+            return isLast ? TreeLineKind.verticalBranch : TreeLineKind.vertical;
+          } else {
+            return isLast ? TreeLineKind.last : TreeLineKind.none;
+          }
+        });
+
+        let selfLine: TreeLineKind;
+        if (hasChildren) {
+          selfLine =
+            parentPath.length > 0
+              ? TreeLineKind.horizontalBranch
+              : TreeLineKind.start;
+        } else {
+          selfLine =
+            parentPath.length > 0 ? TreeLineKind.horizontal : TreeLineKind.lone;
+        }
+        return parentLines.concat(selfLine);
+      },
+    };
+
+    function hasNextSiblingWithCache(parentPath: unknown[]): boolean {
+      const has = hasNextSiblingFromCache(currIndex, parentPath.length);
+      if (has != null) {
+        return has;
+      }
+      const result = hasNextSibling(parentPath);
+      for (let index = currIndex; index < result.end; index++) {
+        setNextSiblingToCache(index, parentPath.length, result.has);
+      }
+      return result.has;
+    }
+
+    function hasNextSiblingFromCache(
+      index: number,
+      level: number
+    ): boolean | undefined {
+      const { hasNextSiblings } =
+        cache[index] || (cache[index] = { hasNextSiblings: [] });
+      return hasNextSiblings[level];
+    }
+
+    function setNextSiblingToCache(
+      index: number,
+      level: number,
+      value: boolean
+    ): void {
+      const { hasNextSiblings } =
+        cache[index] || (cache[index] = { hasNextSiblings: [] });
+      hasNextSiblings[level] = value;
+    }
+
+    function hasNextSibling(parentPath: unknown[]): {
+      end: number;
+      has: boolean;
+    } {
+      const startIndex = currIndex + 1;
+      for (let index = startIndex; index < dataSource.length; index++) {
+        const data = dataSource.getField(index, field);
+        if (isPromise(data)) return { end: index, has: false };
+        const nextPath = getParentPath(data);
+        if (!nextPath.length) return { end: index, has: false };
+        if (parentPath.every((p, i) => p === nextPath[i])) {
+          // All matches!
+          if (parentPath.length < nextPath.length) {
+            // It's a child.
+            // e.g.
+            // ├ target
+            // │ ├ next
+            const has = hasNextSiblingFromCache(index, parentPath.length);
+            if (has != null) return { end: index, has };
+            continue;
+          }
+          // There is next sibling.
+          // e.g.
+          // ├ target
+          // │ ├ x
+          // │ └ x
+          // └ next
+          return { end: index, has: true };
+        }
+        // There is no next sibling.
+        // e.g.
+        // │ └ target
+        // │   ├ x
+        // │   └ x
+        // └ next
+        return { end: index, has: false };
+      }
+
+      // There is no next sibling.
+      return { end: dataSource.length, has: false };
+    }
+  }
+}
+
+function getTreeDataFromValue(value: TreeDataValue): NormalizedTreeData {
+  if (value != null) {
+    if (Array.isArray(value)) {
+      return getTreeDataFromValue({ path: value });
+    } else {
+      if (Array.isArray(value.path))
+        return {
+          caption: String(
+            value.caption ?? value.path[value.path.length - 1] ?? ""
+          ),
+          path: value.path,
+          nodeType: value.nodeType as never,
+        };
+      if (typeof value.path === "function")
+        return getTreeDataFromValue({ ...value, path: value.path() });
+    }
+  }
+
+  return { caption: String(value ?? ""), path: [value] };
+}
+
+function getParentPath(value: TreeDataValue): unknown[] {
+  return getTreeDataFromValue(value).path.slice(0, -1);
+}
+
+class DrawnIcons {
+  private _drawnIcons = new Map<string, RectProps>();
+  set(cell: CellAddress, clipRect: RectProps) {
+    this._drawnIcons.set(`${cell.col}:${cell.row}`, clipRect);
+  }
+  delete(cell: CellAddress) {
+    this._drawnIcons.delete(`${cell.col}:${cell.row}`);
+  }
+  area({
+    col,
+    row,
+    pointInDrawingCanvas: point,
+  }: Parameters<ActionAreaPredicate>[0]): boolean {
+    const key = `${col}:${row}`;
+    const rect = this._drawnIcons.get(key);
+    if (!rect) {
+      return false;
+    }
+    return (
+      rect.left <= point.x &&
+      point.x <= rect.right &&
+      rect.top <= point.y &&
+      point.y <= rect.bottom
+    );
+  }
+}
diff --git a/packages/cheetah-grid/src/js/core/DrawGrid.ts b/packages/cheetah-grid/src/js/core/DrawGrid.ts
index dd5f18de8..5f283aac6 100644
--- a/packages/cheetah-grid/src/js/core/DrawGrid.ts
+++ b/packages/cheetah-grid/src/js/core/DrawGrid.ts
@@ -15,6 +15,7 @@ import type {
   EventListenerId,
   KeyboardEventListener,
   KeydownEvent,
+  MousePointerCellEvent,
   PasteCellEvent,
   PasteRangeBoxValues,
 } from "../ts-types";
@@ -1461,42 +1462,56 @@ function _bindEvents(this: DrawGrid): void {
   let isMouseover = false;
   let mouseEnterCell: CellAddress | null = null;
   let mouseOverCell: CellAddress | null = null;
-  function onMouseenterCell(cell: CellAddress, related?: CellAddress): void {
+  type MousePointerCellEventInfoProps = Pick<
+    MousePointerCellEvent,
+    "related" | "event"
+  >;
+  function onMouseenterCell(
+    cell: CellAddress,
+    props: MousePointerCellEventInfoProps
+  ): void {
     grid.fireListeners(DG_EVENT_TYPE.MOUSEENTER_CELL, {
+      ...props,
       col: cell.col,
       row: cell.row,
-      related,
     });
     mouseEnterCell = cell;
   }
-  function onMouseleaveCell(related?: CellAddress): CellAddress | undefined {
+  function onMouseleaveCell(
+    props: MousePointerCellEventInfoProps
+  ): CellAddress | undefined {
     const beforeMouseCell = mouseEnterCell;
     mouseEnterCell = null;
     if (beforeMouseCell) {
       grid.fireListeners(DG_EVENT_TYPE.MOUSELEAVE_CELL, {
+        ...props,
         col: beforeMouseCell.col,
         row: beforeMouseCell.row,
-        related,
       });
     }
     return beforeMouseCell || undefined;
   }
-  function onMouseoverCell(cell: CellAddress, related?: CellAddress): void {
+  function onMouseoverCell(
+    cell: CellAddress,
+    props: MousePointerCellEventInfoProps
+  ): void {
     grid.fireListeners(DG_EVENT_TYPE.MOUSEOVER_CELL, {
+      ...props,
       col: cell.col,
       row: cell.row,
-      related,
     });
     mouseOverCell = cell;
   }
-  function onMouseoutCell(related?: CellAddress): CellAddress | undefined {
+  function onMouseoutCell(
+    props: MousePointerCellEventInfoProps
+  ): CellAddress | undefined {
     const beforeMouseCell = mouseOverCell;
     mouseOverCell = null;
     if (beforeMouseCell) {
       grid.fireListeners(DG_EVENT_TYPE.MOUSEOUT_CELL, {
+        ...props,
         col: beforeMouseCell.col,
         row: beforeMouseCell.row,
-        related,
       });
     }
     return beforeMouseCell || undefined;
@@ -1505,13 +1520,13 @@ function _bindEvents(this: DrawGrid): void {
   handler.on(scrollElement, "mouseover", (_e: MouseEvent): void => {
     isMouseover = true;
   });
-  handler.on(scrollElement, "mouseout", (_e: MouseEvent): void => {
+  handler.on(scrollElement, "mouseout", (event: MouseEvent): void => {
     isMouseover = false;
-    onMouseoutCell();
+    onMouseoutCell({ event });
   });
 
-  handler.on(element, "mouseleave", (_e: MouseEvent): void => {
-    onMouseleaveCell();
+  handler.on(element, "mouseleave", (event: MouseEvent): void => {
+    onMouseleaveCell({ event });
   });
 
   handler.on(element, "mousemove", (e) => {
@@ -1534,32 +1549,45 @@ function _bindEvents(this: DrawGrid): void {
             col: eventArgs.col,
             row: eventArgs.row,
           };
-          const outCell = onMouseoutCell(enterCell);
-          const leaveCell = onMouseleaveCell(enterCell);
-          onMouseenterCell(enterCell, leaveCell);
+          const outCell = onMouseoutCell({ related: enterCell, event: e });
+          const leaveCell = onMouseleaveCell({ related: enterCell, event: e });
+          onMouseenterCell(enterCell, { related: leaveCell, event: e });
           if (isMouseover) {
-            onMouseoverCell(enterCell, outCell);
+            onMouseoverCell(enterCell, { related: outCell, event: e });
           }
         } else if (isMouseover && !mouseOverCell) {
-          onMouseoverCell({
-            col: eventArgs.col,
-            row: eventArgs.row,
-          });
+          onMouseoverCell(
+            {
+              col: eventArgs.col,
+              row: eventArgs.row,
+            },
+            {
+              event: e,
+            }
+          );
         }
       } else {
         const enterCell = {
           col: eventArgs.col,
           row: eventArgs.row,
         };
-        onMouseenterCell(enterCell);
+        onMouseenterCell(enterCell, {
+          event: e,
+        });
         if (isMouseover) {
-          onMouseoverCell(enterCell);
+          onMouseoverCell(enterCell, {
+            event: e,
+          });
         }
         grid.fireListeners(DG_EVENT_TYPE.MOUSEMOVE_CELL, eventArgs);
       }
     } else {
-      onMouseoutCell();
-      onMouseleaveCell();
+      onMouseoutCell({
+        event: e,
+      });
+      onMouseleaveCell({
+        event: e,
+      });
     }
     if (grid[_].columnResizer.moving(e) || grid[_].cellSelector.moving(e)) {
       return;
diff --git a/packages/cheetah-grid/src/js/header/type/SortHeader.ts b/packages/cheetah-grid/src/js/header/type/SortHeader.ts
index 79fbd2e8f..02590843e 100644
--- a/packages/cheetah-grid/src/js/header/type/SortHeader.ts
+++ b/packages/cheetah-grid/src/js/header/type/SortHeader.ts
@@ -72,11 +72,11 @@ export class SortHeader<T> extends BaseHeader<T> {
       };
 
       if (multiline) {
-        const multilines = textValue
+        const lines = textValue
           .replace(/\r?\n/g, "\n")
           .replace(/\r/g, "\n")
           .split("\n");
-        helper.multilineText(multilines, context, {
+        helper.multilineText(lines, context, {
           textAlign,
           textBaseline,
           color,
diff --git a/packages/cheetah-grid/src/js/icons.ts b/packages/cheetah-grid/src/js/icons.ts
index fe205f468..8e471cc4e 100644
--- a/packages/cheetah-grid/src/js/icons.ts
+++ b/packages/cheetah-grid/src/js/icons.ts
@@ -60,6 +60,70 @@ const builtins = {
       height: 24,
     };
   },
+  get keyboard_arrow_down(): IconDefine {
+    // return require("cheetah-grid-icon-svg-loader!material-design-icons/hardware/svg/production/ic_keyboard_arrow_down_48px.svg");
+    return {
+      d: "M14.83 16.42L24 25.59l9.17-9.17L36 19.25l-12 12-12-12z",
+      width: 48,
+      height: 48,
+    };
+  },
+  get keyboard_arrow_left(): IconDefine {
+    // return require("cheetah-grid-icon-svg-loader!material-design-icons/hardware/svg/production/ic_keyboard_arrow_left_48px.svg");
+    return {
+      d: "M30.83 32.67l-9.17-9.17 9.17-9.17L28 11.5l-12 12 12 12z",
+      width: 48,
+      height: 48,
+    };
+  },
+  get keyboard_arrow_right(): IconDefine {
+    // return require("cheetah-grid-icon-svg-loader!material-design-icons/hardware/svg/production/ic_keyboard_arrow_right_48px.svg");
+    return {
+      d: "M17.17 32.92l9.17-9.17-9.17-9.17L20 11.75l12 12-12 12z",
+      width: 48,
+      height: 48,
+    };
+  },
+  get keyboard_arrow_up(): IconDefine {
+    // return require("cheetah-grid-icon-svg-loader!material-design-icons/hardware/svg/production/ic_keyboard_arrow_up_48px.svg");
+    return {
+      d: "M14.83 30.83L24 21.66l9.17 9.17L36 28 24 16 12 28z",
+      width: 48,
+      height: 48,
+    };
+  },
+  get chevron_left(): IconDefine {
+    // return require("cheetah-grid-icon-svg-loader!material-design-icons/navigation/svg/production/ic_chevron_left_48px.svg");
+    return {
+      d: "M14.83 30.83L24 21.66l9.17 9.17L36 28 24 16 12 28z",
+      width: 48,
+      height: 48,
+    };
+  },
+  get chevron_right(): IconDefine {
+    // return require("cheetah-grid-icon-svg-loader!material-design-icons/navigation/svg/production/ic_chevron_right_48px.svg");
+    return {
+      d: "M20 12l-2.83 2.83L26.34 24l-9.17 9.17L20 36l12-12z",
+      width: 48,
+      height: 48,
+    };
+  },
+  get expand_less(): IconDefine {
+    // return require("cheetah-grid-icon-svg-loader!material-design-icons/navigation/svg/production/ic_expand_less_48px.svg");
+    return {
+      d: "M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z",
+      width: 48,
+      height: 48,
+    };
+  },
+  get expand_more(): IconDefine {
+    // return require("cheetah-grid-icon-svg-loader!material-design-icons/navigation/svg/production/ic_expand_more_48px.svg");
+    return {
+      d: "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z",
+      width: 48,
+      height: 48,
+    };
+  },
 };
 
 export function get(): { [key: string]: IconDefine } {
diff --git a/packages/cheetah-grid/src/js/internal/symbolManager.ts b/packages/cheetah-grid/src/js/internal/symbolManager.ts
index 2e1e2f37c..54f5a3e0f 100644
--- a/packages/cheetah-grid/src/js/internal/symbolManager.ts
+++ b/packages/cheetah-grid/src/js/internal/symbolManager.ts
@@ -54,6 +54,9 @@ export function getColumnFadeinStateId(): "$$$$col.fadein_stateID symbol$$$$" /*
 export function getBranchGraphColumnStateId(): "$$$$branch_graph_col.stateID symbol$$$$" /* It is treated as a string so that it can be handled easily with typescript. */ {
   return get("branch_graph_col.stateID") as any;
 }
+export function getTreeColumnStateId(): "$$$$tree_col.stateID symbol$$$$" /* It is treated as a string so that it can be handled easily with typescript. */ {
+  return get("tree_col.stateID") as any;
+}
 export function getSmallDialogInputEditorStateId(): "$$$$small_dialog_input_editor.stateID symbol$$$$" /* It is treated as a string so that it can be handled easily with typescript. */ {
   return get("small_dialog_input_editor.stateID") as any;
 }
diff --git a/packages/cheetah-grid/src/js/themes/theme.ts b/packages/cheetah-grid/src/js/themes/theme.ts
index a6594f1bf..a662f406a 100644
--- a/packages/cheetah-grid/src/js/themes/theme.ts
+++ b/packages/cheetah-grid/src/js/themes/theme.ts
@@ -5,15 +5,16 @@ import type {
   RequiredThemeDefine,
   StylePropertyFunctionArg,
   ThemeDefine,
+  TreeBranchIconStyleDefine,
+  TreeLineStyle,
 } from "../ts-types";
 import { getChainSafe } from "../internal/utils";
 import { get as getSymbol } from "../internal/symbolManager";
+import { getTreeNodeInfoAt } from "../columns/type/TreeColumn";
 //private symbol
 const _ = getSymbol();
 
-function getProp<
-  T extends ColorPropertyDefine | ColorsPropertyDefine | string | number
->(
+function getProp<T>(
   obj: PartialThemeDefine,
   superObj: ThemeDefine,
   names: string[],
@@ -52,6 +53,7 @@ export class Theme implements RequiredThemeDefine {
   private _checkbox: RequiredThemeDefine["checkbox"] | null = null;
   private _radioButton: RequiredThemeDefine["radioButton"] | null = null;
   private _button: RequiredThemeDefine["button"] | null = null;
+  private _tree: RequiredThemeDefine["tree"] | null = null;
   private _header: RequiredThemeDefine["header"] | null = null;
   private _messages: RequiredThemeDefine["messages"] | null = null;
   private _indicators: RequiredThemeDefine["indicators"] | null = null;
@@ -233,6 +235,63 @@ export class Theme implements RequiredThemeDefine {
       return getProp(obj, superTheme, ["button", prop], defNames);
     }
   }
+  get tree(): RequiredThemeDefine["tree"] {
+    const { obj, superTheme } = this[_];
+    return (
+      this._tree ||
+      (this._tree = {
+        get lineStyle(): TreeLineStyle {
+          return getTreeProp("lineStyle", undefined, undefined, "solid");
+        },
+        get lineColor(): ColorPropertyDefine {
+          return getTreeProp(
+            "lineColor",
+            ["borderColor"],
+            colorsToColor,
+            "#0000"
+          );
+        },
+        get lineWidth(): number {
+          return getTreeProp("lineWidth", undefined, undefined, 1);
+        },
+        get treeIcon(): TreeBranchIconStyleDefine {
+          return getTreeProp<TreeBranchIconStyleDefine>(
+            "treeIcon",
+            undefined,
+            undefined,
+            (args) => {
+              const { hasChildren, nodeType } = getTreeNodeInfoAt(args);
+              if (hasChildren) {
+                return "expand_more";
+              }
+              return nodeType === "branch" ? "chevron_right" : "none";
+            }
+          );
+        },
+      })
+    );
+    function getTreeProp<
+      T extends
+        | ColorPropertyDefine
+        | number
+        | TreeLineStyle
+        | TreeBranchIconStyleDefine
+    >(
+      prop: string,
+      defNames: string[] | undefined,
+      convertForSuper?: (value: never) => T | undefined,
+      defaultValue?: T
+    ): T {
+      return getProp(
+        obj,
+        superTheme,
+        ["tree", prop],
+        defNames,
+        convertForSuper,
+        defaultValue
+      );
+    }
+  }
   get header(): RequiredThemeDefine["header"] {
     const { obj, superTheme } = this[_];
     return (
diff --git a/packages/cheetah-grid/src/js/ts-types-internal/grid-engine.ts b/packages/cheetah-grid/src/js/ts-types-internal/grid-engine.ts
index 71544e77d..06906f778 100644
--- a/packages/cheetah-grid/src/js/ts-types-internal/grid-engine.ts
+++ b/packages/cheetah-grid/src/js/ts-types-internal/grid-engine.ts
@@ -97,12 +97,35 @@ export type CheckHeaderState = {
   mouseActiveCell?: CellAddress;
 };
 
+export const enum TreeLineKind {
+  none,
+  // │
+  vertical,
+  // └
+  last,
+  // ┌
+  start,
+  // ├
+  verticalBranch,
+  // ─
+  horizontal,
+  // ┬
+  horizontalBranch,
+  // half ─
+  lone,
+}
+export type TreeColumnState<T> = {
+  drawnIcons?: unknown;
+  cache?: Map<FieldDef<T>, unknown>;
+};
+
 export interface GridInternal<T> extends ListGridAPI<T> {
   "$$$$col.fadein_stateID symbol$$$$"?: ColumnFadeinState;
   "$$$$btncol.stateID symbol$$$$"?: ButtonColumnState;
   "$$$$chkcol.stateID symbol$$$$"?: CheckColumnState;
   "$$$$rdcol.stateID symbol$$$$"?: RadioColumnState;
   "$$$$branch_graph_col.stateID symbol$$$$"?: BranchGraphColumnState<T>;
+  "$$$$tree_col.stateID symbol$$$$"?: TreeColumnState<T>;
   "$$$$inline_menu_editor.stateID symbol$$$$"?: InputEditorState;
   "$$$$inline_input_editor.stateID symbol$$$$"?: InputEditorState;
   "$$$$small_dialog_input_editor.stateID symbol$$$$"?: InputEditorState;
diff --git a/packages/cheetah-grid/src/js/ts-types/column/action.ts b/packages/cheetah-grid/src/js/ts-types/column/action.ts
index 7aa22f5bc..a43a0e8c2 100644
--- a/packages/cheetah-grid/src/js/ts-types/column/action.ts
+++ b/packages/cheetah-grid/src/js/ts-types/column/action.ts
@@ -13,18 +13,35 @@ export interface BaseActionOption {
 export type ActionListener = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   record: any,
-  cell: CellAddress & {
+  meta: CellAddress & {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     grid: ListGridAPI<any>;
   }
 ) => void;
-export interface ActionOption extends BaseActionOption {
+export type ActionAreaPredicate = (
+  meta: CellAddress & {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    grid: ListGridAPI<any>;
+    /** The mouse position relative to the cell position. */
+    pointInCell: { x: number; y: number };
+    /** The mouse position relative to the drawing canvas. */
+    pointInDrawingCanvas: { x: number; y: number };
+  }
+) => boolean;
+export interface AbstractActionOption extends BaseActionOption {
   action?: ActionListener;
 }
+export interface ActionOption extends AbstractActionOption {
+  action?: ActionListener;
+  /** A function that checks whether the area can be operated with mouse actions. */
+  area?: ActionAreaPredicate;
+}
 export interface EditorOption extends BaseActionOption {
   readOnly?: RecordBoolean;
 }
-export type ButtonActionOption = ActionOption;
+export interface ButtonActionOption extends AbstractActionOption {
+  action?: ActionListener;
+}
 
 export interface InlineMenuEditorOption<T> extends EditorOption {
   classList?: string | string[];
diff --git a/packages/cheetah-grid/src/js/ts-types/column/style.ts b/packages/cheetah-grid/src/js/ts-types/column/style.ts
index f5716d6c9..1293fc42a 100644
--- a/packages/cheetah-grid/src/js/ts-types/column/style.ts
+++ b/packages/cheetah-grid/src/js/ts-types/column/style.ts
@@ -1,8 +1,11 @@
 import type {
+  ColumnIconOption,
   IndicatorDefine,
   IndicatorObject,
   LineClamp,
   TextOverflow,
+  TreeBranchIconStyle,
+  TreeLineStyle,
   Visibility,
 } from "../define";
 import type { ColorDef } from "../base";
@@ -106,6 +109,15 @@ export interface PercentCompleteBarStyleOption extends StyleOption {
   barBgColor?: ColorDef;
   barHeight?: number;
 }
+export interface TreeStyleOption extends StyleOption {
+  lineStyle?: TreeLineStyle;
+  lineColor?: ColorDef;
+  lineWidth?: number;
+  treeIcon?:
+    | TreeBranchIconStyle
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    | ColumnIconOption<any>;
+}
 
 export interface SortHeaderStyleOption extends MultilineTextHeaderStyleOption {
   sortArrowColor?: ColorDef;
diff --git a/packages/cheetah-grid/src/js/ts-types/column/type.ts b/packages/cheetah-grid/src/js/ts-types/column/type.ts
index 101282690..907367744 100644
--- a/packages/cheetah-grid/src/js/ts-types/column/type.ts
+++ b/packages/cheetah-grid/src/js/ts-types/column/type.ts
@@ -31,37 +31,63 @@ export interface BranchGraphColumnOption extends BaseColumnOption {
   cache?: boolean;
 }
 
-export type SimpleBranchGraphCommand =
-  | {
-      command: "branch";
-      branch:
-        | string
-        | {
-            from: string;
-            to: string;
-          };
-    }
-  | {
-      command: "commit";
-      branch: string;
-    }
-  | {
-      command: "merge";
-      branch: {
+/** Branches from the branch specified by `branch.from` to the branch specified by `branch.to`. */
+export type BranchGraphCommandBranch = {
+  command: "branch";
+  branch:
+    | string
+    | {
         from: string;
         to: string;
       };
-    }
-  | {
-      command: "tag";
-      branch: string;
-      tag: string;
-    };
+};
+/** Commit the branch specified by `branch`. */
+export type BranchGraphCommandCommit = {
+  command: "commit";
+  branch: string;
+};
+/** Merge the branch specified by `branch.from` into the branch specified by `branch.to`. */
+export type BranchGraphCommandMerge = {
+  command: "merge";
+  branch: {
+    from: string;
+    to: string;
+  };
+};
+/** Creates a tag specified by `tag` from the branch specified by `branch`. */
+export type BranchGraphCommandTag = {
+  command: "tag";
+  branch: string;
+  tag: string;
+};
+/** The value to supply to the BranchGraphColumn. */
 export type BranchGraphCommand =
-  | SimpleBranchGraphCommand
+  | BranchGraphCommandBranch
+  | BranchGraphCommandCommit
+  | BranchGraphCommandMerge
+  | BranchGraphCommandTag;
+
+export type BranchGraphCommandValue =
+  | BranchGraphCommand
   | undefined
   | null
-  | SimpleBranchGraphCommand[];
+  | BranchGraphCommand[];
+
+/** The value to supply to the TreeColumn. */
+export type TreeData = {
+  /** The caption of the record */
+  caption?: string;
+  /** An array of path indicating the hierarchy */
+  path: unknown[] | (() => unknown[]);
+
+  nodeType?: "leaf" | "branch";
+};
+
+export type TreeDataValue = TreeData | unknown[] | undefined | null;
+
+export interface TreeColumnOption extends BaseColumnOption {
+  cache?: boolean;
+}
 
 export type ColumnTypeOption =
   | "DEFAULT"
diff --git a/packages/cheetah-grid/src/js/ts-types/define.ts b/packages/cheetah-grid/src/js/ts-types/define.ts
index 138d16c15..61a841b6d 100644
--- a/packages/cheetah-grid/src/js/ts-types/define.ts
+++ b/packages/cheetah-grid/src/js/ts-types/define.ts
@@ -5,7 +5,7 @@ import type { ListGridAPI } from "./grid-engine";
 // ****** Column Icon Options *******
 export interface FontIcon<T> {
   font?: string;
-  content?: (T extends object ? keyof T : never) | string;
+  content?: T extends object ? keyof T & string : string;
   className?: string;
   tagName?: string;
   isLiga?: boolean;
@@ -17,26 +17,26 @@ export interface FontIcon<T> {
 }
 
 export interface ImageIcon<T> {
-  src: (T extends object ? keyof T : never) | string;
+  src: T extends object ? keyof T & string : string;
   width?: number;
   height?: number;
 }
 
 export interface PathIcon<T> {
-  path: (T extends object ? keyof T : never) | string;
+  path: T extends object ? keyof T & string : string;
   width: number;
   height: number;
   color?: string;
 }
 
 export interface SvgIcon<T> {
-  svg: (T extends object ? keyof T : never) | string;
+  svg: T extends object ? keyof T & string : string;
   width?: number;
   height?: number;
 }
 
 export interface NamedIcon<T> {
-  name: (T extends object ? keyof T : never) | string;
+  name: T extends object ? keyof T & string : string;
   width?: number;
   height?: number;
 }
@@ -119,3 +119,15 @@ export type IndicatorObject = {
   size?: number | string;
 };
 export type IndicatorDefine = IndicatorObject | IndicatorStyle;
+
+// ****** TreeStyle Options *******
+
+export type TreeLineStyle = "none" | "solid";
+export type TreeBranchIconStyle = "chevron_right" | "expand_more" | "none";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TreeBranchIconStyleColumnIcon = ColumnIconOption<any>;
+export type TreeBranchIconStyleDefine =
+  | TreeBranchIconStyle
+  | TreeBranchIconStyleColumnIcon
+  | ((args: StylePropertyFunctionArg) => TreeBranchIconStyle)
+  | ((args: StylePropertyFunctionArg) => TreeBranchIconStyleColumnIcon);
diff --git a/packages/cheetah-grid/src/js/ts-types/events.ts b/packages/cheetah-grid/src/js/ts-types/events.ts
index e215d473a..5b9c71cf1 100644
--- a/packages/cheetah-grid/src/js/ts-types/events.ts
+++ b/packages/cheetah-grid/src/js/ts-types/events.ts
@@ -62,7 +62,10 @@ export type ModifyStatusEditableinputCellEvent = CellAddress & {
   input: HTMLInputElement;
 };
 
-export type MousePointerCellEvent = CellAddress & { related?: CellAddress };
+export type MousePointerCellEvent = CellAddress & {
+  related?: CellAddress;
+  event: Pick<MouseEvent, "clientX" | "clientY" | "pageX" | "pageY">;
+};
 
 export interface DrawGridEventHandlersEventMap {
   selected_cell: [SelectedCellEvent, boolean];
diff --git a/packages/cheetah-grid/src/js/ts-types/grid-engine.ts b/packages/cheetah-grid/src/js/ts-types/grid-engine.ts
index af0ddc5e2..c257d6474 100644
--- a/packages/cheetah-grid/src/js/ts-types/grid-engine.ts
+++ b/packages/cheetah-grid/src/js/ts-types/grid-engine.ts
@@ -19,6 +19,7 @@ import type {
   ColorsPropertyDefine,
   FontPropertyDefine,
   LineClamp,
+  StylePropertyFunctionArg,
   TextOverflow,
 } from "./define";
 import type { ColumnDefine } from "../ListGrid";
@@ -312,7 +313,7 @@ export interface GridCanvasHelperAPI {
     }
   ): void;
   multilineText(
-    multilines: string[],
+    lines: string[],
     context: CellContext,
     option: {
       padding?: number | string | (number | string)[];
@@ -341,6 +342,12 @@ export interface GridCanvasHelperAPI {
     row: number,
     ctx: CanvasRenderingContext2D
   ): ColorsDef;
+  getStyleProperty<T>(
+    style: T | ((args: StylePropertyFunctionArg) => T),
+    col: number,
+    row: number,
+    ctx: CanvasRenderingContext2D
+  ): T;
   toBoxPixelArray(
     value: number | string | (number | string)[],
     context: CellContext,
diff --git a/packages/cheetah-grid/src/js/ts-types/plugin.ts b/packages/cheetah-grid/src/js/ts-types/plugin.ts
index bdd5c7c59..5b01a4a26 100644
--- a/packages/cheetah-grid/src/js/ts-types/plugin.ts
+++ b/packages/cheetah-grid/src/js/ts-types/plugin.ts
@@ -1,4 +1,9 @@
-import type { ColorPropertyDefine, ColorsPropertyDefine } from "./define";
+import type {
+  ColorPropertyDefine,
+  ColorsPropertyDefine,
+  TreeBranchIconStyleDefine,
+  TreeLineStyle,
+} from "./define";
 
 // ****** Plugin Icons *******
 export interface IconDefine {
@@ -41,6 +46,12 @@ export interface ThemeDefine {
     color?: ColorPropertyDefine;
     bgColor?: ColorPropertyDefine;
   };
+  tree: {
+    lineStyle?: TreeLineStyle;
+    lineColor?: ColorPropertyDefine;
+    lineWidth?: number;
+    treeIcon?: TreeBranchIconStyleDefine;
+  };
   header: {
     sortArrowColor?: ColorPropertyDefine;
   };
@@ -67,6 +78,7 @@ export type RequiredThemeDefine = Required<ThemeDefine> & {
   checkbox: Required<ThemeDefine["checkbox"]>;
   radioButton: Required<ThemeDefine["radioButton"]>;
   button: Required<ThemeDefine["button"]>;
+  tree: Required<ThemeDefine["tree"]>;
   header: Required<ThemeDefine["header"]>;
   messages: Required<ThemeDefine["messages"]>;
   indicators: Required<ThemeDefine["indicators"]>;
diff --git a/packages/cheetah-grid/src/test/ListGrid_sample_for_tree.html b/packages/cheetah-grid/src/test/ListGrid_sample_for_tree.html
new file mode 100644
index 000000000..895d49023
--- /dev/null
+++ b/packages/cheetah-grid/src/test/ListGrid_sample_for_tree.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Grid with Tree</title>
+	
+	<script type="text/javascript" src="../../dist/cheetahGrid.es5.js"></script>
+	<script type="text/javascript" src="../../dist/cheetahGrid.js"></script>
+	<style type="text/css">
+		html {
+			height: 100%;
+		}
+		body {
+			height: calc(100% - 100px);
+		}
+		
+	</style>
+</head>
+<body>
+	<h1>ListGrid with Tree Example</h1>
+	<div id="tools"></div>
+	<div id="parent" style="width: 100%;height: calc(100% - 62px);">
+	</div>
+	<!-- <div style="border: 1px dashed;">dashed</div>
+	<div style="border: 1px dotted;">dotted</div> -->
+	<script type="text/javascript" src="./ListGrid_sample_for_tree.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/packages/cheetah-grid/src/test/ListGrid_sample_for_tree.js b/packages/cheetah-grid/src/test/ListGrid_sample_for_tree.js
new file mode 100644
index 000000000..e42ae2c34
--- /dev/null
+++ b/packages/cheetah-grid/src/test/ListGrid_sample_for_tree.js
@@ -0,0 +1,173 @@
+/*global cheetahGrid*/
+/*eslint object-shorthand:0, prefer-arrow-callback:0, prefer-template: "off"*/
+'use strict';
+
+(function() {
+	window.cheetahGrid = cheetahGrid;
+	const columnType = cheetahGrid.columns.type;
+	const columnAction = cheetahGrid.columns.action;
+	const columnStyle = cheetahGrid.columns.style;
+
+	const expands = {'p1': true, 'c1_1': true};
+
+	const tree = [
+		{
+			code: 'p1',
+			children: [
+				{
+					code: 'c1_1',
+					children: [
+						{
+							code: 'd1_1_1'
+						},
+						{
+							code: 'd1_1_2',
+							children: [
+								{
+									code: 'e1_1_2_1'
+								},
+								{
+									code: 'e1_1_2_2'
+								}
+							]
+						}
+					]
+				},
+				{
+					code: 'c1_2'
+				}
+			]
+		},
+		{
+			code: 'p2',
+			children: [
+				{
+					code: 'c2_1'
+				},
+				{
+					code: 'c2_2'
+				}
+			]
+		}
+	];
+
+	// Set the parent property to the parent node so that we can keep track of the parent node.
+	const buffer = [...tree];
+	while (buffer.length) {
+		const node = buffer.shift();
+		for (const child of node.children || []) {
+			child.parent = node;
+			buffer.push(child);
+		}
+	}
+
+	const treeColumn = new columnType.TreeColumn(
+			{
+				// cache: true
+			}
+	);
+	const treeStyle = new columnStyle.TreeStyle(
+			{
+				// textBaseline: 'top',
+				padding: [5, 0, 0, 10],
+				// lineColor: '#aaa',
+				// lineWidth: 3,
+				// lineStyle: 'none'
+			}
+	);
+
+	const grid = new cheetahGrid.ListGrid({
+		parentElement: document.querySelector('#parent'),
+		allowRangePaste: true,
+		header: [
+			{
+				field: (node) => {
+					// Build tree data
+					const hasChildren = !!node.children?.length;
+
+					return {
+						caption: node.code,
+						/**
+						 * Returns an array of paths indicating the hierarchy to the record.
+						 * The path must contain an element that identifies the node itself.
+						 */
+						path() {
+							return [...ancestors()].
+								reverse().
+								map((node) => node.code);
+
+							function *ancestors() {
+								let n = node;
+								while (n) {
+									yield n;
+									n = n.parent;
+								}
+							}
+						},
+						nodeType: hasChildren ? 'branch' : 'leaf',
+					};
+				},
+				caption: 'Tree',
+				width: 200,
+				columnType: treeColumn,
+				style: treeStyle,
+				action: new columnAction.Action({
+					disabled: (node) => {
+						const hasChildren = !!node.children?.length;
+						return !hasChildren;
+					},
+					action: (e) => {
+						expands[e.code] = !expands[e.code];
+						grid.records = buildRecords(tree);
+					},
+					area: treeColumn.drawnIconActionArea
+				})
+			},
+			{
+				field: 'code',
+				caption: 'Code',
+				width: 150,
+			},
+		],
+		frozenColCount: 1,
+	});
+
+	function buildRecords(nodes) {
+		const records = [];
+		for (const node of nodes) {
+			records.push(node);
+			if (expands[node.code]) {
+				records.push(...buildRecords(node.children));
+			}
+		}
+		return records;
+	}
+
+
+	grid.records = buildRecords(tree);
+	window.grid = grid;
+
+	const toolsRoot = document.querySelector('#tools');
+
+	const label = document.createElement('label');
+	const showIconCheck = document.createElement('input');
+	showIconCheck.type = 'checkbox';
+	showIconCheck.checked = treeStyle.treeIcon !== 'none';
+	label.appendChild(showIconCheck);
+	label.appendChild(document.createTextNode('Show Icons'));
+	toolsRoot.appendChild(label);
+	showIconCheck.addEventListener('change', () => {
+		treeStyle.treeIcon = showIconCheck.checked ? undefined : 'none';
+		grid.invalidate();
+	});
+
+	const showLineCheck = document.createElement('input');
+	showLineCheck.type = 'checkbox';
+	showLineCheck.checked = treeStyle.lineStyle !== 'none';
+	label.appendChild(showLineCheck);
+	label.appendChild(document.createTextNode('Show Lines'));
+	toolsRoot.appendChild(label);
+	showLineCheck.addEventListener('change', () => {
+		treeStyle.lineStyle = showLineCheck.checked ? 'solid' : 'none';
+	});
+})();
\ No newline at end of file
diff --git a/packages/demo/package-lock.json b/packages/demo/package-lock.json
index 43f36665e..c86b30145 100644
--- a/packages/demo/package-lock.json
+++ b/packages/demo/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cheetah-grid-demo",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cheetah-grid-demo",
-      "version": "1.14.0",
+      "version": "1.15.0",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.4.3",
diff --git a/packages/demo/package.json b/packages/demo/package.json
index a2c43bcc4..9e62ee831 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -1,7 +1,7 @@
 {
   "name": "cheetah-grid-demo",
   "private": true,
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/packages/docs/api/js/column_actions/Action.md b/packages/docs/api/js/column_actions/Action.md
new file mode 100644
index 000000000..679e38852
--- /dev/null
+++ b/packages/docs/api/js/column_actions/Action.md
@@ -0,0 +1,30 @@
+---
+order: 700
+---
+
+# Action
+
+Define the behavior when the cell is clicked.
+
+The specified method is executed after select the cell by clicking it and then push Enter.
+
+You can control the property of `disabled` and `action` by manipulating the instance of `ButtonAction` class.  
+You can also disable each record by specifying a function for the `disabled` property.
+
+## Constructor Properties
+
+| Property            | Description                                                                          |
+| ------------------- | ------------------------------------------------------------------------------------ |
+| `action` (Required) | Defines the action to be taken when clicking or pressing the Enter or Space key.     |
+| `disabled`          | Define a boolean or predicate to control disable. See also [the standard properties] |
+| `area`              | Defines an actionable area within a cell. Set this property to a predicate.          |
+
+[the standard properties]: ./standard-properties.md
+
+## Properties
+
+| Property   | Description                                                                          |
+| ---------- | ------------------------------------------------------------------------------------ |
+| `action`   | Defines the action to be taken when clicking or pressing the Enter or Space key.     |
+| `disabled` | Define a boolean or predicate to control disable. See also [the standard properties] |
+| `area`     | Defines an actionable area within a cell. Set this property to a predicate.          |
diff --git a/packages/docs/api/js/column_actions/ButtonAction.md b/packages/docs/api/js/column_actions/ButtonAction.md
index 14868d5c4..1febf1dee 100644
--- a/packages/docs/api/js/column_actions/ButtonAction.md
+++ b/packages/docs/api/js/column_actions/ButtonAction.md
@@ -11,6 +11,24 @@ The specified method is executed after select the cell by clicking it and then p
 You can control the property of `disabled` and `action` by manipulating the instance of `ButtonAction` class.  
 You can also disable each record by specifying a function for the `disabled` property.
 
+## Constructor Properties
+
+| Property            | Description                                                                          |
+| ------------------- | ------------------------------------------------------------------------------------ |
+| `action` (Required) | Defines the action to be taken when clicking or pressing the Enter or Space key.     |
+| `disabled`          | Define a boolean or predicate to control disable. See also [the standard properties] |
+
+[the standard properties]: ./standard-properties.md
+
+## Properties
+
+| Property   | Description                                                                          |
+| ---------- | ------------------------------------------------------------------------------------ |
+| `action`   | Defines the action to be taken when clicking or pressing the Enter or Space key.     |
+| `disabled` | Define a boolean or predicate to control disable. See also [the standard properties] |
+
+## Example
+
 <code-preview>
 
 ```html
diff --git a/packages/docs/api/js/column_actions/CheckEditor.md b/packages/docs/api/js/column_actions/CheckEditor.md
index e0b86f94f..0b577c08b 100644
--- a/packages/docs/api/js/column_actions/CheckEditor.md
+++ b/packages/docs/api/js/column_actions/CheckEditor.md
@@ -12,6 +12,8 @@ You can control the property of `readOnly` and `disabled` by setting the instanc
 But if you define `'check'`, as string, to `action` of the column, you can't control these properties.  
 You can also disable or read-only each record by specifying a function for the `disabled` and `readOnly` properties.
 
+## Example
+
 <code-preview>
 
 ```html
@@ -207,7 +209,23 @@ grid.records = [
 
 </code-preview>
 
-## disabled
+## Constructor Properties
+
+| Property   | Description                                                                           |
+| ---------- | ------------------------------------------------------------------------------------- |
+| `disabled` | Define a boolean or predicate to control disable. See also [the standard properties]  |
+| `readOnly` | Define a boolean or predicate to control readonly. See also [the standard properties] |
+
+[the standard properties]: ./standard-properties.md
+
+## Properties
+
+| Property   | Description                                                                           |
+| ---------- | ------------------------------------------------------------------------------------- |
+| `disabled` | Define a boolean or predicate to control disable. See also [the standard properties]  |
+| `readOnly` | Define a boolean or predicate to control readonly. See also [the standard properties] |
+
+### disabled
 
 You can control `disabled` depending on the state of the record by giving `disabled` a `function`.
 
diff --git a/packages/docs/api/js/column_actions/Classes.md b/packages/docs/api/js/column_actions/Classes.md
index f15a241e8..318f50313 100644
--- a/packages/docs/api/js/column_actions/Classes.md
+++ b/packages/docs/api/js/column_actions/Classes.md
@@ -14,6 +14,7 @@ order: 100
 | [`InlineInputEditor`]      | The behavior when input the cell                                     | InlineInputEditor is an experiment stage |
 | [`InlineMenuEditor`]       | The behavior when select menu the cell                               | ---                                      |
 | [`RadioEditor`]            | The behavior when clicking the radio button                          | same as `action: 'radio'`                |
+| [`Action`]                 | The behavior when clicking the cell                                  | ---                                      |
 
 [`checkeditor`]: ./CheckEditor.md
 [`buttonaction`]: ./ButtonAction.md
@@ -21,5 +22,8 @@ order: 100
 [`inlineinputeditor`]: ./InlineInputEditor.md
 [`inlinemenueditor`]: ./InlineMenuEditor.md
 [`radioeditor`]: ./RadioEditor.md
+[`action`]: ./Action.md
 
 ## Standard Properties
+
+Please see [here](./standard-properties.md).
diff --git a/packages/docs/api/js/column_actions/InlineInputEditor.md b/packages/docs/api/js/column_actions/InlineInputEditor.md
index a1b28da31..d47c30d4c 100644
--- a/packages/docs/api/js/column_actions/InlineInputEditor.md
+++ b/packages/docs/api/js/column_actions/InlineInputEditor.md
@@ -6,6 +6,19 @@ order: 450
 
 Enables data editing by input.
 
+## Constructor Properties
+
+| Property    | Description                                                                           |
+| ----------- | ------------------------------------------------------------------------------------- |
+| `disabled`  | Define a boolean or predicate to control disable. See also [the standard properties]  |
+| `readOnly`  | Define a boolean or predicate to control readonly. See also [the standard properties] |
+| `classList` | Defines the `class` to be set on the `<input>`.                                       |
+| `type`      | Defines the `type` to be set on the `<input>`.                                        |
+
+[the standard properties]: ./standard-properties.md
+
+## Example
+
 <code-preview>
 
 ```html
@@ -83,10 +96,12 @@ document.querySelector(".sample1mode").onchange = function () {
 
 ## Properties
 
-| Property    | Description                                            |
-| ----------- | ------------------------------------------------------ |
-| `type`      | Specify the `type` attribute of the `<input>` element. |
-| `classList` | Specify `class` of the `<input>` element.              |
+| Property    | Description                                                                           |
+| ----------- | ------------------------------------------------------------------------------------- |
+| `disabled`  | Define a boolean or predicate to control disable. See also [the standard properties]  |
+| `readOnly`  | Define a boolean or predicate to control readonly. See also [the standard properties] |
+| `type`      | Defines the `type` attribute of the `<input>` element.                                |
+| `classList` | Defines `class` of the `<input>` element.                                             |
 
 <code-preview>
 
diff --git a/packages/docs/api/js/column_actions/InlineMenuEditor.md b/packages/docs/api/js/column_actions/InlineMenuEditor.md
index e83f4707a..1b3649639 100644
--- a/packages/docs/api/js/column_actions/InlineMenuEditor.md
+++ b/packages/docs/api/js/column_actions/InlineMenuEditor.md
@@ -6,6 +6,28 @@ order: 500
 
 Enables data editing by menu selection.
 
+## Constructor Properties
+
+| Property             | Description                                                                           |
+| -------------------- | ------------------------------------------------------------------------------------- |
+| `options` (Required) | Defines the options that can be selected.                                             |
+| `disabled`           | Define a boolean or predicate to control disable. See also [the standard properties]  |
+| `readOnly`           | Define a boolean or predicate to control readonly. See also [the standard properties] |
+| `classList`          | Defines the `class` to be set on the menu (`<ul>`).                                   |
+
+[the standard properties]: ./standard-properties.md
+
+## Properties
+
+| Property             | Description                                                                           |
+| -------------------- | ------------------------------------------------------------------------------------- |
+| `options` (Required) | Defines the options that can be selected.                                             |
+| `disabled`           | Define a boolean or predicate to control disable. See also [the standard properties]  |
+| `readOnly`           | Define a boolean or predicate to control readonly. See also [the standard properties] |
+| `classList`          | Defines the `class` to be set on the menu (`<ul>`).                                   |
+
+## Example
+
 <code-preview>
 
 ```html
diff --git a/packages/docs/api/js/column_actions/RadioEditor.md b/packages/docs/api/js/column_actions/RadioEditor.md
index 7bb8434da..9f44c572a 100644
--- a/packages/docs/api/js/column_actions/RadioEditor.md
+++ b/packages/docs/api/js/column_actions/RadioEditor.md
@@ -12,6 +12,8 @@ You can control the property of `readOnly` and `disabled` by setting the instanc
 But if you define `'radio'`, as string, to `action` of the column, you can't control these properties.  
 You can also disable or read-only each record by specifying a function for the `disabled` and `readOnly` properties.
 
+## Example
+
 <code-preview>
 
 ```html
@@ -90,7 +92,25 @@ document.querySelector(".sample1mode").onchange = function () {
 
 </code-preview>
 
-## disabled
+## Constructor Properties
+
+| Property      | Description                                                                           |
+| ------------- | ------------------------------------------------------------------------------------- |
+| `checkAction` | Defines the action to be taken when clicking or pressing the Enter or Space key.      |
+| `disabled`    | Define a boolean or predicate to control disable. See also [the standard properties]  |
+| `readOnly`    | Define a boolean or predicate to control readonly. See also [the standard properties] |
+
+[the standard properties]: ./standard-properties.md
+
+## Properties
+
+| Property      | Description                                                                           |
+| ------------- | ------------------------------------------------------------------------------------- |
+| `checkAction` | Defines the action to be taken when clicking or pressing the Enter or Space key.      |
+| `disabled`    | Define a boolean or predicate to control disable. See also [the standard properties]  |
+| `readOnly`    | Define a boolean or predicate to control readonly. See also [the standard properties] |
+
+### disabled
 
 You can control `disabled` depending on the state of the record by giving `disabled` a `function`.
 
diff --git a/packages/docs/api/js/column_actions/SmallDialogInputEditor.md b/packages/docs/api/js/column_actions/SmallDialogInputEditor.md
index b60f9e4ff..d0a0626bd 100644
--- a/packages/docs/api/js/column_actions/SmallDialogInputEditor.md
+++ b/packages/docs/api/js/column_actions/SmallDialogInputEditor.md
@@ -93,12 +93,26 @@ document.querySelector(".sample1mode").onchange = function () {
 
 </code-preview>
 
-## Properties
+## Constructor Properties
 
-The following properties can be set with the constructor argument of `SmallDialogInputEditor`.
+| Property         | Description                                                                                                                                        |
+| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `disabled`       | Define a boolean or predicate to control disable. See also [the standard properties]                                                               |
+| `readOnly`       | Define a boolean or predicate to control readonly. See also [the standard properties]                                                              |
+| `type`           | Specify the `type` attribute of the `<input>` element.                                                                                             |
+| `classList`      | Specify `class` of the dialog element.                                                                                                             |
+| `helperText`     | Specify helper text. You can also specify a function.                                                                                              |
+| `validator`      | Specify the validation function to be call before confirming the input value. If there is an error, please use the function to return the message. |
+| `inputValidator` | Specify the validation function of the value of `<input>`. If there is an error, please use the function to return the message.                    |
+
+[the standard properties]: ./standard-properties.md
+
+## Properties
 
 | Property         | Description                                                                                                                                        |
 | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `disabled`       | Define a boolean or predicate to control disable. See also [the standard properties]                                                               |
+| `readOnly`       | Define a boolean or predicate to control readonly. See also [the standard properties]                                                              |
 | `type`           | Specify the `type` attribute of the `<input>` element.                                                                                             |
 | `classList`      | Specify `class` of the dialog element.                                                                                                             |
 | `helperText`     | Specify helper text. You can also specify a function.                                                                                              |
diff --git a/packages/docs/api/js/column_types/BranchGraphColumn.md b/packages/docs/api/js/column_types/BranchGraphColumn.md
index 803fdbf10..dd8d56bca 100644
--- a/packages/docs/api/js/column_types/BranchGraphColumn.md
+++ b/packages/docs/api/js/column_types/BranchGraphColumn.md
@@ -10,8 +10,8 @@ Show branch graph.
 
 | Property | Description                                                                                                                           | Default    |
 | -------- | ------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| `start`  | Set the moving direction by setting the beggining point. `'top'` or `'bottom'`                                                        | `'bottom'` |
-| `cache`  | Set `true` when caching the calculation result of the branch structure. Please call `clearCache(grid)` when deleting the cahced data. | `false`    |
+| `start`  | Set the moving direction by setting the beginning point. `'top'` or `'bottom'`                                                        | `'bottom'` |
+| `cache`  | Set `true` when caching the calculation result of the branch structure. Please call `clearCache(grid)` when deleting the cached data. | `false`    |
 
 ## Style Properties
 
@@ -23,6 +23,67 @@ Show branch graph.
 | `branchLineWidth` | Set the width of branch lines.                                                                        | `4`                                                                                      |
 | `mergeStyle`      | Set the way to express the merge line. `'bezier'` or `'straight'`                                     | `'bezier'`                                                                               |
 
+## Data Format
+
+The value provided from each record through the field must be an object or an array of it in the following format.
+
+### Branch Command
+
+This is the command to create a new branch.\
+It is an object with the following properties:
+
+| Property               | Description                                                                                 |
+| :--------------------- | :------------------------------------------------------------------------------------------ |
+| `command` (Required)   | Sets `"branch"`, which indicates what command the object is directing.                      |
+| `branch`               | Set the value of the branch name to operate on.                                             |
+| `branch.to` (Required) | Set the name of the new branch to be created. Set `branch` to a string has the same effect. |
+| `branch.from`          | Set the branch name to be branched from.                                                    |
+
+### Commit Command
+
+This is the command to commit a branch.\
+It is an object with the following properties:
+
+| Property             | Description                                                            |
+| :------------------- | :--------------------------------------------------------------------- |
+| `command` (Required) | Sets `"commit"`, which indicates what command the object is directing. |
+| `branch` (Required)  | Set the value of the branch name to operate on.                        |
+
+### Merge Command
+
+This is the command to merge a branch into a branch.\
+It is an object with the following properties:
+
+| Property                 | Description                                                           |
+| :----------------------- | :-------------------------------------------------------------------- |
+| `command` (Required)     | Sets `"merge"`, which indicates what command the object is directing. |
+| `branch` (Required)      | Set the value of the branch name to operate on.                       |
+| `branch.to` (Required)   | Sets the name of the branch that will be merged.                      |
+| `branch.from` (Required) | Sets the name of the branch you want to merge from.                   |
+
+### Tag Command
+
+This is the command to create a tag.\
+It is an object with the following properties:
+
+| Property             | Description                                                         |
+| :------------------- | :------------------------------------------------------------------ |
+| `command` (Required) | Sets `"tag"`, which indicates what command the object is directing. |
+| `branch` (Required)  | Set the value of the branch name to operate on.                     |
+| `tag` (Required)     | Set the name of the new tag to be created.                          |
+
+## Instance Methods
+
+### `clearCache(grid)`
+
+Clear the cache.
+
+| Parameter | Description                               |
+| :-------- | :---------------------------------------- |
+| `grid`    | It should be given an instance of a grid. |
+
+## Example
+
 <code-preview>
 
 ```html
diff --git a/packages/docs/api/js/column_types/TreeColumn.md b/packages/docs/api/js/column_types/TreeColumn.md
new file mode 100644
index 000000000..66ec47b67
--- /dev/null
+++ b/packages/docs/api/js/column_types/TreeColumn.md
@@ -0,0 +1,218 @@
+---
+order: 1010
+---
+
+# TreeColumn
+
+Show a hierarchical tree.
+
+TreeColumn class does not have the feature to open and close branch nodes, you must implement it yourself if you need it.
+
+## Constructor Properties
+
+| Property | Description                                                                                                                           | Default |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `cache`  | Set `true` when caching the calculation result of the branch structure. Please call `clearCache(grid)` when deleting the cached data. | `false` |
+
+## Style Properties
+
+| Property    | Description                                                                                                     |
+| ----------- | --------------------------------------------------------------------------------------------------------------- |
+| `lineColor` | Sets the tree lines color.                                                                                      |
+| `lineStyle` | Sets the tree lines style. Allowed values ​​are `'none'` or `'solid'`                                           |
+| `lineWidth` | Sets the with of of the tree lines.                                                                             |
+| `treeIcon`  | Sets the icon to display on the node tree. Allowed values ​​are `"chevron_right"`, `"expand_more"` or `"none"`. |
+
+## Data Format
+
+The value provided from each record through the field must be an object of the format described below.
+
+The object has the following properties:
+
+| Property          | Description                                                                                                                                                    |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `path` (Required) | An array of path indicating the hierarchy. See [the `path` description section](#path) for more information.                                                   |
+| `caption`         | The caption of the record. If not specified, the last value of the path will be used as the caption.                                                           |
+| `nodeType`        | Set to `"leaf"` or `"branch"`. Set whether the node is a leaf node or a branch node. See [the `nodeType` description section](#nodetype) for more information. |
+
+### `path`
+
+This is a required property.\
+This is an array of path indicating the hierarchy. The path must contain an element that identifies the node itself.
+
+Example:
+
+| Node        | `code` | `path` Value       |
+| :---------- | :----- | :----------------- |
+| Grandparent | `'g'`  | `['g']`            |
+| ├ Parent    | `'p'`  | `['g', 'p']`       |
+| │└ Child1   | `'c1'` | `['g', 'p', 'c1']` |
+| └ Child2    | `'c2'` | `['g', 'c2']`      |
+
+### `nodeType`
+
+Set to `"leaf"` or `"branch"`.
+Set whether the node is a leaf node (`"leaf"`) or a branch node (`"branch"`).
+Use this to display an icon if the node does not display any child nodes in the display.
+If the child nodes are displayed, they are forced to be treated as branch nodes.
+
+## Instance Methods
+
+### `drawnIconActionArea(params)`
+
+A predicate that makes the icon an actionable area of ​​[the `Action` class]. Use it for the `area` property of ​​[the `Action` class].
+
+| Parameter | Description                                                                 |
+| :-------- | :-------------------------------------------------------------------------- |
+| `params`  | It's a parameter passed from the `area` property of ​​[the `Action` class]. |
+
+[the `action` class]: ../column_actions/Action.md
+
+### `clearCache(grid)`
+
+Clear the cache.
+
+| Parameter | Description                               |
+| :-------- | :---------------------------------------- |
+| `grid`    | It should be given an instance of a grid. |
+
+## Example
+
+<code-preview>
+
+```html
+<div class="sample1 demo-grid large"></div>
+```
+
+```js
+const expands = { p1: true };
+
+const tree = [
+  {
+    code: "p1",
+    children: [
+      {
+        code: "c1_1",
+        children: [
+          {
+            code: "d1_1_1",
+          },
+          {
+            code: "d1_1_2",
+            children: [
+              {
+                code: "e1_1_2_1",
+              },
+              {
+                code: "e1_1_2_2",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        code: "c1_2",
+      },
+    ],
+  },
+  {
+    code: "p2",
+    children: [
+      {
+        code: "c2_1",
+      },
+      {
+        code: "c2_2",
+      },
+    ],
+  },
+];
+
+// Set the parent property to the parent node so that we can keep track of the parent node.
+const buffer = [...tree];
+while (buffer.length) {
+  const node = buffer.shift();
+  for (const child of node.children || []) {
+    child.parent = node;
+    buffer.push(child);
+  }
+}
+
+/** Gets the specified node and its ancestor nodes. */
+function* ancestors(node) {
+  let n = node;
+  while (n) {
+    yield n;
+    n = n.parent;
+  }
+}
+
+const treeColumn = new cheetahGrid.columns.type.TreeColumn({
+  cache: false, // cache enable. default false
+});
+const grid = new cheetahGrid.ListGrid({
+  parentElement: document.querySelector(".sample1"),
+  header: [
+    {
+      field: (node) => {
+        // Build tree data
+        const hasChildren = !!node.children?.length;
+
+        const path = [...ancestors(node)].reverse().map((node) => node.code);
+
+        return {
+          caption: node.code,
+          /**
+           * An array of paths indicating the hierarchy to the record.
+           * The path must contain an element that identifies the node itself.
+           */
+          path,
+          nodeType: hasChildren ? "branch" : "leaf",
+        };
+      },
+      caption: "Tree",
+      width: 200,
+      columnType: treeColumn,
+      action: new cheetahGrid.columns.action.Action({
+        disabled: (node) => {
+          const hasChildren = !!node.children?.length;
+          return !hasChildren;
+        },
+        action: (node) => {
+          expands[node.code] = !expands[node.code];
+          grid.records = buildRecords(tree);
+        },
+        area: treeColumn.drawnIconActionArea,
+      }),
+    },
+    {
+      field: "code",
+      caption: "Code",
+      width: 200,
+    },
+    {
+      field: (node) => {
+        const path = [...ancestors(node)].reverse().map((node) => node.code);
+        return "[" + path.join(", ") + "]";
+      },
+      caption: "Path",
+      width: 300,
+    },
+  ],
+  frozenColCount: 1,
+});
+grid.records = buildRecords(tree);
+
+function buildRecords(nodes) {
+  const records = [];
+  for (const node of nodes) {
+    records.push(node);
+    if (expands[node.code]) {
+      records.push(...buildRecords(node.children));
+    }
+  }
+  return records;
+}
+```
+
+</code-preview>
diff --git a/packages/docs/api/vue/components/CGridTreeColumn.md b/packages/docs/api/vue/components/CGridTreeColumn.md
new file mode 100644
index 000000000..18800385e
--- /dev/null
+++ b/packages/docs/api/vue/components/CGridTreeColumn.md
@@ -0,0 +1,200 @@
+---
+sidebarDepth: 3
+---
+
+# CGridTreeColumn
+
+Defines tree column.
+
+CGridTreeColumn component does not have the feature to open and close branch nodes, you must implement it yourself if you need it.
+
+See also [the `TreeColumn` document](../../js/column_types/TreeColumn.md).
+
+## Vue Template Structure
+
+<code-preview>
+
+```vue
+<div class="demo-grid small">
+  <c-grid
+    :data="records"
+    :frozen-col-count="1">
+    <c-grid-tree-column
+      :field="treeField"
+      width="200"
+      @click="onClickRecord"
+    >
+      Tree
+    </c-grid-tree-column>
+    <c-grid-column
+      field="code"
+      width="200"
+    >
+      Code
+    </c-grid-column>
+  </c-grid>
+</div>
+```
+
+```js
+const tree = [
+  {
+    code: "p1",
+    children: [
+      {
+        code: "c1_1",
+        children: [
+          {
+            code: "d1_1_1",
+          },
+          {
+            code: "d1_1_2",
+            children: [
+              {
+                code: "e1_1_2_1",
+              },
+              {
+                code: "e1_1_2_2",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        code: "c1_2",
+      },
+    ],
+  },
+  {
+    code: "p2",
+    children: [
+      {
+        code: "c2_1",
+      },
+      {
+        code: "c2_2",
+      },
+    ],
+  },
+];
+
+// Set the parent property to the parent node so that we can keep track of the parent node.
+const buffer = [...tree];
+while (buffer.length) {
+  const node = buffer.shift();
+  for (const child of node.children || []) {
+    child.parent = node;
+    buffer.push(child);
+  }
+}
+
+/** Gets the specified node and its ancestor nodes. */
+function* ancestors(node) {
+  let n = node;
+  while (n) {
+    yield n;
+    n = n.parent;
+  }
+}
+
+export default {
+  data() {
+    return {
+      expands: { p1: true },
+    };
+  },
+  computed: {
+    records() {
+      const vm = this;
+
+      return buildRecords(tree);
+
+      function buildRecords(nodes) {
+        const records = [];
+        for (const node of nodes) {
+          records.push(node);
+          if (vm.expands[node.code]) {
+            records.push(...buildRecords(node.children));
+          }
+        }
+        return records;
+      }
+    },
+  },
+  methods: {
+    treeField(node) {
+      const hasChildren = !!node.children?.length;
+      const path = [...ancestors(node)].reverse().map((node) => node.code);
+      return {
+        caption: node.code,
+        path,
+        nodeType: hasChildren ? "branch" : "leaf",
+      };
+    },
+    onClickRecord(node) {
+      this.$set(this.expands, node.code, !this.expands[node.code]);
+    },
+  },
+};
+```
+
+</code-preview>
+
+## Slots
+
+<!-- SLOT_DEFAULT_START -->
+
+### `default` slot
+
+Use this slot to set the header caption
+
+<!-- SLOT_DEFAULT_END -->
+
+## Properties
+
+<!-- PROPS_TABLE_START -->
+
+### Optional Properties
+
+| Name          |                  Type                   | Description                                                                                                                      | Default     |
+| :------------ | :-------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------- | :---------- |
+| field         | `object`&#124;`string`&#124;`function`  | Defines a column data field                                                                                                      | `undefined` |
+| width         |         `number`&#124;`string`          | Defines a default column width                                                                                                   | `undefined` |
+| min-width     |         `number`&#124;`string`          | Defines a column min width                                                                                                       | `undefined` |
+| max-width     |         `number`&#124;`string`          | Defines a column max width                                                                                                       | `undefined` |
+| column-style  | `object`&#124;`string`&#124;`function`  | Defines a column style. Same as [the `style` property of the JS API](../../js/column_styles/README.md).                          | `undefined` |
+| caption       |        `string`&#124;`function`         | Defines a header caption                                                                                                         | `''`        |
+| disabled      |        `boolean`&#124;`function`        | Defines disabled. You can also control each record by specifying a function.                                                     | `false`     |
+| colspan       |         `number`&#124;`string`          | Defines the layout colspan.<br>This property can be used when defining in the `layout-header` and `layout-body` slots.           | `undefined` |
+| filter        |        `string`&#124;`function`         | Defines a vue filter name                                                                                                        | `undefined` |
+| header-action | `object`&#124;`string`&#124;`function`  | Defines a column header action. Same as [the `headerAction` property of the JS API](../../js/advanced_header/header_actions.md). | `undefined` |
+| header-field  |                `string`                 | Defines a column header data field                                                                                               | `undefined` |
+| header-icon   |         `object`&#124;`string`          | Defines a header icon                                                                                                            | `undefined` |
+| header-style  | `object`&#124;`string`&#124;`function`  | Defines a column header style. Same as [the `headerStyle` property of the JS API](../../js/advanced_header/header_styles.md)     | `undefined` |
+| header-type   | `object`&#124;`string`&#124;`function`  | Defines a column header type. Same as [the `headerStyle` property of the JS API](../../js/advanced_header/header_styles.md)      | `undefined` |
+| icon          | `object`&#124;`string`&#124;`function`  | Defines an icon. Same as [the `icon` property of the JS API](../../js/column_icon.md).                                           | `undefined` |
+| message       | `object`&#124;`string`&#124;`function`  | Defines a message generation method. Same as [the `message` property of the JS API](../../js/cell_message.md).                   | `undefined` |
+| rowspan       |         `number`&#124;`string`          | Defines the layout rowspan.<br>This property can be used when defining in the `layout-header` and `layout-body` slots.           | `undefined` |
+| sort          | `boolean`&#124;`string`&#124;`function` | Defines a sort. See "[Sort by Column](../../js/advanced_header/column_sort.md)" for detail.                                      | `undefined` |
+
+<!-- PROPS_TABLE_END -->
+
+## Events
+
+<!-- EVENTS_TABLE_START -->
+
+| Name  | Description                 |
+| :---- | :-------------------------- |
+| click | Fired when a click on cell. |
+
+<!-- EVENTS_TABLE_END -->
+
+## Methods
+
+<!-- METHODS_TABLE_START -->
+
+| Name       | Return Type | Description             |
+| :--------- | :---------- | :---------------------- |
+| invalidate | ---         | Redraws the whole grid. |
+
+<!-- METHODS_TABLE_END -->
diff --git a/packages/docs/introduction/getting-started-with-vue.md b/packages/docs/introduction/getting-started-with-vue.md
index 51e48a280..a13155e78 100644
--- a/packages/docs/introduction/getting-started-with-vue.md
+++ b/packages/docs/introduction/getting-started-with-vue.md
@@ -25,8 +25,8 @@ Vue.use(vueCheetahGrid);
 [![npm](https://img.shields.io/npm/v/vue-cheetah-grid.svg)](https://www.npmjs.com/package/vue-cheetah-grid)
 
 ```html
-<script src="https://unpkg.com/cheetah-grid@1.14"></script>
-<script src="https://unpkg.com/vue-cheetah-grid@1.14"></script>
+<script src="https://unpkg.com/cheetah-grid@1.15"></script>
+<script src="https://unpkg.com/vue-cheetah-grid@1.15"></script>
 ```
 
 ```js
diff --git a/packages/docs/introduction/getting-started.md b/packages/docs/introduction/getting-started.md
index 1b21b563a..1eec2a4da 100644
--- a/packages/docs/introduction/getting-started.md
+++ b/packages/docs/introduction/getting-started.md
@@ -23,18 +23,18 @@ const cheetahGrid = require("cheetah-grid");
 [![npm](https://img.shields.io/npm/v/cheetah-grid.svg)](https://www.npmjs.com/package/cheetah-grid)
 
 ```html
-<script src="https://unpkg.com/cheetah-grid@1.14"></script>
+<script src="https://unpkg.com/cheetah-grid@1.15"></script>
 ```
 
 ### Via Source Code
 
 [![npm](https://img.shields.io/npm/v/cheetah-grid.svg)](https://www.npmjs.com/package/cheetah-grid)
 
-[cheetahGrid.es5.min.js](https://unpkg.com/cheetah-grid@1.14/dist/cheetahGrid.es5.min.js)
+[cheetahGrid.es5.min.js](https://unpkg.com/cheetah-grid@1.15/dist/cheetahGrid.es5.min.js)
 
 #### SourceMap
 
-[cheetahGrid.es5.min.js.map](https://unpkg.com/cheetah-grid@1.14/dist/cheetahGrid.es5.min.js.map)
+[cheetahGrid.es5.min.js.map](https://unpkg.com/cheetah-grid@1.15/dist/cheetahGrid.es5.min.js.map)
 
 ### Via GitHub
 
diff --git a/packages/docs/package-lock.json b/packages/docs/package-lock.json
index 33e6f3695..a4b84d55a 100644
--- a/packages/docs/package-lock.json
+++ b/packages/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cheetah-grid-docs",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cheetah-grid-docs",
-      "version": "1.14.0",
+      "version": "1.15.0",
       "devDependencies": {
         "babel-eslint": "^10.0.3",
         "cross-env": "^6.0.3",
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 17d14eee9..f9098243c 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "cheetah-grid-docs",
   "private": true,
-  "version": "1.14.0",
+  "version": "1.15.0",
   "scripts": {
     "watch": " npm run vuepress -- dev . --debug",
     "build": "npm-run-all build:*",
diff --git a/packages/react-cheetah-grid/package-lock.json b/packages/react-cheetah-grid/package-lock.json
index 0abb5227d..af852bfac 100644
--- a/packages/react-cheetah-grid/package-lock.json
+++ b/packages/react-cheetah-grid/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "react-cheetah-grid",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "react-cheetah-grid",
-      "version": "0.3.0",
+      "version": "0.3.1",
       "license": "MIT",
       "dependencies": {
         "cheetah-grid": "^1.1.7"
diff --git a/packages/vue-cheetah-grid/lib/CGridTreeColumn.vue b/packages/vue-cheetah-grid/lib/CGridTreeColumn.vue
new file mode 100644
index 000000000..8bbc63525
--- /dev/null
+++ b/packages/vue-cheetah-grid/lib/CGridTreeColumn.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="c-grid-tree-column">
+    <!-- Use this slot to set the header caption -->
+    <slot />
+  </div>
+</template>
+
+<script>
+import LayoutColumnMixin from './c-grid/LayoutColumnMixin.vue'
+import StdColumnMixin from './c-grid/StdColumnMixin.vue'
+import { cheetahGrid, extend } from './c-grid/utils'
+
+/**
+ * Defines tree column.
+ * @mixin column-mixin
+ * @mixin layout-column-mixin
+ * @mixin std-column-mixin
+ */
+export default {
+  name: 'CGridTreeColumn',
+  mixins: [LayoutColumnMixin, StdColumnMixin],
+  props: {
+    /**
+     * Defines disabled. You can also control each record by specifying a function.
+     */
+    disabled: {
+      type: [Boolean, Function],
+      default: false
+    }
+  },
+  emits: { click: null },
+  watch: {
+    disabled (disabled) {
+      if (this._action) {
+        this._action.disabled = disabled
+      }
+    }
+  },
+  methods: {
+    /**
+     * @private
+     * @override
+     */
+    getPropsObjectInternal () {
+      const baseCol = LayoutColumnMixin.methods.getPropsObjectInternal.apply(this)
+      const stdCol = StdColumnMixin.methods.getPropsObjectInternal.apply(this)
+      return extend(
+        baseCol,
+        stdCol,
+        {}
+      )
+    },
+    /**
+     * @private
+     */
+    createColumn () {
+      const columnType = new cheetahGrid.columns.type.TreeColumn({})
+      const action = this._action = new cheetahGrid.columns.action.Action({
+        action: (...args) => {
+          /**
+           * Fired when a click on cell.
+           */
+          this.$emit('click', ...args)
+        },
+        disabled: this.disabled,
+        area: columnType.drawnIconActionArea
+      })
+      const baseCol = LayoutColumnMixin.methods.createColumn.apply(this)
+      const stdCol = StdColumnMixin.methods.createColumn.apply(this)
+      return extend(
+        baseCol,
+        stdCol,
+        {
+          columnType,
+          action
+        }
+      )
+    }
+  }
+}
+</script>
+
+<style scoped>
+.c-grid-tree-column {
+  display: none;
+}
+</style>
diff --git a/packages/vue-cheetah-grid/lib/index.js b/packages/vue-cheetah-grid/lib/index.js
index 427069db3..73050c4f6 100644
--- a/packages/vue-cheetah-grid/lib/index.js
+++ b/packages/vue-cheetah-grid/lib/index.js
@@ -12,6 +12,7 @@ import CGridLinkColumn from './CGridLinkColumn.vue'
 import CGridMenuColumn from './CGridMenuColumn.vue'
 import CGridRadioColumn from './CGridRadioColumn.vue'
 import CGridBranchGraphColumn from './CGridBranchGraphColumn.vue'
+import CGridTreeColumn from './CGridTreeColumn.vue'
 
 import CGridLayoutRow from './CGridLayoutRow.vue'
 import CGridHeader from './CGridHeader.vue'
@@ -31,6 +32,7 @@ export {
   CGridMenuColumn,
   CGridRadioColumn,
   CGridBranchGraphColumn,
+  CGridTreeColumn,
   CGridLayoutRow,
   CGridHeader,
   cheetahGrid
@@ -52,6 +54,7 @@ export function install (Vue) {
     CGridMenuColumn,
     CGridRadioColumn,
     CGridBranchGraphColumn,
+    CGridTreeColumn,
     CGridLayoutRow,
     CGridHeader
   }
diff --git a/packages/vue-cheetah-grid/package-lock.json b/packages/vue-cheetah-grid/package-lock.json
index 452434149..3a2697bb2 100644
--- a/packages/vue-cheetah-grid/package-lock.json
+++ b/packages/vue-cheetah-grid/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-cheetah-grid",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-cheetah-grid",
-      "version": "1.14.0",
+      "version": "1.15.0",
       "license": "MIT",
       "dependencies": {
         "cheetah-grid": "^1.13.0"
diff --git a/packages/vue-cheetah-grid/package.json b/packages/vue-cheetah-grid/package.json
index c06fa4750..4e33a7eb9 100644
--- a/packages/vue-cheetah-grid/package.json
+++ b/packages/vue-cheetah-grid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-cheetah-grid",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Cheetah Grid for Vue.js",
   "main": "lib/index.js",
   "unpkg": "dist/vueCheetahGrid.js",