diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-cell-style-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-cell-style-spec.ts.snap
index c9eb35e66e..ad75e1272b 100644
--- a/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-cell-style-spec.ts.snap
+++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/custom-cell-style-spec.ts.snap
@@ -235,6 +235,26 @@ Array [
]
`;
+exports[`SpreadSheet Custom Cell Style Tests PivotSheet Custom Cell Style Tests #RowCell should get custom tree row cell style 1`] = `
+Array [
+ Object {
+ "height": 30,
+ "id": "root[&]浙江",
+ "width": 150,
+ },
+ Object {
+ "height": 30,
+ "id": "root[&]浙江[&]义乌",
+ "width": 150,
+ },
+ Object {
+ "height": 30,
+ "id": "root[&]浙江[&]杭州",
+ "width": 150,
+ },
+]
+`;
+
exports[`SpreadSheet Custom Cell Style Tests PivotSheet Custom Cell Style Tests should render default cell style 1`] = `
Array [
Object {
diff --git a/packages/s2-core/__tests__/spreadsheet/custom-cell-style-spec.ts b/packages/s2-core/__tests__/spreadsheet/custom-cell-style-spec.ts
index fbea95055f..4ce5c67366 100644
--- a/packages/s2-core/__tests__/spreadsheet/custom-cell-style-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/custom-cell-style-spec.ts
@@ -91,7 +91,21 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
},
},
});
- await s2.render();
+ await s2.render(false);
+
+ expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
+ });
+
+ test('should get custom tree row cell style', async () => {
+ s2.setOptions({
+ hierarchyType: 'tree',
+ style: {
+ rowCell: {
+ treeWidth: 150,
+ },
+ },
+ });
+ await s2.render(false);
expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
});
@@ -113,7 +127,7 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
},
},
});
- await s2.render();
+ await s2.render(false);
expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
});
@@ -131,7 +145,7 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
},
},
});
- await s2.render();
+ await s2.render(false);
expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
});
@@ -151,7 +165,7 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
},
},
});
- await s2.render();
+ await s2.render(false);
expect(mapNodeSize(s2.facet.getRowNodes())).toMatchSnapshot();
});
@@ -200,7 +214,7 @@ describe('SpreadSheet Custom Cell Style Tests', () => {
},
},
});
- await s2.render();
+ await s2.render(false);
const rootRowNodes = s2.facet
.getRowNodes()
diff --git a/packages/s2-core/__tests__/spreadsheet/custom-tree-spec.ts b/packages/s2-core/__tests__/spreadsheet/custom-tree-spec.ts
index f2a256984d..9a47217b6d 100644
--- a/packages/s2-core/__tests__/spreadsheet/custom-tree-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/custom-tree-spec.ts
@@ -18,7 +18,7 @@ const s2Options: S2Options = {
hierarchyType: 'tree',
style: {
rowCell: {
- width: 400,
+ treeWidth: 400,
},
},
};
@@ -208,7 +208,8 @@ describe('SpreadSheet Custom Tree Tests', () => {
s2.setOptions({
style: {
rowCell: {
- width: 50,
+ treeWidth: 50,
+ width: 30,
},
},
});
diff --git a/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts b/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts
index 799b2e54cf..fd6132b9b1 100644
--- a/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts
+++ b/packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts
@@ -4,8 +4,8 @@
import { CornerCell, DataCell } from '@/cell';
import {
DEFAULT_OPTIONS,
+ DEFAULT_ROW_CELL_TREE_WIDTH,
DEFAULT_STYLE,
- DEFAULT_TREE_ROW_CELL_WIDTH,
} from '@/common/constant/options';
import type { ViewMeta } from '@/common/interface/basic';
import { Store } from '@/common/store';
@@ -261,11 +261,11 @@ describe('Pivot Mode Facet Test', () => {
expect(rowsHierarchy.getLeaves()).toHaveLength(8);
expect(rowsHierarchy.getNodes()).toHaveLength(10);
- expect(rowsHierarchy.width).toBe(DEFAULT_TREE_ROW_CELL_WIDTH);
+ expect(rowsHierarchy.width).toBe(DEFAULT_ROW_CELL_TREE_WIDTH);
expect(rowCell?.width).toBeUndefined();
rowsHierarchy.getNodes().forEach((node, index) => {
- expect(node.width).toBe(DEFAULT_TREE_ROW_CELL_WIDTH);
+ expect(node.width).toBe(DEFAULT_ROW_CELL_TREE_WIDTH);
expect(node.height).toBe(dataCell!.height!);
expect(node.x).toBe(0);
expect(node.y).toBe(node.height * index);
diff --git a/packages/s2-core/src/common/constant/options.ts b/packages/s2-core/src/common/constant/options.ts
index d68512f8fd..5cb68a8717 100644
--- a/packages/s2-core/src/common/constant/options.ts
+++ b/packages/s2-core/src/common/constant/options.ts
@@ -28,7 +28,7 @@ export enum LayoutWidthType {
export const SPLIT_LINE_WIDTH = 1;
-export const DEFAULT_TREE_ROW_CELL_WIDTH = 120;
+export const DEFAULT_ROW_CELL_TREE_WIDTH = 120;
export const DEFAULT_CELL_TEXT_WORD_WRAP_STYLE: CellTextWordWrapStyle = {
wordWrap: true,
diff --git a/packages/s2-core/src/common/interface/style.ts b/packages/s2-core/src/common/interface/style.ts
index 5bfae42052..262abccd94 100644
--- a/packages/s2-core/src/common/interface/style.ts
+++ b/packages/s2-core/src/common/interface/style.ts
@@ -80,6 +80,11 @@ export interface DataCellStyle extends CellTextWordWrapStyle {
}
export interface RowCellStyle extends BaseCellStyle, CellTextWordWrapStyle {
+ /**
+ * 树状结构的行头宽度
+ */
+ treeWidth?: number;
+
/**
* 是否展示树状分层下的层级占位点
*/
diff --git a/packages/s2-core/src/facet/pivot-facet.ts b/packages/s2-core/src/facet/pivot-facet.ts
index 3a0f4bdace..18a7b502b3 100644
--- a/packages/s2-core/src/facet/pivot-facet.ts
+++ b/packages/s2-core/src/facet/pivot-facet.ts
@@ -17,7 +17,7 @@ import {
} from 'lodash';
import { ColCell, RowCell, SeriesNumberCell } from '../cell';
import {
- DEFAULT_TREE_ROW_CELL_WIDTH,
+ DEFAULT_ROW_CELL_TREE_WIDTH,
LAYOUT_SAMPLE_COUNT,
type IconTheme,
type MultiData,
@@ -804,6 +804,10 @@ export class PivotFacet extends FrozenFacet {
const { rowCell } = this.spreadsheet.options.style!;
// 1. 用户拖拽或手动指定的行头宽度优先级最高
+ if (isNumber(rowCell?.treeWidth)) {
+ return rowCell.treeWidth;
+ }
+
const customRowCellWidth = this.getCellCustomSize(null, rowCell?.width!);
if (isNumber(customRowCellWidth)) {
@@ -829,11 +833,11 @@ export class PivotFacet extends FrozenFacet {
this.rowCellTheme.padding?.right;
const width = Math.max(
- customRowCellWidth ?? DEFAULT_TREE_ROW_CELL_WIDTH,
+ customRowCellWidth ?? DEFAULT_ROW_CELL_TREE_WIDTH,
maxLabelWidth,
);
- return Number.isNaN(width) ? DEFAULT_TREE_ROW_CELL_WIDTH : width;
+ return Number.isNaN(width) ? DEFAULT_ROW_CELL_TREE_WIDTH : width;
}
/**
diff --git a/packages/s2-core/src/interaction/row-column-resize.ts b/packages/s2-core/src/interaction/row-column-resize.ts
index a1e2aa53eb..a7e186de22 100644
--- a/packages/s2-core/src/interaction/row-column-resize.ts
+++ b/packages/s2-core/src/interaction/row-column-resize.ts
@@ -351,7 +351,7 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
eventType: S2Event.LAYOUT_RESIZE_TREE_WIDTH,
style: {
rowCell: {
- width: displayWidth,
+ treeWidth: displayWidth,
},
},
};
diff --git a/s2-site/docs/common/style.zh.md b/s2-site/docs/common/style.zh.md
index 84077d59c4..43fdfc59a6 100644
--- a/s2-site/docs/common/style.zh.md
+++ b/s2-site/docs/common/style.zh.md
@@ -47,7 +47,8 @@ order: 3
| 参数 | 说明 | 类型 | 默认值 | 必选 |
| --- | --- | --- | --- | --- |
-| width | 行单元格宽度,可根据当前行头节点动态设置,树状结构同样适用 | `number \| (rowNode: Node) => number` | 平铺:`96`, 树状:`120` | |
+| width | 行单元格宽度,可根据当前行头节点动态设置,树状结构同样适用 | `number \| (rowNode: Node) => number` | | |
+| treeWidth | 树状模式下行单元格宽度,优先级高于 `width`, 值为空时则默认使用 `width` | `number` | | |
| height | 行单元格高度,可根据当前行头节点动态设置 | `number \| (rowNode: Node) => number` | 30 | |
| collapseFields | 树状模式下行头自定义折叠节点。
支持 id (`'root[&] 行头维度值'`) 和 维度 field (`'city'`) 两种格式,优先级大于 `collapseAll` 和 `expandDepth`, 设置为 `null` 时优先级最低。 [查看 demo](/examples/basic/pivot#tree) | `Record` | | |
| collapseAll | 在树状结构模式下行头是否默认收起全部。 | `boolean` | `false` | |
diff --git a/s2-site/docs/manual/migration-v2.en.md b/s2-site/docs/manual/migration-v2.en.md
index f944346e15..06cccf186a 100644
--- a/s2-site/docs/manual/migration-v2.en.md
+++ b/s2-site/docs/manual/migration-v2.en.md
@@ -364,7 +364,7 @@ const s2Options = {
2. Row Header Width Configuration Changes in Tree Structure
-Deprecated `treeRowsWidth`, replaced with `rowCell.width`.
+`treeRowsWidth`, replaced with `rowCell.treeWidth`.
```diff
const s2Options = {
@@ -372,13 +372,13 @@ const s2Options = {
style: {
- treeRowsWidth: 200
+ rowCell: {
-+ width: 200,
++ treeWidth: 200,
+ }
},
}
```
-3. `customTree` and `customTreeItems` have been deprecated.
+1. `customTree` and `customTreeItems` have been deprecated.
The original way of customizing tree structures has been deprecated. Now custom structures support both `flat` and `tree` modes.
diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
index 52376284a2..8c4a327f44 100644
--- a/s2-site/docs/manual/migration-v2.zh.md
+++ b/s2-site/docs/manual/migration-v2.zh.md
@@ -364,7 +364,7 @@ const s2Options = {
2. 树状结构下行头宽度配置调整
-废弃 `treeRowsWidth`, 使用 `rowCell.width` 代替。
+原 `treeRowsWidth` 重命名为 `rowCell.treeWidth`。
```diff
const s2Options = {
@@ -372,13 +372,13 @@ const s2Options = {
style: {
- treeRowsWidth: 200
+ rowCell: {
-+ width: 200,
++ treeWidth: 200,
+ }
},
}
```
-3. `customTree` 和 `customTreeItems` 已废弃。
+1. `customTree` 和 `customTreeItems` 已废弃。
原本自定义树状结构的方式已废弃,现在自定义结构同时支持 `平铺` 和 `树状` 两种模式。
diff --git a/s2-site/examples/layout/custom/demo/custom-tree-row-width.ts b/s2-site/examples/layout/custom/demo/custom-tree-row-width.ts
index c960320f9d..0c79955c40 100644
--- a/s2-site/examples/layout/custom/demo/custom-tree-row-width.ts
+++ b/s2-site/examples/layout/custom/demo/custom-tree-row-width.ts
@@ -19,9 +19,8 @@ fetch(
rowHeader: 0.5,
},
style: {
- // 和平铺模式配置一致
rowCell: {
- width: 200,
+ treeWidth: 200,
},
},
};
diff --git a/s2-site/examples/layout/frozen/demo/pivot-frozen-row-header.ts b/s2-site/examples/layout/frozen/demo/pivot-frozen-row-header.ts
index 0dd15724f9..f04a3916cd 100644
--- a/s2-site/examples/layout/frozen/demo/pivot-frozen-row-header.ts
+++ b/s2-site/examples/layout/frozen/demo/pivot-frozen-row-header.ts
@@ -20,7 +20,7 @@ fetch(
},
style: {
rowCell: {
- width: 400,
+ treeWidth: 400,
},
colCell: {
width: 200,