diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js
index 183fcd8e8f..7738bc3c28 100644
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@@ -1615,6 +1615,9 @@ export default {
     table_freeze: 'Table Freeze',
     table_config: 'Table Config',
     table_column_width_config: 'Column Width',
+    table_layout_mode: 'Layout Mode',
+    table_layout_grid: 'Grid',
+    table_layout_tree: 'Tree',
     table_column_adapt: 'Adapt',
     table_column_custom: 'Custom',
     table_column_fixed: 'Fixed',
diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js
index 6d21799be1..4814e4daf2 100644
--- a/core/frontend/src/lang/tw.js
+++ b/core/frontend/src/lang/tw.js
@@ -1613,6 +1613,9 @@ export default {
     column: '列',
     table_config: '表格配置',
     table_column_width_config: '列寬調整',
+    table_layout_mode: '展示形式',
+    table_layout_grid: '平鋪展示',
+    table_layout_tree: '樹形模式',
     table_freeze: '表格凍結',
     table_column_adapt: '自適應',
     table_column_custom: '自定義',
diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js
index fbbcd58df5..0ba6f16e07 100644
--- a/core/frontend/src/lang/zh.js
+++ b/core/frontend/src/lang/zh.js
@@ -1611,6 +1611,9 @@ export default {
     table_freeze: '表格冻结',
     table_config: '表格配置',
     table_column_width_config: '列宽调整',
+    table_layout_mode: '展示形式',
+    table_layout_grid: '平铺展示',
+    table_layout_tree: '树形模式',
     table_column_adapt: '自适应',
     table_column_custom: '自定义',
     table_column_fixed: '固定列宽',
diff --git a/core/frontend/src/views/chart/chart/chart.js b/core/frontend/src/views/chart/chart/chart.js
index 2ef733afe1..e5d8cfaa0f 100644
--- a/core/frontend/src/views/chart/chart/chart.js
+++ b/core/frontend/src/views/chart/chart/chart.js
@@ -110,6 +110,7 @@ export const DEFAULT_SIZE = {
     show: false
   },
   tableFieldWidth: [],
+  tableLayoutMode: 'grid',
   gaugeMinType: 'fix', // fix or dynamic
   gaugeMinField: {
     id: '',
diff --git a/core/frontend/src/views/chart/chart/table/table-info.js b/core/frontend/src/views/chart/chart/table/table-info.js
index d25229c4ef..8f7d2e824d 100644
--- a/core/frontend/src/views/chart/chart/table/table-info.js
+++ b/core/frontend/src/views/chart/chart/table/table-info.js
@@ -659,12 +659,14 @@ export function baseTablePivot(container, chart, action, headerAction, tableData
     data: newData,
     sortParams: sortParams
   }
-
   // options
   const s2Options = {
     width: containerDom.offsetWidth,
     height: containerDom.offsetHeight,
-    style: getSize(chart),
+    style: {
+      hierarchyCollapse: true,
+      ...getSize(chart)
+    },
     totals: totalCfg,
     conditions: getConditions(chart),
     tooltip: {
@@ -676,7 +678,8 @@ export function baseTablePivot(container, chart, action, headerAction, tableData
         position: 'absolute',
         padding: '4px 2px'
       }
-    }
+    },
+    hierarchyType: customAttr.size.tableLayoutMode ?? 'grid'
   }
 
   // 开始渲染
diff --git a/core/frontend/src/views/chart/chart/util.js b/core/frontend/src/views/chart/chart/util.js
index 81dc6fbe37..bbaf1b0b2f 100644
--- a/core/frontend/src/views/chart/chart/util.js
+++ b/core/frontend/src/views/chart/chart/util.js
@@ -178,7 +178,8 @@ export const TYPE_CONFIGS = [
         'tableColumnMode',
         'tableRowTooltip',
         'tableColTooltip',
-        'tableCellTooltip'
+        'tableCellTooltip',
+        'tableLayoutMode'
       ],
       'total-cfg': [
         'row',
diff --git a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
index 1970d124da..5a63ca5278 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
@@ -163,6 +163,22 @@
         </el-form-item>
         <!--radar-end-->
         <!--table-begin-->
+        <el-form-item
+          v-if="showProperty('tableLayoutMode')"
+          :label="$t('chart.table_layout_mode')"
+          class="form-item"
+        >
+          <el-radio-group
+            v-model="sizeForm.tableLayoutMode"
+            class="column-radio"
+            @change="changeBarSizeCase('tableLayoutMode')"
+          >
+            <el-radio label="grid"><span>{{ $t('chart.table_layout_grid') }}</span></el-radio>
+            <el-radio label="tree">
+              <span>{{ $t('chart.table_layout_tree') }}</span>
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
         <el-form-item
           v-if="showProperty('tableItemFontSize')"
           :label="$t('chart.table_item_fontsize')"
@@ -1833,6 +1849,7 @@ export default {
           this.sizeForm.tableColumnFreezeTail = this.sizeForm.tableColumnFreezeTail ?? DEFAULT_SIZE.tableColumnFreezeTail
           this.sizeForm.tableRowFreezeHead = this.sizeForm.tableRowFreezeHead ?? DEFAULT_SIZE.tableRowFreezeHead
           this.sizeForm.summaryLabel = this.sizeForm.summaryLabel ?? DEFAULT_SIZE.summaryLabel
+          this.sizeForm.tableLayoutMode = this.sizeForm.tableLayoutMode ?? DEFAULT_SIZE.tableLayoutMode
 
           this.sizeForm.showIndex = this.sizeForm.showIndex ? this.sizeForm.showIndex : DEFAULT_SIZE.showIndex
           this.sizeForm.showTableHeader = this.sizeForm.showTableHeader !== false